/*
 * Coverd dashboard theme — shared light/dark palette.
 *
 * Every page links this file BEFORE its inline <style> block and consumes the
 * variables below instead of hardcoded colors. Light values are the legacy
 * palette, so light mode looks exactly as before; dark values are activated by
 * `html[data-theme="dark"]`, which js/theme-toggle.js sets before first paint.
 *
 * Rules for page styles:
 *  - Surfaces, text, borders, shadows, links, alerts: use these variables.
 *  - Solid accent buttons/badges (blue/green/red/orange/purple + white text)
 *    keep the same accent in both themes: use the accent variables.
 *  - One-off decorative colors (tinted gradients, brand hues) keep their light
 *    rule and get a page-local `html[data-theme="dark"] .selector { ... }`
 *    override at the end of the page's <style> block.
 *  - Never pair a hardcoded background with a var() foreground (or vice versa).
 *    The var() side follows the theme and the hardcoded side does not, so the
 *    two collide and the text disappears. Theme both sides or neither.
 *  - This applies to colors built in JavaScript too — `const bg = '#fff'`
 *    interpolated into a template literal is a style like any other, and it is
 *    the easiest kind to miss when sweeping a page for hardcoded colors.
 */

:root {
    color-scheme: light;

    /* Surfaces */
    --bg-page: #f5f7fa;      /* page background (legacy #f5f5f5/#f0f2f5 too) */
    --bg-card: #ffffff;      /* cards, navbar, modals, table rows            */
    --bg-alt: #f8f9fa;       /* table headers, wells, striped rows           */
    --bg-alt-2: #ecf0f1;     /* chips, code, hover fills (legacy #e9ecef)    */
    --bg-hover: #f5f5f5;     /* row hover                                    */
    --bg-input: #ffffff;     /* form controls                                */

    /* Text */
    --text: #2c3e50;         /* headings / strong                            */
    --text-body: #333333;    /* default body copy                            */
    --text-2: #7f8c8d;       /* secondary (legacy #666/#555/#6c757d)         */
    --text-3: #95a5a6;       /* muted/hints (legacy #999/#aaa/#a0aec0)       */

    /* Lines & elevation */
    --border: #dddddd;       /* inputs, tables (legacy #dee2e6/#ccc)         */
    --border-2: #eeeeee;     /* subtle separators (legacy #e9ecef/#e2e8f0)   */
    --shadow: rgba(0, 0, 0, 0.1);

    /* Links */
    --link: #3498db;
    --link-hover: #2980b9;

    /* Accent fills — same hue both themes; pair with white text */
    --blue: #3498db;   --blue-hover: #2980b9;
    --green: #27ae60;  --green-hover: #229954;
    --red: #e74c3c;    --red-hover: #c0392b;
    --orange: #f39c12; --orange-hover: #e67e22;
    --purple: #9b59b6; --gray-btn: #95a5a6;

    /* Status text (colored text sitting on cards) */
    --ok-text: #27ae60;
    --err-text: #e74c3c;
    --warn-text: #b9770e;

    /* Bootstrap-style alert boxes */
    --alert-ok-bg: #d4edda;   --alert-ok-text: #155724;   --alert-ok-border: #c3e6cb;
    --alert-err-bg: #f8d7da;  --alert-err-text: #721c24;  --alert-err-border: #f5c6cb;
    --alert-warn-bg: #fff3cd; --alert-warn-text: #856404; --alert-warn-border: #ffeeba;
    --alert-info-bg: #d1ecf1; --alert-info-text: #0c5460; --alert-info-border: #bee5eb;

    /* Charts (Chart.js reads these at render time) */
    --chart-text: #666666;
    --chart-grid: rgba(0, 0, 0, 0.1);

    /* Extended badge/status tints (Material-style pills used across panels).
       Each is a pale bg + saturated text pair; dark values keep the same hue. */
    --tint-purple-bg: #f3e5f5;  --tint-purple-text: #7b1fa2;
    --tint-pink-bg: #fce4ec;    --tint-pink-text: #c2185b;
    --tint-cyan-bg: #e0f7fa;    --tint-cyan-text: #00838f;
    --tint-teal-bg: #e0f2f1;    --tint-teal-text: #00695c;
    --tint-indigo-bg: #e8eaf6;  --tint-indigo-text: #3949ab;
    --tint-neutral-bg: #e2e3e5; --tint-neutral-text: #383d41;
    --tint-blue-bg: #eaf3fb;    --tint-blue-text: #2471a3;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --bg-page: #0f1419;      /* matches the TV dashboard */
    --bg-card: #1a212b;
    --bg-alt: #222b36;
    --bg-alt-2: #2a3542;
    --bg-hover: #232d39;
    --bg-input: #141b23;

    --text: #e8edf2;
    --text-body: #d8dfe7;
    --text-2: #9aa7b4;
    --text-3: #71808f;

    --border: #344150;
    --border-2: #293440;
    --shadow: rgba(0, 0, 0, 0.5);

    --link: #5fb0ef;
    --link-hover: #8bc7f7;

    /* Accent fills stay recognizable in dark */
    --blue: #3498db;   --blue-hover: #4da8e8;
    --green: #27ae60;  --green-hover: #2fc06e;
    --red: #e74c3c;    --red-hover: #ef6152;
    --orange: #f39c12; --orange-hover: #f5ab35;
    --purple: #9b59b6; --gray-btn: #66727e;

    --ok-text: #4cd787;
    --err-text: #f2887b;
    --warn-text: #f0b95e;

    --alert-ok-bg: #17301f;   --alert-ok-text: #8ce0ab;   --alert-ok-border: #26533a;
    --alert-err-bg: #381e22;  --alert-err-text: #f1a29b;  --alert-err-border: #5d2d33;
    --alert-warn-bg: #382e17; --alert-warn-text: #f2c464; --alert-warn-border: #5c4c22;
    --alert-info-bg: #14303b; --alert-info-text: #83cfe4; --alert-info-border: #235a6d;

    --chart-text: #a7b3c0;
    --chart-grid: rgba(255, 255, 255, 0.09);

    --tint-purple-bg: #2a1f33;  --tint-purple-text: #d9a8e6;
    --tint-pink-bg: #331d27;    --tint-pink-text: #f0a0c0;
    --tint-cyan-bg: #0f2e33;    --tint-cyan-text: #6fd6e0;
    --tint-teal-bg: #0f2e2a;    --tint-teal-text: #5fcdb8;
    --tint-indigo-bg: #1c2140;  --tint-indigo-text: #9fa8e0;
    --tint-neutral-bg: #2a3542; --tint-neutral-text: #b8c2cc;
    --tint-blue-bg: #12283a;    --tint-blue-text: #7cbde8;
}

/* Floating light/dark toggle injected by js/theme-toggle.js */
.coverd-theme-toggle {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 99999;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: 0 2px 8px var(--shadow);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.coverd-theme-toggle:hover {
    opacity: 1;
    transform: scale(1.06);
}