/* ================================================== */
/* Therion design tokens — typography + semantics      */
/* Palette ramps live in UNFOLD["COLORS"] (base.py)    */
/* as bare triplets, but Unfold 0.100.0 (Tailwind v4)  */
/* emits COMPLETE colours here, e.g. rgb(36,86,166).   */
/* Use var(--color-...) for solids; color-mix(in srgb, */
/* var(--color-...) N%, transparent) for tints. NEVER  */
/* rgb(var(--color-...)) — invalid rgb(rgb()) here.    */
/* The --t-* semantic tokens below are complete        */
/* colours and flip automatically with .dark.          */
/* ================================================== */
/* Fonts are self-hosted — /static/fonts/therion-fonts.css, loaded via UNFOLD["STYLES"]. */

:root {
    /* Unfold (Tailwind v4) resolves all type through these variables.
       Admin-redesign pair: Schibsted Grotesk (UI) + JetBrains Mono
       (codes, numerics, micro-labels, chips). */
    --font-sans: 'Schibsted Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-display: 'Schibsted Grotesk', system-ui, sans-serif;

    /* Semantic trio — navy / amber / red (light values), per the
       admin-redesign handoff. -dim = tint background of the same hue,
       for banner/badge fills. */
    --t-info: #2456a6;
    --t-warn: #b9861c;
    --t-danger: #b4372f;
    --t-success: #1f7a4d;
    --t-info-dim: rgba(36, 86, 166, 0.1);
    --t-warn-dim: rgba(185, 134, 28, 0.13);
    --t-danger-dim: rgba(180, 55, 47, 0.1);
    --t-success-dim: rgba(31, 122, 77, 0.11);

    /* Text-on-tint (chips) — darker than the hue for AA on the wash */
    --t-warn-ink: #8f6812;
    --t-warn-tint: #fbf3df;
    --t-warn-tint-border: #ebddb6;
    --t-success-tint: #e6f3ec;
    --t-success-tint-border: #c4e2d2;
    --t-danger-tint: #fbeae8;
    --t-danger-tint-border: #f0cfcb;
    --t-info-tint: #eaf0fa;
    --t-info-tint-border: #ccdbf2;

    /* Extended categorical hues for chart series (5th and 6th series) */
    --t-series-violet: #6d5cd3;
    --t-series-cyan: #0e8fa3;

    /* Chrome — hairline borders + 26px page grid texture,
       straight from the handoff */
    --t-border-hairline: #dce2ec;
    --t-border-bright: #cbd4e4;
    --t-grid: rgba(31, 44, 72, 0.035);
    --t-row-hover: #f7f9fc;
    --t-row-selected: #f3f7fd;
    --t-surface: #ffffff;
    --t-surface-raised: #fbfcfe;
    --t-page: #eef1f6;
    --t-ink: #1f2c48;
    --t-disabled: #b6bfcf;
    --t-primary: #2456a6;
    --t-primary-hover: #1c4587;
    --t-bulkbar: #1f2c48;
    --t-bulkbar-cta: #f5d9a0;
    --t-focus-ring: rgba(36, 86, 166, 0.12);

    /* Unfold's rounded-default reads this (falls back to 6px) —
       buttons/inputs radius; cards use 9px explicitly */
    --border-radius: 7px;
}

.dark {
    --t-info: #7fa8ec;
    --t-warn: #d9a93f;
    --t-danger: #e06a5e;
    --t-success: #3fa574;
    --t-info-dim: rgba(127, 168, 236, 0.12);
    --t-warn-dim: rgba(217, 169, 63, 0.14);
    --t-danger-dim: rgba(224, 106, 94, 0.12);
    --t-success-dim: rgba(63, 165, 116, 0.13);

    --t-warn-ink: #e0b65a;
    --t-warn-tint: #3b321c;
    --t-warn-tint-border: #55471f;
    --t-success-tint: #1e3529;
    --t-success-tint-border: #2e4a3a;
    --t-danger-tint: #3a2422;
    --t-danger-tint-border: #56302c;
    --t-info-tint: #24304a;
    --t-info-tint-border: #35476b;

    --t-series-violet: #8f7ee7;
    --t-series-cyan: #3fc6d8;

    --t-border-hairline: #2c3549;
    --t-border-bright: #39445c;
    --t-grid: rgba(255, 255, 255, 0.04);
    --t-row-hover: #232d3d;
    --t-row-selected: #24304a;
    --t-surface: #1e2735;
    --t-surface-raised: #19212f;
    --t-page: #141a26;
    --t-ink: #e6ebf5;
    --t-disabled: #66718b;
    --t-primary: #2e62b8;
    --t-primary-hover: #3d74d6;
    --t-bulkbar: #0f1420;
    --t-bulkbar-cta: #f5d9a0;
    --t-focus-ring: rgba(127, 168, 236, 0.16);
}

