/* =============================================================================
   AfterClass — Demo8 brand theme override  (v2 — green-dominant, no cream)
   Loaded AFTER assets/css/styles.css on demo8 pages only, so it leaves the
   shared Metronic vendor CSS and every other demo untouched.

   Colour hierarchy by amount of use (the "majority" is GREEN):
     GREEN    #1A5935 / #6EB943  → dominant: app chrome (sidebar, ambient),
                                    primary buttons, active nav, focus rings
     ORANGE   #FB812E            → secondary accent, Math
     AMBER    #FDB602            → warnings / tertiary accent
     BLUE     #1360C3 / #77A4DF  → informational accent, English
     PINK     #C3138C            → Writing (added for subject colour-coding)

   Official 5-shade brand ramps (darkest → base → light → pale → palest),
   used for the subject-coded Today's Mission cards in section 8 below:
     Green    1A5935 / 6EB943 / ACDC32 / DCF891 / F5FFDA
     Orange   592A1A / FB812E / FDB602 / F1E3B2 / FFFDDA
     Blue     1A2159 / 1360C3 / 77A4DF / B2D7F1 / DAFBFF
     Pink     591A53 / C3138C / DF77B4 / F1B2D6 / FFDAEB

   Content surfaces are WHITE (no cream). Dark mode intentionally left as-is.

   Plain :root / component rules here are UNLAYERED, so they win over
   Metronic's @layer theme + @layer components by the cascade.
   ========================================================================== */

/* ---- Brand reference ----------------------------------------------------- */
:root {
  --brand-green-dark: #1A5935;
  --brand-green: #6EB943;
  --brand-orange: #FB812E;
  --brand-amber: #FDB602;
  --brand-blue: #1360C3;
  --brand-blue-light: #77A4DF;
  --brand-pink: #C3138C;
  --brand-pink-dark: #591A53;
}

/* ---- Typography ---------------------------------------------------------- */
:root,
:host {
  --font-sans: "Parkinsans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =============================================================================
   1. Tailwind palette remap — routes every green / orange / blue utility
      (bg-green-500, text-orange-500, bg-blue-600 ...), badge, chart series
      and icon to the brand colours.
   ========================================================================== */
:root {
  /* Green — dominant family */
  --color-green-50:  #EAF6E1;
  --color-green-100: #D7EFC6;
  --color-green-200: #B9E29C;
  --color-green-500: #6EB943;
  --color-green-600: #57A335;
  --color-green-700: #40802B;
  --color-green-800: #2C6626;
  --color-green-950: #16341F;

  /* Orange — secondary accent */
  --color-orange-100: #FEE7D3;
  --color-orange-200: #FDCBA5;
  --color-orange-400: #FB812E;
  --color-orange-950: #5A2A0C;

  /* Amber / yellow — warnings + tertiary accent */
  --color-yellow-50:  #FFF8E1;
  --color-yellow-100: #FEEFBB;
  --color-yellow-200: #FDE388;
  --color-yellow-400: #FDB602;
  --color-yellow-500: #F0AB00;
  --color-yellow-600: #CE9000;
  --color-yellow-700: #A06E00;
  --color-yellow-800: #7E5600;
  --color-yellow-950: #3F2A00;

  /* Blue — informational accent */
  --color-blue-50:  #E8F0FB;
  --color-blue-100: #CFE0F6;
  --color-blue-500: #1360C3;
  --color-blue-600: #1153A8;
  --color-blue-700: #0E4488;
  --color-blue-800: #0B3568;
  --color-blue-950: #071F3E;

  /* Violet is off-brand — retire it to a lighter tertiary blue so stray
     "info" badges and chart series stay on palette (and distinct from
     blue-500 by being a shade lighter). */
  --color-violet-50:  #EAF1FB;
  --color-violet-100: #D6E4F6;
  --color-violet-200: #B4D0F0;
  --color-violet-500: #2F6BC0;
  --color-violet-600: #1F5AAE;
  --color-violet-700: #17498C;
  --color-violet-800: #123A6E;
  --color-violet-950: #0A2140;
}

/* =============================================================================
   2. Semantic tokens — light mode (white content, green ambient)
   ========================================================================== */
:root {
  /* Content surfaces: white. */
  --background: #FFFFFF;
  --foreground: #15241B;
  --card: #FFFFFF;
  --card-foreground: #15241B;
  --popover: #FFFFFF;
  --popover-foreground: #15241B;

  /* Primary interactive = dark green (white text, ~9:1 contrast). */
  --primary: #1A5935;
  --primary-foreground: #FFFFFF;

  /* Neutral surfaces tinted green so the whole app reads green-forward.
     --muted drives the sidebar rail, the page gutter and subtle in-card fills. */
  --secondary: #E8F1DC;
  --secondary-foreground: #24311C;
  --muted: #E7F1DB;
  --muted-foreground: #5F6B4F;
  --accent: #DFEDCD;
  --accent-foreground: #24311C;

  --destructive: var(--color-red-600);
  --destructive-foreground: #FFFFFF;

  /* Headings / high-emphasis mono text → deep green-black. */
  --mono: #15241B;
  --mono-foreground: #FFFFFF;

  --border: #DCE8C9;
  --input: #D2E2BC;
  --ring: #6EB943;
  --radius: 0.5rem;
}

/* =============================================================================
   3. Make GREEN the majority — the sidebar/header rail uses the exact brand
   green so green clearly dominates the frame, while the content card (white)
   stays crisp. Active nav items are white chips with a dark-green icon, so
   they pop against this.
   ========================================================================== */
#sidebar,
#header {
  background-color: #ACDC32;
}

