/* TSL GRC — Shared Premium Theme Variables
   Included by all GRC module pages for consistent dark/light mode.
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ─── Premium Dark Mode (default) ─── */
:root,
[data-theme="dark"] {
    /* ── Surfaces: a true elevation ramp so cards lift off the background ──
       Each step is a clearly lighter cool-slate so depth reads at a glance. */
    --bg: #070d18;
    --surface: #101a2d;
    --surface2: #1a2740;
    --surface3: #243352;
    --border: rgba(148, 163, 184, 0.16);
    --border-hover: rgba(148, 163, 184, 0.30);

    /* ── Text hierarchy (WCAG AA+ on --surface) ── */
    --text: #f2f6fb;        /* ~15:1  primary   */
    --text2: #c3cfe0;       /* ~10:1  secondary */
    --text-muted: #93a1b5;  /* ~6:1   muted (still AA) */

    /* ── Brand (Canadian blue) — used as a FILL with white text on top ── */
    --green: #0057b8;
    --green-light: #2b7cd3;
    --green-glow: rgba(43, 124, 211, 0.30);

    /* ── Readable accent — for links, icons and accent TEXT on dark surfaces.
       The brand blue is too dark to read as text on the navy bg; this is the
       contrast-safe partner (≈6.8:1) used wherever blue appears as text. ── */
    --accent: #5aa6ff;
    --accent-strong: #3b8be8;

    /* ── Semantic colours, tuned so they read AS TEXT on dark surfaces ── */
    --red: #fb7185;
    --orange: #fb923c;
    --yellow: #fbbf24;
    --blue: #60a5fa;
    --purple: #a5b4fc;
    --teal: #2dd4bf;
    --green-ok: #34d399;    /* true green for "pass / compliant" states */

    /* Status-chip text colours (read on their translucent tints) */
    --c-info: #60a5fa;
    --c-success: #4cc38a;
    --c-warning: #fbbf24;
    --c-danger: #fb7185;
    --c-neutral: #9aa7bb;
    --c-brand: #5aa6ff;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, var(--green-light) 0%, var(--green) 100%);
    --gradient-danger: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.0) 100%);

    /* Glassmorphism */
    --glass-bg: rgba(16, 26, 45, 0.74);
    --glass-blur: blur(16px);
    --glass-border: rgba(148, 163, 184, 0.16);

    /* UI tokens */
    --hover-bg: rgba(148, 163, 184, 0.09);
    --input-bg: #0c1626;
    --input-border: rgba(148, 163, 184, 0.22);
    --modal-overlay: rgba(2, 6, 14, 0.74);

    --card-bg: #101a2d;
    --shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.72);
    --shadow-glow: 0 0 22px var(--green-glow);

    /* Aliases */
    --primary: var(--green);
    --primary-light: var(--green-light);
    --info: var(--blue);
    --danger: var(--red);
    --warning: var(--orange);
    --success: var(--green-ok);

    /* Typography */
    --font-heading: 'Outfit', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;

    /* ── Type scale ──
       Nine steps replacing the ~40 ad-hoc sizes in use. Body base moves
       13px → 14px. 11px is the floor; nothing renders smaller. */
    --fs-2xs: 11px;   /* status chips, table micro-labels */
    --fs-xs: 12px;    /* captions, helper text, meta */
    --fs-sm: 13px;    /* dense table cells, secondary text */
    --fs-base: 14px;  /* body, buttons, inputs — the default */
    --fs-md: 16px;    /* card titles, section subheads */
    --fs-lg: 20px;    /* section headings */
    --fs-xl: 24px;    /* page titles */
    --fs-2xl: 30px;   /* KPI figures */
    --fs-3xl: 38px;   /* hero stat */

    --lh-tight: 1.25;
    --lh-base: 1.5;

    /* ── Radius scale ── */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-full: 9999px;

    /* ── Spacing scale, 4px base ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* ── Control heights — buttons, inputs and selects share these ── */
    --h-sm: 30px;
    --h-md: 36px;
    --h-lg: 44px;

    /* ── Elevation ──
       --shadow (above) is a COMPLETE shadow value in this file. 24 call sites
       across the repo pass it into a colour slot — `box-shadow: 0 2px 8px
       var(--shadow)` — which is invalid CSS and drops silently. Note that is
       only a bug where THIS file loads: agents/operations/projects/settings
       define --shadow as a plain colour, so there it renders fine.
       --shadow-color is what those call sites wanted. */
    --shadow-color: rgba(0, 0, 0, 0.45);
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.30);
    --elev-2: 0 4px 12px rgba(0, 0, 0, 0.38);
    --elev-3: 0 14px 40px -14px rgba(0, 0, 0, 0.72);

    /* Focus ring — the app had none before this. */
    --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

    /* Animations */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Premium Light Mode ─── */
