/* ══════════════════════════════════════════════════════════════
   CircuitScope — automatic dark mode (for light themes)
   ──────────────────────────────────────────────────────────────
   Two triggers, same look:
     • the device is in dark mode AND the user hasn't forced light
       →  @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
     • the user explicitly chose dark in their profile
       →  :root[data-theme="dark"]
   A user who forces light (data-theme="light") always stays light,
   even on a dark device. Loaded only when the active theme is light
   (dark themes like Midnight are already dark).
   Most of the app is flipped just by overriding the CSS variables
   (many views use var(--bg*), var(--border), var(--text*)); the
   blocks below also cover the surfaces that hard-code white.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. User explicitly chose dark ───────────────────────────── */
:root[data-theme="dark"] {
    color-scheme: dark;
    --surface: #1a1d23;   /* card / panel surface in dark */
    --surface-2: #14171c; /* sunken / subtle surface in dark */
    --cs-primary: #5b76ff;
    --cs-primary-hover: #7189ff;
    --cs-primary-light: #20264a;
    --cs-dark: #f2f4f7;
    --cs-gray-50: #14171c;
    --cs-gray-100: #1a1d23;
    --cs-gray-200: #2a2f3a;
    --cs-gray-300: #3a414d;
    --cs-gray-500: #9aa4b2;
    --cs-gray-700: #cbd2db;
    --cs-gray-900: #e6e8eb;
    --bg: #0f1115;  --bg2: #14171c; --bg3: #1a1d23; --bg4: #222630;
    --border: #2a2f3a;
    --text: #e6e8eb; --text2: #c2c9d2; --text3: #9aa4b2;
    --accent: #5b76ff; --blue: #5b76ff;
}
:root[data-theme="dark"] body { background: #0f1115; color: #e6e8eb; }
:root[data-theme="dark"] .navbar { background: #14171c; border-bottom-color: #2a2f3a; }
:root[data-theme="dark"] .navbar-brand { color: #f2f4f7 !important; }
:root[data-theme="dark"] .navbar .nav-link { color: #c2c9d2; }
:root[data-theme="dark"] .navbar .nav-link:hover { color: #ffffff; }
:root[data-theme="dark"] .dropdown-menu { background: #1a1d23; border-color: #2a2f3a; }
:root[data-theme="dark"] .dropdown-item { color: #c2c9d2; }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus { background: #222630; color: #ffffff; }
:root[data-theme="dark"] .dropdown-divider { border-top-color: #2a2f3a; }
:root[data-theme="dark"] .site-footer { background: #14171c; border-top-color: #2a2f3a; color: #9aa4b2; }
:root[data-theme="dark"] .footer-link { color: #9aa4b2; }
:root[data-theme="dark"] .footer-link:hover { color: #ffffff; }
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .review-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .social-tile,
:root[data-theme="dark"] .admin-main,
:root[data-theme="dark"] .modal-content { background: #1a1d23; border-color: #2a2f3a; color: #e6e8eb; }
:root[data-theme="dark"] .admin-sidebar { background: #14171c; border-color: #2a2f3a; }
:root[data-theme="dark"] .admin-nav-item { color: #c2c9d2; }
:root[data-theme="dark"] .admin-nav-item:hover,
:root[data-theme="dark"] .admin-nav-item.active { background: #222630; color: #ffffff; }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6,
:root[data-theme="dark"] .page-title { color: #f2f4f7; }
:root[data-theme="dark"] p { color: #c2c9d2; }
:root[data-theme="dark"] .text-muted { color: #9aa4b2 !important; }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select { background: #14171c; border-color: #3a414d; color: #e6e8eb; }
:root[data-theme="dark"] .form-control::placeholder { color: #6b7280; }
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus { background: #14171c; color: #e6e8eb; border-color: #5b76ff; box-shadow: 0 0 0 0.2rem rgba(91,118,255,0.30); }
:root[data-theme="dark"] .table {
    color: #e6e8eb;
    --bs-table-bg: transparent;          /* let the dark card/surface behind show through */
    --bs-table-color: #e6e8eb;
    --bs-table-border-color: #2a2f3a;
    --bs-table-striped-bg: #20242c;
    --bs-table-striped-color: #e6e8eb;
    --bs-table-hover-bg: #222630;
    --bs-table-hover-color: #ffffff;
    --bs-table-active-bg: #222630;
}
:root[data-theme="dark"] .table > :not(caption) > * > * { border-color: #2a2f3a; }
:root[data-theme="dark"] .btn-outline-secondary { color: #c2c9d2; border-color: #3a414d; }
:root[data-theme="dark"] .btn-outline-secondary:hover { background: #222630; color: #ffffff; }
:root[data-theme="dark"] code { color: #e6e8eb; }
:root[data-theme="dark"] hr { border-color: #2a2f3a; }

/* ── 2. Device is dark AND the user hasn't forced light ──────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --surface: #1a1d23;   /* card / panel surface in dark */
        --surface-2: #14171c; /* sunken / subtle surface in dark */
        --cs-primary: #5b76ff;
        --cs-primary-hover: #7189ff;
        --cs-primary-light: #20264a;
        --cs-dark: #f2f4f7;
        --cs-gray-50: #14171c;
        --cs-gray-100: #1a1d23;
        --cs-gray-200: #2a2f3a;
        --cs-gray-300: #3a414d;
        --cs-gray-500: #9aa4b2;
        --cs-gray-700: #cbd2db;
        --cs-gray-900: #e6e8eb;
        --bg: #0f1115;  --bg2: #14171c; --bg3: #1a1d23; --bg4: #222630;
        --border: #2a2f3a;
        --text: #e6e8eb; --text2: #c2c9d2; --text3: #9aa4b2;
        --accent: #5b76ff; --blue: #5b76ff;
    }
    :root:not([data-theme="light"]) body { background: #0f1115; color: #e6e8eb; }
    :root:not([data-theme="light"]) .navbar { background: #14171c; border-bottom-color: #2a2f3a; }
    :root:not([data-theme="light"]) .navbar-brand { color: #f2f4f7 !important; }
    :root:not([data-theme="light"]) .navbar .nav-link { color: #c2c9d2; }
    :root:not([data-theme="light"]) .navbar .nav-link:hover { color: #ffffff; }
    :root:not([data-theme="light"]) .dropdown-menu { background: #1a1d23; border-color: #2a2f3a; }
    :root:not([data-theme="light"]) .dropdown-item { color: #c2c9d2; }
    :root:not([data-theme="light"]) .dropdown-item:hover,
    :root:not([data-theme="light"]) .dropdown-item:focus { background: #222630; color: #ffffff; }
    :root:not([data-theme="light"]) .dropdown-divider { border-top-color: #2a2f3a; }
    :root:not([data-theme="light"]) .site-footer { background: #14171c; border-top-color: #2a2f3a; color: #9aa4b2; }
    :root:not([data-theme="light"]) .footer-link { color: #9aa4b2; }
    :root:not([data-theme="light"]) .footer-link:hover { color: #ffffff; }
    :root:not([data-theme="light"]) .settings-card,
    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .review-card,
    :root:not([data-theme="light"]) .stat-card,
    :root:not([data-theme="light"]) .social-tile,
    :root:not([data-theme="light"]) .admin-main,
    :root:not([data-theme="light"]) .modal-content { background: #1a1d23; border-color: #2a2f3a; color: #e6e8eb; }
    :root:not([data-theme="light"]) .admin-sidebar { background: #14171c; border-color: #2a2f3a; }
    :root:not([data-theme="light"]) .admin-nav-item { color: #c2c9d2; }
    :root:not([data-theme="light"]) .admin-nav-item:hover,
    :root:not([data-theme="light"]) .admin-nav-item.active { background: #222630; color: #ffffff; }
    :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3,
    :root:not([data-theme="light"]) h4, :root:not([data-theme="light"]) h5, :root:not([data-theme="light"]) h6,
    :root:not([data-theme="light"]) .page-title { color: #f2f4f7; }
    :root:not([data-theme="light"]) p { color: #c2c9d2; }
    :root:not([data-theme="light"]) .text-muted { color: #9aa4b2 !important; }
    :root:not([data-theme="light"]) .form-control,
    :root:not([data-theme="light"]) .form-select { background: #14171c; border-color: #3a414d; color: #e6e8eb; }
    :root:not([data-theme="light"]) .form-control::placeholder { color: #6b7280; }
    :root:not([data-theme="light"]) .form-control:focus,
    :root:not([data-theme="light"]) .form-select:focus { background: #14171c; color: #e6e8eb; border-color: #5b76ff; box-shadow: 0 0 0 0.2rem rgba(91,118,255,0.30); }
    :root:not([data-theme="light"]) .table {
        color: #e6e8eb;
        --bs-table-bg: transparent;
        --bs-table-color: #e6e8eb;
        --bs-table-border-color: #2a2f3a;
        --bs-table-striped-bg: #20242c;
        --bs-table-striped-color: #e6e8eb;
        --bs-table-hover-bg: #222630;
        --bs-table-hover-color: #ffffff;
        --bs-table-active-bg: #222630;
    }
    :root:not([data-theme="light"]) .table > :not(caption) > * > * { border-color: #2a2f3a; }
    :root:not([data-theme="light"]) .btn-outline-secondary { color: #c2c9d2; border-color: #3a414d; }
    :root:not([data-theme="light"]) .btn-outline-secondary:hover { background: #222630; color: #ffffff; }
    :root:not([data-theme="light"]) code { color: #e6e8eb; }
    :root:not([data-theme="light"]) hr { border-color: #2a2f3a; }
}