/* app/static/css/infinitum-theme.css */
/*
 * Infinitum brand, dark ground. Colour values mirror theme.py, which is the
 * source for anything drawn in Python (Quasar brand colours, ECharts). Kept
 * in step with infinitum-status's stylesheet of the same name.
 * Nunito Sans is self-hosted: no Google Fonts requests.
 *
 * Until 2026-10-20 this file never reached a page (main.py lacked
 * shared=True), so every rule below went live for the first time then.
 */

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    font-stretch: 75% 125%;
    src: url('/static/fonts/nunito-sans-latin-wdth-normal.woff2') format('woff2-variations');
}

:root {
    /* Brand */
    --brand-dark-purple: #110326;
    --brand-blue: #1C1F74;
    --brand-pink: #F77385;
    --brand-teal: #0097A7;
    --brand-amber: #E8951F;
    --brand-violet: #7C6DAF;
    --brand-cool-grey: #7B8FA1;

    /* Neutrals, purple-tinted, built off Dark Purple */
    --n-950: #0B021A;
    --n-900: #110326;   /* page */
    --n-800: #1C1640;   /* cards */
    --n-700: #2B2759;   /* raised surfaces, grid lines */
    --n-600: #403D77;   /* borders */
    --n-500: #6B6994;   /* muted marks only, never text */
    --n-400: #A5A7C4;   /* secondary text */
    --n-300: #CBCDE0;   /* body text */
    --n-200: #E3E4EE;   /* strong text */

    /* Roles. The old names are kept so existing var() call sites repaint. */
    --primary-color: var(--brand-dark-purple);   /* app bar, hero surfaces */
    --secondary-color: var(--brand-pink);        /* accent */
    --tint-color: var(--brand-blue);             /* table headers, structure */
    --danger-color: #D32F2F;
    --highlight-color: var(--brand-amber);

    --font-stack: 'Nunito Sans', system-ui, sans-serif;

    /*
     * Tailwind v4 reads every colour from these variables, so redefining a
     * scale repaints its utility classes without touching the pages. Slate
     * and gray become the brand neutrals; amber (the app's warning colour —
     * unpriced, unattributable, overlap) becomes brand Amber.
     */
    --color-slate-50: #F8F8FB;   --color-gray-50: #F8F8FB;
    --color-slate-100: #F0F1F6;  --color-gray-100: #F0F1F6;
    --color-slate-200: #E3E4EE;  --color-gray-200: #E3E4EE;
    --color-slate-300: #CBCDE0;  --color-gray-300: #CBCDE0;
    --color-slate-400: #A5A7C4;  --color-gray-400: #A5A7C4;
    --color-slate-500: #6B6994;  --color-gray-500: #6B6994;
    --color-slate-600: #403D77;  --color-gray-600: #403D77;
    --color-slate-700: #2B2759;  --color-gray-700: #2B2759;
    --color-slate-800: #1C1640;  --color-gray-800: #1C1640;
    --color-slate-900: #110326;  --color-gray-900: #110326;
    --color-slate-950: #0B021A;  --color-gray-950: #0B021A;

    --color-amber-500: #E8951F;
    --color-amber-600: #E8951F;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-stack);
    box-sizing: border-box;
}

body {
    font-weight: 400;
    color: var(--n-300);
    background-color: var(--brand-dark-purple);
}

*, *::before, *::after {
    box-sizing: inherit;
}

.nicegui-content {
    padding: 0;
}

.text-secondary {
    color: var(--secondary-color);
}

/* ── App bar: Dark Purple, Pink rule beneath ───────────────────────────── */
.nav-header {
    background-color: var(--primary-color);
    border-bottom: 2px solid var(--brand-pink);
    box-shadow: none;
}

.nav-header .nav-active {
    border-bottom: 2px solid var(--brand-pink);
    border-radius: 0;
    opacity: 1;
}

.nav-section {
    color: var(--n-400);
}

/* ── Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 {
    font-family: var(--font-stack);
    font-weight: 700;
}

.text-light {
    font-weight: 300;
}

/* Money and counts line up in columns wherever they appear */
.font-mono,
.tabular {
    font-variant-numeric: tabular-nums;
}

/* ── Surfaces ──────────────────────────────────────────────────────────── */
.body--dark .q-card {
    background-color: var(--n-800);
    border: 1px solid var(--n-700);
    box-shadow: none;
}

.body--dark .q-expansion-item {
    border-color: var(--n-700) !important;
}

.body--dark .q-separator {
    background-color: var(--n-700);
}

/* ── KPI tiles (month-to-date). Brand fills; white text where it reads,
      Dark Purple where the fill is Pink. ─────────────────────────────── */
.kpi {
    color: white;
    border: none !important;
}
.kpi-money  { background: linear-gradient(135deg, #006B77, var(--brand-teal)) !important; }
.kpi-volume { background: linear-gradient(135deg, #12145A, var(--brand-blue)) !important; }
.kpi-people { background: linear-gradient(135deg, #4F4380, var(--brand-violet)) !important; }
.kpi-empty  { background: var(--n-700) !important; }

/* ── Tables: Blue header, condensed cells with tabular figures ─────────── */
.q-table__card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.q-table thead tr,
.q-table thead th {
    background-color: var(--tint-color);
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.q-table tbody tr {
    background-color: rgba(28, 22, 64, 0.6);
    transition: background-color 0.2s;
}

.q-table tbody tr:nth-child(even) {
    background-color: rgba(28, 22, 64, 0.35);
}

.q-table tbody tr:hover {
    background-color: var(--n-700);
}

.q-table tbody td {
    color: var(--n-200);
    font-size: 0.9rem;
    font-stretch: 87.5%;
    font-variant-numeric: tabular-nums;
    padding: 12px 16px;
}

.q-table__bottom {
    background-color: transparent;
    color: var(--n-300);
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.q-field--dark .q-field__label {
    color: var(--n-300) !important;
}

.q-field--dark .q-field__native,
.q-field--dark .q-field__input {
    color: white !important;
}

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-brand {
    background-color: var(--brand-dark-purple);
}

.login-panel {
    background-color: var(--n-800);
    border-left: 2px solid var(--brand-pink);
}

/* Pink carries Dark Purple text, never white. This cannot override the
   .text-white a color=secondary button carries: Quasar's !important sits in a
   cascade layer, which beats any unlayered !important regardless of
   specificity. Buttons on Pink take props("color=secondary text-color=dark"). */
.bg-secondary {
    color: var(--brand-dark-purple) !important;
}