[data-theme="light"] {
    /* Soft daylight — off-white bg with white cards for gentle elevation */
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface2: #eef2f8;
    --surface3: #e2e8f1;
    --border: rgba(15, 23, 42, 0.10);
    --border-hover: rgba(15, 23, 42, 0.22);

    /* Text hierarchy — a real neutral ramp (never pure black on white) */
    --text: #0f1b2d;        /* slate-900-ish, softer than #000 */
    --text2: #45556b;       /* secondary (~7.4:1) */
    --text-muted: #64748b;  /* muted (~5.6:1, AA) */

    /* Brand */
    --green: #0057b8;
    --green-light: #2b7cd3;
    --green-glow: rgba(0, 87, 184, 0.16);
    --accent: #0a5fc2;      /* brand blue reads well on white */
    --accent-strong: #0057b8;

    /* Semantic — darkened so they read as TEXT on white (AA) */
    --red: #dc2626;
    --orange: #ea580c;
    --yellow: #b45309;      /* amber-700: pure yellow is unreadable on white */
    --blue: #2563eb;
    --purple: #6366f1;
    --teal: #0d9488;
    --green-ok: #16a34a;

    --c-info: #1d4ed8;
    --c-success: #15803d;
    --c-warning: #b45309;
    --c-danger: #dc2626;
    --c-neutral: #475569;
    --c-brand: #0057b8;

    --gradient-brand: linear-gradient(135deg, var(--green-light) 0%, var(--green) 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);

    --glass-bg: rgba(255, 255, 255, 0.86);
    --glass-blur: blur(20px);
    --glass-border: rgba(15, 23, 42, 0.07);

    --hover-bg: rgba(15, 23, 42, 0.045);
    --input-bg: #ffffff;
    --input-border: rgba(15, 23, 42, 0.16);
    --modal-overlay: rgba(15, 23, 42, 0.45);

    --card-bg: #ffffff;
    --shadow: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.04);
    --shadow-glow: 0 10px 20px -5px var(--green-glow);

    --primary: var(--green);
    --primary-light: var(--green-light);
    --info: var(--blue);
    --danger: var(--red);
    --warning: var(--orange);
    --success: var(--green-ok);

    /* Scales are theme-independent; only elevation differs. --ring needs no
       override — it composes --bg and --accent, both redefined above. */
    --shadow-color: rgba(15, 23, 42, 0.14);
    --elev-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --elev-2: 0 4px 12px rgba(15, 23, 42, 0.10);
    --elev-3: 0 12px 28px rgba(15, 23, 42, 0.12);
}

/* ─── Global Reset & Body ─── */
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

select option {
    background: var(--surface);
    color: var(--text);
}

/* ─── Premium Pill Button System ─── */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 9999px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-bounce);
    white-space: nowrap;
    letter-spacing: 0.02em;
    background: none;
    text-decoration: none;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

.pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.pill:hover::before {
    opacity: 1;
}

.pill:active {
    transform: translateY(0);
    box-shadow: none;
}

