/* =============================================================================
   Cygnet Terminal — Design System
   Bloomberg-inspired: flat, dense, amber-accented, monospace-for-data.
   Load order matters: tokens → base → components → Dash overrides → responsive.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   Single source of truth. Do not hardcode hex values outside this block.
   ----------------------------------------------------------------------------- */
:root {
    /* --- Surface elevation ladder ---
       Soft near-black base (pure #000 causes halation per Bloomberg UX team).
       Each step increases L* by ~5% so layers are discernible without heavy
       borders (Linear refresh: "structure felt not seen"). */
    --bg-0: #0a0d14;            /* page */
    --bg-1: #12172a;            /* panel */
    --bg-2: #1a2130;            /* card */
    --bg-3: #252d43;            /* elevated / hover */
    --bg-4: #2f3954;            /* input, dropdown menu */

    /* --- Borders (gridline, minimal visual weight) --- */
    --border-subtle: #1c2333;   /* nearly invisible separator */
    --border: #2a3348;          /* default card/input border */
    --border-strong: #3d4862;   /* emphasized */
    --border-amber: rgba(243, 159, 65, 0.42);

    /* --- Text hierarchy (4 tiers, all WCAG AA on --bg-0) ---
       Ratios against --bg-0:
         --text-bright : ~18:1  (AAA, emphasis / display)
         --text        : ~14:1  (AAA, body / input values)
         --text-muted  : ~7.5:1 (AAA, labels / inactive tabs)
         --text-dim    : ~4.7:1 (AA,  tertiary / helper text) */
    --text-bright: #f5f8fc;
    --text:        #dde3ed;
    --text-muted:  #a5b0c2;
    --text-dim:    #7a869b;

    /* --- Signature accent: Cygnet Sky ---
       Identity color — sky-400 evokes the Cygnet (swan) brand: clean, airy,
       precise. Desaturated enough for dark-mode comfort.
       Ratio on --bg-0: ~8.7:1 (AAA for both large and normal text). */
    --accent:         #38bdf8;
    --accent-hover:   #7dd3fc;      /* sky-300, lighter on hover */
    --accent-pressed: #0ea5e9;      /* sky-500, darker on active */
    --accent-soft:    rgba(56, 189, 248, 0.14);
    --accent-glow:    rgba(56, 189, 248, 0.36);
    --accent-on-fill: #062338;      /* dark text for amber/accent-filled bg */

    /* --- Secondary accents (used sparingly; all desaturated for dark bg) --- */
    --blue:   #60a5fa;
    --violet: #a78bfa;
    --teal:   #2dd4bf;
    --cyan:   #22d3ee;
    --pink:   #f472b6;
    --amber:  #fbbf24;              /* warn / highlight, NOT primary */

    /* --- Semantic (data-only; softer tones to reduce vibration on dark) --- */
    --pos:      #4ade80;            /* gains  — ~6.5:1 on bg-0 */
    --pos-soft: rgba(74, 222, 128, 0.14);
    --neg:      #f87171;            /* losses — ~5.8:1 on bg-0 */
    --neg-soft: rgba(248, 113, 113, 0.14);
    --warn:     #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.14);
    --info:     #60a5fa;
    --danger:   #f87171;
    --success:  #4ade80;

    /* --- Shadcn-style semantic aliases ---
       Idiomatic names so new components can follow shadcn conventions without
       rewriting the elevation ladder above. */
    --background:              var(--bg-0);
    --foreground:              var(--text);
    --card:                    var(--bg-2);
    --card-foreground:         var(--text);
    --popover:                 var(--bg-2);
    --popover-foreground:      var(--text);
    --primary:                 var(--accent);
    --primary-foreground:      var(--accent-on-fill);
    --secondary:               var(--bg-3);
    --secondary-foreground:    var(--text);
    --muted:                   var(--bg-2);
    --muted-foreground:        var(--text-muted);
    --destructive:             var(--danger);
    --destructive-foreground:  var(--text-bright);
    --input:                   var(--bg-4);
    --ring:                    var(--accent);

    /* --- Typography --- */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', 'Roboto Mono', ui-monospace, monospace;

    --fs-2xs: 10px;             /* micro labels */
    --fs-xs: 11px;              /* labels, small text */
    --fs-sm: 12px;              /* body dense */
    --fs-base: 13px;            /* default UI */
    --fs-md: 14px;              /* body */
    --fs-lg: 16px;              /* emphasis */
    --fs-xl: 20px;              /* section heading */
    --fs-2xl: 24px;             /* page heading */
    --fs-3xl: 28px;             /* hero */

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-base: 1.5;
    --lh-relaxed: 1.7;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-caps: 0.08em;    /* for UPPERCASE labels */

    /* --- Spacing (4px base) --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* --- Radii (sharper than current; Bloomberg = near-flat) --- */
    --r-none: 0;
    --r-sm: 3px;
    --r-md: 5px;
    --r-lg: 8px;
    --r-xl: 12px;               /* modals only */

    /* --- Shadows (restrained) --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-amber: 0 0 0 1px var(--accent), 0 4px 14px var(--accent-glow);

    /* --- Layout --- */
    --page-pad-x: clamp(14px, 3vw, 40px);
    --header-h: 64px;
    --tap-min: 44px;            /* mobile tap target */

    /* --- Transitions --- */
    --t-fast: 0.12s ease;
    --t-base: 0.18s ease;

    /* --- Dash 4.x built-in theme vars ---
       Dash injects these into dcc.DatePickerSingle, dcc.Dropdown, etc.
       Override them here so ALL Dash components inherit the dark theme
       without per-class !important fights. */
    --Dash-Fill-Inverse-Strong:    var(--bg-4);      /* input/card bg (was white) */
    --Dash-Fill-Interactive-Strong: var(--accent);    /* selected/active state */
    --Dash-Fill-Interactive-Weak:   var(--bg-3);      /* hover state */
    --Dash-Shading-Strong:         var(--bg-1);      /* deepest shading */
    --Dash-Shading-Weak:           var(--bg-2);      /* subtle shading */
    --Dash-Stroke-Strong:          var(--border-strong); /* borders */
    --Dash-Text-Strong:            var(--text-bright);   /* primary text */
    --Dash-Text-Weak:              var(--text-muted);    /* secondary text */
    --Dash-Text-Disabled:          var(--text-dim);      /* disabled text */
    --Dash-Spacing:                8px;
}

