/* ==========================================================================
CSS CUSTOM PROPERTIES — THREE-LAYER THEME SYSTEM
    Layer 1: Palette  (accent colors per data-palette)
    Layer 2: Mode     (light/dark surface colors per data-theme)
    Layer 3: Functional (backward-compatible semantic vars)
========================================================================== */

/* ── LAYER 1: PALETTE DEFAULTS ── */
:root {
    --palette-accent: #198754;
    --palette-glow: #03a9f4;
}

/* ── LAYER 2: MODE (Light default) ── */
:root {
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    /* Layout */
    --table-width: 100%;
    --header-height: 28px;
    --row-height: 30px;
    --border-width: 1px;
    --font-size: 14px;
    --border-collapse: collapse;
    --cell-padding: 0.33em;
    --navbar-width: 100%;

    /* Mode surface colors — Light */
    --mode-body-bg: #202837;
    --mode-thead-bg: #212529;
    --mode-thead-text: #ffffff;
    --mode-text: #000000;
    --mode-border: #dddddd;
    --mode-text-hover: inherit;
    --mode-row-odd: #F4F5F7;
    --mode-row-even: #d9e1f2;

    /* Mode article colors — Light */
    --mode-article-text: #000000;
    --mode-article-header-bg: #212529;
    --mode-article-header-text: #ffffff;
    --mode-article-odd: #F4F5F7;
    --mode-article-even: #d9e1f2;
    --mode-article-link: #000000;
    --mode-article-link-hover: #333333;
}

/* ── LAYER 2: MODE (Dark) ── */
[data-theme="dark"] {
    --mode-body-bg: #202837;
    --mode-thead-bg: #212529;
    --mode-thead-text: #ffffff;
    --mode-text: #A0AEC0;
    --mode-border: #252C3B;
    --mode-text-hover: whitesmoke;
    --mode-row-odd: #2E3749;
    --mode-row-even: #1A202C;

    --mode-article-text: #A0AEC0;
    --mode-article-header-bg: #212529;
    --mode-article-header-text: #ffffff;
    --mode-article-odd: #2E3749;
    --mode-article-even: #1A202C;
    --mode-article-link: #A0AEC0;
    --mode-article-link-hover: #ffffff;
}

/* ── LAYER 3: FUNCTIONAL (backward-compatible names) ── */
:root {
    /* Surface */
    --body-bg: var(--mode-body-bg);
    --thead-bg: var(--mode-thead-bg);
    --thead-text: var(--mode-thead-text);
    --text-color: var(--mode-text);
    --border-color: var(--mode-border);
    --bold-text-color: var(--mode-text);
    --normal-text-color: var(--mode-text);
    --text-hover-color: var(--mode-text-hover);

    /* Highlight & fade — accent-driven */
    --highlight-bg: var(--palette-accent);
    --highlight-text: inherit;
    --fade-text-to: inherit;
    --fade-odd-from: var(--palette-accent);
    --fade-odd-to: var(--mode-row-odd);
    --fade-even-from: var(--palette-accent);
    --fade-even-to: var(--mode-row-even);

    /* Detail rows */
    --detail-even-bg: var(--mode-row-even);
    --detail-odd-bg: var(--mode-row-odd);

    /* Articles */
    --article-text-color: var(--mode-article-text);
    --article-header-bg: var(--mode-article-header-bg);
    --article-header-text: var(--mode-article-header-text);
    --article-odd-bg: var(--mode-article-odd);
    --article-even-bg: var(--mode-article-even);
    --article-link-color: var(--mode-article-link);
    --article-link-hover: var(--mode-article-link-hover);

    /* Container glow — palette-driven */
    --container-glow: var(--palette-glow);

    /* Spot-filter pill — defaults match Classic Light. Each palette+theme
       block below overrides these to fit its surface colors. */
    --filter-pill-bg:        #000000;
    --filter-pill-border:    #6c757d;
    --filter-btn-active-text: #ffffff;
}

/* ==========================================================================
PALETTE + MODE COMPOUND SELECTORS
Each palette defines its full color set for both light and dark modes.
========================================================================== */

/* ── Classic Green ── */
[data-palette="classic"][data-theme="light"] {
    --palette-accent:           #198754;
    --palette-glow:             #03a9f4;
    --mode-body-bg:             #202837;
    --mode-thead-bg:            #1a1d21;
    --mode-thead-text:          #adb5bd;
    --mode-text:                #000000;
    --mode-border:              #dddddd;
    --mode-text-hover:          inherit;
    --mode-row-odd:             #F4F5F7;
    --mode-row-even:            #d9e1f2;
    --mode-article-text:        #000000;
    --mode-article-header-bg:   #1a1d21;
    --mode-article-header-text: #adb5bd;
    --mode-article-odd:         #F4F5F7;
    --mode-article-even:        #d9e1f2;
    --mode-article-link:        #000000;
    --mode-article-link-hover:  #333333;
}
[data-palette="classic"][data-theme="dark"] {
    --palette-accent:           #198754;
    --palette-glow:             rgba(3, 169, 244, 0.25);
    --mode-body-bg:             #202837;
    --mode-thead-bg:            #1a1d21;
    --mode-thead-text:          #adb5bd;
    --mode-text:                #A0AEC0;
    --mode-border:              #252C3B;
    --mode-text-hover:          whitesmoke;
    --mode-row-odd:             #2E3749;
    --mode-row-even:            #1A202C;
    --mode-article-text:        #A0AEC0;
    --mode-article-header-bg:   #1a1d21;
    --mode-article-header-text: #adb5bd;
    --mode-article-odd:         #2E3749;
    --mode-article-even:        #1A202C;
    --mode-article-link:        #A0AEC0;
    --mode-article-link-hover:  whitesmoke;
    --highlight-bg:             rgba(74, 85, 104, 1);
    --fade-odd-from:            rgba(74, 85, 104, 1);
    --fade-even-from:           rgba(74, 85, 104, 1);
    --filter-pill-bg:           #0d1018;
    --filter-pill-border:       #495057;
    --filter-btn-active-text:   #ffffff;
}

