/* Back-office console, matte theme. Loaded by templates/base_app.html after tailwind.css.
   1. Tokens (light, then .dark)   2. Console components (c-*)   3. Remaps of the Tailwind utility
   classes the console pages already use, so every page picks up the theme without markup changes.
   Accents mirror public/assets/css/investor.css: one muted accent per card, a lighter step in dark. */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
    --c-bg: #fbfaf6;  /* soft warm ivory; cards stay white on it */
    --c-surface: #ffffff;
    --c-surface-2: #f8fafc;
    --c-surface-3: #eef0f5;
    --c-line: #e5e7ef;
    --c-line-strong: #d5d9e3;
    --c-ink: #0f172a;
    --c-ink-2: #334155;
    --c-ink-3: #5b6578;
    --c-brand: #4e5893;
    --c-brand-hover: #434c80;
    --c-brand-ink: #444d84;
    --c-brand-soft: #eef0f6;
    --c-on-brand: #ffffff;
    --c-ring: rgba(78, 88, 147, 0.3);
    --c-good: #047857;
    --c-good-soft: #ecfdf5;
    --c-warn: #8a5a12;
    --c-warn-soft: #fbf3e4;
    --c-bad: #b42318;
    --c-bad-soft: #fef3f2;
    --c-skel-a: #e9ecf2;
    --c-skel-b: #f3f5f8;
    /* Matte accents */
    --c-acc-sage: #3f6f5a;
    --c-acc-terracotta: #a0573a;
    --c-acc-indigo: #4e5893;
    --c-acc-rose: #94506b;
    --c-acc-slate: #55606f;
    --c-acc-steel: #3d6987;
    --c-acc-plum: #6c5a88;
    --c-acc-ochre: #85692e;
    --c-acc-brick: #9e4540;
    --c-acc-grey: #a3abb7;
    --c-acc-grey-2: #c3c9d2;
    /* Terminal states */
    --c-seg-deployed: #6f9e88;
    --c-seg-maintenance: #c39a52;
    --c-seg-available: #a3abb7;
    --c-seg-other: #cdd2da;
    --c-radius: 1.25rem;
    --c-radius-sm: 0.75rem;
    --c-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dark {
    --c-bg: #0a0f1e;
    --c-surface: #10172a;
    --c-surface-2: #0d1426;
    --c-surface-3: #18213a;
    --c-line: #1f2a44;
    --c-line-strong: #2a3756;
    --c-ink: #f1f5f9;
    --c-ink-2: #cbd5e1;
    --c-ink-3: #9aa6bb;
    --c-brand: #5b66a3;
    --c-brand-hover: #67729f;
    --c-brand-ink: #aab3e2;
    --c-brand-soft: rgba(91, 102, 163, 0.16);
    --c-ring: rgba(170, 179, 226, 0.4);
    --c-good: #4ade80;
    --c-good-soft: rgba(34, 197, 94, 0.14);
    --c-warn: #e2bd7a;
    --c-warn-soft: rgba(194, 154, 82, 0.14);
    --c-bad: #f87171;
    --c-bad-soft: rgba(248, 113, 113, 0.14);
    --c-skel-a: #10172a;
    --c-skel-b: #18213a;
    --c-acc-sage: #93c3ab;
    --c-acc-terracotta: #dea183;
    --c-acc-indigo: #aab3e2;
    --c-acc-rose: #d9a0b6;
    --c-acc-slate: #a7b0bd;
    --c-acc-steel: #93b8d2;
    --c-acc-plum: #bfb0da;
    --c-acc-ochre: #d8bf86;
    --c-acc-brick: #e3958e;
    --c-acc-grey: #5d6675;
    --c-acc-grey-2: #47505e;
    --c-seg-deployed: #5f8a76;
    --c-seg-maintenance: #a8853f;
    --c-seg-available: #5d6675;
    --c-seg-other: #3a4354;
    --c-shadow: none;
}

/* ── 2. Components ───────────────────────────────────────────────────────── */
.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-page-title { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-ink); }
.c-page-sub { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--c-ink-3); }
.c-page-sub strong { color: var(--c-ink-2); font-weight: 700; }

.c-panel {
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
}

