/* ==========================================================================
   RT Design System — scoped opt-in layer
   --------------------------------------------------------------------------
   Source of truth : Design Reference/rt-design-system/tokens.json
   Approved mockup : docs/mockups/dashboard_design_comparison_v1.html
   Activated by    : <body data-ds="rt"> — set per screen via [% block body_ds %]
                     in templates/layouts/base.html.

   MIGRATION MODEL
   This file is a screen-by-screen opt-in. It redefines the SAME semantic token
   names main.css already uses, so no class names change and no other screen is
   affected. Only templates that set body_ds="rt" pick it up. Removing the
   block reverts that screen with no other edit.

   WHY THE TOKENS SIT ON body AND NOT :root
   base.html writes the user's accent as an inline style on <html>:
       <html style="--color-primary: ...; --color-secondary: ...">
   An inline declaration on <html> beats any stylesheet rule targeting <html>,
   so a :root block here would silently lose. Declaring the same properties on
   <body> gives body and every descendant its own value, which shadows the
   inherited one without !important. This is also what locks Hot Coral on this
   screen regardless of the accent the user has saved.

   COLOUR SEMANTICS (deliberate departure from the current system)
   RT is a single-accent system, so coral cannot mean two things at once.
       coral  = the current stage, and interactive affordances. Nothing else.
       red    = overdue. Deeper and darker than coral, plus a filled cell and
                a corner flag, so the state never rests on hue alone.
       green  = cleared.
       neutral= counts that are simply waiting. Not accented.
   In the current system an active count is navy and overdue is red, which are
   far apart. Coral and red are not, hence the three-way separation above.
   ========================================================================== */

body[data-ds="rt"] {
    /* ── Accent: locked, ignores the saved user accent on this screen ── */
    --color-primary: #f2542d;
    --color-primary-hover: #db4620;
    --color-primary-active: #c33d1b;
    --color-primary-tint: rgba(242, 84, 45, 0.10);
    --accent-soft: #f2542d;
    --color-secondary: #f2542d;
    --color-accent: #f2542d;
    --color-accent-hover: #db4620;
    --color-focus-ring: rgba(242, 84, 45, 0.35);
    --color-link: #f2542d;
    --color-link-hover: #db4620;

    /* ── Surfaces ── */
    --color-background: #ffffff;
    --color-surface: #fafafa;
    --color-surface-secondary: #f4f4f5;
    --color-surface-muted: #ededf0;
    --color-border: #e4e4e7;
    --color-border-strong: #d4d4d8;

    /* ── Text ── */
    --color-text-primary: #0d0d0d;
    --color-text-secondary: #52525b;
    /* Lifted from #71717a (4.40:1 on --color-surface-secondary). Now 5.17:1. */
    --color-text-muted: #66666f;
    --color-text-inverse: #ffffff;
    --color-heading-strong: #0d0d0d;

    /* ── Semantic. Error is pushed dark and away from coral. ── */
    --color-success: #0f9d58;
    --color-success-bg: #f0fdf4;
    --color-success-border: #bbf7d0;
    /* Added 2026-08-17. --color-error and --color-warning already had a -text
       variant darkened for use ON their own tinted background; success did not,
       so anything that needed dark green text reached for --color-success
       (#0f9d58), which measures 3.38:1 on --color-success-bg and fails AA.
       #0b6b3d measures 6.34:1 on the same background. */
    --color-success-text: #0b6b3d;
    /* White on --color-success (#0f9d58) measures 3.51:1, so every SOLID
       success button in the app fails AA. This is the fill to use when white
       text sits on it; #0f9d58 stays for dots, rules and icons. */
    --color-success-solid: #0b6b3d;
    --color-error: #b42318;
    --color-error-bg: #fef3f2;
    --color-error-border: #fecdca;
    --color-error-text: #912018;
    --color-warning: #b54708;
    --color-warning-bg: #fffaeb;
    --color-warning-border: #fedf89;
    --color-warning-text: #93370d;
    --color-info: #4f46e5;
    --color-info-bg: #eef0fe;
    --color-info-border: #dcdffb;

    --color-accent-2: #6366f1;
    --color-accent-2-strong: #4f46e5;
    --color-accent-2-soft: #8b5cf6;
    --color-accent-2-bg: #eef0fe;
    --color-accent-2-border: #dcdffb;
    --color-accent-2-tint: #f4f5fe;

    /* ── Geometry: RT is uniform 6px, no 12px cards ── */
    --radius-sm: 6px;
    --radius-md: 6px;
    --radius-lg: 6px;

    /* ── Elevation: borders carry the edge, shadows nearly vanish ── */
    --shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, .08), 0 1px 3px -1px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, .10), 0 2px 4px -2px rgba(0, 0, 0, .07);
    --shadow-lg: 0 10px 20px -4px rgba(0, 0, 0, .12), 0 4px 8px -4px rgba(0, 0, 0, .08);
    --shadow-focus: 0 0 0 3px var(--color-focus-ring);

    /* ── Sidebar: neutral rail, coral reserved for the active indicator ── */
    --sidebar-bg: #f9f9fa;
    --sidebar-border: #e4e4e7;
    --sidebar-scrollbar: #d4d4d8;
    --sidebar-hover: #ededf0;
    --sidebar-hover-strong: #e4e4e7;
    --sidebar-text: #18181b;
    --sidebar-text-secondary: #52525b;
    /* Lifted from #a1a1aa 2026-08-17. MEASURED 2.44:1 against --sidebar-bg
       (#f9f9fa) — the worst contrast reading anywhere in the app, and it was
       carrying the signed-in user's email address and the Sign out label at
       11px. #66666f measures 5.42:1 on the same surface and matches the lift
       already applied to --color-text-muted. */
    --sidebar-text-muted: #66666f;

    --chart-grid: rgba(0, 0, 0, .06);
    --chart-axis: #71717a;
    --chart-neutral: #a1a1aa;

    background-color: var(--color-background);
    background-image: none;   /* RT has no page glow */
}

