/* Dark theme variable overrides — the ONLY dark-token source, linked by
   every window including the main one (#240 palette consolidation,
   2026-07-08; src/styles.css previously carried a drifting duplicate block
   for the main window). Every token overridden here must have a light
   value in base.css :root; check-css-rules.mjs Check 4 gates both. */
:root.theme-dark {
    color-scheme: dark;
    /* The Mill palette, dark: neutral dark grey, steel-blue accent.
       Light counterpart in base.css :root. */
    --color-primary: #6ba3d6;
    --color-primary-hover: #85b5e0;
    --color-primary-light: #23394d;

    /* Surfaces */
    --color-bg: #161618;
    --color-surface: #1f1f22;
    --color-surface-raised: #28282c;
    --color-surface-sunken: #121214;
    --color-surface-overlay: rgba(0, 0, 0, 0.6);

    /* Text */
    --color-text: #e8e8e6;
    --color-text-secondary: #c6c6c2;
    --color-text-muted: #a0a09a;
    --color-text-disabled: #6a6a66;
    --color-text-inverse: #141414;

    /* Borders */
    --color-border: #3a3a3e;
    --color-border-strong: #56565b;
    --color-border-subtle: #2c2c30;

    /* Table */
    --color-table-header: #28282c;
    --color-table-row-hover: #2c2c31;
    --color-table-row-selected: #6ba3d6;
    --color-table-row-selected-text: #141414;
    --color-table-border: #313136;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.6);

    /* Menu & Toolbar */
    --color-menu-bar: #1a1a1d;
    --color-menu-bar-border: #3a3a3e;
    --color-toolbar: #1f1f22;

    /* Focus Ring */
    --color-focus: #7eb8f2;
    --color-focus-shadow: rgba(126, 184, 242, 0.28);

    /* Links */
    --color-link: #85b5e0;
    --color-link-hover: #a3c8ea;

    /* Status Colors */
    --color-success: #66bb6a;
    --color-error: #ef7365;
    --color-lamp-tx: #ff6659;
    --color-lamp-standby: #66bb6a;
    /* Warning + info families (#240 audit): brighter amber accent for dark
       surfaces; banner triples invert to deep fills with pale text.
       --color-warning-strong intentionally has no dark override (the filled
       amber control keeps white-text contrast on either theme). */
    --color-warning: #fbbf24;
    --color-warning-bg: #451a03;
    --color-warning-border: #92400e;
    --color-warning-text: #fde68a;
    --color-info-bg: #172554;
    --color-info-border: #1e40af;
    --color-info-text: #bfdbfe;
    /* Preserves the exact dark needed-row look skimmer.html hardcoded. */
    --color-highlight-needed-bg: #2563eb;
    --color-unsaved-bg: #443d2a;
    --color-unsaved-bg-hover: #504830;

    /* Sprint Warning (#240 consolidation, 2026-07-08): this token had
       drifted to red here while the main window's copy (formerly in
       styles.css) used the shipped blue sprint-banner look. The red only
       existed because radiosetup.html borrowed the token as an error
       background; that use now has its own --color-error-bg below. */
    --color-sprint-warning-bg: var(--color-toolbar);
    --color-sprint-warning-border: #3b82f6;

    /* Form Validation */
    --color-required-bg: #5c1a1a;
    --color-invalid-bg: #6b2020;
    /* Error surfaces (error-message boxes, danger-button hover). Dark value
       preserves the look radiosetup.html had when it borrowed the old red
       sprint-warning token. */
    --color-error-bg: #4a1515;
    /* Dark input fill. Was defined only in styles.css (main window) and the
       theme-init.js pre-paint copy; child windows resolved it by accident
       through the latter (#240 consolidation). */
    --color-input-bg: #28282c;

    /* Dupe Highlighting */
    --color-dupe-bg: #1a3a7a;
    --color-dupe-bg-hover: #1e448f;
    --color-dupe-text: #ffffff;

    /* Search Match Highlighting */
    --color-match-highlight: #8f8f88;
    --color-match-highlight-text: #141414;

    /* Secondary Surfaces (buttons, footers, panels) */
    --color-surface-secondary: #28282c;
    --color-surface-secondary-hover: #303035;
    --color-surface-secondary-active: #38383e;
    --color-modal-footer: #1a1a1d;

    /* Gray Text & Borders */
    --color-input-border: #56565b;
    --color-shortcut: #a0a09a;
    --color-muted-light: #7a7a75;
    --color-muted-medium: #c6c6c2;
    --color-muted-dark: #d8d8d4;

    /* Protocol Log */
    --color-log-bg: #121214;
    --color-log-text: #e8e8e6;
    --color-log-send: #60b0ff;
    --color-log-recv: #50fa7b;
    --color-log-time: #a0a09a;

    /* Modal Backdrop */
    --color-backdrop: rgba(0, 0, 0, 0.55);
}

/* ========================================
   DARK MODE: Element Overrides
   These cover hardcoded colors in child window inline styles.
   ======================================== */

/* html & body */
:root.theme-dark,
:root.theme-dark body {
    background: var(--color-bg);
    color: var(--color-text);
}

/* The Mill masthead: deep steel band instead of the bright light-theme
   primary, which would glare on dark surfaces. */
:root.theme-dark .mill-header {
    background: var(--color-primary-light);
    color: var(--color-text);
}