/* -----------------------------------------------------------------------------
   2. BASE / RESET
   ----------------------------------------------------------------------------- */
html, body {
    background-color: var(--bg-0);
    color: var(--text);
    margin: 0;
    padding: 0;
}
body.app-body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
}

* { box-sizing: border-box; }

::selection {
    background: var(--accent-soft);
    color: var(--text-bright);
}

/* Scrollbar — WebKit */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
    background: var(--bg-3);
    border-radius: 8px;
    border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
::-webkit-scrollbar-corner { background: var(--bg-0); }

/* Firefox */
* { scrollbar-color: var(--bg-3) var(--bg-0); scrollbar-width: thin; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

input::placeholder, textarea::placeholder {
    color: var(--text-dim) !important;
    opacity: 1;
}

/* Headings default */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-tight);
    color: var(--text-bright);
}

/* -----------------------------------------------------------------------------
   3. DATA / MONOSPACE
   Anything numeric should use --font-mono for alignment.
   ----------------------------------------------------------------------------- */
.ct-mono,
.ct-num,
.js-plotly-plot text.ytick,
.js-plotly-plot text.xtick {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.ct-pos { color: var(--pos) !important; }
.ct-neg { color: var(--neg) !important; }
.ct-muted { color: var(--text-muted) !important; }
.ct-dim { color: var(--text-dim) !important; }

/* Symbol ticker styling — Bloomberg-style amber */
.ct-ticker {
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    color: var(--accent);
    letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------------
   4. COMPONENT CLASSES (used by app.py shared styles)
   ----------------------------------------------------------------------------- */

/* Labels (UPPERCASE tracking) */
.ct-label,
label.ct-label {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-bottom: var(--sp-2);
    line-height: var(--lh-tight);
}

/* Inputs */
.ct-input,
input.ct-input,
textarea.ct-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background-color: var(--bg-4);
    color: var(--text);
    font-size: var(--fs-md);
    font-family: var(--font-mono);
    line-height: var(--lh-snug);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
    box-sizing: border-box;
}
.ct-input:hover:not(:focus) {
    border-color: var(--border-strong);
}

/* Buttons */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 10px 24px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background-color: var(--accent);
    color: #1a1105;
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    height: 40px;
    min-height: var(--tap-min);
    transition: background-color var(--t-base), filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    user-select: none;
}
.ct-btn:not(:disabled):hover {
    background-color: var(--accent-hover);
    box-shadow: 0 4px 14px var(--accent-glow);
    transform: translateY(-1px);
}
.ct-btn:not(:disabled):active {
    transform: translateY(0);
    filter: brightness(0.95);
}
.ct-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
}