/* -------------------------------------------------- */
/* Blueprint chrome                                    */
/* 1. Page grid texture (shows in the gutters only —   */
/*    cards and tables sit on solid surfaces).         */
/* 2. Every base-family border becomes the records'    */
/*    hairline translucent steel instead of solid grey.*/
/* -------------------------------------------------- */
body {
    background-color: var(--t-page);
    background-image:
        linear-gradient(var(--t-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--t-grid) 1px, transparent 1px);
    background-size: 26px 26px;
}

[class*="border-base"] {
    border-color: var(--t-border-hairline);
}
.dark [class*="border-base"] {
    border-color: var(--t-border-hairline);
}
[class*="divide-base"] > :not(:last-child) {
    border-color: var(--t-border-hairline);
}
.dark [class*="divide-base"] > :not(:last-child) {
    border-color: var(--t-border-hairline);
}

/* Display face for page titles */
h1 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

/* -------------------------------------------------- */
/* Layout: full-width working surface                  */
/* Unfold caps #content in a Tailwind .container       */
/* (breakpoint max-widths). An ERP wants the viewport. */
/* -------------------------------------------------- */
.container {
    max-width: none;
}

/* -------------------------------------------------- */
/* Surface depth                                       */
/* Explainer model: page sits one step BELOW cards.    */
/* Cards keep Unfold's dark:bg-base-900; the page      */
/* drops to base-950 so surfaces actually lift.        */
/* Light mode already separates (base-50 page / white  */
/* cards).                                             */
/* -------------------------------------------------- */
.dark body {
    background-color: var(--color-base-950);
}

/* -------------------------------------------------- */
/* Mono uppercase micro-label                          */
/* Shared treatment for table headers, KPI labels and  */
/* sidebar group titles. Use .t-label-mono on any      */
/* custom table header / label outside #result_list.   */
/* -------------------------------------------------- */
.t-label-mono,
#result_list thead th,
#nav-sidebar-inner h2 {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Sidebar group titles keep their slightly larger cut */
#nav-sidebar-inner h2 {
    font-size: 11px;
    letter-spacing: 1.4px;
}
/* keep Material Symbols ligatures intact inside the retyped titles */
#nav-sidebar-inner h2 .material-symbols-outlined {
    text-transform: none;
    letter-spacing: normal;
}

/* Micro-labels read in the dimmed base tone */
.t-label-mono,
#result_list thead th {
    color: var(--color-base-500);
}
.dark .t-label-mono,
.dark #result_list thead th {
    color: var(--color-base-400);
}

/* Table header treatment — transparent with a bright rule beneath,
   matching the scheduling boards (the in-product reference) */
#result_list thead th,
.t-table thead th {
    background-color: transparent;
    border-bottom: 2px solid var(--t-border-bright);
}

/* Changelist density — align with the boards' data rhythm */
#result_list tbody td {
    font-size: 0.8125rem;
    line-height: 1.4;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

/* KPI values: display face, figures aligned */
.t-kpi-value {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

/* Headline KPI cut — the explainer's 28px display figures */
.t-kpi-value--lg {
    font-size: 1.75rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* -------------------------------------------------- */
/* Page hero — eyebrow + display title, as on the      */
/* design records' mastheads                           */
/* -------------------------------------------------- */
.t-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-primary-600);
    margin-bottom: 2px;
}
.dark .t-eyebrow {
    color: var(--color-primary-400);
}
.t-page-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-font-important-light);
}
.dark .t-page-title {
    color: var(--color-font-important-dark);
}
/* Muted acronym beside a page title — "Operational Throughput OTV" (#133).
   The acronym is chrome, not part of the name, so it stays mono and faint
   while the title keeps the display face. */