.pill:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Solid Pills */
.pill-green {
    background: var(--gradient-brand);
    color: #fff;
    border-color: transparent;
}

.pill-red {
    background: var(--gradient-danger);
    color: #fff;
    border-color: transparent;
}

.pill-amber {
    /* Fixed bright-amber fill with dark text — readable in both themes
       (white text on amber never reaches AA). */
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #3a2400;
    border-color: transparent;
}

.pill-blue {
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: #fff;
    border-color: transparent;
}

.pill-violet {
    background: linear-gradient(135deg, #64748b, #475569);
    color: #fff;
    border-color: transparent;
}

/* Ghost/Tint Pills */
.pill-tint-green {
    background: rgba(0, 87, 184, 0.14);
    color: var(--c-brand);
    border-color: rgba(0, 87, 184, 0.28);
}

.pill-tint-green:hover {
    background: var(--green);
    color: #fff;
}

.pill-tint-red {
    background: rgba(244, 63, 94, 0.14);
    color: var(--c-danger);
    border-color: rgba(244, 63, 94, 0.28);
}

.pill-tint-red:hover {
    background: var(--red);
    color: #fff;
}

.pill-ghost {
    background: transparent;
    color: var(--text2);
    border-color: var(--border);
}

.pill-ghost:hover {
    border-color: var(--text);
    color: var(--text);
    background: var(--hover-bg);
    transform: translateY(-1px);
    box-shadow: none;
}

/* Sizes */
.pill-sm {
    padding: 4px 12px;
    font-size: 11px;
}

.pill-lg {
    padding: 10px 24px;
    font-size: 15px;
}

/* Status Indicators */
.pill-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: default;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-heading);
}

.pill-status-draft {
    background: rgba(148, 163, 184, 0.16);
    color: var(--c-neutral);
}

.pill-status-review {
    background: rgba(96, 165, 250, 0.16);
    color: var(--c-info);
}

.pill-status-approved {
    /* Approved = compliant = semantic green for instant readability */
    background: rgba(76, 195, 138, 0.16);
    color: var(--c-success);
}

.pill-status-published {
    background: rgba(0, 87, 184, 0.16);
    color: var(--c-brand);
}

.pill-status-retired {
    background: rgba(251, 113, 133, 0.16);
    color: var(--c-danger);
}

.pill-status-ai {
    background: rgba(96, 165, 250, 0.16);
    color: var(--c-info);
}

.pill-status-pending {
    background: rgba(251, 191, 36, 0.16);
    color: var(--c-warning);
}

/* Dropdown Pill */
.pill-drop {
    position: relative;
    display: inline-block;
}

.pill-drop-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 400;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 6px;
    min-width: 160px;
    box-shadow: var(--shadow);
    animation: menuFadeIn var(--transition-fast);
}

.pill-drop:hover .pill-drop-menu,
.pill-drop.open .pill-drop-menu {
    display: block;
}

.pill-drop-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-body);
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.pill-drop-menu button:hover {
    background: var(--hover-bg);
    color: var(--green);
    padding-left: 18px;
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   Button system — one definition replacing 17.
   ---------------------------------------------------------------
   321 elements carry a btn class: 66 bare, 255 with a modifier
   (.btn-outline 107, .btn-primary 89, .btn-sm 71). Bare `.btn` is
   SECONDARY on purpose, so an un-modified button is quiet by
   default. Reach for .btn-primary deliberately — ideally once per
   view.

   Screens whose inline <style> redefines .btn still win on document
   order until their own retrofit deletes it.
   ═══════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: var(--h-md);
    padding: 0 var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast);
}

.btn:hover { background: var(--surface3); border-color: var(--border-hover); }
.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* One focus treatment for every interactive element in the app.
   :focus-visible keeps it off mouse clicks and on for keyboard users. */
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.pill:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* ── Weight modifiers ── */
.btn-primary {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    font-weight: 600;
}

.btn-primary:hover { background: var(--green-light); border-color: var(--green-light); }