/* Sidebar footer avatar/menu separators blend with the green rail. */
#sidebar_footer,
#sidebar_header {
  background-color: transparent;
}

/* Nav item boxes (62px) had 12px padding on the start side and 0 on the end
   side (Tailwind's ps-3 pe-3 lg:pe-0), so they sat flush against the right
   edge instead of centered. This also made the sidebar render at 74px while
   --sidebar-width reserves 90px for it, leaving an oddly-coloured 16px gap
   (the --muted body colour) between the sidebar and the main content. 14px
   each side makes the sidebar render at exactly 90px — centered items, no
   gap. */
#sidebar_menu_wrapper {
  padding-inline: calc(var(--spacing) * 3.5);
}

/* Nav icon/label colour — #1A5935 at all times now (previously pale
   #F5FFDA by default, ~1.5:1 against the #ACDC32 rail, switching to
   #1A5935 only on hover/active/here; now unified to #1A5935 always, which
   also resolves that earlier contrast flag — ~6:1 against #ACDC32).
   Scoped to #sidebar_menu specifically rather than all of #sidebar — the
   chat/notification drawers are hidden panels that happen to sit in the
   sidebar's DOM subtree but are a separate visual surface, so a broader
   #sidebar selector would also recolour icons inside those panels.
   Chat icon button and the mobile hamburger toggle (#header) get the same
   colour separately below, since they sit outside #sidebar_menu. */
#sidebar_menu .kt-menu-icon,
#sidebar_menu .kt-menu-icon i,
#sidebar_menu .kt-menu-title {
  color: #1A5935;
}

#sidebar_footer > div > button.kt-btn i,
#header button i {
  color: #1A5935;
}

/* =============================================================================
   4. Warning fix — amber #FDB602 with WHITE text was unreadable (~1.7:1).
   Solid warning badges/alerts now use dark text on amber (~9:1, WCAG AA).
   Light/outline warning variants already use dark tinted text, so untouched.
   ========================================================================== */
.kt-badge-warning {
  color: #3A2A00;
}
.kt-alert-warning {
  color: #3A2A00;
}
.kt-alert-warning .kt-alert-close > svg {
  color: #3A2A00;
}

/* =============================================================================
   5. Brand polish
   ========================================================================== */
:root {
  --primary-active: #124026; /* green buttons deepen on hover, not blue-ish */
}

/* Checked checkbox uses the same #4CA817 as the sidebar/Continue Study
   button, sitewide (checkboxes appear on many demo8 pages, not just home). */
.kt-checkbox:checked {
  border-color: #4CA817;
  background-color: #4CA817;
}
.kt-checkbox:indeterminate {
  border-color: #4CA817;
  background-color: #4CA817;
}