/* ── Dark mode: near-pure black, not the warm neutral of the current system ── */

/* ==========================================================================
   ORDINAL RATING BAND RAMP  --rt-band-1 .. --rt-band-5
   --------------------------------------------------------------------------
   Poor(1) Average(2) Good(3) Very Good(4) Excellent(5).

   WHY THIS EXISTS
   main.css colours every rating band from --color-error / --color-accent /
   --color-warning / --color-primary / --color-success. Under RT, --color-accent
   AND --color-primary both resolve to Hot Coral, so "Average" and "Very Good" —
   two bands three steps apart — render identically. The Dashboard hit this with
   its phase bands and the HR Scorecard hit it with its category badge.

   SOURCE OF THE HUES — REWRITTEN 2026-09-01
   The ramp used to borrow RT's ordered CHART slots for the middle bands and
   this layer's semantic tokens for the ends:
       1 Poor --color-error red / 2 Average --color-warning amber /
       3 Good chart3 #02b8cc TEAL / 4 Very Good chart2 #6366f1 INDIGO /
       5 Excellent --color-success green.
   Chart slots are a CATEGORICAL palette. Borrowing them gave five colours
   that were easy to tell apart and impossible to put in order: teal and
   indigo sat between two warm hues and a green, so nothing about the colour
   said Very Good outranks Good. On the HOD approval modal an indigo Very
   Good sat directly beside a green Excellent and the pair read as unrelated.

   The ramp is now built as a ramp: a single red -> orange -> amber -> olive
   -> green arc, so position in the sequence is legible without reading the
   word. It is no longer derived from tokens.json chart slots, because a
   rating band is ordinal and a chart series is not.

   Coral appears nowhere in this ramp. It stays reserved for interaction.

   TREATMENT
   Tinted surface + 1px border + dark text, not a solid fill. That is the RT
   chip, and it is what .sc-category-badge already renders.

   CONSUMERS: rt-scorecard.css, rt-appraisal-input.css. Add the band colour
   here, never in a screen file.
   ========================================================================== */