/* Fields, chips and buttons */
.c-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.c-field-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.c-input {
    height: 2.5rem; padding: 0 0.75rem; border-radius: var(--c-radius-sm); font: inherit; font-size: 0.875rem;
    color: var(--c-ink) !important; background: var(--c-surface) !important; border: 1px solid var(--c-line-strong) !important;
    color-scheme: light;
}
.dark .c-input { color-scheme: dark; }
.c-input:focus { outline: none; border-color: var(--c-brand) !important; box-shadow: 0 0 0 3px var(--c-ring); }
.c-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.c-chip {
    height: 2.125rem; padding: 0 0.875rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
    color: var(--c-ink-2); background: var(--c-surface-2); border: 1px solid var(--c-line);
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.c-chip:hover { border-color: var(--c-line-strong); color: var(--c-ink); }
.c-chip.is-active { color: var(--c-on-brand); background: var(--c-brand); border-color: var(--c-brand); }
.c-chip:focus-visible, .c-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-ring); }
.c-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1.125rem;
    border-radius: var(--c-radius-sm); font-size: 0.8125rem; font-weight: 700; cursor: pointer; text-decoration: none;
    border: 1px solid transparent; transition: background-color 150ms ease, border-color 150ms ease;
}
.c-btn-primary { color: var(--c-on-brand); background: var(--c-brand); }
.c-btn-primary:hover { background: var(--c-brand-hover); }
.c-btn-ghost { color: var(--c-ink-2); background: transparent; border-color: var(--c-line-strong); }
.c-btn-ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }

/* Alerts */
.c-alert {
    display: flex; align-items: center; gap: 0.625rem; margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-radius: 1rem;
    font-size: 0.8125rem; font-weight: 600; border: 1px solid transparent;
}
.c-alert-error { color: var(--c-bad); background: var(--c-bad-soft); border-color: color-mix(in srgb, var(--c-bad) 25%, transparent); }
.c-alert-warn { color: var(--c-warn); background: var(--c-warn-soft); border-color: color-mix(in srgb, var(--c-warn) 25%, transparent); }
.c-alert-success { color: var(--c-good); background: var(--c-good-soft); border-color: color-mix(in srgb, var(--c-good) 25%, transparent); }
.c-alert-info { color: var(--c-ink-2); background: var(--c-surface-2); border-color: var(--c-line); }

/* Loading pill and skeletons */
.c-loading {
    display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: fit-content; min-width: 16rem;
    margin: 0.25rem auto 1.25rem; padding: 0.625rem 1.25rem; border-radius: 9999px;
    border: 1px solid var(--c-line); background: var(--c-surface); box-shadow: var(--c-shadow);
    font-size: 0.9375rem; font-weight: 700; color: var(--c-ink);
}
.c-loading svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--c-brand-ink); animation: c-spin 0.9s linear infinite; }
.c-loading-text { display: inline-block; min-width: 13ch; text-align: center; transition: opacity 220ms ease, transform 220ms ease; }
.c-loading-text.is-leaving { opacity: 0; transform: translateY(-4px); }
.c-skel {
    border-radius: var(--c-radius); background: linear-gradient(90deg, var(--c-skel-a) 0%, var(--c-skel-b) 50%, var(--c-skel-a) 100%);
    background-size: 200% 100%; animation: c-shimmer 1.4s linear infinite;
}
.c-skel-title { width: 10rem; height: 1.25rem; margin-bottom: 0.875rem; border-radius: 0.5rem; }
.c-skel-card { min-height: 8.5rem; }
.c-skel-chart { min-height: 18rem; }

