/* ============================================================================
   Chlorum Solutions design system — applied to EHM
   Tokens are sampled from the official brand kit (chlorum-brand/brand-tokens.css):
   primary #1C53A4, sky #68B3E3, ink #201820; dark bg #0F1419 / panel #161C23 /
   border #27313C / muted #9FB0C0. Font = Poppins EVERYWHERE — confirmed from the
   Chlorum site CSS (chlorumsolutions.com): `body,input,textarea,select` AND
   `h1..h6` are all `'Poppins',Helvetica,Arial,sans-serif`. Minimal, corporate,
   flat, blue ramp. Theme is a class on the app wrapper (.theme-light/.theme-dark)
   + a body[data-theme] attribute (clientside) so body and any portals theme too.
   ============================================================================ */
/* Poppins is loaded via a <link> (Dash external_stylesheets) for reliability — a
   CSS @import was loading it too slowly, so the title fell back to the body font.
   @import kept here as a backstop. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root, .theme-light {
    --bg: #F5F7FA;          /* page background (brand bg-soft)      */
    --surface: #FFFFFF;     /* cards / panels                      */
    --surface-2: #EDF1F7;   /* secondary surface                   */
    --surface-3: #EAF2FB;   /* tinted info panels (sky tint)       */
    --text: #201820;        /* primary text (brand ink)            */
    --muted: #5B6B7B;       /* secondary text (brand muted)        */
    --border: #E3E8EF;      /* borders / dividers (brand border)   */
    --heading: #1C53A4;     /* section headings (brand primary)    */
    --primary: #1C53A4;
    --sky: #68B3E3;
    --shadow: 0 1px 3px rgba(16,20,25,0.06), 0 1px 2px rgba(16,20,25,0.04);
}
.theme-dark, body[data-theme="dark"] {
    --bg: #0F1419;          /* brand dark bg     */
    --surface: #161C23;     /* brand dark panel  */
    --surface-2: #1B232C;   /* brand dark panel2 */
    --surface-3: #15222E;   /* dark blue tint    */
    --text: #E8EDF2;        /* brand dark ink    */
    --muted: #9FB0C0;       /* brand dark muted  */
    --border: #27313C;      /* brand dark border */
    --heading: #68B3E3;     /* sky accent on dark */
    --primary: #1C53A4;
    --sky: #68B3E3;
    --shadow: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
}