body[data-ds="rt"] {
    /* 2026-09-01 — the ramp is now ORDINAL. It used to run
       red / brown / TEAL / INDIGO / green, so Good and Very Good were cool
       hues sitting between two warm ones and a green: five distinguishable
       colours, but not a sequence. A reader could not tell from the colour
       alone that Very Good outranks Good, and on the HOD approval modal an
       indigo Very Good sat directly beside a green Excellent.

       It now runs red -> orange -> amber -> olive -> green: one arc, so the
       order is legible without reading the word. Every pair is measured:
       text-on-tint 5.69 / 4.71 / 5.32 / 4.98 / 5.87, white-on-solid
       6.57 / 5.25 / 5.72 / 5.54 / 7.09. Minimum pairwise distance between
       the five solid fills is 67 (sum of absolute RGB deltas).

       The word ALWAYS accompanies the colour — see the no-colour-alone rule
       — so ordinal legibility is worth more here than maximum separation.
       CHANGING THESE FIVE LINES REPAINTS EVERY RT SCREEN. */
    --rt-band-1-bg:#fcebe9; --rt-band-1-border:#f1bfbb; --rt-band-1-text:#b3251c;
    --rt-band-2-bg:#fdf1e0; --rt-band-2-border:#f0cfa1; --rt-band-2-text:#a8560c;
    --rt-band-3-bg:#fff7d5; --rt-band-3-border:#e7d286; --rt-band-3-text:#7e6300;
    --rt-band-4-bg:#edf6e2; --rt-band-4-border:#c3dea6; --rt-band-4-text:#467427;
    --rt-band-5-bg:#dceee3; --rt-band-5-border:#a9d2bb; --rt-band-5-text:#16653c;
}

/* ==========================================================================
   STRUCTURAL OVERRIDES
   Tokens alone cannot express these; they are rule-level differences between
   the two systems. Each is scoped to body[data-ds="rt"] so nothing leaks.
   ========================================================================== */

/* ── Header: flat surface with a hairline, not a gradient bar ── */
body[data-ds="rt"] .content-header {
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
}
body[data-ds="rt"] .content-header-title { color: var(--color-text-primary); }
body[data-ds="rt"] .content-header-title .ch-sub { color: var(--color-text-muted); }

/* Header controls lose the glass treatment; they are ordinary bordered buttons. */
body[data-ds="rt"] .content-header .theme-btn {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    background: transparent;
}
body[data-ds="rt"] .content-header .theme-btn:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
}
body[data-ds="rt"] .ch-cycle {
    color: var(--color-text-primary);
    border-color: var(--color-border);
    background: var(--color-background);
}
body[data-ds="rt"] .ch-cycle:hover {
    background: var(--color-surface-muted);
    border-color: var(--color-border-strong);
}
body[data-ds="rt"] .ch-cycle:focus-visible { box-shadow: var(--shadow-focus); }
body[data-ds="rt"] .ch-btn {
    color: var(--color-text-primary);
    border-color: var(--color-border);
    background: var(--color-background);
}
body[data-ds="rt"] .ch-btn:hover { background: var(--color-surface-muted); }

/* ── Sidebar active state: subtle fill + 2px coral left indicator ── */
body[data-ds="rt"] .nav-item.active {
    background-color: var(--sidebar-hover);
    color: var(--sidebar-text);
    font-weight: var(--font-weight-medium);
}
body[data-ds="rt"] .nav-item.active svg { color: var(--color-primary); }
body[data-ds="rt"] .nav-item::before { width: 2px; }
body[data-ds="rt"] .nav-item.active::before { opacity: 1; }

/* ── Mobile hamburger bar follows the flat header ── */
body[data-ds="rt"] .mobile-header {
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}