/* Secondary (outline) button */
.ct-btn-secondary {
    background-color: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
.ct-btn-secondary:not(:disabled):hover {
    background-color: var(--bg-3);
    border-color: var(--accent);
    color: var(--text-bright);
    box-shadow: none;
}

/* Ghost button (minimal) */
.ct-btn-ghost {
    background-color: transparent;
    color: var(--text-muted);
    border-color: transparent;
    height: auto;
    min-height: 32px;
    padding: 6px 12px;
    font-weight: var(--fw-medium);
}
.ct-btn-ghost:not(:disabled):hover {
    background-color: var(--bg-3);
    color: var(--text-bright);
    box-shadow: none;
    transform: none;
}

/* Cards */
.ct-card {
    background-color: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--shadow-card);
}

/* KPI Cards (Bloomberg-style stat block) */
.kpi-card {
    position: relative;
    background-color: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: var(--r-md);
    padding: 10px 14px;
    text-align: left;
    flex: 1;
    min-width: 140px;
    transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    overflow: hidden;
}
.kpi-card::before { content: none; }    /* remove old gradient bar */
.kpi-card:hover {
    transform: translateY(-1px);
    background-color: var(--bg-3);
    border-color: var(--border-strong);
    border-left-color: var(--accent);
}
.kpi-card .kpi-label {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-bottom: 3px;
    line-height: 1.2;
}
.kpi-card .kpi-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-bright);
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
}

/* -----------------------------------------------------------------------------
   5. GLOBAL BUTTON MICRO-INTERACTIONS (affects any <button>)
   ----------------------------------------------------------------------------- */
button {
    transition: background-color var(--t-base), filter var(--t-fast),
                transform var(--t-fast), box-shadow var(--t-fast) !important;
    font-family: var(--font-sans);
}
button:not(:disabled):hover { filter: brightness(1.12); }
button:not(:disabled):active { transform: translateY(1px); filter: brightness(0.95); }
button:disabled { opacity: 0.45; cursor: not-allowed !important; }

/* -----------------------------------------------------------------------------
   6. INPUTS — focus ring on all inputs/textareas
   ----------------------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="email"],
textarea {
    transition: border-color var(--t-fast), box-shadow var(--t-fast),
                background-color var(--t-fast) !important;
    font-family: var(--font-mono);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none !important;
}

/* -----------------------------------------------------------------------------
   7. DASH COMPONENT OVERRIDES
   ----------------------------------------------------------------------------- */

/* Tabs — scoped by className (reliable: Dash applies the className prop)
   --------------------------------------------------------------------------
   Main tabs (.ct-main-nav): top-level nav. Flat, sky-underlined selected,
     horizontal scroll always (6-7 items).
   Sub-tabs (.ct-sub-nav): pill chips on desktop. On mobile a JS file
     (mobile_subtab_select.js) injects a native <select> and this CSS
     hides the pill container. */

