/* Dark-mode overrides
 *
 * Applies whenever:
 *   (a) the user picked dark via the toggle  → :root[data-theme="dark"]
 *   (b) OS is dark AND user hasn't overridden → @media prefers-color-scheme:dark
 *
 * We catch the most common inline `style="background:#XXX"` values used across
 * the views instead of chasing every occurrence. Higher specificity than the
 * inline style is achieved via [style*="…"] + :root[data-theme="dark"] and
 * !important. This gives ~90% coverage without touching every view file.
 */

/* ============ SHARED DARK PALETTE (matches style.css definitions) ============ */

:root[data-theme="dark"] {
    /* Sub-tones derived from the base palette for surface layering */
    --dark-surface-1: #1a1d2e;   /* cards, primary containers */
    --dark-surface-2: #232741;   /* nested containers, hover surfaces */
    --dark-surface-3: #2d3044;   /* borders, dividers */
    --dark-surface-elev: #12141f;/* sidebar, most depressed panels */

    /* Accent tints for chips/badges — muted so they don't glow */
    --dark-tint-blue:   #1e3a5f;
    --dark-tint-green:  #14432a;
    --dark-tint-red:    #4c1d24;
    --dark-tint-amber:  #4d3612;
    --dark-tint-purple: #2e2444;
    --dark-tint-pink:   #4a1e37;
    --dark-tint-teal:   #123e42;
    --dark-tint-gray:   #262a3d;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dark-surface-1: #1a1d2e;
        --dark-surface-2: #232741;
        --dark-surface-3: #2d3044;
        --dark-surface-elev: #12141f;
        --dark-tint-blue:   #1e3a5f;
        --dark-tint-green:  #14432a;
        --dark-tint-red:    #4c1d24;
        --dark-tint-amber:  #4d3612;
        --dark-tint-purple: #2e2444;
        --dark-tint-pink:   #4a1e37;
        --dark-tint-teal:   #123e42;
        --dark-tint-gray:   #262a3d;
    }
}

/* ============ SELECTOR GROUP: both auto and manual dark ============ */

/* We repeat every rule under two selectors:
     :root[data-theme="dark"]  ← manual
     the @media block below     ← OS-auto (only when no user override)
   Copy-pasting the rules keeps the specificity working and the source easy
   to audit. */

/* ---- 1. Common container/background patterns ---- */

:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#ffffff"],
:root[data-theme="dark"] [style*="background: #ffffff"],
:root[data-theme="dark"] [style*="background-color:#fff"],
:root[data-theme="dark"] [style*="background-color: #fff"],
:root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background: white"] {
    background: var(--dark-surface-1) !important;
    color: var(--text-color);
}

:root[data-theme="dark"] [style*="#f9fafb"],
:root[data-theme="dark"] [style*="#f3f4f6"],
:root[data-theme="dark"] [style*="#f8f7f4"],
:root[data-theme="dark"] [style*="#f4f4f5"],
:root[data-theme="dark"] [style*="#fafafa"] {
    background: var(--dark-surface-2) !important;
}

:root[data-theme="dark"] [style*="#e5e7eb"],
:root[data-theme="dark"] [style*="#e5e2dc"],
:root[data-theme="dark"] [style*="#d1d5db"] {
    border-color: var(--dark-surface-3) !important;
}

/* ---- 2. Tint pill backgrounds ---- */