/* ── Ocean Blue ── */
[data-palette="ocean"][data-theme="light"] {
    --palette-accent:           #0d6efd;
    --palette-glow:             rgba(13, 110, 253, 0.25);
    --mode-body-bg:             #e8ecf8;
    --mode-thead-bg:            #1b3a5c;
    --mode-thead-text:          #e8f0fe;
    --mode-text:                #333333;
    --mode-border:              #bcc8e0;
    --mode-text-hover:          #0d6efd;
    --mode-row-odd:             #c8d4f0;
    --mode-row-even:            #e8ecf8;
    --mode-article-text:        #333333;
    --mode-article-header-bg:   #1b3a5c;
    --mode-article-header-text: #e8f0fe;
    --mode-article-odd:         #c8d4f0;
    --mode-article-even:        #e8ecf8;
    --mode-article-link:        #333333;
    --mode-article-link-hover:  #0d6efd;
    --highlight-bg:             rgba(13, 110, 253, 0.3);
    --fade-odd-from:            rgba(13, 110, 253, 0.3);
    --fade-even-from:           rgba(13, 110, 253, 0.3);
    --filter-pill-bg:           #0a1f33;
    --filter-pill-border:       #2c5a8a;
    --filter-btn-active-text:   #ffffff;
}
[data-palette="ocean"][data-theme="dark"] {
    --palette-accent:           #0d6efd;
    --palette-glow:             #0d6efd;
    --mode-body-bg:             #0d1b2a;
    --mode-thead-bg:            #132d4a;
    --mode-thead-text:          #c8ddf0;
    --mode-text:                #9db8d4;
    --mode-border:              #1a3350;
    --mode-text-hover:          whitesmoke;
    --mode-row-odd:             #162b42;
    --mode-row-even:            #112238;
    --mode-article-text:        #9db8d4;
    --mode-article-header-bg:   #132d4a;
    --mode-article-header-text: #c8ddf0;
    --mode-article-odd:         #162b42;
    --mode-article-even:        #112238;
    --mode-article-link:        #9db8d4;
    --mode-article-link-hover:  whitesmoke;
    --palette-glow:             rgba(13, 110, 253, 0.25);
    --highlight-bg:             rgba(13, 110, 253, 0.2);
    --fade-odd-from:            rgba(13, 110, 253, 0.2);
    --fade-even-from:           rgba(13, 110, 253, 0.2);
    --filter-pill-bg:           #061525;
    --filter-pill-border:       #1f3e60;
    --filter-btn-active-text:   #ffffff;
}

/* ── Amber ── */
[data-palette="amber"][data-theme="light"] {
    --palette-accent:           #d4920a;
    --palette-glow:             rgba(212, 146, 10, 0.25);
    --mode-body-bg:             #e8ddd0;
    --mode-thead-bg:            #5c4326;
    --mode-thead-text:          #f5e6d0;
    --mode-text:                #3d2b1a;
    --mode-border:              #d4c4a8;
    --mode-text-hover:          #b37400;
    --mode-row-odd:             #faf5ef;
    --mode-row-even:            #f0e8dc;
    --mode-article-text:        #3d2b1a;
    --mode-article-header-bg:   #5c4326;
    --mode-article-header-text: #f5e6d0;
    --mode-article-odd:         #faf5ef;
    --mode-article-even:        #f0e8dc;
    --mode-article-link:        #3d2b1a;
    --mode-article-link-hover:  #b37400;
    --highlight-bg:             rgba(212, 146, 10, 0.35);
    --fade-odd-from:            rgba(212, 146, 10, 0.35);
    --fade-even-from:           rgba(212, 146, 10, 0.35);
    --filter-pill-bg:           #2e2010;
    --filter-pill-border:       #7a5a36;
    --filter-btn-active-text:   #ffffff;
}
[data-palette="amber"][data-theme="dark"] {
    --palette-accent:           #d4920a;
    --palette-glow:             #d4920a;
    --mode-body-bg:             #1a1408;
    --mode-thead-bg:            #332408;
    --mode-thead-text:          #e8c878;
    --mode-text:                #c4a66a;
    --mode-border:              #2e2210;
    --mode-text-hover:          whitesmoke;
    --mode-row-odd:             #261c0a;
    --mode-row-even:            #1e1608;
    --mode-article-text:        #c4a66a;
    --mode-article-header-bg:   #332408;
    --mode-article-header-text: #e8c878;
    --mode-article-odd:         #261c0a;
    --mode-article-even:        #1e1608;
    --mode-article-link:        #c4a66a;
    --mode-article-link-hover:  whitesmoke;
    --palette-glow:             rgba(212, 146, 10, 0.25);
    --highlight-bg:             rgba(212, 146, 10, 0.2);
    --fade-odd-from:            rgba(212, 146, 10, 0.2);
    --fade-even-from:           rgba(212, 146, 10, 0.2);
    --filter-pill-bg:           #1a1206;
    --filter-pill-border:       #4a3315;
    --filter-btn-active-text:   #ffffff;
}