/* ---- Main top-level tabs ---- */
.ct-main-nav .tab-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border) !important;
    background-color: var(--bg-1);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    position: relative;
    margin: 0 !important;
}
.ct-main-nav .tab-container::-webkit-scrollbar { height: 3px; }

.ct-main-nav .tab {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    transition: background-color var(--t-base), color var(--t-base),
                border-color var(--t-base) !important;
    font-family: var(--font-sans) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase;
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-semibold) !important;
    min-height: 40px;
    color: var(--text) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: 2px solid transparent !important;
    white-space: nowrap;
}
.ct-main-nav .tab:hover {
    color: var(--text-bright) !important;
    background-color: var(--bg-2) !important;
}
.ct-main-nav .tab--selected,
.ct-main-nav .tab[aria-selected="true"] {
    color: var(--accent) !important;
    background-color: var(--bg-0) !important;
    border-bottom-color: var(--accent) !important;
}

/* ---- Sub-tabs (desktop: pill chips; mobile: hidden → native select below) */
.ct-sub-nav .tab-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    background: transparent !important;
    border-bottom: none !important;
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
}
.ct-sub-nav .tab-container::-webkit-scrollbar { height: 3px; }
.ct-sub-nav .tab {
    flex: 0 0 auto;
    transition: background-color var(--t-base), color var(--t-base),
                border-color var(--t-base) !important;
}

/* ---- Unified mobile nav select (injected by mobile_nav.js) ----
   Replaces BOTH tab levels on mobile with a single grouped <select>.
   Desktop (>900px): hidden. Mobile (≤900px): visible via media query. */
.ct-nav-select-wrapper {
    display: none;                  /* hidden on desktop */
    padding: var(--sp-2) var(--page-pad-x);
    background-color: var(--bg-1);
    border-bottom: 1px solid var(--border);
}
.ct-nav-breadcrumb {
    display: block;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-bottom: var(--sp-1);
    line-height: var(--lh-tight);
}
.ct-nav-select {
    width: 100%;
    min-height: var(--tap-min);
    padding: 10px 40px 10px 14px;
    background-color: var(--bg-2);
    color: var(--accent);
    border: 1px solid var(--border);
    border-bottom: 2px solid var(--accent);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2338bdf8'><path d='M5.5 8l4.5 4.5L14.5 8z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ct-nav-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.ct-nav-select optgroup {
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    background-color: var(--bg-1);
    font-size: var(--fs-xs);
}
.ct-nav-select option {
    background-color: var(--bg-2);
    color: var(--text);
    font-weight: var(--fw-medium);
    padding: 8px 14px;
}

/* Mobile: hide BOTH tab levels, show unified nav select */
@media (max-width: 900px) {
    .ct-main-nav .tab-container { display: none !important; }
    .ct-sub-nav .tab-container { display: none !important; }
    .ct-nav-select-wrapper { display: block !important; }
    /* Kill any legacy wrappers from old JS */
    .ct-subtab-select-wrapper { display: none !important; }
}

/* Dropdown (react-select based) */
.Select-control,
.Select--single > .Select-control {
    background-color: var(--bg-4) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    min-height: 36px !important;          /* was 40px — tighter to match inputs */
}
.Select-value-label,
.Select--single > .Select-control .Select-value .Select-value-label {
    color: var(--text-bright) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-sm) !important;
}
.Select-input input {
    color: var(--text-bright) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-sm) !important;
    padding: 2px 0 !important;           /* compact search input */
}
.Select-placeholder {
    color: var(--text-dim) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-sm) !important;
}
/* Search input container — reduce excessive height */
.Select-input {
    height: 28px !important;
}
.Select-value {
    line-height: 34px !important;         /* vertically center text in 36px control */
}
.Select-placeholder {
    line-height: 34px !important;
}
.VirtualizedSelectOption {
    color: var(--text) !important;
    font-family: var(--font-sans) !important;
}
.VirtualizedSelectFocusedOption {
    background-color: var(--accent-soft) !important;
    color: var(--text-bright) !important;
}
/* Dropdown chevron arrow */
.Select-arrow-zone {
    color: var(--text-muted) !important;
}
.Select-arrow {
    border-top-color: var(--text-muted) !important;
}
.Select-clear-zone {
    color: var(--text-dim) !important;
}
.Select-menu-outer {
    background-color: var(--bg-4) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-pop) !important;
    overflow: hidden;
}