.t-title-tag {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-base-400);
}

/* Semantic text utilities — colours flip with .dark via the tokens */
.t-text-info {
    color: var(--t-info);
}
.t-text-warn {
    color: var(--t-warn);
}
.t-text-danger {
    color: var(--t-danger);
}
.t-text-violet {
    color: var(--t-series-violet);
}
.t-text-cyan {
    color: var(--t-series-cyan);
}

/* Figures align in columns */
table {
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------- */
/* Data-table family                                   */
/* Accent-tinted zebra + hover, per the design records.*/
/* Changelists (#result_list) get it automatically;    */
/* add .t-table to custom report/pivot/drill tables.   */
/* Add .t-table--sticky when the table lives inside a  */
/* vertical scroll container and the header should pin.*/
/* -------------------------------------------------- */
/* Unfold's bundle omits .min-w-full entirely — 13 admin templates
   rely on it for full-width tables. Resurrect the utility. */
.min-w-full {
    min-width: 100%;
}

#result_list tbody tr,
.t-table tbody tr {
    transition: background-color 0.15s ease;
}
#result_list tbody tr:nth-child(even),
.t-table tbody tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--color-primary-500) 4%, transparent);
}
#result_list tbody tr:hover,
.t-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
}
.t-table--sticky thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.t-table--sticky thead th {
    background-color: var(--color-base-100);
}
.dark .t-table--sticky thead th {
    background-color: var(--color-base-800);
}

/* Grouped-table zebra — add .t-table--grouped when rows   */
/* arrive one-per-tbody (summary row + hidden drill row).  */
/* Cancels the per-row zebra and stripes alternate row     */
/* groups instead; hover still comes from .t-table.        */
.t-table--grouped tbody tr:nth-child(even) {
    background-color: transparent;
}
.t-table--grouped tbody:nth-of-type(even) > tr:first-child {
    background-color: color-mix(in srgb, var(--color-primary-500) 4%, transparent);
}

/* Row states — declared after the zebra rules (plain and  */
/* grouped) so they win the tie against the wash.          */
#result_list tbody tr.t-row-danger,
.t-table tbody tr.t-row-danger {
    background-color: color-mix(in srgb, var(--t-danger) 12%, transparent);
}
#result_list tbody tr.t-row-danger:hover,
.t-table tbody tr.t-row-danger:hover {
    background-color: color-mix(in srgb, var(--t-danger) 18%, transparent);
}
#result_list tbody tr.t-row-selected,
.t-table tbody tr.t-row-selected {
    background-color: color-mix(in srgb, var(--color-primary-500) 14%, transparent);
}
#result_list tbody tr.t-row-selected:hover,
.t-table tbody tr.t-row-selected:hover {
    background-color: color-mix(in srgb, var(--color-primary-500) 18%, transparent);
}

/* -------------------------------------------------- */
/* Action bars — quiet emphasis                        */
/* Unfold renders ActionVariant.PRIMARY/DANGER etc. as */
/* solid-filled buttons; with several actions on a     */
/* record the bar shouts. Restyle the variant classes  */
/* (which land on the action <li>) as tinted ghost     */
/* buttons: wash background, hairline hue border, hue  */
/* text. Colours flip with the tokens/vars.            */
/* -------------------------------------------------- */
li.bg-primary-600 {
    background-color: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-primary-500) 45%, transparent);
    color: var(--color-primary-700);
}
li.bg-primary-600:hover {
    background-color: color-mix(in srgb, var(--color-primary-500) 22%, transparent);
}
.dark li.bg-primary-600 {
    color: var(--color-primary-400);
    border-color: color-mix(in srgb, var(--color-primary-400) 45%, transparent);
}

li.bg-red-600 {
    background-color: color-mix(in srgb, var(--t-danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--t-danger) 45%, transparent);
    color: var(--t-danger);
}
li.bg-red-600:hover {
    background-color: color-mix(in srgb, var(--t-danger) 20%, transparent);
}