/* ── High Contrast ── */
[data-palette="highcontrast"][data-theme="light"] {
    --palette-accent:           #6c757d;
    --palette-glow:             #6c757d;
    --mode-body-bg:             #d8d8d8;
    --mode-thead-bg:            #1a1a1a;
    --mode-thead-text:          #ffffff;
    --mode-text:                #0a0a0a;
    --mode-border:              #888888;
    --mode-text-hover:          #000000;
    --mode-row-odd:             #f8f8f8;
    --mode-row-even:            #ebebeb;
    --mode-article-text:        #0a0a0a;
    --mode-article-header-bg:   #1a1a1a;
    --mode-article-header-text: #ffffff;
    --mode-article-odd:         #f8f8f8;
    --mode-article-even:        #ebebeb;
    --mode-article-link:        #0a0a0a;
    --mode-article-link-hover:  #000000;
    --highlight-bg:             rgba(0, 0, 0, 0.12);
    --fade-odd-from:            rgba(0, 0, 0, 0.12);
    --fade-even-from:           rgba(0, 0, 0, 0.12);
    --filter-pill-bg:           #000000;
    --filter-pill-border:       #555555;
    --filter-btn-active-text:   #ffffff;
}
[data-palette="highcontrast"][data-theme="dark"] {
    --palette-accent:           #6c757d;
    --palette-glow:             #6c757d;
    --mode-body-bg:             #0a0a0a;
    --mode-thead-bg:            #1a1a1a;
    --mode-thead-text:          #c8c8c8;
    --mode-text:                #b0b0b0;
    --mode-border:              #333333;
    --mode-text-hover:          whitesmoke;
    --mode-row-odd:             #181818;
    --mode-row-even:            #111111;
    --mode-article-text:        #b0b0b0;
    --mode-article-header-bg:   #1a1a1a;
    --mode-article-header-text: #c8c8c8;
    --mode-article-odd:         #181818;
    --mode-article-even:        #111111;
    --mode-article-link:        #b0b0b0;
    --mode-article-link-hover:  whitesmoke;
    --highlight-bg:             rgba(255, 255, 255, 0.15);
    --fade-odd-from:            rgba(255, 255, 255, 0.15);
    --fade-even-from:           rgba(255, 255, 255, 0.15);
    --filter-pill-bg:           #000000;
    --filter-pill-border:       #555555;
    --filter-btn-active-text:   #ffffff;
}

/* ── Crimson ── */
[data-palette="crimson"][data-theme="light"] {
    --palette-accent:           #dc3545;
    --palette-glow:             rgba(220, 53, 69, 0.25);
    --mode-body-bg:             #e6d5d5;
    --mode-thead-bg:            #5c1a1a;
    --mode-thead-text:          #fbe0e0;
    --mode-text:                #2d1111;
    --mode-border:              #d4a8a8;
    --mode-text-hover:          #b02a37;
    --mode-row-odd:             #fcf5f5;
    --mode-row-even:            #f4e8e8;
    --mode-article-text:        #2d1111;
    --mode-article-header-bg:   #5c1a1a;
    --mode-article-header-text: #fbe0e0;
    --mode-article-odd:         #fcf5f5;
    --mode-article-even:        #f4e8e8;
    --mode-article-link:        #2d1111;
    --mode-article-link-hover:  #b02a37;
    --highlight-bg:             rgba(220, 53, 69, 0.2);
    --fade-odd-from:            rgba(220, 53, 69, 0.2);
    --fade-even-from:           rgba(220, 53, 69, 0.2);
    --filter-pill-bg:           #2e0d0d;
    --filter-pill-border:       #7a2828;
    --filter-btn-active-text:   #ffffff;
}
[data-palette="crimson"][data-theme="dark"] {
    --palette-accent:           #dc3545;
    --palette-glow:             rgba(220, 53, 69, 0.25);
    --mode-body-bg:             #1a0c0c;
    --mode-thead-bg:            #3a1010;
    --mode-thead-text:          #e8a0a0;
    --mode-text:                #c49090;
    --mode-border:              #301515;
    --mode-text-hover:          whitesmoke;
    --mode-row-odd:             #261212;
    --mode-row-even:            #1e0e0e;
    --mode-article-text:        #c49090;
    --mode-article-header-bg:   #3a1010;
    --mode-article-header-text: #e8a0a0;
    --mode-article-odd:         #261212;
    --mode-article-even:        #1e0e0e;
    --mode-article-link:        #c49090;
    --mode-article-link-hover:  whitesmoke;
    --highlight-bg:             rgba(220, 53, 69, 0.2);
    --fade-odd-from:            rgba(220, 53, 69, 0.2);
    --fade-even-from:           rgba(220, 53, 69, 0.2);
    --filter-pill-bg:           #1a0606;
    --filter-pill-border:       #4d1818;
    --filter-btn-active-text:   #ffffff;
}

/* ── Matrix ── */
[data-palette="matrix"][data-theme="light"] {
    --palette-accent:           #33cc44;
    --palette-glow:             rgba(51, 204, 68, 0.25);
    --mode-body-bg:             #f0f5f0;
    --mode-thead-bg:            #3a3a3a;
    --mode-thead-text:          #f0f0f0;
    --mode-text:                #333333;
    --mode-border:              #c8d8c8;
    --mode-text-hover:          #1a8a2a;
    --mode-row-odd:             #d4edda;
    --mode-row-even:            #e8f5eb;
    --mode-article-text:        #333333;
    --mode-article-header-bg:   #3a3a3a;
    --mode-article-header-text: #f0f0f0;
    --mode-article-odd:         #d4edda;
    --mode-article-even:        #e8f5eb;
    --mode-article-link:        #333333;
    --mode-article-link-hover:  #1a8a2a;
    --highlight-bg:             rgba(51, 204, 68, 0.5);
    --fade-odd-from:            rgba(51, 204, 68, 0.5);
    --fade-even-from:           rgba(51, 204, 68, 0.5);
    --filter-pill-bg:           #1a1a1a;
    --filter-pill-border:       #4a5a4a;
    --filter-btn-active-text:   #ffffff;
}
[data-palette="matrix"][data-theme="dark"] {
    --palette-accent:           #00ff41;
    --palette-glow:             rgba(0, 255, 65, 0.25);
    --mode-body-bg:             #020a02;
    --mode-thead-bg:            #0d2810;
    --mode-thead-text:          #33ff66;
    --mode-text:                #33cc44;
    --mode-border:              #0c200c;
    --mode-text-hover:          whitesmoke;
    --mode-row-odd:             #081408;
    --mode-row-even:            #040e04;
    --mode-article-text:        #33cc44;
    --mode-article-header-bg:   #0d2810;
    --mode-article-header-text: #33ff66;
    --mode-article-odd:         #081408;
    --mode-article-even:        #040e04;
    --mode-article-link:        #33cc44;
    --mode-article-link-hover:  whitesmoke;
    --highlight-bg:             rgba(0, 255, 65, 0.2);
    --fade-odd-from:            rgba(0, 255, 65, 0.2);
    --fade-even-from:           rgba(0, 255, 65, 0.2);
    --highlight-text:           #33ff66;
    --fade-text-to:             #33cc44;
    --filter-pill-bg:           #020a02;
    --filter-pill-border:       #1f4a23;
    --filter-btn-active-text:   #000000;
}

/* ==========================================================================
KEYFRAME ANIMATIONS
========================================================================== */

    @keyframes fadeout-odd {
        0% {background-color: var(--fade-odd-from);}
        100% {background-color: var(--fade-odd-to);}
    }

    @keyframes fadeout-even {
        0% {background-color: var(--fade-even-from);}
        100% {background-color: var(--fade-even-to);}
    }

/* ==========================================================================
BASE LAYOUT & STRUCTURE
========================================================================== */
    
    .index-hero {
        max-width: 1300px;
        margin: 0 auto 24px auto;
        padding: 12px 0;
        color: #c9d1d9;
        text-align: center;
    }

    .index-hero h1 {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 6px 0;
        color: #e6edf3;
    }

    .index-hero p {
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
        opacity: 0.85;
    }

    .index-hero h2 {
        font-size: 15px;
        font-weight: 600;
        margin: 12px 0 4px 0;
        color: #e6edf3;
    }

    /* Inline body links must not rely on color alone to be distinguishable
       (WCAG 1.4.1 / PageSpeed "Links rely on color"). Underline is the
       conventional non-color cue for inline links inside paragraph copy. */
    .index-hero a {
        color: #58a6ff;
        text-decoration: underline;
    }

    .index-hero a:hover {
        color: #80bdff;
    }

    .index-body {
        background-color: var(--body-bg);
        padding: 73px 16px 16px 16px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .index-container {
        width: 100%;
        max-width: 1300px;
        height: calc(100vh - 73px);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        background: linear-gradient(to bottom, var(--thead-bg) 28px, transparent 28px);
        box-shadow: none;
        border-radius: 8px;
        overflow: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
        position: relative;
    }

    .index-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--header-height, 28px);
        background-color: var(--thead-bg);
        pointer-events: none;
    }

    [data-palette="classic"] .index-container {
        box-shadow:
            0 0 12px 2px var(--container-glow),
            0 0 28px 6px var(--container-glow);
    }

    body::-webkit-scrollbar {
        display: none;
    }

/* ==========================================================================
TABLE BASE STYLES
========================================================================== */

    table {
        width: 100%;
        border-collapse: collapse;
    }

/* ==========================================================================
SPOT TABLE STYLES
========================================================================== */

    .spot-table-wrapper {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* Empty-state shown when the active filter combination matches zero spots.
       Uses the same broadcast icon as the dxsearch_modal welcome screen. JS
       toggles the .show class based on the count of visible non-detail rows. */
    .spot-table-empty {
        display: none;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 2rem;
        color: var(--mode-thead-text);
        opacity: 0.85;
        text-align: center;
    }
    .spot-table-empty.show {
        display: flex;
    }
    .spot-table-empty h5 {
        margin: 0;
        font-weight: 500;
    }

    .spot-table-wrapper::-webkit-scrollbar {
        display: none;
    }

    #spot-table {
        /* Don't grow to fill the wrapper — sizing to content keeps every row at
           --row-height even when only a handful of spots are shown. The wrapper
           keeps overflow-y: auto so scrolling still works when rows overflow. */
        flex: 0 0 auto;
        font-family: var(--font-family);
        font-size: var(--font-size);
        border-collapse: var(--border-collapse);
        width: var(--table-width);
        /* Fixed layout pins column widths so that incoming row content (longer
           callsigns, DXCC entity names, comments) cannot widen any column and
           cause the rest of the table to reflow on every recycle. Column widths
           come from the per-breakpoint nth-child rules below; column 7
           (Comment, or DX Station at small) is intentionally left unsized so
           it absorbs rounding and any residual space. */
        table-layout: fixed;
        color: var(--text-color);
    }

    /* Truncate overflowing main-row cell text with an ellipsis. Scoped with
       :not(.detail-row) so the colspan=8 detail cell can lay out its flex
       container naturally and let long comments / country values wrap. */
    #spot-table tbody tr:not(.detail-row) td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #spot-table th {
        height: var(--header-height);
        padding: 0 8px;
        text-align: left;
        background-color: var(--thead-bg);
        color: var(--thead-text);
    }

    /* The leftmost/rightmost td's vertical borders bleed into the sticky th's
       row through border-collapse resolution: at the table's left/right edge
       the td's `1px solid var(--border-color)` wins over the th's borders,
       so a thin --border-color line is painted across the th's full height
       (a white hairline in Classic Light, pinkish in Crimson Light, etc.).
       Box-shadows on the th can't overpaint it because the spot-table-wrapper's
       overflow:auto clips anything painted outside the table edge. The fix:
       suppress the td's contribution to the merged edge (`border-style: hidden`
       wins over solid per CSS 2.1 §17.6.2.1), then redraw the row's visible
       1px left/right border via an inset shadow on the td itself — that paints
       inside the td and doesn't participate in border-collapse, so it stops
       cleanly at each row and never reaches the th. */
    #spot-table tbody tr td:first-child {
        border-left-style: hidden;
        box-shadow: inset 1px 0 0 0 var(--border-color);
    }
    #spot-table tbody tr td:last-child {
        border-right-style: hidden;
        box-shadow: inset -1px 0 0 0 var(--border-color);
    }


    #spot-table tbody tr {
        height: var(--row-height);
    }
    
    #spot-table td {
        height: var(--row-height);
        border: var(--border-width) solid var(--border-color);
        padding: var(--cell-padding);
        line-height: 1.2;
        vertical-align: middle;
    }

    /* Spot table column-specific styling. Widths are set here for the desktop
       (≥1401px) layout where all 8 columns are visible. Medium and small
       breakpoint overrides live in the @media blocks at the bottom of this
       file. Column 7 (Comment) is intentionally left unsized so it absorbs
       residual space; column 8 (Date UTC) is pinned to 150px via the
       :last-child rule below. */
    #spot-table th:nth-child(1),
    #spot-table td:nth-child(1) {
        width: 9%;
        padding-left: 16px;
    }

    #spot-table th:nth-child(2),
    #spot-table td:nth-child(2) {
        width: 9%;
        text-align: right;
        padding-right: 16px;
    }

    #spot-table th:nth-child(3),
    #spot-table td:nth-child(3) {
        width: 10%;
        padding-left: 16px;
    }

    #spot-table th:nth-child(4),
    #spot-table td:nth-child(4) {
        width: 18%;
        padding-left: 16px;
    }

    #spot-table th:nth-child(7),
    #spot-table td:nth-child(7) {
        padding-left: 16px;
    }

    #spot-table th:nth-child(5),
    #spot-table td:nth-child(5),
    #spot-table th:nth-child(6),
    #spot-table td:nth-child(6) {
        width: 5%;
        text-align: center;
    }

    #spot-table th:nth-child(8),
    #spot-table td:nth-child(8) {
        text-align: center;
    }

    #spot-table th:last-child,
    #spot-table td:last-child,
    #dxworld-article td:last-child {
        width: 150px; /* Adjust this value based on your date/time format */
        min-width: 150px;
        max-width: 150px;
        text-align: center;
    }

    /* Spot table highlighting and animations */
    #spot-table tr.highlight {
        background-color: var(--highlight-bg);
        color: var(--highlight-text);
    }

    #spot-table tr.highlight .bold-text,
    #spot-table tr.highlight .normal-text {
        color: var(--highlight-text);
    }

    .fadeout-odd {
        animation: fadeout-odd 3s;
        background-color: var(--fade-odd-to);
        color: var(--fade-text-to);
    }

    .fadeout-even {
        animation: fadeout-even 3s;
        background-color: var(--fade-even-to);
        color: var(--fade-text-to);
    }

    .fadeout-odd .bold-text,
    .fadeout-odd .normal-text,
    .fadeout-even .bold-text,
    .fadeout-even .normal-text {
        color: var(--fade-text-to);
    }


/* ==========================================================================
DX WORLD ARTICLES TABLE
========================================================================== */

    .dxworld-table-wrapper {
        flex-shrink: 0;
    }

    #dxworld-table {
        display: flex;
        flex-direction: column;
        height: 177px;
        color: var(--article-text-color);
        border-collapse: collapse;
        width: 100%;
        font-family: var(--font-family);
        font-size: var(--font-size);
    }

    .dxworld-thead {
        background-color: var(--article-header-bg) !important;
        display: table;
        width: 100%;
    }
    
    .dxworld-thead th {
        background-color: var(--article-header-bg) !important;
        color: var(--article-header-text);
        padding-left: 16px;
        height: var(--header-height);
        line-height: 1.2;
        vertical-align: middle;       
    }

    .dxworld-thead th:first-child {
        width: calc(100% - 150px); 
        text-align: left;
        padding-left: 16px;
    }
    
    .dxworld-thead th:last-child {
        width: 150px; /* Match the date column width */
        text-align: center;
        padding-right: 16px;
    }

    #dxworld-table td {
        line-height: 1.2;
        height: var(--row-height);
        padding: var(--cell-padding);
    }

    #dxworld-table tbody {
        display: block;
        overflow-y: auto;
        flex: 1;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #dxworld-table tbody::-webkit-scrollbar {
        display: none;
    }

    #dxworld-table tbody tr {
        display: table;
        width: 100%;
    }

    #dxworld-article tr:nth-child(odd) {
        background-color: var(--article-odd-bg);
    }

    #dxworld-article tr:nth-child(even) {
        background-color: var(--article-even-bg);
    }

    /* Article content styling */
        .dx-inline-article {
        display: inline;
    }

    .dx-article-title {
        font-weight: bold;
        white-space: normal;
        color: var(--article-link-color);
        text-decoration: none;
        padding-left: 12px;
    }

    .dx-article-title:hover {
        color: var(--article-link-hover) !important;
    }

    #dxworld-article td:first-child {
        max-width: 0;
        width: calc(100% - 150px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #dxworld-article td:first-child:hover {
        white-space: normal;
        overflow: visible;
    }

    #dxworld-article td:nth-child(2) {
        text-align: center;
        vertical-align: middle;
        border-left: var(--border-width) solid var(--border-color);
    }

/* ==========================================================================
TEXT STYLING COMPONENTS
========================================================================== */

    .bold-text {
        font-weight: bold;
        color: var(--bold-text-color);
        text-decoration: none;
    }

    .bold-text:hover {
        color: var(--text-hover-color) !important;
        text-decoration: none;
    }

    .normal-text {
        font-weight: normal;
        color: var(--normal-text-color);
        text-decoration: none;
    }

    .normal-text:hover {
        color: var(--text-hover-color) !important;
        text-decoration: none;
    }

/* ==========================================================================
DETAIL ROW COMPONENTS
========================================================================== */

    .detail-even {
        background-color: var(--detail-even-bg) !important;
    }

    .detail-odd {
        background-color: var(--detail-odd-bg) !important;
    }

    .detail-row-flex-container {
        display: flex;
        width: 100%;
    }

    .detail-label {
        width: 21%;
        text-align: right;
        margin-right: 10px;
    }

    .detail-value {
        text-align: left;
        flex-grow: 1;
    }

/* ==========================================================================
NAVIGATION COMPONENTS
========================================================================== */

    #bottomNavbar {
        background-color: var(--thead-bg) !important;
        flex-shrink: 0;
        width: var(--navbar-width);
    }

    #bottomNavbar .nav-link {
        color: var(--thead-text) !important;
    }

    .bottom-navbar-nav {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        width: 100%;
    }

    .nav-item-centered {
        margin: 0 auto;
    }

    .no-vertical-padding {
        padding-top: 0;
        padding-bottom: 0;
    }

    .nav-link-small {
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0.75rem;
    }

/* ==========================================================================
UTILITY CLASSES
========================================================================== */

    .hide {
        display: none;
    }

/* ==========================================================================
RESPONSIVE DESIGN
========================================================================== */

    /* Small screens */
    @media (max-width: 768px) {
        .hide-on-small-screens {
            display: none;
        }

        /* Visible columns at this breakpoint: 2 (Frequency), 3 (DX Station),
           8 (Date UTC). DX Station is left unsized so it absorbs the
           remainder; Date UTC stays at its base 150px. */
        #spot-table th:nth-child(2),
        #spot-table td:nth-child(2) {
            width: 30%;
        }
        #spot-table th:nth-child(3),
        #spot-table td:nth-child(3) {
            width: auto;
        }
    }

    /* Medium screens */
    @media screen and (min-width: 769px) and (max-width: 1400px) {
        .hide-on-medium-screens {
            display: none;
        }

        /* Visible columns at this breakpoint: 1 (Spotter), 2 (Frequency),
           3 (DX Station), 7 (Comment), 8 (Date UTC). Comment is left unsized
           so it absorbs the remainder; Date UTC stays at its base 150px. */
        #spot-table th:nth-child(1),
        #spot-table td:nth-child(1) {
            width: 16%;
        }
        #spot-table th:nth-child(2),
        #spot-table td:nth-child(2) {
            width: 13%;
        }
        #spot-table th:nth-child(3),
        #spot-table td:nth-child(3) {
            width: 17%;
        }
    }

    /* Hide article summary and "Live Feed" text on screens less than 1400px */
    @media screen and (max-width: 1400px) {
        .dx-article-summary {
            display: none;
        }

        .live-feed-text {
            display: none;
        }
    }

    .index-container {
        /* Calculate height to show exactly N rows */
        height: calc(var(--header-height) + (30 * var(--row-height)));
        overflow-y: auto;
    }

    /* 28 + (# Rows * 30) + 177 */
    @media (min-height: 370px) and (max-height: 400px) {
        .index-container { height: 390px; }
    }

    @media (min-height: 400px) and (max-height: 430px) {
        .index-container { height: 420px; }
    }

    @media (min-height: 430px) and (max-height: 460px) {
        .index-container { height: 450px; }
    }
    
    @media (min-height: 460px) and (max-height: 490px) {
        .index-container { height: 480px; }
    }

    @media (min-height: 490px) and (max-height: 520px) {
        .index-container { height: 510px; }
    }

    @media (min-height: 520px) and (max-height: 550px) {
        .index-container { height: 540px; }
    }

    @media (min-height: 550px) and (max-height: 580px) {
        .index-container { height: 570px; }
    }

    @media (min-height: 580px) and (max-height: 610px) {
        .index-container { height: 600px; }
    }

    @media (min-height: 610px) and (max-height: 640px) {
        .index-container { height: 630px; }
    }
    
    @media (min-height: 640px) and (max-height: 670px) {
        .index-container { height: 660px; }
    }

    @media (min-height: 670px) and (max-height: 700px) {
        .index-container { height: 690px; }
    }

    @media (min-height: 700px) and (max-height: 730px) {
        .index-container { height: 690px; }
    }

    @media (min-height: 730px) and (max-height: 760px) {
        .index-container { height: 690px; }
    }

    @media (min-height: 760px) and (max-height: 790px) {
        .index-container { height: 690px; }
    }

    @media (min-height: 790px) and (max-height: 820px) {
        .index-container { height: 690px; }
    }

    @media (min-height: 820px) and (max-height: 850px) {
        .index-container { height: 720px; }
    }

    @media (min-height: 850px) and (max-height: 880px) {
        .index-container { height: 750px; }
    }

    @media (min-height: 880px) and (max-height: 910px) {
        .index-container { height: 780px; }
    }

    @media (min-height: 910px) and (max-height: 940px) {
        .index-container { height: 810px; }
    }

    @media (min-height: 940px) and (max-height: 970px) {
        .index-container { height: 840px; }
    }

    @media (min-height: 970px) and (max-height: 1000px) {
        .index-container { height: 870px; }
    }

    @media (min-height: 1000px) and (max-height: 1030px) {
        .index-container { height: 900px; }
    }

    @media (min-height: 1030px) and (max-height: 1060px) {
        .index-container { height: 930px; }
    }

    @media (min-height: 1060px) and (max-height: 1090px) {
        .index-container { height: 960px; }
    }

    @media (min-height: 1090px) {
        .index-container { height: 990px; }
    }

    /* DX World Articles Show/Hide Button */
    .dxworld-toggle-btn {
        background: none;
        border: none;
        color: var(--article-header-text);
        font-size: 14px;
        cursor: pointer;
    }

    .dxworld-toggle-btn[aria-expanded="true"]::after {
        /* \fe0e = Variation Selector-15: forces text presentation of the
           preceding ✖, otherwise Segoe UI Emoji renders it as a colored
           emoji glyph that ignores the button's `color` value. */
        content: " Close ✖\fe0e";
    }

/* ==========================================================================
SPOT FILTER STRIP (pill container above the spot table)
========================================================================== */

    .filter-strip {
        position: relative;
        z-index: 1; /* Lift above .index-container::before so the pill's top border isn't clipped */
        background: var(--mode-thead-bg);
        padding: 12px 16px 6px 16px;
    }

    .filter-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--filter-pill-bg);
        border: 1px solid var(--filter-pill-border);
        border-radius: 12px;
        padding: 8px 12px;
    }

    .filter-group {
        display: flex;
        gap: 6px;
        align-items: center;
    }
    .filter-group + .filter-group {
        margin-left: 12px;       /* 12px + filter-row's 6px gap = 18px to the left of the line, matching padding-left */
        padding-left: 18px;
        border-left: 1px solid var(--filter-pill-border);
    }

    .filter-label {
        font-weight: bold;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--mode-thead-text);
        opacity: 0.85;
        margin-right: 2px;
    }

    .filter-btn {
        /* Pinned to Trebuchet MS (not var(--font-family)) so the 25-button
           row stays on one line cross-browser. Safari resolves -apple-system
           to San Francisco, which is ~5-10% wider than Trebuchet MS and was
           wrapping the strip onto two lines after the global font sweep. */
        font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1;
        padding: 6px 10px;
        min-width: 38px;
        background: transparent;
        color: var(--thead-text);
        border: 1px solid var(--filter-pill-border);
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    }
    .filter-btn:hover {
        border-color: var(--palette-accent);
        color: var(--palette-accent);
    }
    .filter-btn.active {
        background: var(--palette-accent);
        border-color: var(--palette-accent);
        color: var(--filter-btn-active-text);
    }

    /* DX | DE scope toggle — single pill container with a 2/3-height divider between
       the two buttons. Three visual states per button:
         1. Default          — gray text on transparent bg (inside gray pill).
         2. .active           — green text on transparent bg (editing this scope, no continents).
         3. .has-selection    — full green fill + white text (filter is active for this scope,
                                regardless of which scope is currently being edited). */
    .scope-toggle {
        display: inline-flex;
        border: 1px solid var(--filter-pill-border);
        border-radius: 4px;
        overflow: hidden;
    }
    .scope-toggle .filter-btn {
        position: relative;
        border: none;
        border-radius: 0;
        min-width: 42px;
        padding: 6px 12px;
        background: transparent;
    }
    /* Vertical separator between DX and DE — 2/3 of button height, vertically centered. */
    .scope-toggle .filter-btn + .filter-btn::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 66.66%;
        width: 1px;
        background: var(--filter-pill-border);
        pointer-events: none;
    }
    /* Hide the divider once either scope has continents — the green fill of the
       active scope provides its own visual separation. */
    .scope-toggle:has(.has-selection) .filter-btn + .filter-btn::before {
        background: transparent;
    }
    /* When BOTH DX and DE are active (both filled green), show a full-height gray
       separator between the two pills so they're visually distinct. */
    .scope-toggle:has(.has-selection + .has-selection) .filter-btn + .filter-btn::before {
        background: var(--filter-pill-border);
        height: 100%;
    }
    /* State 2: just-selected scope, no continents picked yet → green text (signals
       "I'm editing this scope, click a continent to apply"). The continent click
       handler auto-deselects the scope when its set returns to empty, so this
       state only appears on a FRESH selection — never as a leftover of editing. */
    .scope-toggle .filter-btn.active:not(.has-selection) {
        background: transparent;
        color: var(--palette-accent);
    }
    /* State 3: filter is active for this scope → full ON state. */
    .scope-toggle .filter-btn.has-selection {
        background: var(--palette-accent);
        color: var(--filter-btn-active-text);
    }

    /* Mobile: let the continent group wrap onto its own line cleanly */
    @media (max-width: 768px) {
        .filter-group + .filter-group {
            margin-left: 0;
            padding-left: 0;
            border-left: none;
            width: 100%;
            margin-top: 4px;
            padding-top: 4px;
            border-top: 1px dashed var(--filter-pill-border);
        }
    }

    /* Hide the filter strip below 1318px — at narrower widths the row wraps
       awkwardly and steals vertical space from the spot table. */
    @media (max-width: 1317px) {
        .filter-strip {
            display: none;
        }
    }

    /* Client-side mode filter — hide rows whose mode bucket is currently filtered out.
       The data-hide-* attributes are set on the tbody by static/js/index.js when the
       user toggles mode buttons in the filter strip. Rows without a data-mode attribute
       (e.g. server messages with no mode field) are never hidden.

       NOTE: spot-table.js `isRowHidden()` mirrors these rules in JS to avoid forced
       reflows when inserting rows. If you add a new data-hide-* rule below, add the
       matching hasAttribute check there too. */
    #spot-table tbody[data-hide-cw]   tr[data-mode="CW"]   { display: none; }
    #spot-table tbody[data-hide-ssb]  tr[data-mode="SSB"]  { display: none; }
    #spot-table tbody[data-hide-digi] tr[data-mode="DIGI"] { display: none; }

    /* Client-side band filter — hide rows whose band is currently filtered out.
       data-hide-band-* attributes are set on the tbody by static/js/index.js, with
       virtual buckets (HF, HF+6, V/U/SHF) expanded to their underlying real band names
       on the client. Band '1' is the catch-all bucket for V/U/SHF. */
    #spot-table tbody[data-hide-band-160] tr[data-band="160"] { display: none; }
    #spot-table tbody[data-hide-band-80]  tr[data-band="80"]  { display: none; }
    #spot-table tbody[data-hide-band-60]  tr[data-band="60"]  { display: none; }
    #spot-table tbody[data-hide-band-40]  tr[data-band="40"]  { display: none; }
    #spot-table tbody[data-hide-band-30]  tr[data-band="30"]  { display: none; }
    #spot-table tbody[data-hide-band-20]  tr[data-band="20"]  { display: none; }
    #spot-table tbody[data-hide-band-17]  tr[data-band="17"]  { display: none; }
    #spot-table tbody[data-hide-band-15]  tr[data-band="15"]  { display: none; }
    #spot-table tbody[data-hide-band-12]  tr[data-band="12"]  { display: none; }
    #spot-table tbody[data-hide-band-10]  tr[data-band="10"]  { display: none; }
    #spot-table tbody[data-hide-band-6]   tr[data-band="6"]   { display: none; }
    #spot-table tbody[data-hide-band-1]   tr[data-band="1"]   { display: none; }

    /* Client-side DX continent filter — hide rows whose continent isn't selected.
       data-hide-cont-* attributes are set on the tbody by static/js/index.js when the
       user toggles continent buttons (DX scope) in the filter strip. */
    #spot-table tbody[data-hide-cont-af] tr[data-continent="AF"] { display: none; }
    #spot-table tbody[data-hide-cont-an] tr[data-continent="AN"] { display: none; }
    #spot-table tbody[data-hide-cont-as] tr[data-continent="AS"] { display: none; }
    #spot-table tbody[data-hide-cont-eu] tr[data-continent="EU"] { display: none; }
    #spot-table tbody[data-hide-cont-na] tr[data-continent="NA"] { display: none; }
    #spot-table tbody[data-hide-cont-oc] tr[data-continent="OC"] { display: none; }
    #spot-table tbody[data-hide-cont-sa] tr[data-continent="SA"] { display: none; }

    /* Client-side DE/spotter continent filter — hide rows whose spotter continent isn't selected.
       data-hide-spcont-* attributes are set on the tbody by static/js/index.js when the
       user toggles continent buttons (DE scope) in the filter strip. */
    #spot-table tbody[data-hide-spcont-af] tr[data-spotter-continent="AF"] { display: none; }
    #spot-table tbody[data-hide-spcont-an] tr[data-spotter-continent="AN"] { display: none; }
    #spot-table tbody[data-hide-spcont-as] tr[data-spotter-continent="AS"] { display: none; }
    #spot-table tbody[data-hide-spcont-eu] tr[data-spotter-continent="EU"] { display: none; }
    #spot-table tbody[data-hide-spcont-na] tr[data-spotter-continent="NA"] { display: none; }
    #spot-table tbody[data-hide-spcont-oc] tr[data-spotter-continent="OC"] { display: none; }
    #spot-table tbody[data-hide-spcont-sa] tr[data-spotter-continent="SA"] { display: none; }