/* RadioItems + Checklist — ensure labels are readable */
.dash-radioitems label,
.dash-checklist label {
    color: var(--text) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-sm) !important;
}
/* Radio/checkbox accent color */
.dash-radioitems input[type="radio"],
.dash-checklist input[type="checkbox"] {
    accent-color: var(--accent);
}

/* Native <select> elements inside Dash (e.g., dcc.Dropdown native mode) */
select {
    color: var(--text-bright);
    background-color: var(--bg-4);
}
.VirtualizedSelectOption {
    background-color: var(--bg-4) !important;
    color: var(--text) !important;
}
.VirtualizedSelectFocusedOption {
    background-color: var(--accent-soft) !important;
    color: var(--text-bright) !important;
}

/* Finviz link icons in tables */
.dash-table-container td.cell-markdown a,
.dash-table-container td.cell-markdown a:link,
.dash-table-container td.cell-markdown a:visited,
.dash-table-container td.cell-markdown a:active {
    color: var(--accent) !important;
    text-decoration: none !important;
    font-weight: var(--fw-bold) !important;
    font-size: var(--fs-sm) !important;
}
.dash-table-container td.cell-markdown a:hover {
    color: var(--accent-hover) !important;
    text-decoration: underline !important;
}

/* DataTable filter input */
.dash-table-container .dash-filter input {
    color: var(--text-bright) !important;
    font-family: var(--font-mono) !important;
}

/* Economy calendar spinner */
@keyframes econ-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1.0); opacity: 1.0; }
}

/* News tooltip */
.dash-table-container .dash-tooltip {
    background-color: var(--bg-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-md) !important;
    padding: var(--sp-3) var(--sp-4) !important;
    max-width: 500px !important;
    font-size: var(--fs-sm) !important;
    line-height: var(--lh-base) !important;
    font-family: var(--font-sans) !important;
    box-shadow: var(--shadow-pop) !important;
    white-space: normal !important;
    z-index: 9999 !important;
}

/* DataTable — gridline feel, monospace data */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
}
.dash-table-container .dash-spreadsheet-inner tr:hover td {
    background-color: var(--bg-3) !important;
}
.dash-table-container .dash-header {
    background-color: var(--bg-1) !important;
    border-bottom: 1px solid var(--border-strong) !important;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-sans) !important;
    font-size: var(--fs-xs) !important;
}
.dash-table-container .dash-spreadsheet-inner td {
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Plotly */
.js-plotly-plot, .plot-container {
    border-radius: var(--r-md);
}

/* DatePickerSingle (react-dates) — dark theme + wider input
   Renders identically on Windows and Mac (React component, not native).
   ----------------------------------------------------------------------------- */

/* Input field — wider, mono font so dates align */
.DateInput {
    width: 138px !important;       /* fits YYYY-MM-DD comfortably */
    background: transparent !important;
}
.DateInput_input {
    background-color: var(--bg-4) !important;
    color: var(--text-bright) !important;  /* bright for max readability on dark input */
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-medium) !important;
    padding: 8px 10px !important;
    line-height: var(--lh-snug) !important;
    transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.DateInput_input:focus,
.DateInput_input__focused {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none !important;
}
.DateInput_input::placeholder {
    color: var(--text-dim) !important;
}
.SingleDatePickerInput {
    background-color: transparent !important;
    border: none !important;
}
.SingleDatePickerInput__withBorder {
    border: none !important;
}
.SingleDatePickerInput_calendarIcon {
    color: var(--text) !important;
    padding: 6px !important;
}
.SingleDatePickerInput_calendarIcon svg {
    fill: var(--text-muted) !important;
}
/* Fang (triangle pointing from input to calendar popup) */
.DateInput_fang {
    display: none !important;        /* clean look — hide the fang arrow */
}

/* Calendar popup — dark theme */
.SingleDatePicker_picker,
.DayPicker {
    background-color: var(--bg-2) !important;
    border-radius: var(--r-lg) !important;
}
.SingleDatePicker_picker {
    border: 1px solid var(--border-strong) !important;
    box-shadow: var(--shadow-pop) !important;
    z-index: 9990 !important;
}

/* Month/year header */
.CalendarMonth_caption {
    color: var(--text-bright) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-md) !important;
    font-weight: var(--fw-semibold) !important;
}
.CalendarMonth {
    background-color: var(--bg-2) !important;
}
.CalendarMonthGrid {
    background-color: var(--bg-2) !important;
}

