/* Theme tokens + dark mode.
   --------------------------------------------------------------------------
   Dark mode used to be a whole-page `filter: invert(0.9) hue-rotate(180deg)`.
   That hack could never (a) keep the LCM brand red exact — invert+hue-rotate is
   an approximation that shifts #dc2626 — nor (b) render true-white text, because
   inverting #1f2937 lands on light-gray, never #fff.

   It is now a real theme: every color flows through a semantic CSS variable.
   Light values live in :root; html.dark-mode overrides them. Brand red is
   pinned to #dc2626 in BOTH modes. Python inline styles reference these via
   `var(--token)` strings (Dash passes them straight through to the DOM).

   This file is loaded by both the Dash app (assets auto-load) and the
   standalone login page (<link> in app.py), so the tokens are defined for
   every render path. */

:root {
    /* surfaces & structure (light → dark below) */
    --bg:             #f8fafc;   /* page background base            */
    --bg-2:           #eef2f7;   /* page gradient end / faint panel */
    --surface:        #ffffff;   /* cards, panels, inputs           */
    --surface-2:      #f1f5f9;   /* inset rows, hover, subtle fills */
    --border:         #e2e8f0;   /* default hairline borders        */
    --border-2:       #cbd5e1;   /* stronger borders                */
    --muted:          #94a3b8;   /* mid-gray: muted text + emphasis/dashed borders */

    /* text (dark → light below) */
    --text:           #1f2937;   /* primary body text               */
    --text-strong:    #0f172a;   /* headings / strongest text       */
    --text-2:         #334155;   /* secondary text                  */
    --text-muted:     #64748b;   /* labels, captions                */
    --text-faint:     #9ca3af;   /* disabled / placeholder          */

    /* brand — RED (LCM): identical in both modes (button red = brand) */
    --danger:         #dc2626;
    --danger-strong:  #b91c1c;   /* hover / pressed                 */
    --danger-bg:      #fef2f2;   /* red tint surface                */
    --danger-border:  #fecaca;   /* red tint border                 */

    /* brand — BLUE (primary) */
    --primary:        #2563eb;
    --primary-strong: #1d4ed8;
    --primary-bg:     #eff6ff;
    --primary-border: #bfdbfe;

    /* brand — GREEN (success) */
    --success:        #16a34a;
    --success-strong: #166534;
    --success-bg:     #f0fdf4;
    --success-border: #bbf7d0;

    /* brand — ORANGE (warning) */
    --warning:        #ea580c;
    --warning-strong: #c2410c;
    --warning-bg:     #fff7ed;
    --warning-border: #fed7aa;

    /* brand — TEAL (info) */
    --info:           #0e7490;
    --info-bg:        #ecfeff;

    /* decorative gradient (login / hero) */
    --accent:         #667eea;
    --accent-2:       #764ba2;

    /* glass (translucent surfaces) */
    --glass:          rgba(255,255,255,0.95);
    --glass-border:   rgba(255,255,255,0.20);
}

html.dark-mode {
    /* surfaces & structure: light neutrals become a slate elevation ramp */
    --bg:             #0f172a;
    --bg-2:           #0b1120;
    --surface:        #1e293b;
    --surface-2:      #273548;
    --border:         #334155;
    --border-2:       #475569;
    --muted:          #94a3b8;   /* mid-gray reads fine on dark too */

    /* text: now genuinely white, not inverted-gray */
    --text:           #f1f5f9;
    --text-strong:    #ffffff;
    --text-2:         #cbd5e1;
    --text-muted:     #94a3b8;
    --text-faint:     #64748b;

    /* RED stays exactly #dc2626; hover brightens for affordance on dark */
    --danger:         #dc2626;
    --danger-strong:  #ef4444;
    --danger-bg:      rgba(220,38,38,0.14);
    --danger-border:  rgba(220,38,38,0.38);

    --primary:        #3b82f6;
    --primary-strong: #2563eb;
    --primary-bg:     rgba(37,99,235,0.15);
    --primary-border: rgba(37,99,235,0.38);

    --success:        #22c55e;
    --success-strong: #16a34a;
    --success-bg:     rgba(22,163,74,0.15);
    --success-border: rgba(22,163,74,0.38);

    --warning:        #f97316;
    --warning-strong: #ea580c;
    --warning-bg:     rgba(234,88,12,0.15);
    --warning-border: rgba(234,88,12,0.38);

    --info:           #22d3ee;
    --info-bg:        rgba(14,116,144,0.18);

    --accent:         #667eea;
    --accent-2:       #764ba2;

    --glass:          rgba(30,41,59,0.92);
    --glass-border:   rgba(148,163,184,0.18);

    /* base fallbacks for any element not yet migrated to a token */
    background-color: var(--bg);
    color: var(--text);
    color-scheme: dark;
}

/* keep native form controls / scrollbars themed in dark */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    color-scheme: dark;
}

/* dcc.Dropdown (react-select v1 / react-virtualized-select).
   Dash's bundled CSS hardcodes a light menu with dark option text — unreadable
   on a dark surface. These are NOT inline styles, so the token migration didn't
   reach them; re-theme the control, menu and options here. !important beats the
   bundle's (non-important) defaults regardless of load order. */
html.dark-mode .Select-control {
    background-color: var(--surface) !important;
    border-color: var(--border-2) !important;
    color: var(--text) !important;
}
html.dark-mode .Select-menu-outer,
html.dark-mode .Select-menu {
    background-color: var(--surface) !important;
    border-color: var(--border-2) !important;
}
html.dark-mode .Select-option,
html.dark-mode .VirtualizedSelectOption {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}
html.dark-mode .Select-option.is-focused,
html.dark-mode .VirtualizedSelectFocusedOption {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
}
html.dark-mode .Select-option.is-selected,
html.dark-mode .VirtualizedSelectSelectedOption {
    background-color: var(--primary-bg) !important;
    color: var(--text) !important;
}
html.dark-mode .Select-value-label,
html.dark-mode .Select--single > .Select-control .Select-value .Select-value-label,
html.dark-mode .Select-input > input {
    color: var(--text) !important;
}
html.dark-mode .Select-placeholder,
html.dark-mode .Select--single > .Select-control .Select-placeholder,
html.dark-mode .Select-noresults {
    color: var(--text-muted) !important;
}
html.dark-mode .Select-arrow { border-top-color: var(--text-muted) !important; }
html.dark-mode .is-open .Select-arrow { border-bottom-color: var(--text-muted) !important; }
html.dark-mode .Select-clear { color: var(--text-muted) !important; }

/* dash-bootstrap-components native inputs/selects (same light-on-dark problem) */
html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: var(--surface) !important;
    border-color: var(--border-2) !important;
    color: var(--text) !important;
}
html.dark-mode .form-control::placeholder { color: var(--text-muted) !important; }

/* theme toggle — lives in the header next to the ΕΛ|EN switch.
   Icon is CSS-driven by the html.dark-mode class so it stays correct across
   Dash re-renders without any JS bookkeeping. */
#theme-toggle-btn {
    background: transparent;
    border: 0;
    padding: 3px 6px;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
}
#theme-toggle-btn::after {
    content: "\1F319";  /* 🌙 — offer dark */
}
html.dark-mode #theme-toggle-btn::after {
    content: "\2600\FE0F";  /* ☀️ — offer light */
}