/* ============================================================
   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.

   English + LTR (admin). 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 teal scale -- */
  --sk-teal-900:#06302E;
  --sk-teal-700:#0E5C5C;
  --sk-teal-500:#1E8C84;
  --sk-teal-300:#39C2A8;
  --sk-teal-100:#D7F0EB;
  --sk-teal-50:#EAF7F5;

  /* -- accent -- */
  --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;

  /* -- status + soft pairs (green darkened to AA on white) -- */
  --sk-green:#147A52;  --sk-green-soft:#E2F6EE;
  --sk-red:#E5564B;    --sk-red-soft:#FCE8E6;
  --sk-amber:#E9A23B;  --sk-amber-soft:#FCF1DD;
  --sk-blue:#3B82C4;   --sk-blue-soft:#E6F0F9;

  /* -- semantic aliases (components read these, never raw hex) -- */
  --sk-primary:var(--sk-teal-700);
  --sk-primary-bright:var(--sk-teal-300);
  --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);

  /* -- dark sidebar palette -- */
  --sk-side:#0C211F;
  --sk-side-hover:#12302d;
  --sk-side-text:#9fb3b1;
  --sk-side-label:#5d7370;

  /* -- radii (admin density) -- */
  --sk-r-sm:10px;
  --sk-r:14px;
  --sk-r-control:10px;
  --sk-r-pill:999px;

  /* -- shadows (teal-tinted) + focus -- */
  --sk-sh-sm:0 2px 8px rgba(14,92,92,.06);
  --sk-sh:0 8px 28px rgba(14,92,92,.10);
  --sk-sh-lg:0 18px 50px rgba(14,92,92,.16);
  --sk-focus:0 0 0 3px var(--sk-teal-50);

  /* -- 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;

  /* -- Bootstrap bridge (remap primary -> teal, font -> Plex) -- */
  --bs-primary:#0E5C5C;
  --bs-primary-rgb:14,92,92;
  --bs-link-color:#0E5C5C;
  --bs-link-hover-color:#06302E;
  --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;
}

/* ---- 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:var(--sk-teal-900) !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 <html>; 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 */
  --sk-ink:#EAF2F1;
  --sk-body:#B8C7C6;
  --sk-muted:#849998;
  --sk-line:#22322F;
  --sk-bg:#0A1817;
  --sk-white:#10211F;

  /* semantic aliases re-point to the dark surfaces */
  --sk-surface:#10211F;
  --sk-border:#22322F;
  --sk-text:#B8C7C6;
  --sk-text-strong:#EAF2F1;
  --sk-text-muted:#849998;

  /* tinted fills dimmed for dark backgrounds */
  --sk-teal-50:#11302B;
  --sk-teal-100:#16443c;
  --sk-green-soft:#0f3326;
  --sk-red-soft:#3a1f1c;
  --sk-amber-soft:#33280f;
  --sk-blue-soft:#15293a;
  --sk-orange-soft:#3a2c10;

  /* darker sidebar */
  --sk-side:#081413;
  --sk-side-hover:#10241f;

  /* 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(57,194,168,.25);

  /* Bootstrap bridge follows the dark surface */
  --bs-body-bg:#0A1817;
  --bs-body-color:#B8C7C6;
}

/* 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; }