/* Weekday headers */
.DayPicker_weekHeader_li small {
    color: var(--text-muted) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-2xs) !important;
    font-weight: var(--fw-semibold) !important;
}

/* Day cells */
.CalendarDay__default {
    background-color: var(--bg-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-subtle) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--fs-sm) !important;
}
.CalendarDay__default:hover {
    background-color: var(--bg-3) !important;
    color: var(--text-bright) !important;
    border-color: var(--border) !important;
}
/* Selected day */
.CalendarDay__selected,
.CalendarDay__selected:hover {
    background-color: var(--accent) !important;
    color: var(--accent-on-fill) !important;
    border-color: var(--accent) !important;
    font-weight: var(--fw-bold) !important;
}
/* Today (not selected) */
.CalendarDay__today {
    font-weight: var(--fw-bold) !important;
    color: var(--accent) !important;
}
/* Hovered span */
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: var(--accent-soft) !important;
}
/* Blocked / outside month */
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:hover {
    background-color: var(--bg-1) !important;
    color: var(--text-dim) !important;
    border-color: var(--border-subtle) !important;
}
.CalendarDay__outside {
    color: var(--text-dim) !important;
}

/* Navigation arrows */
.DayPickerNavigation_button__default {
    background-color: var(--bg-3) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
}
.DayPickerNavigation_button__default:hover {
    background-color: var(--bg-4) !important;
    border-color: var(--border-strong) !important;
}
.DayPickerNavigation_svg__horizontal {
    fill: var(--text-muted) !important;
}

/* Month navigation select (some Dash versions show a month/year selector) */
.CalendarMonth_caption select {
    background-color: var(--bg-3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
}

/* Keyboard shortcut panel (hidden, but style just in case) */
.DayPickerKeyboardShortcuts_buttonReset {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   8. LOGIN OVERLAY + POPUPS
   ----------------------------------------------------------------------------- */
#login-overlay > div {
    box-shadow: var(--shadow-pop) !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
    border-top: 2px solid var(--accent) !important;
    border-radius: var(--r-lg) !important;
}

#cmd-info-popup {
    box-shadow: var(--shadow-pop) !important;
    border-radius: var(--r-md) !important;
    background-color: var(--bg-2) !important;
    border: 1px solid var(--border-strong) !important;
}

/* -----------------------------------------------------------------------------
   9. HEADER (global chrome)
   Keep the header flat (no gradient). Cygnet title → amber.
   ----------------------------------------------------------------------------- */
#main-app > div:first-of-type {
    background: var(--bg-1) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: var(--sp-3) var(--page-pad-x) !important;
}
#main-app h1 {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-xl) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--accent) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase;
    margin: 0 !important;
    white-space: nowrap;
}
#header-cmd-input,
#header-fv-input {
    font-family: var(--font-mono) !important;
    background-color: var(--bg-4) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    height: 32px;
    padding: 6px 10px !important;
}
#header-cmd-input::placeholder,
#header-fv-input::placeholder {
    font-family: var(--font-sans) !important;
}
#header-mon-refresh-btn {
    height: 32px;
    min-width: 32px;
    border-radius: var(--r-sm) !important;
}

/* -----------------------------------------------------------------------------
   10. UTILITIES
   ----------------------------------------------------------------------------- */
