should move. */ position: sticky; top: 0; align-self: flex-start; height: 100vh; } /* Collapsed state — toggled via a class on (not ) so the blocking script in can apply it before the sidebar even exists in the DOM, avoiding any flash of the expanded width on load. */ html.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); } .app-sidebar-logo { display: flex; align-items: center; justify-content: space-between; height: 26px; margin-bottom: 32px; gap: 8px; } .app-sidebar-logo .logo-full { height: 100%; width: auto; } .app-sidebar-logo .logo-mark { height: 26px; width: 26px; display: none; border-radius: 7px; } .logo-on-dark { display: none; } [data-theme="dark"] .logo-on-light { display: none; } [data-theme="dark"] .logo-on-dark { display: block; } /* Collapsed: logo mark + toggle button stack vertically and centered, so the toggle button is never hidden — it must stay reachable to let the person expand the sidebar again. */ html.sidebar-collapsed .app-sidebar-logo { flex-direction: column; height: auto; gap: 10px; } html.sidebar-collapsed .app-sidebar-logo .logo-full { display: none; } html.sidebar-collapsed .app-sidebar-logo .logo-mark { display: block; } .sidebar-toggle-btn { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--ink-100); background: var(--white); color: var(--ink-500); font-size: 13px; transition: background .15s var(--ease-smooth), color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), transform .2s var(--ease-glass); } .sidebar-toggle-btn:hover { background: var(--gold-50); color: var(--ink-900); border-color: var(--gold-400); } html.sidebar-collapsed .sidebar-toggle-btn i { display: inline-block; transform: rotate(180deg); } .app-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; } .app-nav .nav-link { color: var(--ink-500); font-size: 14px; font-weight: 500; display: flex; align-items: center; white-space: nowrap; transition: background var(--ease-smooth) .15s, color var(--ease-smooth) .15s; } .app-nav .nav-link i { color: var(--ink-300); transition: color var(--ease-smooth) .15s; flex-shrink: 0; } .app-nav .nav-link:hover { background: var(--gold-50); color: var(--ink-900); } .app-nav .nav-link:hover i { color: var(--gold-500); } .app-nav .nav-link.active { background: linear-gradient(160deg, var(--gold-200), var(--gold-400) 65%, var(--gold-500)); color: var(--gold-contrast); font-weight: 600; box-shadow: var(--shadow-gold); } .app-nav .nav-link.active i { color: var(--gold-contrast); } .nav-label { transition: opacity .12s var(--ease-smooth); } html.sidebar-collapsed .app-nav .nav-link, html.sidebar-collapsed .app-sidebar form .btn { justify-content: center; padding-left: 0; padding-right: 0; } html.sidebar-collapsed .nav-label { display: none; } html.sidebar-collapsed .app-nav .nav-link i, html.sidebar-collapsed .app-sidebar form .btn i { margin-right: 0 !important; font-size: 15px; } /* Logout — pinned to the bottom of the sidebar regardless of how tall the nav list is, since .app-sidebar is already a flex column. */ .sidebar-footer { margin-top: auto !important; } /* Logout — same pill curvature as the hero's Generate Codes / Verifications buttons (var(--radius-md)), instead of Bootstrap's default ~6px. */ .app-sidebar form .btn { color: var(--ink-500); font-size: 13.5px; display: flex; align-items: center; white-space: nowrap; border-radius: var(--radius-md) !important; } .app-sidebar form .btn:hover { background: var(--gold-50); color: var(--ink-900); } /* ---------- Top-right utility bar (Appearance + My Profile) ------------ Lives at the top of

, so it renders on every client page — not just the dashboard — keeping both reachable after their removal from the sidebar menu. */ .app-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 18px; } /* ---------- Icon buttons (Appearance / Profile / Generate Codes) ------- Small circular buttons with a minimal hover tooltip via data-tooltip, used both in the top-right toolbar and the dashboard's own header. */ .icon-btn { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--ink-100); color: var(--ink-700); font-size: 16px; text-decoration: none; transition: border-color .15s var(--ease-smooth), color .15s var(--ease-smooth), transform .15s var(--ease-glass), box-shadow .15s var(--ease-glass); } .icon-btn:hover, .icon-btn:focus-visible { border-color: var(--gold-400); color: var(--ink-900); transform: translateY(-1px); } .icon-btn.is-active { background: var(--gold-50); border-color: var(--gold-400); color: var(--ink-900); } .icon-btn-primary { background: linear-gradient(160deg, var(--gold-200), var(--gold-400) 60%, var(--gold-500)); color: var(--gold-contrast); border: none; /* Tighter, closer-hugging shadow than --shadow-gold: a wide soft glow makes this circle visually read as bigger than the other two icon-btns even though all three are exactly 40x40px. */ box-shadow: 0 2px 6px -1px rgba(173,136,88,0.45), inset 0 1px 0 rgba(255,255,255,0.5); } .icon-btn-primary:hover { color: var(--gold-contrast); box-shadow: 0 6px 14px -4px rgba(173,136,88,0.5), inset 0 1px 0 rgba(255,255,255,0.6); } /* Minimal hover tooltip — pure CSS, no JS/popup library. */ .icon-btn[data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(-4px); background: var(--ink-900); color: var(--white); font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; padding: 6px 10px; border-radius: 6px; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity .15s var(--ease-smooth), transform .15s var(--ease-glass); z-index: 30; } .icon-btn[data-tooltip]:hover::after, .icon-btn[data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* Theme toggle sun/moon crossfade — same button now used in the toolbar rather than the sidebar, styling is unchanged. */ #themeToggleBtn i { position: absolute; transition: opacity .3s var(--ease-smooth), transform .3s var(--ease-glass); } #themeToggleBtn .i-sun { opacity: 1; transform: rotate(0deg) scale(1); color: var(--gold-500); } #themeToggleBtn .i-moon { opacity: 0; transform: rotate(-60deg) scale(.5); color: var(--gold-500); } [data-theme="dark"] #themeToggleBtn .i-sun { opacity: 0; transform: rotate(60deg) scale(.5); } [data-theme="dark"] #themeToggleBtn .i-moon { opacity: 1; transform: rotate(0deg) scale(1); } /* ---------- Content shell ---------------------------------------------- */ main { background: var(--paper); } /* ---------- Cards (bg-white.rounded-4, used across every client page) - */ .bg-white.rounded-4 { background: var(--white) !important; border: 1px solid var(--ink-100); border-radius: var(--radius-lg) !important; } /* KPI icon accent on the dashboard stat cards */ .bg-white.rounded-4 i.text-secondary { color: var(--gold-500) !important; } /* ---------- Buttons ------------------------------------------------- */ .af-submit { background: linear-gradient(160deg, var(--gold-200), var(--gold-400) 60%, var(--gold-500)); color: var(--gold-contrast); border-radius: var(--radius-md); box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,0.5); transition: transform .15s var(--ease-glass), box-shadow .2s var(--ease-glass); border: none; } .af-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -6px rgba(173,136,88,0.5), inset 0 1px 0 rgba(255,255,255,0.6); color: var(--gold-contrast); } .btn-light { background: var(--white); border: 1px solid var(--ink-100); color: var(--ink-700); font-weight: 500; transition: border-color .15s var(--ease-smooth), transform .15s var(--ease-glass); } .btn-light:hover { background: var(--gold-50); border-color: var(--gold-400); color: var(--ink-900); transform: translateY(-1px); } .btn-dark { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); } .btn-dark:hover { background: var(--ink-700); border-color: var(--ink-700); } .btn-outline-success { color: var(--success); border-color: var(--success); } .btn-outline-success:hover { background: var(--success); border-color: var(--success); color: #fff; } .btn-outline-secondary { color: var(--ink-500); border-color: var(--ink-300); } .btn-outline-secondary:hover { background: var(--ink-700); border-color: var(--ink-700); color: #fff; } .btn-outline-danger { color: var(--danger); border-color: var(--danger); } .btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-link { color: var(--ink-700); } .btn-link:hover { color: var(--gold-600); } .btn-link.text-danger { color: var(--danger) !important; } .btn-link.text-danger:hover { color: #8a1a14 !important; } /* ---------- Form fields (af-*, and native Bootstrap form-select/-control used in a couple of places e.g. Users role dropdown) --------------- */ .af-label { color: var(--ink-700); } .af-input { border-color: var(--ink-100); background: var(--paper); border-radius: var(--radius-sm); } .af-input:focus { border-color: var(--gold-500); background: var(--white); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-500) 16%, transparent); } .form-select, .form-control { border-color: var(--ink-100); border-radius: var(--radius-sm); background-color: var(--white); color: var(--ink-900); } .form-select:focus, .form-control:focus { border-color: var(--gold-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-500) 16%, transparent); } .form-control::placeholder { color: var(--ink-300); } .form-check-input { border-color: var(--ink-300); } .form-check-input:checked { background-color: var(--gold-500); border-color: var(--gold-500); } .form-check-input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-500) 16%, transparent); } /* ---------- Tables ---------------------------------------------------- */ .table { color: var(--ink-900); } .table thead tr { background: var(--paper) !important; } .table thead th { color: var(--ink-500); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--ink-100); } .table tbody tr { border-color: var(--ink-100); } .table tbody tr:hover { background: var(--gold-50); } .table td, .table th { vertical-align: middle; } .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-bottom-color: var(--ink-100); } /* ---------- Badges ------------------------------------------------------ Reuses the semantic status colors already defined in app.css (success / warning / danger) so alert-level meaning stays identical — only the flat Bootstrap fill is swapped for the tinted background/foreground pairing already established for the public verification result page. */ .badge.text-bg-success { background: var(--success-bg) !important; color: var(--success) !important; } .badge.text-bg-warning { background: var(--warning-bg) !important; color: var(--warning) !important; } .badge.text-bg-danger { background: var(--danger-bg) !important; color: var(--danger) !important; } .badge.text-bg-secondary { background: var(--ink-100) !important; color: var(--ink-700) !important; } .badge.text-bg-dark { background: var(--ink-900) !important; color: var(--white) !important; } /* ---------- Alerts ------------------------------------------------------ */ .alert-success { background: var(--success-bg); color: var(--success); border: 1px solid transparent; } .alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid transparent; } .alert-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid transparent; } /* ---------- Modals ------------------------------------------------------ */ .modal-content.rounded-4 { border: 1px solid var(--ink-100); box-shadow: var(--shadow-lg); border-radius: var(--radius-lg) !important; } .modal-content { background: var(--white); color: var(--ink-900); } .modal-title.font-display { font-weight: 600; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); } /* ---------- Pagination --------------------------------------------------- */ .pagination .page-link { color: var(--ink-700); border-color: var(--ink-100); background-color: var(--white); } .pagination .page-item.active .page-link { background: var(--gold-500); border-color: var(--gold-500); color: var(--gold-contrast); } .pagination .page-link:hover { background: var(--gold-50); border-color: var(--gold-400); } /* ---------- Bootstrap utility classes used directly in client views (bg-white without rounded-4, text-secondary, text-dark, border, hr, bg-dark) — overridden so the whole dashboard, not just the cards, follows the light/dark theme tokens. --------------------------------- */ .bg-white { background-color: var(--white) !important; } .text-secondary { color: var(--ink-500) !important; } .text-dark { color: var(--ink-900) !important; } .border { border-color: var(--ink-100) !important; } .bg-dark { background-color: var(--ink-900) !important; color: var(--paper) !important; } hr { border-color: var(--ink-100); opacity: 1; } /* ---------- Misc ---------------------------------------------------------- */ code { color: var(--gold-600); } /* ========================================================================= Dashboard-only components Namespaced with .dash- so they can never collide with classes used on Products, Categories, Users, Settings, etc. Corners reuse the exact same --radius-lg every other card on the site already uses, and colors / spacing reuse the same tokens, so the dashboard stays visually consistent with the rest of the client portal. ========================================================================= */ .dash-hero { background: linear-gradient(155deg, var(--ink-900) 0%, #2b271d 55%, var(--ink-700) 100%); color: #FFFFFF; border-radius: var(--radius-lg); padding: 28px 30px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); } [data-theme="dark"] .dash-hero { background: linear-gradient(155deg, #000000 0%, #1c1710 60%, #2b2415 100%); } .dash-hero::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,118,0.35), transparent 70%); pointer-events: none; } .dash-hero-label { font-size: 12.5px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .dash-hero-value { font-size: 40px; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; margin-top: 4px; } .dash-hero-sub { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 4px; } .dash-hero-progress { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.14); overflow: hidden; margin-top: 16px; position: relative; z-index: 1; } .dash-hero-progress > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-400), var(--gold-500)); } .dash-hero-actions { display: flex; gap: 10px; margin-top: 22px; position: relative; z-index: 1; flex-wrap: wrap; } .dash-hero-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 600; text-decoration: none; background: rgba(255,255,255,0.12); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.18); transition: background .15s var(--ease-smooth), transform .15s var(--ease-glass); } .dash-hero-actions a.primary { background: linear-gradient(160deg, var(--gold-200), var(--gold-400) 60%, var(--gold-500)); color: var(--gold-contrast); border-color: transparent; } .dash-hero-actions a:hover { transform: translateY(-1px); } .dash-kpi { background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 18px; transition: transform .18s var(--ease-glass), box-shadow .18s var(--ease-glass); } .dash-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .dash-kpi-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--gold-50); color: var(--gold-600); margin-bottom: 14px; font-size: 16px; } .dash-kpi.is-alert .dash-kpi-icon { background: var(--danger-bg); color: var(--danger); } .dash-kpi-value { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; } .dash-kpi-label { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; } .dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .dash-panel-head h2 { font-size: 15px; font-weight: 600; margin: 0; font-family: var(--font-display); color: var(--ink-900); } .dash-panel-head a { font-size: 12.5px; color: var(--ink-500); text-decoration: none; font-weight: 500; } .dash-panel-head a:hover { color: var(--gold-600); } /* Verification trend mini bar-chart */ .dash-trend { display: flex; align-items: flex-end; gap: 6px; height: 120px; } .dash-trend-bar { flex: 1; position: relative; min-height: 3px; background: var(--ink-100); border-radius: 5px 5px 2px 2px; height: 100%; } .dash-trend-bar > span { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); transition: background .15s var(--ease-smooth); } .dash-trend-bar:hover > span { background: linear-gradient(180deg, var(--gold-200), var(--gold-400)); } .dash-trend-labels { display: flex; gap: 6px; margin-top: 8px; } .dash-trend-labels span { flex: 1; text-align: center; font-size: 10.5px; color: var(--ink-300); } /* Top products rank list */ .dash-rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ink-100); } .dash-rank-row:last-child { border-bottom: none; } .dash-rank-num { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); color: var(--ink-500); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-rank-row:first-child .dash-rank-num { background: linear-gradient(160deg, var(--gold-200), var(--gold-500)); color: var(--gold-contrast); } .dash-rank-info { flex: 1; min-width: 0; } .dash-rank-name { font-size: 13.5px; font-weight: 500; color: var(--ink-900); } .dash-rank-bar { height: 4px; border-radius: 99px; background: var(--ink-100); margin-top: 6px; overflow: hidden; } .dash-rank-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--gold-500); } .dash-rank-value { font-size: 13px; font-weight: 600; color: var(--ink-700); flex-shrink: 0; } /* Recent activity product avatar */ .dash-avatar { width: 30px; height: 30px; border-radius: 9px; background: var(--gold-50); color: var(--gold-600); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Top locations list */ .dash-city-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--ink-100); font-size: 13.5px; } .dash-city-row:last-child { border-bottom: none; } .dash-city-row .dash-city-name { display: flex; align-items: center; gap: 8px; color: var(--ink-900); } .dash-city-row .dash-city-name i { color: var(--gold-500); font-size: 13px; } .dash-city-row .dash-city-count { color: var(--ink-500); font-weight: 600; font-size: 12.5px; }