.btn-secondary {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}

.btn-ghost,
.btn-outline {
    background: transparent;
    border-color: var(--border);
    color: var(--text2);
}

.btn-ghost:hover,
.btn-outline:hover {
    background: var(--hover-bg);
    border-color: var(--border-hover);
    color: var(--text);
}

.btn-danger {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    font-weight: 600;
}

.btn-danger:hover { filter: brightness(1.08); }

.btn-success {
    background: var(--green-ok);
    border-color: var(--green-ok);
    color: #06281b;
    font-weight: 600;
}

.btn-success:hover { filter: brightness(1.08); }

/* ── Sizes ── */
.btn-sm { height: var(--h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-lg { height: var(--h-lg); padding: 0 var(--sp-6); font-size: var(--fs-md); }

/* ── Icon-only ── */
.btn-icon { width: var(--h-md); height: var(--h-md); padding: 0; }
.btn-icon.btn-sm { width: var(--h-sm); height: var(--h-sm); }
.btn-icon svg { width: 16px; height: 16px; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Groups ── */
.btn-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Legacy colour classes. Each is ALSO defined in the template that uses it,
   later in document order, so these only take effect once that local
   definition is deleted (Tasks 7-12). btn-green and btn-stop do not exist
   anywhere and are deliberately absent. */
.btn-blue,
.btn-save,
.btn-submit,
.btn-approve {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    font-weight: 600;
}

.btn-blue:hover,
.btn-save:hover,
.btn-submit:hover,
.btn-approve:hover { background: var(--green-light); border-color: var(--green-light); }

.btn-reject {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════
   Form controls
   ---------------------------------------------------------------
   Every select in the app rendered as native OS chrome next to
   custom-styled cards. appearance:none plus an inline-SVG chevron
   brings them into the system. The chevron is a data: URI, so it
   inherits nothing — hence the two colour variants.

   This reaches only the 19 templates that load theme.css. agents.html
   and operations.html are not among them and keep native selects.
   ═══════════════════════════════════════════════════════════════ */

select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
textarea {
    height: var(--h-md);
    padding: 0 var(--sp-3);
    border: 1px solid var(--input-border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    transition: border-color var(--transition-fast);
}

/* Textareas were inheriting monospace from a UA default in several
   templates, which made prose read like code. */
textarea {
    height: auto;
    min-height: 88px;
    padding: var(--sp-3);
    font-family: var(--font-body);
    resize: vertical;
}

/* The chevron carries !important, which is deliberate and temporary.
   Killing the native arrow with appearance:none and then losing the
   replacement leaves a dropdown with NO affordance at all — worse than
   the native control we set out to replace. Legacy per-screen CSS sets
   the `background:` SHORTHAND on selects (.filter-bar select,
   .pol-action-bar select, .content-area select and ~20 more), and a
   shorthand resets background-image to none. Those rules load after
   theme.css, so they win on document order at any specificity we can
   reach without this.

   padding-right carries it too: the same legacy rules set the `padding`
   SHORTHAND (padding: 8px 10px), and without a matching reserve the label
   text renders UNDER the chevron - verified on .filter-bar select.

   Remove both once Tasks 7-12 have deleted those local rules; the guard in
   Task 13 flags any new one. */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: var(--sp-8) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a1b5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--sp-3) center !important;
    background-size: 14px !important;
    cursor: pointer;
}

[data-theme="light"] select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

select:hover,
input:hover,
textarea:hover {
    border-color: var(--border-hover);
}

::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* Field labels. Scoped rather than a bare `label` selector: a global rule
   would also hit labels wrapping an inline checkbox and force them onto
   their own line. */
.form-group > label,
.form-label {
    display: inline-block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text2);
    letter-spacing: 0;
    text-transform: none;
}

/* accent-color only — no width/height. Sizing a checkbox globally breaks
   any custom toggle built by hiding one and styling a sibling. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--green);
    cursor: pointer;
}