:root {
  --vimmi-purple: #7C3AED;
  --vimmi-purple-light: #EDE9FE;
  --vimmi-dark: #1F2937;
}

body { background: #F9FAFB; font-family: 'Segoe UI', sans-serif; }
.sidebar { width: 200px; height: 100vh; position: fixed; top: 0; left: 0; background: var(--vimmi-dark); z-index: 50; }
.sidebar .sb-top { padding: 0.6rem 0.8rem; border-bottom: 1px solid #374151; }
.sidebar .sb-top .sb-logo { display: flex; align-items: center; gap: 6px; color: white; font-size: 1rem; font-weight: 700; text-decoration: none; }
.sidebar .sb-user-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.sidebar .sb-user-name { font-size: 0.7rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .sb-logout { background: none; border: none; color: #9ca3af; font-size: 0.75rem; cursor: pointer; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; }
.sidebar .sb-logout:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.sidebar .sb-nav { position: absolute; top: 72px; bottom: 0; left: 0; right: 0; overflow-y: scroll !important; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #475569 transparent; padding: 0.5rem 0 2rem; margin-top: 0 !important; }
/* Lighter placeholder text */
::placeholder { color: #c4c9d4 !important; font-style: italic; }
/* Center variant and pricing tables */
.variant-row td { vertical-align: middle; text-align: center; }
.variant-row td:nth-child(3), .variant-row td:nth-child(4) { text-align: left; }
.sidebar .sb-nav::-webkit-scrollbar { width: 3px; }
.sidebar .sb-nav::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
.sidebar a { color: #E2E8F0; text-decoration: none; display: block; padding: 0.45rem 0.8rem; border-radius: 5px; margin: 1px 6px; font-size: 0.85rem; transition: background 0.15s; }
.sidebar a:hover, .sidebar a.active { background: var(--vimmi-purple); color: white; }
.sidebar a i { margin-right: 7px; width: 16px; text-align: center; font-size: 0.8rem; }
.sidebar .section-label { color: #E2E8F0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.7rem 0.8rem 0.25rem; margin-top: 4px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.sidebar .section-label:hover { color: #fff; }
.sidebar .section-label .chv { font-size: 0.5rem; transition: transform 0.2s; }
.sidebar .section-label .chv.shut { transform: rotate(-90deg); }
.sidebar .section-items { overflow: hidden; transition: max-height 0.25s ease; }
.sidebar .section-items.shut { max-height: 0 !important; }
.sidebar a.soon { color: #64748B; pointer-events: none; font-style: italic; }
.sidebar a.soon::after { content: 'soon'; font-size: 0.55rem; background: #374151; color: #64748B; padding: 1px 5px; border-radius: 3px; margin-left: 6px; font-style: normal; }
.sidebar .sep { border-top: 1px solid #374151; margin: 6px 10px; }
.main-content, .d-flex > main, .d-flex > .flex-fill { flex: 1; padding: 2rem; margin-left: 200px; height: 100vh; overflow-y: auto; }
.page-header { margin-bottom: 0.5rem; }
.page-header h1 { font-size: 1.6rem; font-weight: 700; color: var(--vimmi-dark); margin: 0; }
.sticky-top-bar { position: sticky; top: 0; z-index: 10; background: #F9FAFB; padding-bottom: 4px; }
.stat-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 4px solid var(--vimmi-purple); }
.stat-card .value { font-size: 2rem; font-weight: 700; color: var(--vimmi-dark); }
.stat-card .label { color: #6B7280; font-size: 0.85rem; margin-top: 4px; }
.card { border: none; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-header { background: white; border-bottom: 1px solid #F3F4F6; font-weight: 600; border-radius: 12px 12px 0 0 !important; }
.table th { color: #6B7280; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #F3F4F6; }
.badge-status { padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.badge-pending { background: #FEF3C7; color: #92400E; }
.badge-approved { background: #D1FAE5; color: #065F46; }
.badge-rejected { background: #FEE2E2; color: #991B1B; }
.badge-paid { background: #DBEAFE; color: #1E40AF; }
.badge-file_sent { background: #E0E7FF; color: #3730A3; }
.badge-printing { background: #F3F4F6; color: #374151; }
.badge-draft { background: #F3F4F6; color: #6B7280; }
.badge-published { background: #D1FAE5; color: #065F46; }
.badge-out_of_stock { background: #FEF3C7; color: #92400E; }
.badge-cancelled { background: #FEE2E2; color: #991B1B; }
.badge-unpublished { background: #DBEAFE; color: #64748B; }
.btn-primary { background: var(--vimmi-purple); border-color: var(--vimmi-purple); }
.btn-primary:hover { background: #6D28D9; border-color: #6D28D9; }
.form-control:focus, .form-select:focus { border-color: var(--vimmi-purple); box-shadow: 0 0 0 0.2rem rgba(124,58,237,.2); }
#toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; }
.toast { min-width: 280px; }
.api-key-form { max-width: 400px; background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,.1); margin: 10vh auto; }

/* ── Image Lightbox ─────────────────────────────────────────── */
#img-lightbox {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
  opacity: 0; transition: opacity .2s ease;
}
#img-lightbox.show { opacity: 1; }
#img-lightbox img {
  max-width: 90vw; max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  cursor: default;
}
#img-lightbox .lb-close {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255,255,255,.15); border: none;
  color: #fff; font-size: 1.6rem; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#img-lightbox .lb-close:hover { background: rgba(255,255,255,.3); }
/* Make all admin images look clickable */
.main-content img:not(.no-lightbox),
.modal-body img:not(.no-lightbox) {
  cursor: zoom-in;
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination .page-link {
  color: var(--vimmi-purple);
  border-color: #e5e7eb;
  font-size: 0.82rem;
  min-width: 32px;
  text-align: center;
}
.pagination .page-item.active .page-link {
  background: var(--vimmi-purple);
  border-color: var(--vimmi-purple);
  color: #fff;
}
.pagination .page-link:hover {
  background: var(--vimmi-purple-light);
  border-color: var(--vimmi-purple);
  color: var(--vimmi-purple);
}
.pagination .page-item.disabled .page-link {
  color: #9ca3af;
}
/* Sortable column headers */
th[data-sort] {
  cursor: pointer;
  user-select: none;
}
th[data-sort]:hover {
  color: var(--vimmi-purple);
}