/* KPI cards: one accent (--acc) drives the wash, border, icon tile and the figure. */
.c-acc-sage { --acc: var(--c-acc-sage); }
.c-acc-terracotta { --acc: var(--c-acc-terracotta); }
.c-acc-indigo { --acc: var(--c-acc-indigo); }
.c-acc-rose { --acc: var(--c-acc-rose); }
.c-acc-slate { --acc: var(--c-acc-slate); }
.c-acc-steel { --acc: var(--c-acc-steel); }
.c-acc-plum { --acc: var(--c-acc-plum); }
.c-acc-ochre { --acc: var(--c-acc-ochre); }
.c-acc-brick { --acc: var(--c-acc-brick); }
.c-kpi-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .c-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .c-kpi-grid { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); } }
/* --cols is set by the template: the card count up to 4, else 3 (five or six cards make two rows). */
@media (min-width: 1360px) { .c-kpi-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
:where(.c-kpi) { --acc: var(--c-acc-slate); }
.c-kpi {
    position: relative; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem;
    padding: 1.125rem 1.125rem 1rem; border-radius: var(--c-radius); color: var(--c-ink);
    background: color-mix(in srgb, var(--acc) 6%, var(--c-surface));
    border: 1px solid color-mix(in srgb, var(--acc) 16%, var(--c-line));
    box-shadow: var(--c-shadow);
    animation: c-rise 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.dark .c-kpi { background: color-mix(in srgb, var(--acc) 7%, var(--c-surface)); }
.c-kpi:nth-child(2) { animation-delay: 60ms; }
.c-kpi:nth-child(3) { animation-delay: 120ms; }
.c-kpi:nth-child(4) { animation-delay: 180ms; }
.c-kpi:nth-child(5) { animation-delay: 240ms; }
.c-kpi:nth-child(6) { animation-delay: 300ms; }
.c-kpi:nth-child(n+7) { animation-delay: 360ms; }
.c-kpi-head { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.c-kpi-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 0.625rem;
    color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent);
}
.c-kpi-icon svg { width: 1rem; height: 1rem; }
.c-kpi-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-kpi-value { margin: 0.125rem 0 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.25rem; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.c-kpi-currency { align-self: flex-start; margin-top: 0.25rem; margin-right: 0.125rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--c-ink-3); }
.c-kpi-num { font-size: clamp(1.5rem, 2.1vw, 1.875rem); font-weight: 800; letter-spacing: -0.03em; color: var(--acc); }
.c-kpi-none { color: var(--c-ink-3); }
.c-kpi-cents, .c-kpi-of { font-weight: 700; color: var(--c-ink-3); }
.c-kpi-cents { font-size: 0.9375rem; }
.c-kpi-of { font-size: 1rem; }
.c-kpi-note { margin: auto 0 0; padding-top: 0.5rem; border-top: 1px solid color-mix(in srgb, var(--acc) 14%, var(--c-line)); font-size: 11px; font-weight: 500; color: var(--c-ink-3); }
.c-segments { display: flex; gap: 2px; height: 0.5rem; border-radius: 9999px; overflow: hidden; background: color-mix(in srgb, var(--acc) 12%, var(--c-line)); }
.c-seg { height: 100%; min-width: 0; transform-origin: left; animation: c-grow 900ms 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.c-seg[hidden] { display: none; }
.c-seg-active { background: var(--acc); }
.c-seg-deployed { background: var(--c-seg-deployed); }
.c-seg-maintenance { background: var(--c-seg-maintenance); }
.c-seg-available { background: var(--c-seg-available); }
.c-seg-other { background: var(--c-seg-other); }
.c-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 0.75rem; margin: 0.125rem 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--c-ink-2); }
.c-legend li { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.c-legend i { width: 0.5rem; height: 0.5rem; border-radius: 2px; flex: none; }
.c-legend b { margin-left: auto; font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }

@keyframes c-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes c-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes c-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes c-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .c-kpi, .c-seg, .c-skel, .c-loading svg { animation: none !important; }
    .c-loading-text, .c-chip, .c-btn { transition: none; }
}

/* ── 3. Theme layer over the console's Tailwind markup ───────────────────── */
/* Scoped under body.c-console (templates/base_app.html). Each rule maps a utility the pages already
   use onto a token, so light and dark both follow the matte palette with no markup changes.
   Selectors are ".c-console .x" (0,2,0) so they win over the prebuilt utilities (0,1,0) and their
   "dark:" variants (0,2,0, earlier in the cascade). */

body.c-console { background-color: var(--c-bg) !important; color: var(--c-ink-2) !important; }
.c-console { font-feature-settings: "cv11"; }
:where(.c-console) :where(*, ::before, ::after) { border-color: var(--c-line); }  /* zero specificity: utilities still win */

/* Surfaces */
.c-console .bg-white, .c-console .bg-white\/95, .c-console .bg-white\/90, .c-console .bg-white\/80,
.dark .c-console .dark\:bg-slate-950, .dark .c-console .dark\:bg-slate-950\/95 { background-color: var(--c-surface); }
.c-console .bg-slate-50, .c-console .bg-slate-50\/20, .c-console .bg-slate-50\/30, .c-console .bg-slate-50\/40,
.c-console .bg-slate-50\/50, .c-console .bg-slate-50\/60, .c-console .bg-stone-50, .c-console .bg-gray-50,
.dark .c-console .dark\:bg-slate-900 { background-color: var(--c-surface-2); }
.c-console .bg-slate-100, .c-console .bg-slate-100\/50, .c-console .bg-stone-100, .c-console .bg-slate-200 { background-color: var(--c-surface-3); }
.c-console .hover\:bg-slate-50:hover, .c-console .hover\:bg-slate-50\/40:hover, .c-console .hover\:bg-slate-50\/50:hover,
.c-console .hover\:bg-stone-50:hover, .dark .c-console .dark\:hover\:bg-slate-900\/50:hover { background-color: var(--c-surface-2); }
.c-console .hover\:bg-slate-100:hover, .c-console .hover\:bg-slate-200:hover, .c-console .hover\:bg-stone-100:hover,
.dark .c-console .dark\:hover\:bg-slate-900:hover, .dark .c-console .dark\:hover\:bg-slate-800:hover { background-color: var(--c-surface-3); }

