/* ═══════════════════════════════════════════════ SSAM — Base styles ─────────────────────────────────────────────── Custom properties + reset + body defaults shared by every page. Page-specific styles live in admin.css / login.css / public.css. ═══════════════════════════════════════════════ */ :root { /* Brand greens — these stay constant across light/dark because * they're the SSAM identity colors. Surfaces around them adapt. */ --g: #1A5C2E; /* primary */ --gd: #0e3a1c; /* dark */ --gm: #2a7a42; /* mid */ --gl: #e8f5e9; /* light tint (changed in dark mode below) */ /* Brand gold */ --go: #B8932A; --gg: #c9a032; /* Surfaces & text — light defaults */ --bg: #f4f6f4; /* page background */ --sf: #ffffff; /* cards, modals, sidebar */ --bg-soft: #f9fafb; /* elevated inner panels within a card (KPI tile, table-header strip, hover-row) */ --tx: #111827; /* primary text */ --tl: #4b5563; /* secondary text */ --tm: #9ca3af; /* muted text */ --bd: #e5e7eb; /* borders */ /* Status colors (paired bg/border for badges + banners) */ --dn: #dc2626; --dnb: #fef2f2; --sc: #16a34a; --scb: #f0fdf4; --wn: #d97706; --wnb: #fffbeb; --bl: #2563eb; --blb: #eff6ff; --pu: #7c3aed; --pub: #f5f3ff; /* Sizing */ --r: 12px; --rs: 8px; --sb: 240px; /* sidebar width on admin */ --nav: 60px; /* mobile top-nav height */ --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.1); } /* ─── Dark mode — three-way toggle ───────────────────────────────── * Users get to pick: Auto (follow OS), Light, or Dark. The choice * lives on ``, set by * assets/js/lib/theme.js from a localStorage preference (default * "auto" = no data-theme attribute = use prefers-color-scheme). * * The CSS rules below realise the three states: * 1. data-theme="light" or :root with no data-theme → light tokens * apply (via the default :root block above) and dark-mode media * query is suppressed by the :not() selector. * 2. (prefers-color-scheme: dark) AND data-theme is unset/"auto" → * dark tokens apply via the media query. * 3. data-theme="dark" → dark tokens apply unconditionally. * * In all three cases everything downstream just reads var(--bg) / * var(--sf) / var(--tx) etc., so individual components never need * to know about the theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #0f1410; /* page bg — dark green-tinted black */ --sf: #1a2018; /* cards, modals */ --bg-soft: #151b16; /* elevated surface — slightly above --bg, below --sf */ --tx: #e5e7eb; /* primary text */ --tl: #9ca3af; /* secondary text */ --tm: #6b7280; /* muted text */ --bd: #2a312c; /* borders */ --gl: #18342a; /* dark replacement for the light-green tint */ --dnb: #2a1414; --scb: #122a18; --wnb: #2a2010; --blb: #14202a; --pub: #1e1430; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 24px rgba(0,0,0,.6); } :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; } :root:not([data-theme="light"]):not([data-theme="dark"]) ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); } } /* Explicit "dark" override — applies regardless of OS preference. */ :root[data-theme="dark"] { --bg: #0f1410; --sf: #1a2018; --bg-soft: #151b16; --tx: #e5e7eb; --tl: #9ca3af; --tm: #6b7280; --bd: #2a312c; --gl: #18342a; --dnb: #2a1414; --scb: #122a18; --wnb: #2a2010; --blb: #14202a; --pub: #1e1430; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 24px rgba(0,0,0,.6); color-scheme: dark; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); } /* Explicit "light" override — applies regardless of OS preference. * The default :root values are already the light palette, so we * really only need to pin color-scheme so built-in form controls * (date picker, select dropdown) don't follow the OS into dark. */ :root[data-theme="light"] { color-scheme: light; } /* Hand-tuned exceptions for elements outside the variable system. * Selector chain mirrors the dark-tokens chain above — any path * that lands in dark gets these patches. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .tag.t-gr { background: #2a2a2a; color: #aaa; } :root:not([data-theme="light"]):not([data-theme="dark"]) .skip-link { box-shadow: 0 2px 8px rgba(0,0,0,.5); } } :root[data-theme="dark"] .tag.t-gr { background: #2a2a2a; color: #aaa; } :root[data-theme="dark"] .skip-link { box-shadow: 0 2px 8px rgba(0,0,0,.5); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 15px; scroll-behavior: smooth; } body { font-family: 'Almarai', sans-serif; background: var(--bg); color: var(--tx); overflow-x: hidden; } button, input, select, textarea { font-family: inherit; } a { color: inherit; text-decoration: none; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; } /* ─── A11y ───────────────────────────────────────────────────────── * Focus-visible rings: when a user navigates by keyboard (Tab key), * give every interactive element a clearly-visible focus indicator. * :focus-visible only fires for keyboard/AT focus, not mouse clicks, * so we don't pollute the mouse-driven experience. * * The default browser ring is fine on most elements but renders * inconsistently across browsers (and is invisible on some bg * colors). Pin a high-contrast 2px outline + 2px offset that works * on both light surfaces and the brand-green sidebar/header. */ :focus-visible { outline: 2px solid var(--g); outline-offset: 2px; border-radius: 3px; } /* Buttons + form elements get a slightly different style — a glow * instead of outline — so they don't fight with the existing border. */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--g); outline-offset: 1px; box-shadow: 0 0 0 4px rgba(26, 92, 46, .15); } /* Honor the user's OS-level motion preference. Transitions and the * `scroll-behavior: smooth` above can trigger vestibular symptoms in * some users; if they've set System Settings → Accessibility → Reduce * Motion (macOS) or the equivalent on iOS/Android/Windows, kill it * all. Animations still fire but instantly so we don't break logic * (e.g. the sidebar drawer's open/close state). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Skip-to-main link: visible only when keyboard-focused. Lets users * tab past the sidebar nav (which has ~15 tab stops) and jump * straight to the page content. Positioned absolutely + visually * hidden until focus, then slides into view. */ .skip-link { position: absolute; top: -100px; inset-inline-start: 0; z-index: 9999; padding: .55rem 1rem; background: var(--g); color: #fff; font-weight: 700; font-size: .85rem; border-radius: 0 0 var(--rs) 0; transition: top .15s ease; } .skip-link:focus-visible { top: 0; }