.ct-divider {
    height: 1px;
    background: var(--border);
    margin: var(--sp-4) 0;
    border: none;
}
.ct-hidden-desktop { display: none; }
.ct-hidden-mobile { display: initial; }

/* =============================================================================
   11. RESPONSIVE — MOBILE-FIRST OVERRIDES
   Strategy: progressively collapse desktop-only layouts on narrower viewports.
   ============================================================================= */

/* Tablet / small laptop */
@media (max-width: 1024px) {
    :root { --page-pad-x: 20px; }
    #main-app [style*="min-width: 800px"],
    #main-app [style*="minWidth: 800px"],
    #main-app [style*="min-width:800px"] { min-width: 0 !important; }
    [style*="min-width: 1200px"] { min-width: 0 !important; }
}

/* Phone landscape / small tablet */
@media (max-width: 900px) {
    :root { --page-pad-x: 16px; }

    /* Header collapses to wrapped rows */
    #main-app > div:first-of-type > div {
        flex-wrap: wrap !important;
        gap: var(--sp-2) !important;
    }
    #main-app h1 {
        font-size: var(--fs-lg) !important;
        flex: 0 0 auto;
    }
    #header-cmd-input,
    #header-fv-input {
        flex: 1 1 160px !important;
        min-width: 140px !important;
        width: auto !important;
    }
    #header-mon-display {
        order: 99;
        width: 100% !important;
        flex: 1 1 100% !important;
        padding-top: var(--sp-2);
        border-top: 1px solid var(--border-subtle);
    }
    #cmd-info-popup {
        width: calc(100vw - 32px) !important;
        max-width: 620px;
        right: -8px !important;
    }

    /* Any fixed min-width 800 collapses */
    [style*="min-width: 800px"],
    [style*="minWidth: 800px"],
    [style*="min-width:800px"] { min-width: 0 !important; }

    /* Oversized inline widths collapse */
    [style*="width: 620px"] { width: 100% !important; max-width: 100%; }
    [style*="width: 380px"] { width: 100% !important; max-width: 100%; }
}