/* Hairlines */
.c-console .border-slate-50, .c-console .border-slate-100, .c-console .border-slate-150, .c-console .border-slate-200,
.c-console .border-stone-100, .c-console .border-stone-200, .c-console .border-gray-200,
.dark .c-console .dark\:border-slate-800, .dark .c-console .dark\:border-slate-700 { border-color: var(--c-line); }
.c-console .border-slate-300, .c-console .border-stone-300 { border-color: var(--c-line-strong); }
.c-console .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
.c-console .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.c-console .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-line); }

/* Ink */
.c-console .text-stone-900, .c-console .text-slate-900, .c-console .text-stone-800, .c-console .text-slate-800,
.c-console .hover\:text-stone-900:hover, .c-console .hover\:text-stone-800:hover { color: var(--c-ink); }
.c-console .text-slate-600, .c-console .text-slate-700, .c-console .text-stone-600, .c-console .text-stone-700,
.c-console .hover\:text-slate-700:hover, .c-console .hover\:text-stone-700:hover,
.dark .c-console .dark\:text-slate-300, .dark .c-console .dark\:text-slate-200 { color: var(--c-ink-2); }
.c-console .text-slate-300, .c-console .text-slate-400, .c-console .text-slate-500, .c-console .text-stone-400,
.c-console .text-stone-500, .c-console .text-gray-400, .c-console .text-gray-500,
.dark .c-console .dark\:text-slate-400, .dark .c-console .dark\:text-slate-500 { color: var(--c-ink-3); }
.c-console ::placeholder { color: var(--c-ink-3); opacity: 0.65; }

/* Brand: primary actions, the selected nav item, avatar tiles */
.c-console .bg-stone-900, .c-console .bg-stone-800, .c-console .bg-indigo-600 { background-color: var(--c-brand); }
.c-console .hover\:bg-stone-700:hover, .c-console .hover\:bg-stone-800:hover, .c-console .hover\:bg-stone-850:hover,
.c-console .hover\:bg-indigo-700:hover { background-color: var(--c-brand-hover); }
.c-console .bg-stone-900 .text-stone-50, .c-console .bg-stone-900.text-stone-50 { color: var(--c-on-brand); }
.c-console .text-indigo-600, .c-console .text-indigo-700, .c-console .hover\:text-indigo-500:hover { color: var(--c-brand-ink); }
.c-console .border-indigo-600, .c-console .border-stone-900 { border-color: var(--c-brand); }
.c-console .shadow-stone-900\/20, .c-console .shadow-slate-100\/50 { --tw-shadow-color: transparent; }

/* Status tints (pills, badges, inline notes): matte accents, a soft wash, a hairline.
   Solid fills (bg-*-500/600) carry white text, so they keep the light-mode accent step in both themes. */