li.bg-green-600 {
    background-color: color-mix(in srgb, var(--color-green-600, #00a544) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-green-600, #00a544) 45%, transparent);
    color: var(--color-green-600, #00a544);
}
li.bg-blue-600 {
    background-color: color-mix(in srgb, var(--t-info) 10%, transparent);
    border-color: color-mix(in srgb, var(--t-info) 45%, transparent);
    color: var(--t-info);
}
li.bg-orange-600 {
    background-color: color-mix(in srgb, var(--t-warn) 10%, transparent);
    border-color: color-mix(in srgb, var(--t-warn) 45%, transparent);
    color: var(--t-warn);
}

/* -------------------------------------------------- */
/* Status pill typography                              */
/* Add .t-pill alongside the sanctioned RAG colour     */
/* combos — mono face, tightened metrics. Colours stay */
/* on the bundled utility classes.                     */
/* -------------------------------------------------- */
.t-pill {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* -------------------------------------------------- */
/* Entrance motion                                     */
/* .t-anim on cards/tiles; stagger with --i (0,1,2…).  */
/* -------------------------------------------------- */
@keyframes t-fade-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.t-anim {
    animation: t-fade-up 0.4s ease-out both;
    animation-delay: calc(var(--i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
    .t-anim {
        animation: none;
    }
}

/* Card elevation — explainer KPI-card shadow */
.t-card-elevated {
    box-shadow: 0 1px 3px rgba(13, 27, 42, 0.08);
}
.dark .t-card-elevated {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

/* shrink any logo using Tailwind's h-[38px] height */
.h-\[38px\] {
    height: 30px !important;
    /* pick 22–28px to taste */
}

/* -------------------------------------------------- */
/* Action-page form container                          */
/* Wrap bespoke action-page forms in .t-action-form    */
/* and the inputs/selects/textareas theme themselves   */
/* from the base tokens in both modes.                 */
/* -------------------------------------------------- */
.t-action-form input[type="text"],
.t-action-form input[type="number"],
.t-action-form input[type="date"],
.t-action-form input[type="email"],
.t-action-form select,
.t-action-form textarea {
    background-color: var(--color-base-50);
    border: 1px solid var(--color-base-300);
    color: var(--color-font-important-light);
    border-radius: var(--border-radius, 0.375rem);
    padding: 0.5rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.t-action-form input[type="text"]:focus,
.t-action-form input[type="number"]:focus,
.t-action-form input[type="date"]:focus,
.t-action-form input[type="email"]:focus,
.t-action-form select:focus,
.t-action-form textarea:focus {
    outline: none;
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-600), 0.15);
}
.t-action-form ::placeholder {
    color: var(--color-base-400);
}

.dark .t-action-form input[type="text"],
.dark .t-action-form input[type="number"],
.dark .t-action-form input[type="date"],
.dark .t-action-form input[type="email"],
.dark .t-action-form select,
.dark .t-action-form textarea {
    background-color: var(--color-base-900);
    border-color: var(--color-base-700);
    color: var(--color-font-important-dark);
}
.dark .t-action-form input[type="text"]:focus,
.dark .t-action-form input[type="number"]:focus,
.dark .t-action-form input[type="date"]:focus,
.dark .t-action-form input[type="email"]:focus,
.dark .t-action-form select:focus,
.dark .t-action-form textarea:focus {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-400), 0.2);
}
.dark .t-action-form ::placeholder {
    color: var(--color-base-500);
}

/* -------------------------------------------------- */
/* Action-page buttons                                 */
/* -------------------------------------------------- */
.t-btn-primary,
.t-btn-danger,
.t-btn-neutral {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius, 0.375rem);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
        color 0.15s ease;
}
.t-btn-primary:focus-visible,
.t-btn-danger:focus-visible,
.t-btn-neutral:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-600), 0.25);
}
.dark .t-btn-primary:focus-visible,
.dark .t-btn-danger:focus-visible,
.dark .t-btn-neutral:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-400), 0.3);
}
.t-btn-primary:disabled,
.t-btn-danger:disabled,
.t-btn-neutral:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.t-btn-primary {
    background-color: var(--color-primary-600);
    color: #ffffff;
}
.t-btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-700);
}
.dark .t-btn-primary {
    background-color: var(--color-primary-600);
    color: #ffffff;
}
.dark .t-btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-700);
}

