/* 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).
 * Nunito Sans is self-hosted: no Google Fonts requests.
 */

@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;

    /* 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 */
    --tint-secondary-color: #E3E4EE;
    --danger-color: #D32F2F;
    --highlight-color: var(--brand-amber);
    --neutral-color: #F0F1F6;

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

    /*
     * Tailwind v4 reads every colour from these variables, so redefining the
     * slate and gray scales repaints ~500 utility classes across the app in
     * one place. Purple-tinted, built off Dark Purple.
     */
    --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;
}

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

body {
    font-weight: 400;
    color: #CBCDE0;
    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 highlight line beneath */
.nav-header {
    background-color: var(--primary-color);
    border-bottom: 2px solid var(--brand-pink);
    width: 100%;
    margin: 0;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 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;
}

/* Tables: Blue header, condensed cells with tabular figures */
.q-table__card {
    background: transparent !important;
    box-shadow: 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;
}

.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: #2B2759;
}

.q-table tbody td {
    color: #E3E4EE;
    font-size: 0.9rem;
    font-stretch: 87.5%;
    font-variant-numeric: tabular-nums;
    /* No padding here: Quasar's own (and `dense`) applies. A fixed 12px 16px
       overrode dense tables and pushed /activity past its card. */
}

.q-table__bottom {
    background-color: transparent;
    color: #CBCDE0;
}

.q-field--dark .q-field__label {
    color: #CBCDE0 !important;
}

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

/* Pink carries Dark Purple text, never white. This reaches plain surfaces
   only: on a q-btn Quasar's layered !important text-white wins, so Pink
   buttons need the prop text-color=dark. */
.bg-secondary {
    color: var(--brand-dark-purple) !important;
}