.c-console .bg-emerald-50, .c-console .bg-green-50, .c-console .bg-green-100, .c-console .bg-emerald-100 { background-color: color-mix(in srgb, var(--c-acc-sage) 12%, var(--c-surface)); }
.c-console .text-emerald-600, .c-console .text-emerald-700, .c-console .text-emerald-800, .c-console .text-green-700, .c-console .text-green-800 { color: var(--c-acc-sage); }
.c-console .border-emerald-100, .c-console .border-emerald-100\/50, .c-console .border-emerald-200, .c-console .border-green-200 { border-color: color-mix(in srgb, var(--c-acc-sage) 28%, var(--c-line)); }
.c-console .bg-emerald-500, .c-console .bg-emerald-600, .c-console .bg-green-500 { background-color: #3f6f5a; }
.c-console .bg-amber-50, .c-console .bg-amber-100, .c-console .bg-yellow-50 { background-color: color-mix(in srgb, var(--c-acc-ochre) 13%, var(--c-surface)); }
.c-console .text-amber-600, .c-console .text-amber-700, .c-console .text-amber-800, .c-console .text-yellow-700 { color: var(--c-acc-ochre); }
.c-console .border-amber-100, .c-console .border-amber-100\/50, .c-console .border-amber-200 { border-color: color-mix(in srgb, var(--c-acc-ochre) 30%, var(--c-line)); }
.c-console .bg-amber-500, .c-console .bg-amber-400, .c-console .bg-amber-600 { background-color: #85692e; }
.c-console .bg-red-50, .c-console .bg-red-100, .c-console .bg-rose-50, .c-console .bg-rose-100,
.c-console .hover\:bg-red-50:hover { background-color: color-mix(in srgb, var(--c-acc-brick) 11%, var(--c-surface)); }
.c-console .text-red-500, .c-console .text-red-600, .c-console .text-red-700, .c-console .text-red-800,
.c-console .text-rose-600, .c-console .text-rose-700 { color: var(--c-acc-brick); }
.c-console .border-red-100, .c-console .border-red-200, .c-console .border-rose-200 { border-color: color-mix(in srgb, var(--c-acc-brick) 30%, var(--c-line)); }
.c-console .bg-red-500, .c-console .bg-red-600, .c-console .bg-rose-500 { background-color: #9e4540; }
.c-console .bg-rose-600 { background-color: #94506b; }
.c-console .bg-blue-50, .c-console .bg-sky-50, .c-console .bg-blue-100 { background-color: color-mix(in srgb, var(--c-acc-steel) 12%, var(--c-surface)); }
.c-console .text-blue-600, .c-console .text-blue-700, .c-console .text-blue-750, .c-console .text-sky-700 { color: var(--c-acc-steel); }
.c-console .border-blue-200 { border-color: color-mix(in srgb, var(--c-acc-steel) 28%, var(--c-line)); }
.c-console .bg-blue-500, .c-console .bg-blue-600 { background-color: #3d6987; }
.c-console .bg-violet-500, .c-console .bg-violet-600 { background-color: #6c5a88; }
.c-console .bg-violet-50, .c-console .bg-violet-100, .c-console .bg-purple-50 { background-color: color-mix(in srgb, var(--c-acc-plum) 12%, var(--c-surface)); }
.c-console .text-violet-600, .c-console .text-violet-700, .c-console .text-purple-700 { color: var(--c-acc-plum); }
.c-console .bg-indigo-50 { background-color: var(--c-brand-soft); }
.c-console .bg-slate-400 { background-color: var(--c-acc-grey); }

/* Shadows: matte, hairline-led */
.c-console .shadow-sm, .c-console .shadow { box-shadow: var(--c-shadow); }
.dark .c-console .shadow-lg, .dark .c-console .shadow-2xl, .dark .c-console .shadow-md { box-shadow: 0 0 0 1px var(--c-line), 0 18px 40px -20px rgba(0, 0, 0, 0.8); }

/* Focus: the brand ring everywhere */
.c-console .focus\:border-stone-400:focus, .c-console .focus\:border-indigo-500:focus { border-color: var(--c-brand); }
.c-console .focus\:ring-stone-300:focus, .c-console .focus\:ring-indigo-500:focus, .c-console .focus\:ring-stone-900:focus { --tw-ring-color: var(--c-ring); }
.c-console .focus\:bg-white:focus { background-color: var(--c-surface); }

/* Form fields (outside the form kit, which styles its own) */
.c-console input:where([type="text"], [type="search"], [type="date"], [type="datetime-local"], [type="number"],
                       [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])),
.c-console select, .c-console textarea {
    color: var(--c-ink);
    border-color: var(--c-line-strong);
}
.c-console input:where([type="checkbox"], [type="radio"]) { accent-color: var(--c-brand); }
.dark .c-console :where(input, select, textarea) { color-scheme: dark; }
.c-console :where(input, select, textarea):focus-visible { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-ring); }

/* Tables: quiet header, hairline rows, tabular figures */
.c-console table { font-variant-numeric: tabular-nums; }
.c-console :where(thead th) { color: var(--c-ink-3); }
.c-console tbody tr:hover > td { background-color: color-mix(in srgb, var(--c-brand) 3%, var(--c-surface)); }
.c-console :where(td, th) { border-color: var(--c-line); }

/* Dialogs */
.c-console dialog { background-color: var(--c-surface); color: var(--c-ink-2); border-color: var(--c-line); }
.c-console dialog::backdrop { background: rgba(10, 15, 30, 0.5); }

/* Shell: floating sidebar and header */
.c-console #sidebar-menu { background-color: var(--c-surface); border-color: var(--c-line); }
@media (min-width: 768px) {
    .c-console #sidebar-menu { border: 1px solid var(--c-line); box-shadow: var(--c-shadow); }
}
.c-console #sidebar-menu .nav-link { color: var(--c-ink-2); }
.c-console #sidebar-menu .nav-link:hover { background-color: var(--c-surface-3); color: var(--c-ink); }
.c-console #sidebar-menu .nav-link.bg-stone-900 { background-color: var(--c-brand); color: var(--c-on-brand); box-shadow: none; }
.c-console #sidebar-menu .menu-category { color: var(--c-ink-3); }
.c-console #sidebar-menu .user-card { background-color: var(--c-surface-2); }
.c-console #desktop-header, .c-console #mobile-header { border-color: var(--c-line); }
.c-console #desktop-sidebar-toggle { background-color: var(--c-surface); border-color: var(--c-line); color: var(--c-ink-3); }

/* Pills that pages draw with rounded-full + a tint: keep their text bold and tabular */
.c-console .rounded-full.text-\[10px\], .c-console .rounded-full.text-\[11px\] { font-variant-numeric: tabular-nums; }

/* Summary count cards (dashboard/_count_cards.html) */
.c-count-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .c-count-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .c-count-grid { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.c-kpi.c-kpi-sm { gap: 0.25rem; padding: 0.75rem 0.875rem; border-radius: 1rem; }
.c-kpi-sm .c-kpi-label { font-size: 10px; white-space: normal; }
.c-kpi-sm .c-kpi-num { font-size: 1.25rem; }
.c-kpi-sm .c-kpi-cents { font-size: 0.8125rem; }
.c-kpi-sm .c-kpi-currency { font-size: 0.625rem; margin-top: 0.125rem; }
.c-kpi-sub { margin: 0; font-size: 11px; color: var(--c-ink-3); }

/* DataTables (several list pages restyle it inline with !important; these win on specificity) */
.c-console .dataTables_wrapper .dataTables_length, .c-console .dataTables_wrapper .dataTables_filter,
.c-console .dataTables_wrapper .dataTables_info { color: var(--c-ink-3) !important; }
.c-console .dataTables_wrapper .dataTables_filter input, .c-console .dataTables_wrapper .dataTables_length select {
    background-color: var(--c-surface) !important; color: var(--c-ink) !important; border-color: var(--c-line-strong) !important;
}
.c-console .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--c-surface) !important; color: var(--c-ink-2) !important; border-color: var(--c-line) !important;
}
.c-console .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--c-surface-3) !important; color: var(--c-ink) !important; }
.c-console .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.c-console .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--c-brand) !important; color: var(--c-on-brand) !important; border-color: var(--c-brand) !important;
}
.c-console .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.45; }
.c-console table.dataTable thead th, .c-console table.dataTable thead td { border-bottom-color: var(--c-line) !important; color: var(--c-ink-3); }
.c-console table.dataTable.no-footer { border-bottom-color: var(--c-line) !important; }
.c-console table.dataTable tbody tr { background-color: transparent !important; }
.c-console .dt-button { background: var(--c-surface) !important; color: var(--c-ink-2) !important; border: 1px solid var(--c-line) !important; border-radius: 0.5rem !important; }

