/* ============================================================ Skool.Cool ADMIN — "Trust & Modern" token layer (ADDITIVE) Loaded LAST (after Landrick style.min.css) so it overrides the template. Safe to remove to fully revert to the old Landrick look. Scope of THIS file: design tokens + Bootstrap bridge + the minimal global Landrick overrides needed to flip blue->teal and Nunito->Plex. Reusable component classes (.sk-card, .sk-btn, .tbl, chips, ...) live in a separate skool-components.css added in a later phase. Bilingual AR/EN + RTL-aware since ADR-001 (Arabization): direction is driven by , vendor CSS is direction-paired in index.html, and new rules use LOGICAL properties only (DESIGN-SYSTEM.md §8). Values reconciled with the parents app (Skool.Cool.UI/src/assets/css/ skool-theme.css): WCAG-corrected --sk-muted/--sk-green; admin uses denser --sk-r:14px and adds the spacing + type scales the parents theme never tokenized. ============================================================ */ :root{ /* -- brand navy scale (NEW source of truth — Fable "quiet premium") -- */ --sk-brand-900:#0B1B3A; --sk-brand-700:#1E3A6B; --sk-brand-500:#2D548F; --sk-brand-300:#3E73C4; --sk-brand-100:#D8E3F4; --sk-brand-50:#ECF1F9; /* -- legacy teal names kept as compatibility aliases (now navy, IG2) -- */ --sk-teal-900:var(--sk-brand-900); --sk-teal-700:var(--sk-brand-700); --sk-teal-500:var(--sk-brand-500); --sk-teal-300:var(--sk-brand-300); --sk-teal-100:var(--sk-brand-100); --sk-teal-50:var(--sk-brand-50); /* -- brand accents (Fable's balanced 6: blue/green/amber/rose/violet/slate) -- */ --sk-brand-blue:#3B82C4; --sk-brand-blue-soft:#E6F0F9; --sk-brand-green:#147A52; --sk-brand-green-soft:#E2F6EE; --sk-brand-amber:#E9A23B; --sk-brand-amber-soft:#FCF1DD; --sk-brand-rose:#E5564B; --sk-brand-rose-soft:#FCE8E6; --sk-brand-violet:#7C5CD0; --sk-brand-violet-soft:#ECE7FB; --sk-brand-slate:#5E6B7A; --sk-brand-slate-soft:#EEF1F4; /* -- accent (orange kept standalone) -- */ --sk-orange:#F2A03D; --sk-orange-soft:#FFE9CC; /* -- neutrals (muted darkened to ~4.6:1 on white, WCAG AA) -- */ --sk-ink:#16201F; --sk-body:#48595A; --sk-muted:#5E6F6F; --sk-line:#E7EDEC; --sk-bg:#F6F9F9; --sk-white:#fff; /* Text/icon on a primary (navy) fill — constant across themes (navy stays navy), unlike --sk-white which flips. WhatsApp is a fixed brand hue, also theme-constant. */ --sk-on-primary:#fff; --sk-whatsapp:#25d366; --sk-whatsapp-soft:rgba(37, 211, 102, 0.12); /* -- status + soft pairs → aliases onto brand accents (names kept, IG2) -- */ --sk-green:var(--sk-brand-green); --sk-green-soft:var(--sk-brand-green-soft); --sk-red:var(--sk-brand-rose); --sk-red-soft:var(--sk-brand-rose-soft); --sk-amber:var(--sk-brand-amber); --sk-amber-soft:var(--sk-brand-amber-soft); --sk-blue:var(--sk-brand-blue); --sk-blue-soft:var(--sk-brand-blue-soft); --sk-violet:var(--sk-brand-violet); --sk-violet-soft:var(--sk-brand-violet-soft); --sk-rose:var(--sk-brand-rose); --sk-rose-soft:var(--sk-brand-rose-soft); --sk-slate:var(--sk-brand-slate); --sk-slate-soft:var(--sk-brand-slate-soft); /* -- semantic aliases (components read these, never raw hex) -- */ --sk-primary:var(--sk-teal-700); --sk-primary-bright:var(--sk-teal-300); /* Inline-link colour. Its own token because --sk-primary is deliberately NOT remapped for dark, so every link-coloured surface had to hand-write the same dark override (.reg-link, .pp-clink, .gr-reglink each did). Read this instead and dark mode is handled for you. */ --sk-link:var(--sk-primary); --sk-surface:var(--sk-white); --sk-border:var(--sk-line); --sk-text:var(--sk-body); --sk-text-strong:var(--sk-ink); --sk-text-muted:var(--sk-muted); /* "Ink" text for status chips + banners on their SOFT fills. Light values are the AA-contrast darker hues (raw --sk-red/--sk-amber/--sk-green/--sk-blue are too light on the soft backgrounds); the dark-mode block lightens them so they stay legible on the dark soft fills. */ --sk-ink-danger:#b33127; --sk-ink-warn:#9a6a10; --sk-ink-ok:#0f7a50; --sk-ink-info:#2a5d8f; /* -- sidebar palette (theme-following: light surface in light mode, historical navy in dark) -- Every sidebar color flows through a --sk-side-* token so sidebar.component.css holds ZERO raw colors. Light values reference the semantic aliases so the sidebar reads as a native surface; the dark block below freezes the historical navy pixel-for-pixel (except 5 AA fixes noted there). */ --sk-side:var(--sk-surface); --sk-side-hover:var(--sk-brand-50); --sk-side-text:var(--sk-text); --sk-side-label:var(--sk-text-muted); --sk-side-border:var(--sk-border); --sk-side-edge:var(--sk-border); --sk-side-text-strong:var(--sk-text-strong); --sk-side-hover-text:var(--sk-text-strong); --sk-side-active-text:var(--sk-brand-900); --sk-side-active-tint:rgba(57, 194, 168, 0.18); --sk-side-soon-bg:var(--sk-line); --sk-side-soon-text:var(--sk-text); --sk-side-logo-ink:#04211f; /* theme-constant: glyph on the roundel (WCAG 1.4.3 logotype exemption) */ --sk-side-badge-ink:#1a1205; /* theme-constant: on --sk-amber (8.56:1 both themes) */ --sk-side-focus:var(--sk-brand-700); /* -- radii (admin density) -- */ --sk-r-sm:10px; --sk-r:14px; --sk-r-control:10px; --sk-r-pill:999px; /* -- shadows (navy-tinted) + focus -- */ --sk-sh-sm:0 2px 8px rgba(15,30,60,.06); --sk-sh:0 8px 28px rgba(15,30,60,.10); --sk-sh-lg:0 18px 50px rgba(15,30,60,.16); --sk-focus:0 0 0 3px var(--sk-brand-50); /* modal/sheet backdrop scrim (navy-tinted; darker remap in dark mode) */ --sk-scrim:rgba(11,27,58,.42); /* -- spacing scale (4px base) -- */ --sk-sp-1:4px; --sk-sp-2:8px; --sk-sp-3:12px; --sk-sp-4:16px; --sk-sp-5:20px; --sk-sp-6:24px; --sk-sp-8:32px; --sk-sp-10:40px; --sk-sp-12:48px; --sk-sp-16:64px; /* -- type scale (admin is denser; base 14px) -- */ --sk-fs-2xs:11px; --sk-fs-xs:12px; --sk-fs-sm:13px; --sk-fs-base:14px; --sk-fs-md:15px; --sk-fs-lg:17px; --sk-fs-xl:20px; --sk-fs-2xl:23px; --sk-fs-3xl:28px; --sk-fs-display:34px; /* -- layout -- */ --sk-card-pad:20px; --sk-font:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; --sidebar-w:264px; --sidebar-w-rail:72px; /* collapsed desktop rail: icon (18px) + hit area + room for a corner badge */ /* -- Bootstrap bridge (remap primary -> teal, font -> Plex) -- */ --bs-primary:#1E3A6B; --bs-primary-rgb:30,58,107; --bs-link-color:#1E3A6B; --bs-link-hover-color:#0B1B3A; --bs-font-sans-serif:var(--sk-font); } /* ---- Typography: replace Nunito (no Arabic support) with IBM Plex ---- */ html, body{ font-family:var(--sk-font) !important; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--sk-font) !important; } /* ---- Keyboard focus visibility (WCAG 2.4.7), keyboard-only ---- */ :focus-visible{ outline:2px solid var(--sk-teal-700); outline-offset:2px; border-radius:4px; } /* The ring colour above is the deep navy, which lands around 1.5:1 on the dark surfaces - i.e. the APP-WIDE focus indicator was effectively invisible in dark mode. The sidebar had already patched this locally (--sk-side-focus) and .sk-linkbtn was about to patch it a second time; remap it once, here, so every focusable element in the app is covered. */ :root[data-theme="dark"] :focus-visible{ outline-color:var(--sk-primary-bright); } /* ---- Horizontal-overflow guards ---- */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } html, body{ max-width:100%; overflow-x:clip; } img, svg, video, table{ max-width:100%; } /* ============================================================ Minimal Landrick overrides — flip hardcoded blue (#2f55d4) to teal. (Component restyling happens page-by-page in later phases.) ============================================================ */ body{ color:var(--sk-body); } a{ color:var(--sk-teal-700); } a:hover{ color:var(--sk-teal-900); } .text-muted{ color:var(--sk-muted) !important; } .text-primary{ color:var(--sk-teal-700) !important; } .bg-primary{ background-color:var(--sk-teal-700) !important; } .border-primary{ border-color:var(--sk-teal-700) !important; } .btn-primary{ background-color:var(--sk-teal-300) !important; border-color:var(--sk-teal-300) !important; color:#fff !important; font-weight:600; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active{ background-color:var(--sk-teal-500) !important; border-color:var(--sk-teal-500) !important; color:#fff !important; } .btn-soft-primary{ background-color:var(--sk-teal-50) !important; border-color:var(--sk-teal-100) !important; color:var(--sk-teal-700) !important; } .btn-soft-primary:hover{ background-color:var(--sk-teal-700) !important; color:#fff !important; } .btn-outline-primary{ border-color:var(--sk-teal-300) !important; color:var(--sk-teal-700) !important; } .btn-outline-primary:hover{ background-color:var(--sk-teal-700) !important; border-color:var(--sk-teal-700) !important; color:#fff !important; } /* soft / tinted badges + backgrounds Landrick renders in blue */ .badge.bg-primary, .badge.badge-primary{ background-color:var(--sk-teal-700) !important; } .bg-soft-primary{ background-color:var(--sk-teal-50) !important; color:var(--sk-teal-700) !important; } /* form control focus ring -> teal */ .form-control:focus, .form-select:focus{ border-color:var(--sk-teal-300) !important; box-shadow:var(--sk-focus) !important; } /* ============================================================ DARK MODE — token remap only (the "free dark mode"). Activated by [data-theme="dark"] on ; toggled + persisted by ThemeService. Components read the semantic aliases, so only the tokens flip here — no per-component dark rules needed. ============================================================ */ :root[data-theme="dark"]{ /* neutrals inverted (cooled to navy for hue coherence) */ --sk-ink:#EAF0F8; --sk-body:#B6C2D6; --sk-muted:#8493AB; --sk-line:#243044; --sk-bg:#0A1120; --sk-white:#111A2E; /* semantic aliases re-point to the dark surfaces */ --sk-surface:#111A2E; --sk-border:#243044; --sk-text:#B6C2D6; --sk-text-strong:#EAF0F8; --sk-text-muted:#8493AB; /* status ink lightened so it keeps AA contrast (~6.6:1) on the dark soft fills */ --sk-ink-danger:#F0938B; --sk-ink-warn:#E9A23B; --sk-ink-ok:#5BC98E; --sk-ink-info:#72B4EA; /* tinted fills dimmed for dark backgrounds (remap brand → aliases follow) */ --sk-brand-50:#16213D; --sk-brand-100:#1B2C4D; --sk-brand-green-soft:#0f3326; --sk-brand-rose-soft:#3a1f1c; --sk-brand-amber-soft:#33280f; --sk-brand-blue-soft:#15293a; --sk-brand-violet-soft:#241a3d; --sk-brand-slate-soft:#1f2733; --sk-orange-soft:#3a2c10; /* sidebar: the historical navy, frozen pixel-for-pixel EXCEPT the AA fixes on label / soon / focus (were 3.2:1 / 1.85:1 effective / 1.65:1 — all failing). */ --sk-side:#0A1326; --sk-side-hover:#121D3A; --sk-side-text:#9fb0c9; /* MUST override: light value is now var(--sk-text) = dark #B6C2D6 */ --sk-side-label:#8493AB; /* FIX (was #5d6b85 @ 3.45:1) → 5.95:1 */ --sk-side-border:rgba(255, 255, 255, 0.06); --sk-side-edge:transparent; --sk-side-text-strong:#fff; --sk-side-hover-text:#dff1ee; --sk-side-active-text:#fff; --sk-side-active-tint:rgba(57, 194, 168, 0.16); --sk-side-soon-bg:#1B2C4D; --sk-side-soon-text:#B6C2D6; /* FIX (was #5d6b85 @ 1.85:1 effective under row dim) → 7.71:1 */ --sk-side-focus:var(--sk-brand-300); /* FIX (ring was 1.65:1) → 3.93:1 */ /* Inline links: --sk-primary (deep navy) sits at roughly 1.5:1 on the dark surfaces, so the link token - and with it every .sk-linkbtn - switches to the bright brand tone here. */ --sk-link:var(--sk-primary-bright); /* shadows + focus tuned for dark */ --sk-sh-sm:0 2px 8px rgba(0,0,0,.3); --sk-sh:0 8px 28px rgba(0,0,0,.4); --sk-sh-lg:0 18px 50px rgba(0,0,0,.55); --sk-focus:0 0 0 3px rgba(62,115,196,.30); --sk-scrim:rgba(0,0,0,.55); /* Bootstrap bridge follows the dark surface */ --bs-body-bg:#0A1120; --bs-body-color:#B6C2D6; } /* Page background + base text follow the tokens in dark mode (Landrick hardcodes a white body). Additive + scoped to dark so light is untouched. */ :root[data-theme="dark"] body{ background-color:var(--sk-bg) !important; color:var(--sk-text) !important; } :root[data-theme="dark"] .card, :root[data-theme="dark"] .bg-white{ background-color:var(--sk-surface) !important; color:var(--sk-text) !important; } /* Smooth the flip */ body{ transition:background-color .2s ease, color .2s ease; }