/* dark.css - Always loaded. Applies overrides using the browser's prefers-color-scheme media query.
   NOTE: This file intentionally uses only CSS and media queries (no JS).
*/

/* Default: do nothing (keeps light theme from app.css). */

/* Apply dark-theme overrides when system prefers dark. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-page: rgb(2, 4, 8);        /* overall page background */
        --panel-bg: rgb(9, 13, 19);       /* card / panel backgrounds */
        --muted-text: rgb(154, 166, 179);     /* secondary text */
        --primary-text: rgb(230, 238, 248);   /* main text */
        --card-shadow: 0 10px 20px rgba(34, 34, 34, 0.6), 0 6px 6px rgba(34, 34, 34, 0.5);
    }

    /* Page and global text */
    body {
        background-color: var(--bg-page) !important;
        color: var(--primary-text) !important;
    }

    /* Header */
    header {
        background-color: var(--panel-bg) !important;
        box-shadow: var(--card-shadow) !important;
    }

    header > .title {
        color: var(--primary-text) !important;
    }

    header > .description {
        color: var(--muted-text) !important;
    }

    /* Panels / cards */
    .address-panel,
    .commands-panel {
        background-color: var(--panel-bg) !important;
        box-shadow: var(--card-shadow) !important;
        border-top-color: rgba(255,255,255,0.04) !important; /* keep accent border faint on dark */
    }

    .address-panel > .title,
    .commands-panel > .title {
        color: var(--primary-text) !important;
    }

    .commands-panel > .description,
    footer > .copyright,
    header > .description {
        color: var(--muted-text) !important;
    }

    /* IP display / CLI command */
    .cli-command {
        background-color: #0b1221 !important;
        color: #e6eef8 !important;
    }

    .address-panel > .display {
        color: var(--primary-text) !important;
    }

    /* Spinner: lighter subtle track for dark */
    .spinner {
        border: 4px solid rgba(255,255,255,0.06) !important;
        border-left-color: #8b5cf6 !important; /* purple accent */
    }

    /* Reconnect modal */
    #components-reconnect-modal {
        background-color: var(--panel-bg) !important;
        color: var(--primary-text) !important;
        box-shadow: 0 3px 6px 2px rgba(0,0,0,0.7) !important;
    }

    #components-reconnect-modal button {
        background-color: #2563eb !important;
        color: white !important;
    }

    /* Useful utility overrides so markup using tailwind-like classes looks OK in dark mode. These are intentionally narrow and minimal. */
    .bg-white { background-color: var(--panel-bg) !important; }
    .text-black { color: var(--primary-text) !important; }
    .text-gray-800 { color: var(--primary-text) !important; }
    .text-gray-700 { color: #cbd5e1 !important; }
    .bg-gray-100 { background-color: #071023 !important; }

    /* Keep vibrant accent backgrounds (bg-*-100) readable by lightening text when necessary.
       Only adjust common hydrated utility combinations so we don't conflict with colored accents. */
    .bg-blue-100 { background-color: #172554 !important; }
    .bg-green-100 { background-color: #052414 !important; }
    .bg-red-100 { background-color: #2a0b0b !important; }

    /* Ensure code/mono fonts are readable on dark */
    .cli-command code,
    .address-panel > .display,
    .address-panel > .display span,
    .address-panel > .display strong {
        color: inherit !important;
    }
}

/* When system explicitly prefers light, make sure any dark overrides are not applied (explicit but redundant). */
@media (prefers-color-scheme: light) {
    /* Intentionally empty: app.css is the source-of-truth for light mode. */
}