@media (prefers-reduced-motion: reduce) {
    .c-console *, .c-console *::before, .c-console *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}

/* ── 4. Searchable selects (public/assets/js/console-select.js) ──────────── */
/* The native <select> stays in the form, visually hidden; the trigger copies its classes so it keeps
   each page's sizing, and these rules add the matte chevron, clear button and popup. */
.cs { position: relative; display: inline-block; min-width: 8rem; vertical-align: middle; }
.cs.cs-block { display: block; width: 100%; }
.cs-native { position: absolute !important; inset: auto 0 0 0; width: 100% !important; height: 1px !important; padding: 0 !important;
    margin: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.c-console .cs-trigger {
    display: flex; align-items: center; gap: 0.375rem; width: 100%; min-height: 2.25rem; text-align: left; cursor: pointer;
    color: var(--c-ink); background-color: var(--c-surface); border: 1px solid var(--c-line-strong);
    font: inherit; font-size: inherit; line-height: 1.25rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.c-console .cs-trigger.text-sm { font-size: 0.875rem; }
.c-console .cs-trigger.text-xs { font-size: 0.75rem; }
.c-console .cs-trigger.bg-slate-50 { background-color: var(--c-surface-2); }
.c-console .cs-trigger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c-brand) 35%, var(--c-line-strong)); }
.c-console .cs-trigger:focus-visible, .c-console .cs-trigger[aria-expanded="true"] {
    outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-ring);
}
.c-console .cs-trigger:disabled { cursor: not-allowed; opacity: 0.55; }
.c-console .cs-trigger.cs-invalid { border-color: var(--c-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-bad) 20%, transparent); }
.cs-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-placeholder .cs-value { color: var(--c-ink-3); }
.cs-chevron, .cs-clear { display: inline-flex; flex: none; color: var(--c-ink-3); }
.cs-chevron svg { width: 1rem; height: 1rem; transition: transform 150ms ease; }
.cs-trigger[aria-expanded="true"] .cs-chevron svg { transform: rotate(180deg); }
.cs-clear { padding: 0.125rem; border-radius: 0.375rem; cursor: pointer; }
.cs-clear[hidden] { display: none; }
.cs-clear svg { width: 0.875rem; height: 0.875rem; }
.cs-clear:hover { color: var(--c-ink); background: var(--c-surface-3); }