/* Monthly Benchmark stat boxes — Target stands out in the brighter tint,
   Previous/Needs sit in the pale wash (same #F5FFDA as the page ambient).
   #1A5935 on #DCF891 is ~7:1 (AA), already verified in section 6 above. */
.kt-stat-emphasis {
  background-color: #DCF891;
}
.kt-stat-emphasis-label,
.kt-stat-emphasis-value {
  color: #1A5935;
}

.kt-stat-neutral {
  background-color: #F5FFDA;
}

/* Home page secondary action buttons (Change Schools, View Weekly Plan,
   Take Test) — lime accent, scoped to this class rather than kt-btn-secondary
   itself, since that class is used for plain/neutral actions sitewide.
   #1A5935 on #ACDC32 is ~5.1:1 (AA).
   Hover/active mix toward the green ramp's darkest stop (#1A5935) — same
   color-mix() technique Metronic's own compiled CSS already uses for its
   default button hover states, just pointed at our palette instead of
   fading to transparent. */
.kt-btn-lime {
  background-color: #ACDC32;
  color: #1A5935;
}
.kt-btn-lime:hover {
  background-color: color-mix(in oklab, #ACDC32 85%, #1A5935 15%);
}
.kt-btn-lime:active {
  background-color: color-mix(in oklab, #ACDC32 70%, #1A5935 30%);
}

/* View Journey — matches the Continue Study mission button look exactly. */
.kt-btn-continue {
  background-color: #4CA817;
  color: #FFFFFF;
}
.kt-btn-continue:hover {
  background-color: color-mix(in oklab, #4CA817 85%, #1A5935 15%);
}
.kt-btn-continue:active {
  background-color: color-mix(in oklab, #4CA817 70%, #1A5935 30%);
}

/* =============================================================================
   6. Today's Mission item states
   Single subject-neutral green ramp (per the supplied swatch sheet), one
   step per state instead of one hue per subject: the active/incomplete
   mission stands out in the more saturated tint, completed ones recede into
   a pale wash so the one thing left to do reads as the actual call to
   action. Ramp used: #1A5935 (darkest) → #6EB943 → #ACDC32 → #DCF891 →
   #F5FFDA (lightest, ~page background).
   Contrast checked: done-state text #40802B on #F5FFDA bg → 4.5:1 (AA).
   Card/button/chip text on the active tint (#DCF891) uses #1A5935 → 7:1+.
   ========================================================================== */
.kt-mission-scroll {
  /* Fits ~3 items with no scrollbar; a 4th+ mission scrolls inside the card
     instead of pushing the whole page taller. Paired with kt-scrollable-y-auto
     for the thin themed scrollbar. */
  max-height: 34rem;
}

.kt-mission-item {
  border-radius: calc(var(--radius) + 2px);
  padding: calc(var(--spacing) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
}

.kt-mission-item-active {
  background-color: #DCF891;
}
.kt-mission-item-active .kt-mission-text {
  color: #1A5935;
}
.kt-mission-item-active .kt-mission-chip {
  background-color: rgba(255, 255, 255, 0.6);
  color: #1A5935;
}
.kt-mission-item-active .kt-mission-btn {
  /* White label requested explicitly; contrast on #4CA817 is ~3:1, below
     the 4.5:1 AA text threshold (though it clears the 3:1 bar for large/
     bold UI text). Flagging in case this needs revisiting later. */
  background-color: #4CA817;
  color: #FFFFFF;
}
.kt-mission-item-active .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #4CA817 85%, #1A5935 15%);
}
.kt-mission-item-active .kt-mission-btn:active {
  background-color: color-mix(in oklab, #4CA817 70%, #1A5935 30%);
}

.kt-mission-item-done {
  background-color: #F5FFDA;
}
.kt-mission-item-done .kt-mission-text {
  /* Same darkest-of-ramp text as the active state (#1A5935) — verified
     ~7.8:1 even against this pale a background, so no need for a separate
     muted shade; active/done is differentiated via bg + button intensity
     and the Done!/Great job! copy instead. Same rule now used for all 4
     subject colours below. */
  color: #1A5935;
}
.kt-mission-item-done .kt-mission-chip {
  background-color: rgba(26, 89, 53, 0.08);
  color: #1A5935;
}
.kt-mission-item-done .kt-mission-btn {
  background-color: #DCF891;
  color: #1A5935;
}
.kt-mission-item-done .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #DCF891 85%, #1A5935 15%);
}
.kt-mission-item-done .kt-mission-btn:active {
  background-color: color-mix(in oklab, #DCF891 70%, #1A5935 30%);
}

/* Roomier card header for a title + subtitle pair (Monthly Benchmark, OC
   Test Countdown): kt-card-header normally relies on a 56px min-height with
   centered content, and kt-card-heading only gives 4px between title/
   description — both too tight once there's a two-line heading. */
.kt-title-spaced {
  padding-block: calc(var(--spacing) * 5);
}
.kt-title-spaced .kt-card-title {
  margin-block-end: calc(var(--spacing) * 2);
}

/* =============================================================================
   7. Home page ambient background
   Scoped to #home_main (index.html only) so the rest of the site keeps the
   white content surface decided earlier — only the student home page gets
   the pale green wash behind its white cards, per the latest home mockup.
   Lightened a step further (was #F5FFDA) per latest feedback.
   ========================================================================== */
#home_main {
  background-color: #FAFFEF;
}

/* =============================================================================
   8. Today's Mission — subject-coded (Math=orange, English=blue,
   Writing=pink; Thinking Skills reuses the green kt-mission-item-active/
   -done pair from section 6 above). Colours now pulled directly from the
   official 5-shade brand ramps (darkest/base/light/pale/palest per family)
   instead of one-off approximations:
     Orange   592A1A / FB812E / FDB602 / F1E3B2 / FFFDDA
     Blue     1A2159 / 1360C3 / 77A4DF / B2D7F1 / DAFBFF
     Pink     591A53 / C3138C / DF77B4 / F1B2D6 / FFDAEB
   Same rule as green: active-bg = pale (row4), done-bg = palest (row5),
   text = darkest (row1) for BOTH states — checked ~7–14:1 in every case, so
   one text colour per family works everywhere; active/done reads through
   bg/button intensity + the Done!/Great job! copy instead.
   Button labels: white on blue/pink (~5.5–6:1, AA). Orange's white label is
   only ~2.6:1 (fails AA text contrast) — requested explicitly anyway, so
   applied as asked; flagging same as the green button label earlier.
   ========================================================================== */

/* Math — orange */
.kt-mission-math-active {
  background-color: #F1E3B2;
}
.kt-mission-math-active .kt-mission-text {
  color: #592A1A;
}
.kt-mission-math-active .kt-mission-chip {
  background-color: rgba(255, 255, 255, 0.6);
  color: #592A1A;
}
.kt-mission-math-active .kt-mission-btn {
  background-color: #FB812E;
  color: #FFFFFF;
}
.kt-mission-math-active .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #FB812E 85%, #592A1A 15%);
}
.kt-mission-math-active .kt-mission-btn:active {
  background-color: color-mix(in oklab, #FB812E 70%, #592A1A 30%);
}

.kt-mission-math-done {
  background-color: #FFFDDA;
}
.kt-mission-math-done .kt-mission-text {
  color: #592A1A;
}
.kt-mission-math-done .kt-mission-chip {
  background-color: rgba(89, 42, 26, 0.1);
  color: #592A1A;
}
.kt-mission-math-done .kt-mission-btn {
  background-color: #F1E3B2;
  color: #592A1A;
}
.kt-mission-math-done .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #F1E3B2 85%, #592A1A 15%);
}
.kt-mission-math-done .kt-mission-btn:active {
  background-color: color-mix(in oklab, #F1E3B2 70%, #592A1A 30%);
}

/* English — blue */
.kt-mission-english-active {
  background-color: #B2D7F1;
}
.kt-mission-english-active .kt-mission-text {
  color: #1A2159;
}
.kt-mission-english-active .kt-mission-chip {
  background-color: rgba(255, 255, 255, 0.6);
  color: #1A2159;
}
.kt-mission-english-active .kt-mission-btn {
  background-color: #1360C3;
  color: #FFFFFF;
}
.kt-mission-english-active .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #1360C3 85%, #1A2159 15%);
}
.kt-mission-english-active .kt-mission-btn:active {
  background-color: color-mix(in oklab, #1360C3 70%, #1A2159 30%);
}

.kt-mission-english-done {
  background-color: #DAFBFF;
}
.kt-mission-english-done .kt-mission-text {
  color: #1A2159;
}
.kt-mission-english-done .kt-mission-chip {
  background-color: rgba(26, 33, 89, 0.1);
  color: #1A2159;
}
.kt-mission-english-done .kt-mission-btn {
  background-color: #B2D7F1;
  color: #1A2159;
}
.kt-mission-english-done .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #B2D7F1 85%, #1A2159 15%);
}
.kt-mission-english-done .kt-mission-btn:active {
  background-color: color-mix(in oklab, #B2D7F1 70%, #1A2159 30%);
}

/* Writing — pink */
.kt-mission-writing-active {
  background-color: #F1B2D6;
}
.kt-mission-writing-active .kt-mission-text {
  color: #591A53;
}
.kt-mission-writing-active .kt-mission-chip {
  background-color: rgba(255, 255, 255, 0.6);
  color: #591A53;
}
.kt-mission-writing-active .kt-mission-btn {
  background-color: #C3138C;
  color: #FFFFFF;
}
.kt-mission-writing-active .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #C3138C 85%, #591A53 15%);
}
.kt-mission-writing-active .kt-mission-btn:active {
  background-color: color-mix(in oklab, #C3138C 70%, #591A53 30%);
}

.kt-mission-writing-done {
  background-color: #FFDAEB;
}
.kt-mission-writing-done .kt-mission-text {
  color: #591A53;
}
.kt-mission-writing-done .kt-mission-chip {
  background-color: rgba(89, 26, 83, 0.1);
  color: #591A53;
}
.kt-mission-writing-done .kt-mission-btn {
  background-color: #F1B2D6;
  color: #591A53;
}
.kt-mission-writing-done .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #F1B2D6 85%, #591A53 15%);
}
.kt-mission-writing-done .kt-mission-btn:active {
  background-color: color-mix(in oklab, #F1B2D6 70%, #591A53 30%);
}

/* =============================================================================
   9. Current Readiness — colour-coded rows (green/orange/blue) instead of
   uniform green bars, matching the new mission-subject palette. Dots are
   plain colour (no initials) per the latest mockup — decorative category
   colour, not identity.
   ========================================================================== */
.kt-progress-readiness-orange .kt-progress-indicator {
  background-color: #FB812E;
}
.kt-progress-readiness-blue .kt-progress-indicator {
  background-color: #1360C3;
}

.kt-dot-green {
  background-color: #6EB943;
}
.kt-dot-orange {
  background-color: #FB812E;
}
.kt-dot-blue {
  background-color: #1360C3;
}

/* =============================================================================
   10. Study Rank system — game-style tier ladder replacing raw percentile
   rank display, reusing the same 4 brand hues already used for mission
   subjects (no new colours) plus a neutral base tier. Badge is a plain
   emoji (renders its own colour, no contrast concerns) in a coloured
   circle. Only "Study Champion" (Top 10%) is wired up on the page right
   now — the rest of the ladder is defined here so future tiers/pages can
   reuse it without reinventing names or colours.

     Tier             Percentile   Colour            Badge
     Study Rookie     everyone     neutral (muted)   🌱
     Study Explorer   Top 40%      green  #4CA817    🧭
     Study Warrior    Top 20%      orange #FB812E    ⚔️
     Study Champion   Top 10%      blue   #1360C3    🥇
     Study Legend     Top 5%       pink   #C3138C    👑
   ========================================================================== */
.kt-rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: calc(infinity * 1px);
}
.kt-rank-rookie {
  background-color: var(--secondary);
}
.kt-rank-explorer {
  background-color: #4CA817;
}
.kt-rank-warrior {
  background-color: #FB812E;
}
.kt-rank-champion {
  background-color: #1360C3;
}
.kt-rank-legend {
  background-color: #C3138C;
}