:root[data-theme="dark"] [style*="#dbeafe"],  /* blue tint */
:root[data-theme="dark"] [style*="#eff6ff"],
:root[data-theme="dark"] [style*="#bfdbfe"] { background: var(--dark-tint-blue) !important; color: #dbeafe !important; }

:root[data-theme="dark"] [style*="#dcfce7"],  /* green tint */
:root[data-theme="dark"] [style*="#d1fae5"],
:root[data-theme="dark"] [style*="#f0fdf4"],
:root[data-theme="dark"] [style*="#bbf7d0"],
:root[data-theme="dark"] [style*="#a7f3d0"] { background: var(--dark-tint-green) !important; color: #bbf7d0 !important; }

:root[data-theme="dark"] [style*="#fee2e2"],  /* red tint */
:root[data-theme="dark"] [style*="#fef2f2"],
:root[data-theme="dark"] [style*="#fecaca"] { background: var(--dark-tint-red) !important; color: #fecaca !important; }

:root[data-theme="dark"] [style*="#fef3c7"],  /* amber tint */
:root[data-theme="dark"] [style*="#fffbeb"],
:root[data-theme="dark"] [style*="#fde68a"] { background: var(--dark-tint-amber) !important; color: #fde68a !important; }

:root[data-theme="dark"] [style*="#ede9fe"],  /* purple tint */
:root[data-theme="dark"] [style*="#c4b5fd"] { background: var(--dark-tint-purple) !important; color: #c4b5fd !important; }

:root[data-theme="dark"] [style*="#fce7f3"],  /* pink tint */
:root[data-theme="dark"] [style*="#fbcfe8"] { background: var(--dark-tint-pink) !important; color: #fbcfe8 !important; }

:root[data-theme="dark"] [style*="#cffafe"] { background: var(--dark-tint-teal) !important; color: #cffafe !important; }

/* ---- 3. Text-colour bleed-through ---- */

:root[data-theme="dark"] [style*="color:#111"],
:root[data-theme="dark"] [style*="color: #111"],
:root[data-theme="dark"] [style*="color:#1a1a2e"],
:root[data-theme="dark"] [style*="color:#1f2937"],
:root[data-theme="dark"] [style*="color: #1f2937"],
:root[data-theme="dark"] [style*="color:#374151"] {
    color: var(--text-color) !important;
}
:root[data-theme="dark"] [style*="color:#666"],
:root[data-theme="dark"] [style*="color: #666"],
:root[data-theme="dark"] [style*="color:#6b7280"] { color: var(--text-muted) !important; }
:root[data-theme="dark"] [style*="color:#888"],
:root[data-theme="dark"] [style*="color:#9ca3af"] { color: var(--text-light) !important; }

/* ---- 4. Form controls ---- */

:root[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .form-control {
    background: var(--dark-surface-2);
    color: var(--text-color);
    border-color: var(--dark-surface-3);
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] .form-control:focus {
    background: var(--dark-surface-1);
    border-color: var(--primary-color);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--text-light); }

/* ---- 5. Kanban / requests rollup ---- */

:root[data-theme="dark"] .requests-kanban-col,
:root[data-theme="dark"] .requests-rollup,
:root[data-theme="dark"] .request-card,
:root[data-theme="dark"] .requests-col-empty {
    background: var(--dark-surface-1) !important;
    border-color: var(--dark-surface-3) !important;
    color: var(--text-color);
}
:root[data-theme="dark"] .request-card { background: var(--dark-surface-2) !important; }
:root[data-theme="dark"] .requests-terminal-row { border-color: var(--dark-surface-3) !important; }

/* ---- 6. Tables ---- */

:root[data-theme="dark"] table,
:root[data-theme="dark"] .table,
:root[data-theme="dark"] thead,
:root[data-theme="dark"] tbody,
:root[data-theme="dark"] tr,
:root[data-theme="dark"] td,
:root[data-theme="dark"] th {
    background-color: transparent;
    color: var(--text-color);
    border-color: var(--dark-surface-3);
}
:root[data-theme="dark"] table thead,
:root[data-theme="dark"] .table thead { background: var(--dark-surface-2); }
:root[data-theme="dark"] table tbody tr:hover td { background: var(--dark-surface-2); }

/* ---- 7. Card / modal / dropdown chrome ---- */

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] details,
:root[data-theme="dark"] summary {
    background: var(--dark-surface-1);
    color: var(--text-color);
    border-color: var(--dark-surface-3);
}
:root[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.7); }

/* ---- 8. Badge / chip generic ---- */

:root[data-theme="dark"] .badge-green,   :root[data-theme="dark"] .badge.badge-green   { background: var(--dark-tint-green); color: #bbf7d0; }
:root[data-theme="dark"] .badge-red,     :root[data-theme="dark"] .badge.badge-red     { background: var(--dark-tint-red);   color: #fecaca; }
:root[data-theme="dark"] .badge-blue,    :root[data-theme="dark"] .badge.badge-blue    { background: var(--dark-tint-blue);  color: #dbeafe; }
:root[data-theme="dark"] .badge-yellow,  :root[data-theme="dark"] .badge.badge-yellow  { background: var(--dark-tint-amber); color: #fde68a; }
:root[data-theme="dark"] .badge-orange,  :root[data-theme="dark"] .badge.badge-orange  { background: var(--dark-tint-amber); color: #fbbf24; }
:root[data-theme="dark"] .badge-purple,  :root[data-theme="dark"] .badge.badge-purple  { background: var(--dark-tint-purple);color: #c4b5fd; }

/* ---- 9. Share-inbox specifics ---- */

:root[data-theme="dark"] .si-toolbar input,
:root[data-theme="dark"] .si-toolbar select { background: var(--dark-surface-2); color: var(--text-color); border-color: var(--dark-surface-3); }
:root[data-theme="dark"] .si-tag-chip { background: var(--dark-surface-2); color: var(--text-color); }
:root[data-theme="dark"] .si-tag-active { background: var(--primary-color); color: #fff; }
:root[data-theme="dark"] .si-item { background: var(--dark-surface-1); border-color: var(--dark-surface-3); }
:root[data-theme="dark"] .si-item-tag { background: var(--dark-tint-purple); color: #c4b5fd; }
:root[data-theme="dark"] .si-editable:focus { background: var(--dark-surface-2); }
:root[data-theme="dark"] .si-empty { background: var(--dark-surface-1); border-color: var(--dark-surface-3); color: var(--text-muted); }
:root[data-theme="dark"] .si-manage-tags { background: var(--dark-surface-1); }

/* ---- 10. Status progress strip ---- */

:root[data-theme="dark"] .status-progress { background: var(--dark-surface-2); border-color: var(--dark-surface-3); }
:root[data-theme="dark"] .sp-step .sp-dot { background: var(--dark-surface-1); border-color: var(--dark-surface-3); color: var(--text-muted); }
:root[data-theme="dark"] .sp-step.sp-reached .sp-dot { background: var(--dark-tint-blue); border-color: var(--primary-color); color: #dbeafe; }
:root[data-theme="dark"] .sp-step.sp-current .sp-dot { background: var(--primary-color); color: #fff; }
:root[data-theme="dark"] .sp-label { color: var(--text-muted); }
:root[data-theme="dark"] .sp-step.sp-reached .sp-label { color: #dbeafe; }
:root[data-theme="dark"] .sp-line { background: var(--dark-surface-3); }
:root[data-theme="dark"] .sp-sibling-note { background: var(--dark-tint-amber); color: #fde68a; border-color: rgba(253,230,138,.2); }
:root[data-theme="dark"] .sp-done { color: #86efac; }

/* ---- 11. Alerts / notes / info-box ---- */

:root[data-theme="dark"] .alert-success { background: var(--dark-tint-green) !important; color: #bbf7d0 !important; border-color: rgba(187,247,208,.2) !important; }
:root[data-theme="dark"] .alert-error,
:root[data-theme="dark"] .alert-danger  { background: var(--dark-tint-red) !important;   color: #fecaca !important; border-color: rgba(254,202,202,.2) !important; }
:root[data-theme="dark"] .alert-warning { background: var(--dark-tint-amber) !important; color: #fde68a !important; border-color: rgba(253,230,138,.2) !important; }
:root[data-theme="dark"] .alert-info    { background: var(--dark-tint-blue) !important;  color: #dbeafe !important; border-color: rgba(219,234,254,.2) !important; }

/* ---- 12. Lightbox overlays (share inbox) — keep them dark, they already were ---- */

/* ---- 13. Buttons: outline and secondary need dark treatment ---- */

:root[data-theme="dark"] .btn-outline {
    background: transparent; color: var(--text-color); border-color: var(--dark-surface-3);
}
:root[data-theme="dark"] .btn-outline:hover { background: var(--dark-surface-2); }
:root[data-theme="dark"] .btn-secondary {
    background: var(--dark-surface-2); color: var(--text-color); border-color: var(--dark-surface-3);
}
:root[data-theme="dark"] .btn-secondary:hover { background: var(--dark-surface-3); }
:root[data-theme="dark"] .btn-link { color: #60a5fa; }

/* ============ 14. Repeat rules for OS-auto mode ============
   Same rules as above, wrapped in a prefers-color-scheme media query, so users
   who never touch the toggle still get the dark treatment when their OS is dark.
   Selector chain adds :root:not([data-theme="light"]) so "picked light" wins. */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [style*="background:#fff"],
    :root:not([data-theme="light"]) [style*="background: #fff"],
    :root:not([data-theme="light"]) [style*="background:#ffffff"],
    :root:not([data-theme="light"]) [style*="background: #ffffff"],
    :root:not([data-theme="light"]) [style*="background-color:#fff"],
    :root:not([data-theme="light"]) [style*="background-color: #fff"],
    :root:not([data-theme="light"]) [style*="background:white"],
    :root:not([data-theme="light"]) [style*="background: white"] {
        background: var(--dark-surface-1) !important;
        color: var(--text-color);
    }
    :root:not([data-theme="light"]) [style*="#f9fafb"],
    :root:not([data-theme="light"]) [style*="#f3f4f6"],
    :root:not([data-theme="light"]) [style*="#f8f7f4"],
    :root:not([data-theme="light"]) [style*="#f4f4f5"],
    :root:not([data-theme="light"]) [style*="#fafafa"] { background: var(--dark-surface-2) !important; }
    :root:not([data-theme="light"]) [style*="#e5e7eb"],
    :root:not([data-theme="light"]) [style*="#e5e2dc"],
    :root:not([data-theme="light"]) [style*="#d1d5db"] { border-color: var(--dark-surface-3) !important; }
    :root:not([data-theme="light"]) [style*="#dbeafe"],
    :root:not([data-theme="light"]) [style*="#eff6ff"],
    :root:not([data-theme="light"]) [style*="#bfdbfe"] { background: var(--dark-tint-blue) !important; color: #dbeafe !important; }
    :root:not([data-theme="light"]) [style*="#dcfce7"],
    :root:not([data-theme="light"]) [style*="#d1fae5"],
    :root:not([data-theme="light"]) [style*="#f0fdf4"],
    :root:not([data-theme="light"]) [style*="#bbf7d0"],
    :root:not([data-theme="light"]) [style*="#a7f3d0"] { background: var(--dark-tint-green) !important; color: #bbf7d0 !important; }
    :root:not([data-theme="light"]) [style*="#fee2e2"],
    :root:not([data-theme="light"]) [style*="#fef2f2"],
    :root:not([data-theme="light"]) [style*="#fecaca"] { background: var(--dark-tint-red) !important; color: #fecaca !important; }
    :root:not([data-theme="light"]) [style*="#fef3c7"],
    :root:not([data-theme="light"]) [style*="#fffbeb"],
    :root:not([data-theme="light"]) [style*="#fde68a"] { background: var(--dark-tint-amber) !important; color: #fde68a !important; }
    :root:not([data-theme="light"]) [style*="#ede9fe"],
    :root:not([data-theme="light"]) [style*="#c4b5fd"] { background: var(--dark-tint-purple) !important; color: #c4b5fd !important; }
    :root:not([data-theme="light"]) [style*="#fce7f3"],
    :root:not([data-theme="light"]) [style*="#fbcfe8"] { background: var(--dark-tint-pink) !important; color: #fbcfe8 !important; }
    :root:not([data-theme="light"]) [style*="#cffafe"] { background: var(--dark-tint-teal) !important; color: #cffafe !important; }
    :root:not([data-theme="light"]) [style*="color:#111"],
    :root:not([data-theme="light"]) [style*="color: #111"],
    :root:not([data-theme="light"]) [style*="color:#1a1a2e"],
    :root:not([data-theme="light"]) [style*="color:#1f2937"],
    :root:not([data-theme="light"]) [style*="color: #1f2937"],
    :root:not([data-theme="light"]) [style*="color:#374151"] { color: var(--text-color) !important; }
    :root:not([data-theme="light"]) [style*="color:#666"],
    :root:not([data-theme="light"]) [style*="color: #666"],
    :root:not([data-theme="light"]) [style*="color:#6b7280"] { color: var(--text-muted) !important; }
    :root:not([data-theme="light"]) [style*="color:#888"],
    :root:not([data-theme="light"]) [style*="color:#9ca3af"] { color: var(--text-light) !important; }

    :root:not([data-theme="light"]) input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
    :root:not([data-theme="light"]) textarea,
    :root:not([data-theme="light"]) select,
    :root:not([data-theme="light"]) .form-control {
        background: var(--dark-surface-2); color: var(--text-color); border-color: var(--dark-surface-3);
    }

    :root:not([data-theme="light"]) .requests-kanban-col,
    :root:not([data-theme="light"]) .requests-rollup,
    :root:not([data-theme="light"]) .request-card,
    :root:not([data-theme="light"]) .requests-col-empty {
        background: var(--dark-surface-1) !important; border-color: var(--dark-surface-3) !important; color: var(--text-color);
    }
    :root:not([data-theme="light"]) .request-card { background: var(--dark-surface-2) !important; }

    :root:not([data-theme="light"]) table thead,
    :root:not([data-theme="light"]) .table thead { background: var(--dark-surface-2); }
    :root:not([data-theme="light"]) table tbody tr:hover td { background: var(--dark-surface-2); }

    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .modal-content,
    :root:not([data-theme="light"]) .dropdown-menu {
        background: var(--dark-surface-1); color: var(--text-color); border-color: var(--dark-surface-3);
    }

    :root:not([data-theme="light"]) .status-progress { background: var(--dark-surface-2); border-color: var(--dark-surface-3); }
    :root:not([data-theme="light"]) .sp-step .sp-dot { background: var(--dark-surface-1); border-color: var(--dark-surface-3); color: var(--text-muted); }
    :root:not([data-theme="light"]) .sp-step.sp-reached .sp-dot { background: var(--dark-tint-blue); border-color: var(--primary-color); color: #dbeafe; }
    :root:not([data-theme="light"]) .sp-step.sp-current .sp-dot { background: var(--primary-color); color: #fff; }
    :root:not([data-theme="light"]) .sp-label { color: var(--text-muted); }
    :root:not([data-theme="light"]) .sp-line { background: var(--dark-surface-3); }

    :root:not([data-theme="light"]) .si-item { background: var(--dark-surface-1); border-color: var(--dark-surface-3); }
    :root:not([data-theme="light"]) .si-tag-chip { background: var(--dark-surface-2); color: var(--text-color); }
    :root:not([data-theme="light"]) .si-item-tag { background: var(--dark-tint-purple); color: #c4b5fd; }

    :root:not([data-theme="light"]) .btn-outline { background: transparent; color: var(--text-color); border-color: var(--dark-surface-3); }
    :root:not([data-theme="light"]) .btn-secondary { background: var(--dark-surface-2); color: var(--text-color); border-color: var(--dark-surface-3); }
}