.cs-pop {
    position: fixed; z-index: 70; display: flex; flex-direction: column; overflow: hidden;
    border-radius: 0.875rem; background: var(--c-surface); border: 1px solid var(--c-line-strong);
    box-shadow: 0 16px 36px -14px rgba(15, 23, 42, 0.35);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.8125rem; color: var(--c-ink-2); animation: cs-in 120ms ease-out;
}
.dark .cs-pop { box-shadow: 0 0 0 1px var(--c-line), 0 18px 40px -16px rgba(0, 0, 0, 0.85); }
.cs-pop[hidden] { display: none; }
.cs-pop.is-up { animation-name: cs-in-up; }
.cs-search-row { flex: none; padding: 0.5rem; border-bottom: 1px solid var(--c-line); }
.cs-search-row[hidden] { display: none; }
.cs-pop .cs-search {
    width: 100%; height: 2.125rem; padding: 0 0.625rem; border-radius: 0.5rem; font: inherit; font-size: 0.8125rem;
    color: var(--c-ink); background: var(--c-surface-2); border: 1px solid var(--c-line); outline: none;
}
.cs-pop .cs-search:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-ring); }
.cs-list, .cs-group-list { margin: 0; padding: 0; list-style: none; }
.cs-list { flex: 1 1 auto; overflow-y: auto; padding: 0.25rem; overscroll-behavior: contain; }
.cs-list[hidden] { display: none; }
.cs-group-wrap[hidden], .cs-option[hidden] { display: none; }
.cs-group { padding: 0.5rem 0.625rem 0.25rem; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-3); }
.cs-option {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.625rem; border-radius: 0.5rem; cursor: pointer;
    color: var(--c-ink); line-height: 1.3;
}
.cs-option-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cs-option-sub { display: block; margin-top: 0.0625rem; font-size: 11px; color: var(--c-ink-3); }
.cs-tick { flex: none; display: inline-flex; color: var(--c-brand-ink); visibility: hidden; }
.cs-tick svg { width: 0.9375rem; height: 0.9375rem; }
.cs-option[aria-selected="true"] { font-weight: 700; }
.cs-option[aria-selected="true"] .cs-tick { visibility: visible; }
.cs-option.is-active { background: var(--c-brand-soft); }
.cs-option[aria-disabled="true"] { cursor: not-allowed; color: var(--c-ink-3); opacity: 0.6; }
.cs-empty { margin: 0; padding: 0.875rem 0.75rem; text-align: center; font-size: 0.8125rem; color: var(--c-ink-3); }
.cs-empty[hidden] { display: none; }
@keyframes cs-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes cs-in-up { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .cs-pop { animation: none; } .cs-chevron svg, .c-console .cs-trigger { transition: none; } }
/* Form-kit modals keep their own field look (see dashboard/_form_kit.html). */
.c-console .cs-trigger.fk-select { background-color: var(--c-surface-2); border-color: var(--c-line); border-radius: 0.6rem; font-size: 0.8rem; min-height: 2.3rem; }
.c-console .cs-trigger.fk-select[aria-expanded="true"], .c-console .cs-trigger.fk-select:focus-visible { background-color: var(--c-surface); border-color: var(--c-brand); }
.c-console .cs-trigger.c-input { min-height: 2.5rem; padding: 0 0.75rem; border-radius: var(--c-radius-sm); }

