/* Fonts must be imported before any other rule. Editorial pairing:
   Fraunces (display serif) + Inter (data/UI sans). Graceful fallback to
   Georgia/Arial if the CDN is unreachable. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

/* ── Editorial design tokens (mirror the Python constants in app.py) ── */
:root {
    --paper:        #FAF8F3;
    --paper-2:      #F3F0E8;
    --ink:          #1A1714;
    --ink-2:        #5C564E;
    --ink-3:        #6E675C;
    --rule:         #E4DECF;
    --rule-strong:  #CFC7B5;
    --navy:         #1B2A4A;
    --accent:       #8C2D2D;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans:  "Inter", Arial, Helvetica, sans-serif;
}

/* ── Global base ── */
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Tabular figures everywhere — critical for a data app (numbers align). */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

::selection { background: #E9EEF2; }
a { color: var(--accent); }

/* Slim, warm scrollbars (Chromium) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #BBB29C; }
::-webkit-scrollbar-track { background: var(--paper-2); }

/* ── Tabs ── */
.tab--selected { font-weight: bold; }
/* dcc.Tabs ships tabs as `flex: 0 1 auto`, so when the row is tight they
   SHRINK toward equal widths — which compresses long labels (🏆 Mundial 2026
   overflows its box, crowding the next divider) and leaves short labels (Help)
   centered in an oversized box. Both break the group-divider centering. Force
   each tab to size to its own content so paddings are uniform and every
   group divider lands at the true midpoint between the two labels. */
.tab-container { width: auto !important; }
.tab-container .tab { flex: 0 0 auto !important; width: auto !important; }

/* ── Segmented toggle (MTD/YTD RadioItems styled as a pill) ── */
.seg-toggle { display: inline-flex; border: 1px solid var(--rule-strong);
    border-radius: 3px; overflow: hidden; }
.seg-toggle input { display: none; }
.seg-toggle label { margin: 0 !important; padding: 6px 16px; cursor: pointer;
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--ink-3); border-right: 1px solid var(--rule-strong); }
.seg-toggle label:last-child { border-right: none; }
.seg-toggle label:has(input:checked) { background: var(--ink); color: var(--paper); }

/* Refresh button hover */
#btn-refresh:hover { opacity: 0.85; }

/* ── AgGrid: editorial header + warm rows ── */
.ag-header {
    background-color: var(--navy) !important;
    color: #ffffff !important;
}
.ag-header-cell-label {
    color: #ffffff !important;
    font-weight: bold;
}
.ag-row-even { background-color: var(--paper); }
.ag-row-odd  { background-color: #ffffff; }

/* Totals row (applied manually from Python) */
.total-row {
    font-weight: bold;
    background-color: var(--paper-2) !important;
}

/* ── Pacing Comparator date pickers ── */
/* react-dates' DateInput_input defaults to ~19px, which dwarfs the 12px
   dropdowns sitting next to it in the window rows. Match the dropdown text
   size + tighten the box so start/end align with City/Rooms. */
.DateInput_input {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    padding: 5px 8px;
    color: var(--ink);
}
.DateInput { width: 94px; }
.DateInput_input__focused { border-bottom-color: var(--accent); }