/* Phone portrait */
@media (max-width: 640px) {
    :root {
        --page-pad-x: 12px;
        --fs-base: 14px;         /* slightly larger base on phones */
    }
    body.app-body { font-size: var(--fs-base); }

    /* Header: title smaller, inputs full width, monitor ticker wraps underneath */
    #main-app > div:first-of-type {
        padding: var(--sp-2) var(--sp-3) !important;
        padding-top: calc(var(--sp-2) + env(safe-area-inset-top, 0px)) !important;
    }
    #main-app h1 {
        font-size: var(--fs-md) !important;
        letter-spacing: 0.06em !important;
    }
    #header-cmd-input {
        flex: 1 1 100% !important;
        order: 2;
        width: 100% !important;
        height: var(--tap-min) !important;
        font-size: var(--fs-md) !important;
    }
    #header-fv-input {
        flex: 1 1 100% !important;
        order: 3;
        width: 100% !important;
        height: var(--tap-min) !important;
        font-size: var(--fs-md) !important;
    }
    #header-mon-refresh-btn {
        order: 4;
        height: var(--tap-min) !important;
        min-height: var(--tap-min) !important;
        min-width: var(--tap-min) !important;
    }

    /* Main tabs — horizontal scroll, tight tap targets */
    .ct-main-nav .tab-container {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ct-main-nav .tab-container::-webkit-scrollbar { display: none; }
    .ct-main-nav .tab {
        min-height: var(--tap-min);
        padding: 10px 16px !important;
    }
    /* Sub-tab pills hidden on mobile (unified nav select replaces them) */

    /* KPI grid: 2-per-row */
    .kpi-card {
        min-width: calc(50% - 6px) !important;
        flex: 1 1 calc(50% - 6px) !important;
    }

    /* Buttons full tap height */
    .ct-btn,
    button {
        min-height: var(--tap-min);
    }

    /* Dense padding collapse */
    [style*="padding: 24px 40px"] { padding: var(--sp-3) var(--sp-4) !important; }
    [style*="padding: 24px"]       { padding: var(--sp-3) !important; }
    [style*="padding: 20px"]       { padding: var(--sp-3) !important; }
    [style*="padding: 16px 24px"]  { padding: var(--sp-2) var(--sp-3) !important; }
    [style*="padding: 40px 48px"]  { padding: var(--sp-5) var(--sp-4) !important; }

    /* Login card fits phone width + safe-area */
    #login-overlay > div {
        width: calc(100vw - 24px) !important;
        max-width: 400px;
        padding: var(--sp-6) var(--sp-4) !important;
    }
    #login-overlay input {
        height: var(--tap-min);
        font-size: var(--fs-md) !important;
    }
    #login-overlay button {
        min-height: var(--tap-min);
    }

    /* Large inline-width boxes collapse to viewport */
    [style*="width: 620px"],
    [style*="width: 540px"],
    [style*="width: 520px"],
    [style*="width: 500px"],
    [style*="width: 460px"],
    [style*="width: 420px"],
    [style*="width: 400px"],
    [style*="width: 380px"] {
        width: 100% !important;
        max-width: 100%;
    }

    /* Flex rows with wide gaps tighten */
    [style*="gap: 50px"] { gap: var(--sp-3) !important; }
    [style*="gap: 24px"] { gap: var(--sp-3) !important; }
    [style*="gap: 16px"] { gap: var(--sp-2) !important; }

    /* Tables: force horizontal scroll (no squishing) */
    .dash-table-container,
    .dash-spreadsheet-container {
        overflow-x: auto !important;
        max-width: 100vw;
    }
    .dash-table-container .dash-spreadsheet-inner table {
        font-size: var(--fs-sm) !important;
    }
    .dash-table-container .dash-header {
        font-size: var(--fs-2xs) !important;
    }
    /* Sticky first column in data tables */
    .dash-spreadsheet-inner tr > th:first-child,
    .dash-spreadsheet-inner tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: var(--bg-1) !important;
        box-shadow: 1px 0 0 var(--border);
    }

    /* Native html.Table also scrolls */
    table {
        font-size: var(--fs-sm);
    }

    /* Modals: bottom-sheet feel on phone */
    #mkt-todo-modal > div {
        width: calc(100vw - 20px) !important;
        max-width: 520px;
        padding: var(--sp-3) !important;
    }

    /* Utility toggles */
    .ct-hidden-mobile { display: none !important; }
    .ct-hidden-desktop { display: initial !important; }

    /* Hide non-essential header elements on very small screens */
    #header-user-display span,
    #logout-btn {
        font-size: var(--fs-xs) !important;
    }
}

/* Small phones */
@media (max-width: 420px) {
    :root {
        --page-pad-x: 10px;
    }
    body.app-body { font-size: 13.5px; }
    #main-app h1 { font-size: var(--fs-md) !important; }

    /* KPI: full-width stack */
    .kpi-card {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Tighter button padding on small */
    [style*="padding: 10px 32px"] { padding: 10px 14px !important; }
    [style*="padding: 10px 24px"] { padding: 10px 14px !important; }

    /* Tab label truncation */
    .ct-main-nav .tab {
        padding: 10px 12px !important;
        font-size: var(--fs-2xs) !important;
    }
    /* Nav select: compact on small phones */
    .ct-nav-select {
        font-size: var(--fs-xs);
        padding: 8px 36px 8px 12px;
    }
}

/* Landscape-specific: keep KPI on one row if height is short */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    #main-app > div:first-of-type {
        padding: var(--sp-1) var(--sp-3) !important;
    }
    #main-app h1 { font-size: var(--fs-md) !important; }
}

/* Safe area for bottom (iOS gesture bar) */
@supports (padding: max(0px)) {
    body.app-body {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* Print — hide interactive chrome */
@media print {
    #login-overlay, #cmd-info-popup, button, .tab-container, .ct-nav-select-wrapper { display: none !important; }
    body, html { background: white; color: black; }
}