/* ── Background motifs (console-decor.js) ───────────────────────────────── */
/* Faint lottery icons on a fixed layer behind everything; content sits above it. */
#c-decor { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#c-decor svg { position: absolute; }
body.c-console #main-content-wrapper { position: relative; z-index: 1; }
@media print { #c-decor { display: none; } }

/* ── 5. Live indicators (public/assets/js/console-live.js) ───────────────── */
/* .c-live[data-state] is painted by the poller: live | updating | connecting | retrying | disconnected |
   hidden | offline | idle | off | error | stored. The pill is solid brick only while it really streams
   (live/updating), a soft brick tint when on but not yet streaming or off, ochre while retrying, the bad
   tint when disconnected, and neutral when paused or showing stored figures. */
:root { --c-live: #9e4540; --c-live-solid: #9e4540; --c-live-soft: #f6ecea; }
.dark { --c-live: #e3958e; --c-live-soft: rgba(227, 149, 142, 0.12); }
.c-live { display: inline-flex; align-items: center; gap: 0.5rem; --live-progress: 0; }
.c-live-pill {
    display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.75rem; border-radius: 9999px;
    font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
    color: var(--c-live); background: var(--c-live-soft); border: 1px solid color-mix(in srgb, var(--c-live) 22%, transparent);
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
button.c-live-pill { cursor: pointer; }
button.c-live-pill:hover:not([aria-disabled="true"]) { border-color: color-mix(in srgb, var(--c-live) 45%, transparent); }
button.c-live-pill:focus-visible, .c-live-refresh:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-live) 30%, transparent); }
.c-live-dot { position: relative; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: currentColor; }
.c-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; }
.c-live-label { min-width: 0; }
.c-live-ring { display: none; flex: none; width: 1rem; height: 1rem; margin-right: -0.25rem; transform: rotate(-90deg); }
.c-live-ring circle { fill: none; stroke: currentColor; stroke-width: 2.5; opacity: 0.28; }
.c-live-ring .c-live-ring-fill {
    opacity: 1; stroke-linecap: round; stroke-dasharray: 50.27;
    stroke-dashoffset: calc(50.27 * (1 - var(--live-progress))); transition: stroke-dashoffset 1s linear;
}
/* Streaming: solid brick, pulsing dot, countdown ring to the next update. */
.c-live:is([data-state="live"], [data-state="updating"]) .c-live-pill { color: #fff; background: var(--c-live-solid); border-color: var(--c-live-solid); }
.c-live[data-state="live"] .c-live-dot::after { animation: c-live-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
.c-live:is([data-state="live"], [data-state="retrying"], [data-state="disconnected"]) .c-live-ring { display: block; }
/* A request in flight: the ring turns into a quarter-arc spinner. */
.c-live:is([data-state="updating"], [data-state="connecting"]) .c-live-ring { display: block; animation: c-spin 0.9s linear infinite; }
.c-live:is([data-state="updating"], [data-state="connecting"]) .c-live-ring-fill { stroke-dashoffset: 37.7; transition: none; }
.c-live[data-state="retrying"] .c-live-pill { color: var(--c-warn); background: var(--c-warn-soft); border-color: color-mix(in srgb, var(--c-warn) 30%, transparent); }
.c-live[data-state="disconnected"] .c-live-pill { color: var(--c-bad); background: var(--c-bad-soft); border-color: color-mix(in srgb, var(--c-bad) 30%, transparent); }
/* Paused (hidden tab / offline) and stored figures: neutral, hollow dot, nothing moves. */
.c-live:is([data-state="hidden"], [data-state="offline"], [data-state="stored"]) .c-live-pill { color: var(--c-ink-3); background: var(--c-surface-3); border-color: var(--c-line); }
.c-live:is([data-state="hidden"], [data-state="offline"]) .c-live-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.c-live[data-state="stored"] .c-live-dot { border-radius: 2px; }
.c-live[data-state="stored"] button.c-live-pill { cursor: not-allowed; }
.c-live:is([data-state="off"], [data-state="error"], [data-state="idle"]) .c-live-dot { opacity: 0.7; }

/* Detail line ("Updated 14:02:11 · next update in 7s") and the manual refresh button. */
.c-live-meta { font-size: 11px; font-weight: 600; color: var(--c-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-live-meta[data-tone="warn"] { color: var(--c-warn); }
.c-live-meta[data-tone="bad"] { color: var(--c-bad); }
.c-live-refresh {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 9999px;
    color: var(--c-ink-3); background: transparent; border: 1px solid var(--c-line); cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.c-live-refresh:hover { color: var(--c-ink); background: var(--c-surface-3); }
.c-live-refresh svg { width: 1rem; height: 1rem; }
.c-live[data-busy="true"] .c-live-refresh svg { animation: c-spin 0.9s linear infinite; }

/* New figures: one soft sweep in the card's accent (cards whose numbers changed only). */
.c-updated::after {
    content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--acc, var(--c-brand)) 16%, transparent) 50%, transparent 65%) no-repeat;
    background-size: 250% 100%; background-position: 150% 0;
    animation: c-sheen 1.2s ease-out var(--sheen-delay, 0ms) both;
}
.c-updated { border-color: color-mix(in srgb, var(--acc, var(--c-brand)) 34%, var(--c-line)); transition: border-color 1.6s ease; }

@keyframes c-live-ping { 0% { transform: scale(1); opacity: 0.75; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes c-sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }

@media (prefers-reduced-motion: reduce) {
    .c-live-dot::after, .c-live-ring, .c-live-refresh svg, .c-updated::after { animation: none !important; }
    .c-live-ring .c-live-ring-fill, .c-live-pill { transition: none; }
}