.app-shell { background: var(--bg); color: var(--text); min-height: 100vh; }
body[data-theme="dark"] { background: #0F1419; }

body {
    font-family: 'Poppins', Helvetica, Arial, sans-serif !important;   /* Chlorum brand font (site-wide) */
    color: #201820;
    background: #F5F7FA;   /* light page background (full width); dark via [data-theme] */
    margin: 0;             /* kill the default 8px body margin (the "white strip") */
}

/* Text selection — brand blue. Dash ships a purple/magenta selection highlight via a
   more specific rule, so we need !important + the input/textarea variants to win.
   (NOT in the Chlorum palette — the whole UI uses #1C53A4 / #68B3E3 only.) */
::selection { background: #1C53A4 !important; color: #FFFFFF !important; }
::-moz-selection { background: #1C53A4 !important; color: #FFFFFF !important; }
input::selection, textarea::selection,
input::-moz-selection, textarea::-moz-selection,
.dash-input-element::selection {
    background: #1C53A4 !important; color: #FFFFFF !important;
}

/* Form-control accent (checkboxes, radios, range/slider) — brand blue. Dash defaults
   `accent-color` to its purple rgb(127,75,196); force it brand-wide. */
*, input, textarea, select { accent-color: #1C53A4 !important; }

/* Browser autofill: Chrome forces a white box + its own text colour on autofilled
   fields. Override so inputs keep the themed surface/text (the source of the
   "white box / strange contour" on the login email field). */
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    transition: background-color 9999s ease-in-out 0s;   /* defeat Chrome's autofill flash */
}

/* Headings (Poppins) — the wordmark feel. Short section titles get slight
   tracking; running text stays normal. */
h1, h2, h3, h4, h5, .tab {
    font-family: 'Poppins', Helvetica, Arial, sans-serif !important;
    letter-spacing: 0.01em;
}
h4 { letter-spacing: 0.015em; }

/* Dropdowns, inputs and tables share the brand font (Poppins, like the site) */
.Select-control, .Select-menu-outer, input, textarea, select, button, .dash-dropdown,
.dash-spreadsheet-container .dash-spreadsheet-inner th,
.dash-spreadsheet-container .dash-spreadsheet-inner td {
    font-family: 'Poppins', Helvetica, Arial, sans-serif !important;
}

/* ---- Tabs ---------------------------------------------------------------- */
.theme-dark .tab, body[data-theme="dark"] .tab {
    background-color: var(--surface) !important;
    color: var(--muted) !important;
    border-color: var(--border) !important;
}
.theme-dark .tab--selected, body[data-theme="dark"] .tab--selected {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
}

/* ---- Dropdowns (Dash v4 uses dash-dropdown-* classes, NOT react-select) ----
   Dash v4's dcc.Dropdown defaults to a light trigger + light menu, which on a
   dark UI render as a white box with greyed text. Theme every part. ---------- */
.theme-dark .dash-dropdown-trigger, body[data-theme="dark"] .dash-dropdown-trigger,
.theme-dark .dash-dropdown-content, body[data-theme="dark"] .dash-dropdown-content,
.theme-dark .dash-dropdown-options, body[data-theme="dark"] .dash-dropdown-options {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}
.theme-dark .dash-dropdown-value-item, body[data-theme="dark"] .dash-dropdown-value-item,
.theme-dark .dash-dropdown-option, body[data-theme="dark"] .dash-dropdown-option {
    color: var(--text) !important;
}
.theme-dark .dash-dropdown-placeholder, body[data-theme="dark"] .dash-dropdown-placeholder,
.theme-dark .dash-dropdown-trigger-icon, body[data-theme="dark"] .dash-dropdown-trigger-icon,
.theme-dark .dash-dropdown-search-icon, body[data-theme="dark"] .dash-dropdown-search-icon {
    color: var(--muted) !important;
}
.theme-dark .dash-dropdown-search, body[data-theme="dark"] .dash-dropdown-search,
.theme-dark .dash-dropdown-search-container, body[data-theme="dark"] .dash-dropdown-search-container {
    background-color: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important;
}
.theme-dark .dash-dropdown-option:hover, body[data-theme="dark"] .dash-dropdown-option:hover,
.theme-dark .dash-dropdown-option.is-selected, body[data-theme="dark"] .dash-dropdown-option.is-selected,
.theme-dark .dash-dropdown-option[aria-selected="true"], body[data-theme="dark"] .dash-dropdown-option[aria-selected="true"] {
    background-color: var(--surface-2) !important;
}
/* focus ring in the brand blue (both themes) */
.dash-dropdown-trigger:focus, .dash-dropdown-trigger:focus-within {
    border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(28,83,164,0.18) !important;
}

/* Dash v4 wraps dcc.Input: the `style` prop (border/bg/padding) lands on the wrapper
   (.dash-input-container / .dash-input); the real field is <input class=dash-input-element>.
   For type="number" the wrapper ALSO holds two stepper buttons (− / +), so the wrapper
   must be a flex ROW (input + steppers side by side) — `display: block` made the
   full-width input push the steppers onto their own lines (the broken stacked look).
   Defaults overridden here (all confirmed via computed styles):
     1) wrapper had a fixed `height: 34px`; with our padding that squeezed the content
        box and pushed text high — `height: auto` + `align-items: center` centres it.
     2) the inner input had a tiny default height that clipped descenders — give it a
        sane min-height/line-height and make it transparent so the wrapper's box shows. */
.dash-input-container, .dash-input {
    display: flex; align-items: center;
    width: 100%; height: auto !important;
}
.dash-input-element {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box;
    height: auto !important; min-height: 1.5em;
    border: 0; outline: none; background: transparent; color: inherit;
    font: inherit; padding: 0; margin: 0; line-height: 1.45;
}
/* Number-input steppers (− / +): keep their size, sit at the right, brand-muted. */
.dash-input-stepper {
    flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
    color: var(--muted); font-size: 15px; line-height: 1; padding: 0 5px; align-self: stretch;
}
.dash-input-stepper:hover { color: var(--primary); }
/* Number inputs: centre the value between the − / + steppers (text inputs stay left). */
.dash-input-element[type="number"] { text-align: center; }
/* Focus ring: Dash draws a PURPLE `:focus-within` outline (rgb(127,75,196)) on the
   wrapper. THIS is the "purple contour" — not autofill. Replace it with the brand-blue
   ring used elsewhere (matches the dropdown focus style). */
.dash-input-container:focus-within, .dash-input:focus-within {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(28, 83, 164, 0.18) !important;
}
.dash-input-element:focus { outline: none !important; }

/* ---- Kill Dash's purple focus OUTLINE everywhere -------------------------- */
/* Beyond the input wrapper, Dash also paints a purple (rgb(127,75,196)) outline on
   its radio/checkbox inputs and dropdown buttons. Force the outline colour to brand
   blue globally so a focus ring is NEVER purple (a swept-confirmed app-wide fix). */
* { outline-color: var(--primary) !important; }
.dash-options-list-option-checkbox:focus-visible, .dash-dropdown:focus-visible,
input:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary) !important; outline-offset: 1px;
}

/* ---- RadioItems / Checklist option labels (readability) ------------------- */
/* Dash defaults the option label text to a near-black rgba(0,9,38,.9) that is
   unreadable on the dark theme. Use the themed text colour (works in both themes);
   the selected option gets the heading colour + weight so it stands out. */
.dash-options-list-option, .dash-options-list-option-wrapper,
.dash-options-list-option span { color: var(--text) !important; }
.dash-options-list-option.selected, .dash-options-list-option[aria-selected="true"],
.dash-options-list-option.selected span, .dash-options-list-option[aria-selected="true"] span {
    color: var(--heading) !important; font-weight: 600;
}

/* ---- Disabled controls must LOOK disabled -------------------------------- */
/* Viewers get a read-only Config: the action buttons are functionally disabled
   (disabled=not admin, + server-side rejection) but kept their blue/red styling, so
   they looked clickable. Mute + block-cursor every disabled control. */
button:disabled, button[disabled] {
    opacity: 0.5 !important; cursor: not-allowed !important; filter: grayscale(35%);
}
input:disabled, textarea:disabled, select:disabled { opacity: 0.6; cursor: not-allowed; }
.dash-dropdown.is-disabled, .dash-dropdown[aria-disabled="true"],
.dash-dropdown--disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Text inputs / textareas (dark) ------------------------------------- */
.theme-dark input, body[data-theme="dark"] input,
.theme-dark textarea, body[data-theme="dark"] textarea {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.theme-dark input::placeholder, body[data-theme="dark"] input::placeholder { color: var(--muted) !important; }
input:focus, textarea:focus { outline: none; border-color: var(--primary) !important; }

/* ---- DataTable (dark) --------------------------------------------------- */
.theme-dark .dash-spreadsheet-container .dash-spreadsheet-inner th,
.theme-dark .dash-spreadsheet-container .dash-spreadsheet-inner td,
body[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner th,
body[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ---- Markdown (chat + methodology) -------------------------------------- */
.theme-dark .dash-markdown, body[data-theme="dark"] .dash-markdown { color: var(--text); }
.theme-dark .dash-markdown code, body[data-theme="dark"] .dash-markdown code {
    background-color: var(--surface-2); color: var(--text);
}

/* ---- Scrollbars (dark) -------------------------------------------------- */
.theme-dark ::-webkit-scrollbar, body[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
.theme-dark ::-webkit-scrollbar-track, body[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-2); }
.theme-dark ::-webkit-scrollbar-thumb, body[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 5px;
}

/* ---- Header theme toggle ------------------------------------------------- */
.theme-toggle-btn {
    background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer;
    font-size: 16px; border-radius: 8px; padding: 4px 9px; line-height: 1;
    transition: background 0.2s;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,0.25); }

/* ---- Method info icon buttons (brand blue ramp) ------------------------- */
.method-info-btn {
    cursor: pointer; color: var(--sky); font-size: 15px; font-weight: 600;
    margin-left: 2px; transition: color 0.2s; vertical-align: middle;
}
.method-info-btn:hover { color: var(--primary); }

/* ---- Methodology modal -------------------------------------------------- */
.methodology-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(15, 20, 25, 0.55); z-index: 9999;
    display: flex; justify-content: center; align-items: flex-start; padding-top: 25px;
}
.methodology-modal-box {
    background-color: var(--surface); color: var(--text); border-radius: 14px;
    max-width: 960px; width: 92%; max-height: 92vh; display: flex; flex-direction: column;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}
.methodology-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    border-radius: 14px 14px 0 0; background: var(--surface-2); flex-shrink: 0;
}
.methodology-modal-close-btn {
    border: none; background: none; font-size: 22px; cursor: pointer; color: var(--muted);
    padding: 4px 10px; border-radius: 6px; transition: background-color 0.2s;
}
.methodology-modal-close-btn:hover { background-color: var(--surface-2); color: var(--text); }
#methodology-modal-content h1 { margin-top: 0; }
#methodology-modal-content h2 { border-bottom: 2px solid var(--border); padding-bottom: 8px; }
#methodology-modal-content h3 { margin-top: 20px; }
#methodology-modal-content ul { padding-left: 24px; }
#methodology-modal-content .MathJax { font-size: 1.05em !important; }

/* ---- Initial app loading screen --------------------------------------------
   serve_layout() is rebuilt per request and is heavy (bundles + rolling-median
   heatmap), so on every refresh Dash shows its bare "Loading..." text for a few
   seconds. Replace it with a centred, branded spinner so it's clear the app is
   working. Targets Dash's initial-mount placeholder (._dash-loading).            */
._dash-loading {
    position: fixed;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--bg, #0F1419);
    color: transparent;          /* hide the literal "Loading..." text */
    font-size: 0;
    z-index: 99999;
}
._dash-loading::after {
    content: "";
    width: 58px;
    height: 58px;
    border: 5px solid rgba(28, 83, 164, 0.22);   /* Chlorum blue, faint ring  */
    border-top-color: #1C53A4;                    /* Chlorum blue, active arc  */
    border-radius: 50%;
    animation: ehm-spin 0.85s linear infinite;
}
._dash-loading::before {
    content: "ELECTROLYSIS EHPM";
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #1C53A4;
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    opacity: 0.85;
}
@keyframes ehm-spin { to { transform: rotate(360deg); } }