/* ════════════════════════════════════════════════════════════ A NAM INVOICE — THEME SKIN (light + dark) Every rule below is scoped to :root:not([data-theme='dark']) so: · no attribute, or data-theme="light" -> light skin (the default, exactly what users see today) · data-theme="dark" -> these rules switch off and each page's own dark design shows through The theme is set on before first paint by partials/theme.php, so there is never a flash of the wrong theme. ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ A NAM INVOICE — GLOBAL LIGHT THEME (eye-friendly) Palette: white background · light blue · orange · light green Loaded AFTER each page's own styles, it re-maps the shared design tokens and repaints the few hard-coded dark surfaces. The layout, spacing and components of every page stay exactly as designed. ════════════════════════════════════════════════════════════════ */ :root:not([data-theme='dark']) { /* ── App & Admin token remap ─────────────────────────────── */ --navy: #F3F8FC !important; /* page background */ --navy-deep: #FFFFFF !important; /* deepest surface → white */ --navy-mid: #FFFFFF !important; /* cards / modals */ --navy-light: #EAF3FA !important; /* raised surface */ --accent: #2D9CDB !important; /* light blue */ --accent2: #34B96F !important; /* light green */ --accent-gold: #F5820D !important; /* orange */ --accent-purple:#7C6FD9 !important; --accent-red: #C62828 !important; --glass-bg: #FFFFFF !important; --glass-border:rgba(19,52,90,.12) !important; --glass-bright:rgba(19,52,90,.18) !important; --text-primary:#0B2545 !important; --text-muted: #14406B !important; --text-faint: #2E5A86 !important; --shadow: 0 6px 22px rgba(30,80,140,.10), 0 1px 4px rgba(30,80,140,.06) !important; --shadow-lg: 0 14px 40px rgba(30,80,140,.14) !important; /* ── Landing token remap ─────────────────────────────────── */ --ink: #F6FAFE !important; --ink-2: #FFFFFF !important; --glass: #FFFFFF !important; --glass-b: rgba(19,52,90,.13) !important; --glass-b2: rgba(19,52,90,.09) !important; --cyan: #2D9CDB !important; --cyan-d: #1E7BB0 !important; --teal: #34B96F !important; /* light green */ --teal-d: #269D5B !important; --amber: #F5820D !important; /* orange */ --amber-d: #D96F06 !important; --text: #0B2545 !important; --text-2: #14406B !important; --text-3: #2E5A86 !important; --glow-c: 0 4px 16px rgba(45,156,219,.22) !important; --glow-t: 0 4px 16px rgba(52,185,111,.24) !important; --glow-a: 0 4px 16px rgba(245,130,13,.22) !important; } /* ── Base ─────────────────────────────────────────────────────── */ :root:not([data-theme='dark']) body { background: #F3F8FC !important; color: #0B2545 !important; } /* soft pastel ambience instead of dark radial glows */ :root:not([data-theme='dark']) body::before { background: radial-gradient(ellipse 80% 55% at 15% 8%, rgba(45,156,219,.09) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 88% 90%, rgba(52,185,111,.08) 0%, transparent 55%), radial-gradient(ellipse 40% 35% at 60% 45%, rgba(245,130,13,.05) 0%, transparent 55%) !important; } :root:not([data-theme='dark']) .bg-shape { opacity: .5 !important; } :root:not([data-theme='dark']) ::selection { background: rgba(45,156,219,.22); } :root:not([data-theme='dark']) *::-webkit-scrollbar { width: 8px; height: 8px; } :root:not([data-theme='dark']) *::-webkit-scrollbar-track { background: transparent !important; } :root:not([data-theme='dark']) *::-webkit-scrollbar-thumb { background: rgba(19,52,90,.18) !important; border-radius: 6px; } /* ── Sidebar / overlay / bottom nav ───────────────────────────── */ :root:not([data-theme='dark']) .sidebar { background: #FFFFFF !important; border-right: 1px solid rgba(19,52,90,.10) !important; box-shadow: 8px 0 40px rgba(30,80,140,.12) !important; } :root:not([data-theme='dark']) .sidebar-overlay { background: rgba(22,50,77,.35) !important; backdrop-filter: blur(4px) !important; } :root:not([data-theme='dark']) .sidebar::-webkit-scrollbar-thumb { background: rgba(19,52,90,.15) !important; } :root:not([data-theme='dark']) .sidebar-nav a { color: #14406B !important; } :root:not([data-theme='dark']) .sidebar-nav a:hover, :root:not([data-theme='dark']) .sidebar-nav a.active { background: #EAF4FB !important; color: #0B2545 !important; border-color: rgba(45,156,219,.25) !important; } :root:not([data-theme='dark']) .sidebar-nav a i { font-size: 14px !important; } :root:not([data-theme='dark']) .sidebar-header h2 { color: #14406B !important; } :root:not([data-theme='dark']) .logo-wrap { background: linear-gradient(135deg, rgba(45,156,219,.14), rgba(52,185,111,.10)) !important; border-color: rgba(45,156,219,.30) !important; box-shadow: 0 4px 14px rgba(45,156,219,.15) !important; } :root:not([data-theme='dark']) .bottom-nav { background: #FFFFFF !important; border-top: 1px solid rgba(19,52,90,.10) !important; box-shadow: 0 -6px 24px rgba(30,80,140,.10) !important; } /* `.bn-item` covers the Menu tab, which is a