.t-btn-danger {
    background-color: var(--t-danger);
    color: #ffffff;
}
.t-btn-danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--t-danger) 85%, #000);
}
.dark .t-btn-danger {
    background-color: var(--t-danger);
    color: var(--color-base-950);
}
.dark .t-btn-danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--t-danger) 88%, #000);
}

.t-btn-neutral {
    background-color: #ffffff;
    border-color: var(--color-base-300);
    color: var(--color-base-700);
}
.t-btn-neutral:hover:not(:disabled) {
    background-color: var(--color-base-50);
}
.dark .t-btn-neutral {
    background-color: var(--color-base-900);
    border-color: var(--color-base-700);
    color: var(--color-base-200);
}
.dark .t-btn-neutral:hover:not(:disabled) {
    background-color: var(--color-base-800);
}

/* -------------------------------------------------- */
/* Exception banner — light & dark mode                */
/* Colours drawn from the --t-warn / --t-info families */
/* -------------------------------------------------- */
.exceptions-banner--excluded {
    background: var(--t-warn-dim);
    border-color: var(--t-warn);
    color: var(--t-warn);
}
.exceptions-banner--excluded .exceptions-banner__icon {
    color: var(--t-warn);
}
.exceptions-banner--excluded .exceptions-banner__btn {
    border-color: var(--t-warn);
}
.exceptions-banner--excluded .exceptions-banner__btn:hover {
    background: color-mix(in srgb, var(--t-warn) 20%, transparent);
}

.exceptions-banner--included {
    background: var(--t-info-dim);
    border-color: var(--t-info);
    color: var(--t-info);
}
.exceptions-banner--included .exceptions-banner__icon {
    color: var(--t-info);
}
.exceptions-banner--included .exceptions-banner__btn {
    border-color: var(--t-info);
}
.exceptions-banner--included .exceptions-banner__btn:hover {
    background: color-mix(in srgb, var(--t-info) 20%, transparent);
}

/* Dark mode (Unfold uses .dark class on html) — the --t-* tokens
   flip automatically; explicit rules kept for the btn text colour */
.dark .exceptions-banner--excluded {
    background: var(--t-warn-dim);
    border-color: var(--t-warn);
    color: var(--t-warn);
}
.dark .exceptions-banner--excluded .exceptions-banner__icon {
    color: var(--t-warn);
}
.dark .exceptions-banner--excluded .exceptions-banner__btn {
    border-color: var(--t-warn);
    color: var(--t-warn);
}
.dark .exceptions-banner--excluded .exceptions-banner__btn:hover {
    background: color-mix(in srgb, var(--t-warn) 20%, transparent);
}

.dark .exceptions-banner--included {
    background: var(--t-info-dim);
    border-color: var(--t-info);
    color: var(--t-info);
}
.dark .exceptions-banner--included .exceptions-banner__icon {
    color: var(--t-info);
}
.dark .exceptions-banner--included .exceptions-banner__btn {
    border-color: var(--t-info);
    color: var(--t-info);
}
.dark .exceptions-banner--included .exceptions-banner__btn:hover {
    background: color-mix(in srgb, var(--t-info) 20%, transparent);
}

/* Exceptions included chip */
.exceptions-chip {
    background: var(--t-info-dim);
    border-color: var(--t-info);
    color: var(--t-info);
}
.dark .exceptions-chip {
    background: var(--t-info-dim);
    border-color: var(--t-info);
    color: var(--t-info);
}

/* Exception banner pagination buttons */
.exceptions-banner .exceptions-pager-btn {
    border-color: currentColor;
    opacity: 0.6;
}
.exceptions-banner .exceptions-pager-btn:hover:not(:disabled) {
    opacity: 1;
}
.exceptions-banner .exceptions-pager-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}