/* Modals */
:root.theme-dark .modal {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

:root.theme-dark .modal-body {
    background: var(--color-surface);
    color: var(--color-text);
}

:root.theme-dark .modal-footer {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}

:root.theme-dark .modal-close {
    color: white !important;
}

/* Form controls */
:root.theme-dark input,
:root.theme-dark select,
:root.theme-dark textarea {
    background: var(--color-input-bg, #282845);
    color: var(--color-text);
    border-color: var(--color-input-border);
}

:root.theme-dark input:focus,
:root.theme-dark select:focus,
:root.theme-dark textarea:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 2px var(--color-focus-shadow);
}

:root.theme-dark input:disabled,
:root.theme-dark select:disabled,
:root.theme-dark textarea:disabled {
    background: var(--color-surface-sunken);
    color: var(--color-text-disabled);
    border-color: var(--color-border);
}

:root.theme-dark input[readonly] {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
}

/* Buttons */
:root.theme-dark button {
    background: var(--color-surface-secondary);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

:root.theme-dark button:hover {
    background: var(--color-surface-secondary-hover);
}

:root.theme-dark button:active {
    background: var(--color-surface-secondary-active);
}

:root.theme-dark button:disabled {
    background: var(--color-surface-sunken);
    color: var(--color-text-disabled);
    border-color: var(--color-border);
}

/* Primary/default buttons (dark border = default styling in child windows) */
:root.theme-dark button.le-btn-default,
:root.theme-dark button[style*="border: 2px solid"] {
    border-color: var(--color-primary);
}

/* Primary colored buttons */
:root.theme-dark button.primary,
:root.theme-dark .le-btn-primary {
    background: var(--color-primary);
    color: #f8fafc;
    border-color: var(--color-primary);
}

:root.theme-dark button.primary:hover,
:root.theme-dark .le-btn-primary:hover {
    background: var(--color-primary-hover);
}

/* Window headers stay as-is (primary blue background) */

/* Tables */
:root.theme-dark table {
    border-color: var(--color-border);
}

:root.theme-dark th {
    background: var(--color-surface-raised) !important;
    color: var(--color-text);
    border-color: var(--color-border) !important;
}

:root.theme-dark td {
    border-color: var(--color-border-subtle);
    color: var(--color-text);
}

:root.theme-dark tr:hover td {
    background: var(--color-table-row-hover);
}

/* Fieldsets and panels */
:root.theme-dark fieldset {
    border-color: var(--color-border);
    background: var(--color-surface);
}

:root.theme-dark legend {
    color: var(--color-text);
}

/* Links */
:root.theme-dark a {
    color: var(--color-link);
}

:root.theme-dark a:hover {
    color: var(--color-link-hover);
}

/* Horizontal rules */
:root.theme-dark hr {
    border-color: var(--color-border);
}

/* Labels */
:root.theme-dark label {
    color: var(--color-text);
}

/* Common child-window classes */

/* Window footer bar (logentry, logedit) */
:root.theme-dark .window-footer,
:root.theme-dark .le-footer {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}

/* Content/form areas */
:root.theme-dark .content {
    background: var(--color-bg);
}

/* QSO form sections */
:root.theme-dark .form-section,
:root.theme-dark .qso-form-row {
    border-color: var(--color-border);
}

/* Menu bar in child windows */
:root.theme-dark .log-entry-menubar,
:root.theme-dark .le-menubar {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}

:root.theme-dark .le-menu-item {
    color: var(--color-link);
}

:root.theme-dark .le-menu-item:hover {
    background: var(--color-surface-sunken);
}

/* Partial match list */
:root.theme-dark .partial-match-list {
    background: var(--color-surface) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-text);
}

/* Tab-like elements, panel headers */
:root.theme-dark .panel-header,
:root.theme-dark .section-header {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}

/* Alert boxes */
:root.theme-dark .alert-warning {
    background: #1e2a3a;
    border-color: var(--color-primary);
    color: var(--color-text);
}
:root.theme-dark .alert-info {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-text);
}
:root.theme-dark .alert-info-table-container {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
:root.theme-dark .alert-info-table-header {
    background: var(--color-table-header);
    color: var(--color-text);
}
:root.theme-dark .alert-info-table-header th {
    border-bottom-color: var(--color-border);
}

/* Light backgrounds in inline styles */
:root.theme-dark [style*="background: #fff"],
:root.theme-dark [style*="background:#fff"],
:root.theme-dark [style*="background: #f0f0f0"],
:root.theme-dark [style*="background:#f0f0f0"],
:root.theme-dark [style*="background: #f5f5f5"],
:root.theme-dark [style*="background:#f5f5f5"],
:root.theme-dark [style*="background: #f9f9f9"],
:root.theme-dark [style*="background:#f9f9f9"] {
    background: var(--color-surface-raised) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Light text colors in inline styles */
:root.theme-dark [style*="color: #666"],
:root.theme-dark [style*="color:#666"],
:root.theme-dark [style*="color: #888"],
:root.theme-dark [style*="color:#888"] {
    color: var(--color-text-muted) !important;
}

/* Light border colors in inline styles */
:root.theme-dark [style*="border: 1px solid #ccc"],
:root.theme-dark [style*="border: 1px solid #ddd"],
:root.theme-dark [style*="border-top: 1px solid #ddd"] {
    border-color: var(--color-border) !important;
}

/* Red warning text */
:root.theme-dark [style*="color: #c00"],
:root.theme-dark [style*="color:#c00"] {
    color: #ff6b6b !important;
}

:root.theme-dark [style*="background: #e0e0e0"],
:root.theme-dark [style*="background:#e0e0e0"],
:root.theme-dark [style*="background: #e8e8e8"],
:root.theme-dark [style*="background:#e8e8e8"] {
    background: var(--color-surface-secondary-hover) !important;
}

/* Dark mode: invert toolbar PNG icons */
:root.theme-dark .toolbar-icon-btn img {
    filter: invert(1);
}

/* Checkbox accent color */
:root.theme-dark input[type="checkbox"] {
    accent-color: var(--color-primary);
}