/* ══════════════════════════════════════════════════════════════════ Admin Console — Modern Shell (admin.html only) Sidebar + topbar SaaS-style layout, layered on top of moh.css. Reuses --moh-* brand tokens; adds sidebar/topbar tokens + dark mode. Dark mode toggled via `admin-dark` class on (see admin.html inline script + theme-toggle handler) — independent of the legacy sticky-mobile `theme-dark` system, which this page does not use. ══════════════════════════════════════════════════════════════════ */ :root { --admin-sidebar-w: 240px; --admin-topbar-h: 64px; --admin-font: 'Inter', 'Source Sans 3', Roboto, sans-serif; --admin-sidebar-bg: #1A1A2E; --admin-sidebar-bg-alt: #14142a; --admin-sidebar-text: rgba(255,255,255,.62); --admin-sidebar-text-hi: #fff; --admin-sidebar-active-bg: rgba(74,137,220,.18); } /* ── Dark-mode palette overrides (scoped to admin.html shell only) ── */ html.admin-dark { --moh-bg: #0F1117; --moh-card-bg: #171a24; --moh-border: #2a2e3d; --moh-text: #e7e9ee; --moh-muted: #9aa0b4; --moh-shadow: 0 4px 20px rgba(0,0,0,.35); --moh-shadow-lg: 0 8px 30px rgba(0,0,0,.45); } /* ══ Shell layout ═══════════════════════════════════════════════════ */ .admin-shell { display: flex; min-height: 100vh; background: var(--moh-bg); font-family: var(--admin-font); } .admin-shell, .admin-shell * { box-sizing: border-box; } /* ── Sidebar ─────────────────────────────────────────────────────── */ .admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--admin-sidebar-w); background: linear-gradient(180deg, var(--admin-sidebar-bg) 0%, var(--admin-sidebar-bg-alt) 100%); display: flex; flex-direction: column; z-index: 1030; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); } .admin-sidebar.is-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); } .admin-sidebar-brand { padding: 20px 20px 16px; flex-shrink: 0; } .admin-sidebar-logo { height: 32px; width: auto; filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); } .admin-sidebar-overlay { position: fixed; inset: 0; background: rgba(6,7,14,.55); backdrop-filter: blur(1px); z-index: 1020; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .admin-sidebar-overlay.is-visible { opacity: 1; pointer-events: auto; } /* ── Legacy .menu bottom-sheet modals (e.g. Edit User) must render above the always-on desktop sidebar (z-index 1030) — moh.css only gives them z-index 101/100. This file loads on admin.html only, so no extra scoping is needed. Matched to Bootstrap's own .modal (1055) / .modal-backdrop (1050), used elsewhere on this page, for consistency. ── */ #menu-hider, .menu-hider { z-index: 1050 !important; } .menu { z-index: 1055 !important; } /* Sidebar nav — restyle the existing .admin-tab-btn / .admin-tab-nav (classes/data-tab attrs are unchanged so admin.js keeps working) */ .admin-sidebar .admin-tab-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding: 4px 12px; border-bottom: none; scrollbar-width: thin; } .admin-sidebar .admin-tab-btn { display: flex; align-items: center; text-align: left; padding: 11px 14px; border-radius: 10px; font-size: 0.86rem; font-weight: 600; color: var(--admin-sidebar-text); border-bottom: none; margin-bottom: 0; letter-spacing: 0.1px; transition: background .15s ease, color .15s ease; } .admin-sidebar .admin-tab-btn i { width: 18px; text-align: center; margin-right: 10px; font-size: 0.92rem; opacity: .9; } .admin-sidebar .admin-tab-btn:hover { background: rgba(255,255,255,.06); color: var(--admin-sidebar-text-hi); } .admin-sidebar .admin-tab-btn.active { background: var(--admin-sidebar-active-bg); color: #fff; border-bottom-color: transparent; box-shadow: inset 3px 0 0 var(--moh-primary); } .admin-sidebar-footer { flex-shrink: 0; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); } .admin-sidebar-footer-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; color: var(--admin-sidebar-text); text-decoration: none; transition: background .15s ease, color .15s ease; } .admin-sidebar-footer-link:hover { background: rgba(255,255,255,.06); color: #fff; } .admin-sidebar-footer-link i { width: 16px; text-align: center; } /* ── Main column ─────────────────────────────────────────────────── */ .admin-main { flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; } /* ── Topbar ──────────────────────────────────────────────────────── */ .admin-topbar { position: sticky; top: 0; z-index: 900; height: var(--admin-topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--moh-card-bg); border-bottom: 1px solid var(--moh-border); } .admin-topbar-title { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.2px; color: var(--moh-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .admin-burger-btn, .admin-icon-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: none; background: transparent; color: var(--moh-muted); cursor: pointer; transition: background .15s ease, color .15s ease; flex-shrink: 0; } .admin-burger-btn:hover, .admin-icon-btn:hover { background: var(--moh-bg); color: var(--moh-text); } .admin-burger-btn { display: none; } .admin-icon-btn .icon-sun { display: none; } html.admin-dark .admin-icon-btn .icon-sun { display: block; } html.admin-dark .admin-icon-btn .icon-moon { display: none; } #profile-avatar-btn.admin-avatar-btn { width: 36px; height: 36px; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; background: var(--moh-primary) !important; border: none !important; color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.5px; transition: transform 0.12s, box-shadow 0.15s; } #profile-avatar-btn.admin-avatar-btn:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(74,137,220,.4); } /* ── Content area ────────────────────────────────────────────────── */ .admin-content { padding-bottom: 40px; } .admin-content .admin-tab-section { max-width: 1360px; margin: 0 auto; padding-top: 20px; } /* ── Desktop: sidebar fixed + main offset ───────────────────────── */ @media (min-width: 992px) { .admin-sidebar { transform: translateX(0); } .admin-sidebar-overlay { display: none; } .admin-main { margin-left: var(--admin-sidebar-w); } .admin-burger-btn { display: none !important; } } /* ── Mobile / tablet: off-canvas sidebar, burger shown ──────────── */ @media (max-width: 991.98px) { .admin-burger-btn { display: flex; } .admin-topbar { padding: 0 14px; } } /* ══ Component refinements (light + dark aware via --moh-* vars) ═══ */ .tbl-card { border: 1px solid var(--moh-border); } .tbl-card thead th { background: var(--moh-bg); color: var(--moh-muted); border-bottom: 1px solid var(--moh-border); } .tbl-card table, .tbl-card td, .tbl-card th { color: var(--moh-text); border-color: var(--moh-border) !important; } .tbl-card tbody tr:hover { background: rgba(74,137,220,.06); } .stat-card { border: 1px solid var(--moh-border); text-align: left; padding: 16px 18px; transition: box-shadow .15s ease, transform .15s ease; } .stat-card:hover { box-shadow: var(--moh-shadow-lg); transform: translateY(-1px); } .stat-card .stat-num { font-size: 1.5rem; } html.admin-dark .form-select, html.admin-dark .form-control { background-color: var(--moh-card-bg); color: var(--moh-text); border-color: var(--moh-border); } html.admin-dark .form-select:focus, html.admin-dark .form-control:focus { background-color: var(--moh-card-bg); color: var(--moh-text); border-color: var(--moh-primary); box-shadow: 0 0 0 3px rgba(74,137,220,.14); } html.admin-dark .form-select option { color: #000; } html.admin-dark .form-label, html.admin-dark label { color: var(--moh-text); } .admin-content .moh-search-box { background: var(--moh-card-bg); border-color: var(--moh-border); } .admin-content .moh-search-box input { color: var(--moh-text); background: transparent; } html.admin-dark .modal-content { background: var(--moh-card-bg); color: var(--moh-text); } html.admin-dark .modal-header, html.admin-dark .modal-footer { border-color: var(--moh-border); } html.admin-dark .btn-close { filter: invert(1) grayscale(1); } html.admin-dark #msg-notes-preview { background: var(--moh-bg) !important; color: var(--moh-text); } html.admin-dark .menu-box-bottom { background: var(--moh-card-bg); color: var(--moh-text); } html.admin-dark .menu-box-bottom h6 { color: var(--moh-text); } html.admin-dark .filter-sheet-handle { background: var(--moh-border); } .admin-content h6, .admin-content .fw-bold { color: var(--moh-text); } .admin-content .text-muted { color: var(--moh-muted) !important; } /* Recommendations gradient card needs an explicit dark variant — the inline light gradient (#f8f0ff→#fff0f8) would be illegible on dark bg */ html.admin-dark #analytics-recommendations, html.admin-dark [style*="linear-gradient(135deg,#f8f0ff"] { background: linear-gradient(135deg, rgba(74,137,220,.12), rgba(142,68,173,.12)) !important; } html.admin-dark .admin-content [style*="background:#f0f2f5"] { background: var(--moh-border) !important; } html.admin-dark .admin-content [style*="background:#f8f9fa"] { background: var(--moh-bg) !important; } /* ── Scrollbars (sidebar + tables) ──────────────────────────────── */ .admin-sidebar .admin-tab-nav::-webkit-scrollbar { width: 5px; } .admin-sidebar .admin-tab-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }