/* ──────────────────────────────────────────────────────────────────────────
   Okon.Admin — business dashboard theme.

   Self-contained: no new dependencies, layered on top of the local Bootstrap 5
   already in wwwroot/lib. Everything is a token on :root so light/dark swap in
   one place, and the chart colours below are the validated data-viz palette
   (categorical slots + the ordinal blue ramp for funnel stages + the fixed
   status four). Never restyle a status colour — it ships with an icon/label.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Surfaces & ink */
    --ok-bg: #f4f5f7;
    --ok-surface: #ffffff;
    --ok-surface-2: #f7f8fa;
    --ok-border: #e3e5e9;
    --ok-border-strong: #cfd3da;
    --ok-text: #14161a;
    --ok-text-2: #5b6069;
    --ok-text-3: #878d97;

    /* Brand — the admin's own accent, distinct from the chart series */
    --ok-brand: #1c5cab;
    --ok-brand-ink: #ffffff;
    --ok-brand-soft: #eaf1fb;

    /* Chart categorical slots (fixed order, never cycled) */
    --ok-s1: #2a78d6;
    --ok-s2: #eb6834;
    --ok-s3: #1baf7a;
    --ok-s4: #eda100;

    /* Ordinal blue ramp for funnel stages — light end stays >= 2:1 on surface */
    --ok-ord-1: #86b6ef;
    --ok-ord-2: #5598e7;
    --ok-ord-3: #2a78d6;
    --ok-ord-4: #184f95;

    /* Status — fixed, never themed, always paired with an icon or label */
    --ok-good: #0ca30c;
    --ok-warning: #fab219;
    --ok-serious: #ec835a;
    --ok-critical: #d03b3b;

    --ok-radius: 12px;
    --ok-radius-sm: 8px;
    --ok-shadow: 0 1px 2px rgba(16, 20, 28, .06), 0 2px 8px rgba(16, 20, 28, .04);
    --ok-sidebar-w: 236px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ok-bg: #121212;
        --ok-surface: #1a1a19;
        --ok-surface-2: #222221;
        --ok-border: #333331;
        --ok-border-strong: #45453f;
        --ok-text: #ffffff;
        --ok-text-2: #c3c2b7;
        --ok-text-3: #8d8d84;
        --ok-brand: #3987e5;
        --ok-brand-ink: #0b1016;
        --ok-brand-soft: #16263a;
        --ok-s1: #3987e5;
        --ok-s2: #d95926;
        --ok-s3: #199e70;
        --ok-s4: #c98500;
        --ok-ord-1: #9ec5f4;
        --ok-ord-2: #6da7ec;
        --ok-ord-3: #3987e5;
        --ok-ord-4: #256abf;
        --ok-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ok-bg: #121212;
    --ok-surface: #1a1a19;
    --ok-surface-2: #222221;
    --ok-border: #333331;
    --ok-border-strong: #45453f;
    --ok-text: #ffffff;
    --ok-text-2: #c3c2b7;
    --ok-text-3: #8d8d84;
    --ok-brand: #3987e5;
    --ok-brand-ink: #0b1016;
    --ok-brand-soft: #16263a;
    --ok-s1: #3987e5;
    --ok-s2: #d95926;
    --ok-s3: #199e70;
    --ok-s4: #c98500;
    --ok-ord-1: #9ec5f4;
    --ok-ord-2: #6da7ec;
    --ok-ord-3: #3987e5;
    --ok-ord-4: #256abf;
    --ok-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35);
}

/* ── Shell ───────────────────────────────────────────────────────────── */

body.ok-app {
    background: var(--ok-bg);
    color: var(--ok-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
}

.ok-shell { display: flex; min-height: 100vh; }

.ok-sidebar {
    width: var(--ok-sidebar-w);
    flex: 0 0 var(--ok-sidebar-w);
    background: var(--ok-surface);
    border-right: 1px solid var(--ok-border);
    padding: 14px 10px 24px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.ok-brandmark {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 10px 16px;
    font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
    color: var(--ok-text); text-decoration: none;
}
.ok-brandmark .ok-dot {
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--ok-brand); color: var(--ok-brand-ink);
    display: grid; place-items: center; font-size: .8rem; font-weight: 800;
}

.ok-navgroup {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ok-text-3); padding: 14px 12px 6px; font-weight: 600;
}
.ok-nav {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin-bottom: 1px;
    border-radius: var(--ok-radius-sm);
    color: var(--ok-text-2); text-decoration: none;
    font-size: .875rem; line-height: 1.25;
}
.ok-nav:hover { background: var(--ok-surface-2); color: var(--ok-text); }
.ok-nav.active { background: var(--ok-brand-soft); color: var(--ok-brand); font-weight: 600; }
.ok-nav .ok-ico { width: 18px; text-align: center; opacity: .9; flex: 0 0 18px; }
.ok-nav .ok-count {
    margin-left: auto; font-size: .7rem; font-weight: 700;
    background: var(--ok-surface-2); color: var(--ok-text-2);
    border-radius: 999px; padding: 1px 7px;
}
.ok-nav.active .ok-count { background: var(--ok-brand); color: var(--ok-brand-ink); }

.ok-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.ok-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    background: var(--ok-surface);
    border-bottom: 1px solid var(--ok-border);
    position: sticky; top: 0; z-index: 20;
}
.ok-topbar h1 { font-size: 1.05rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.ok-topbar .ok-sub { font-size: .78rem; color: var(--ok-text-3); }

.ok-content { padding: 20px; flex: 1 1 auto; }

.ok-iconbtn {
    background: transparent; border: 1px solid var(--ok-border);
    color: var(--ok-text-2); border-radius: var(--ok-radius-sm);
    width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
}
.ok-iconbtn:hover { background: var(--ok-surface-2); color: var(--ok-text); }

/* ── Cards ───────────────────────────────────────────────────────────── */

.ok-card {
    background: var(--ok-surface);
    border: 1px solid var(--ok-border);
    border-radius: var(--ok-radius);
    box-shadow: var(--ok-shadow);
}
.ok-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 16px; border-bottom: 1px solid var(--ok-border);
}
.ok-card-head h2 { font-size: .92rem; font-weight: 650; margin: 0; }
.ok-card-body { padding: 16px; }

/* ── Stat tiles ──────────────────────────────────────────────────────── */

.ok-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ok-tile {
    background: var(--ok-surface);
    border: 1px solid var(--ok-border);
    border-radius: var(--ok-radius);
    box-shadow: var(--ok-shadow);
    padding: 15px 16px;
    display: block; text-decoration: none; color: inherit;
}
a.ok-tile:hover { border-color: var(--ok-border-strong); }
.ok-tile .ok-label {
    font-size: .74rem; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--ok-text-3);
    display: flex; align-items: center; gap: 6px;
}
/* The hero number: one size up, tabular so columns of figures line up. */
.ok-tile .ok-value {
    font-size: 1.72rem; font-weight: 680; line-height: 1.15; margin-top: 7px;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ok-tile .ok-foot { font-size: .76rem; color: var(--ok-text-2); margin-top: 5px; }

/* Deltas and states carry an icon or word, never colour alone. */
.ok-up { color: var(--ok-good); }
.ok-down { color: var(--ok-critical); }
.ok-flat { color: var(--ok-text-3); }

/* ── Progress to target ──────────────────────────────────────────────── */

.ok-meter {
    height: 10px; border-radius: 999px; background: var(--ok-surface-2);
    overflow: hidden; margin-top: 10px; border: 1px solid var(--ok-border);
}
.ok-meter > span {
    display: block; height: 100%;
    background: var(--ok-s1);
    border-radius: 999px;
}
.ok-meter.is-good > span { background: var(--ok-good); }
.ok-meter.is-behind > span { background: var(--ok-warning); }
.ok-meter-note {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: .76rem; color: var(--ok-text-2); margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

/* ── Funnel (ordinal: one hue, monotone steps) ───────────────────────── */

.ok-funnel { display: flex; flex-direction: column; gap: 8px; }
.ok-funnel-row { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 10px; }
.ok-funnel-row .ok-stage { font-size: .82rem; color: var(--ok-text-2); }
.ok-funnel-track { background: var(--ok-surface-2); border-radius: 6px; height: 26px; overflow: hidden; }
.ok-funnel-bar {
    height: 100%;
    /* 4px rounded data-end, anchored flat to the baseline at the left */
    border-radius: 0 4px 4px 0;
    min-width: 3px;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 7px; color: #fff; font-size: .74rem; font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.ok-funnel-count { font-size: .82rem; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* ── Chase list ──────────────────────────────────────────────────────── */

.ok-chase { display: flex; flex-direction: column; }
.ok-chase-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--ok-border);
}
.ok-chase-row:last-child { border-bottom: 0; }
.ok-chase-row .ok-what { flex: 1 1 auto; min-width: 0; }
.ok-chase-row .ok-what strong { font-size: .875rem; font-weight: 600; display: block; }
.ok-chase-row .ok-what span { font-size: .78rem; color: var(--ok-text-3); }

.ok-pill {
    font-size: .7rem; font-weight: 650; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--ok-border); color: var(--ok-text-2); white-space: nowrap;
}
.ok-pill.is-critical { color: var(--ok-critical); border-color: var(--ok-critical); }
.ok-pill.is-warning  { color: #8a5d00; border-color: var(--ok-warning); background: #fff6e2; }
.ok-pill.is-good     { color: var(--ok-good); border-color: var(--ok-good); }
:root[data-theme="dark"] .ok-pill.is-warning,
:root:not([data-theme="light"]) .ok-pill.is-warning { color: var(--ok-warning); background: transparent; }

/* ── Tables ──────────────────────────────────────────────────────────── */

.ok-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ok-table th {
    text-align: left; font-weight: 600; font-size: .74rem; letter-spacing: .03em;
    text-transform: uppercase; color: var(--ok-text-3);
    padding: 8px 10px; border-bottom: 1px solid var(--ok-border); white-space: nowrap;
}
.ok-table td { padding: 10px; border-bottom: 1px solid var(--ok-border); vertical-align: middle; }
.ok-table tbody tr:last-child td { border-bottom: 0; }
.ok-table tbody tr:hover { background: var(--ok-surface-2); }
.ok-num { text-align: right; font-variant-numeric: tabular-nums; }

.ok-empty { text-align: center; color: var(--ok-text-3); padding: 28px 10px; font-size: .88rem; }

/* ── Small helpers ───────────────────────────────────────────────────── */

.ok-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.ok-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ok-stack { display: flex; flex-direction: column; gap: 14px; }
.ok-muted { color: var(--ok-text-3); }
.ok-mt { margin-top: 14px; }

/* Bootstrap lives underneath; keep its controls in step with the tokens. */
.ok-app .form-control, .ok-app .form-select {
    background: var(--ok-surface); color: var(--ok-text); border-color: var(--ok-border);
}
.ok-app .form-control:focus, .ok-app .form-select:focus {
    border-color: var(--ok-brand); box-shadow: 0 0 0 .2rem var(--ok-brand-soft);
}
.ok-app .modal-content { background: var(--ok-surface); color: var(--ok-text); }
.ok-app .btn-primary { background: var(--ok-brand); border-color: var(--ok-brand); color: var(--ok-brand-ink); }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .ok-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ok-grid-2, .ok-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .ok-sidebar {
        position: fixed; left: 0; top: 0; z-index: 60;
        transform: translateX(-100%); transition: transform .18s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    }
    .ok-shell.nav-open .ok-sidebar { transform: translateX(0); }
    .ok-shell.nav-open .ok-scrim {
        position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 50;
    }
    .ok-content { padding: 14px; }
    .ok-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ok-tile .ok-value { font-size: 1.45rem; }
}
@media (min-width: 821px) { .ok-menu-toggle { display: none; } }