/* =========================================
   HAM HQ MASTER STYLESHEET (K8CWS)
   THE COMPLETE, RESTORED BASELINE
   ========================================= */

:root {
    --bg-page: #121212; --bg-panel: #1e1e1e; --bg-input: #2b2b2b;
    --text-main: #e0e0e0; --text-muted: #888;
    --accent-home: #ff4d4d; --accent-nts: #4db8ff; --accent-recv: #ffb300;
    --accent-log: #00ff9d; --accent-links: #d487ff; --accent-about: #f39c12;
    --accent-contact: #3498db; --accent-scratch: #2ecc71; --accent-sat: #e84393;
    --accent-blog: #e8834c;
    --border-color: #333; --terminal-bg: #050505; --terminal-text: #00ff41;
    --panel-bg: #1e1e1e;
    --dead-color: #4a5568;  /* Steel Blue */
    --open-color: #38a169;  /* Emerald Green */
    --hot-color: #dd6b20;   /* Bright Orange */
}

[data-theme="light"] {
    --bg-page:      #f0ede8;
    --bg-panel:     #faf8f5;
    --bg-input:     #e8e4de;
    --text-main:    #1a1a1a;
    --text-muted:   #6b6460;
    --border-color: #c8c0b8;
    --panel-bg:     #faf8f5;
    --accent-home:    #cc2200;
    --accent-nts:     #1a7ac7;
    --accent-recv:    #c87800;
    --accent-log:     #007a45;
    --accent-links:   #8a3dbf;
    --accent-about:   #c47800;
    --accent-contact: #1f6fad;
    --accent-scratch: #1a8a4a;
    --accent-sat:     #b52070;
    --accent-blog:    #c0520a;
    /* Terminal stays dark — intentional contrast in light mode */
    --terminal-bg:   #0a0a0a;
    --terminal-text: #00ff41;
    --dead-color: #4a5568;
    --open-color: #276749;
    --hot-color:  #c05621;
}

/* Light theme overrides for hardcoded hex values */
[data-theme="light"] .master-header   { background: #e8e4de; }
[data-theme="light"] .band-card:hover { background-color: #ede9e3; }
[data-theme="light"] .header-title    { color: #1a1a1a; text-shadow: none; }
[data-theme="light"] .header-sub      { color: #8a8078; }
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select           { color: #1a1a1a; }
[data-theme="light"] .net-table td   { border-bottom-color: #d0c8c0; }
[data-theme="light"] .footer-credit  { color: #8a8078; }

/* --- Satellites --- */
[data-theme="light"] .satellite-select { background: var(--bg-input); color: var(--text-main); }

/* --- NTS Traffic --- */
[data-theme="light"] .time-toggle { background: var(--bg-panel); border-color: var(--border-color); color: var(--text-main); }

/* --- Station Directory --- */
[data-theme="light"] .contact-card { background: var(--bg-panel); border-color: var(--border-color); }
[data-theme="light"] .directory-page-header { border-color: var(--border-color); }
[data-theme="light"] .contact-meta { color: var(--text-muted); }

/* --- Resources --- */
[data-theme="light"] .link-item { background: var(--bg-panel); border-color: var(--border-color); }

/* --- About --- */
[data-theme="light"] .about-text { color: var(--text-main); }
[data-theme="light"] .about-detail-text { color: var(--text-muted); }
[data-theme="light"] .rig-category { background: var(--bg-panel); border-color: var(--border-color); }
[data-theme="light"] .rig-category ul { color: var(--text-main); }
[data-theme="light"] .rig-category li { border-bottom-color: var(--border-color); }
[data-theme="light"] .affil-list { color: var(--text-muted); }
[data-theme="light"] .photo-card { background: var(--bg-panel); }
[data-theme="light"] .station-photo { border-color: var(--border-color); }

/* --- General --- */
[data-theme="light"] .widget-btn { background: var(--bg-input); color: var(--text-main); }
[data-theme="light"] #grid-selector { border-color: var(--border-color); }
[data-theme="light"] .tooltip .tooltiptext { background-color: var(--bg-panel); color: var(--text-main); border-color: var(--border-color); }

/* --- NTS Output Preview fields --- */
[data-theme="light"] .output { background: var(--bg-input); color: var(--text-main); box-shadow: none; border-color: var(--border-color); }
[data-theme="light"] .output-recv { color: var(--accent-recv); }

/* --- About panel-dark sections (QSL Policy, Affiliations) --- */
[data-theme="light"] .panel-dark { background: rgba(0,0,0,0.04); }

.propagation-wrapper {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
}

.header-container h1 { 
    margin: 0; 
    font-size: 1.8rem; 
    font-weight: 500; 
}

#grid-selector {
    background-color: var(--panel-bg);
    color: inherit;
    border: 1px solid #444;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 1rem;
    outline: none;
}

.sparkline-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.band-card {
    background-color: var(--panel-bg);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.band-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.5);
    background-color: #252525;
}

.band-info {
    display: flex;
    flex-direction: column;
}

.band-name { font-size: 1.5rem; font-weight: bold; }
.band-status { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

.sparkline svg {
    width: 150px;
    height: 40px;
    overflow: visible;
}

.sparkline path {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Status Colors */
.status-dead { color: var(--dead-color); }
.status-open { color: var(--open-color); }
.status-hot { color: var(--hot-color); }

.stroke-dead { stroke: var(--dead-color); }
.stroke-open { stroke: var(--open-color); }
.stroke-hot { stroke: var(--hot-color); }

/* Base Styles */
* { box-sizing: border-box; }

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: var(--bg-page); color: var(--text-main); 
    padding: 15px; margin: 0; line-height: 1.4; text-transform: uppercase; 
}

.wrapper { max-width: 1400px; margin: auto; min-height: 95vh; display: flex; flex-direction: column; }
.main-content { flex: 1; }

/* Panels & Grids */
.panel { background: var(--bg-panel); padding: 25px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.3); margin-bottom: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 15px; }
.grid-dashboard { display: grid; grid-template-columns: 3fr 2fr; gap: 25px; align-items: start; }

h3 { margin-top: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; font-size: 1.1rem; color: var(--text-main); }
label { font-weight: 600; font-size: 0.75rem; color: var(--text-muted); display: block; margin-bottom: 5px; }

/* Inputs & Buttons */
input, textarea, select { width: 100%; margin-bottom: 15px; padding: 10px 12px; background: var(--bg-input); color: #fff; border: 1px solid var(--border-color); font-size: 14px; font-family: 'Courier New', monospace; text-transform: uppercase; border-radius: 4px; transition: 0.2s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-nts); }
button { border: none; padding: 10px 15px; cursor: pointer; font-size: 12px; font-weight: bold; color: white; border-radius: 4px; text-transform: uppercase; transition: 0.2s; }
button:hover { filter: brightness(1.15); }

/* Header & Clocks */
.master-header { display: flex; justify-content: space-between; align-items: center; background: #0a0a0a; padding: 15px 25px; border-radius: 8px; border: 1px solid var(--border-color); margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.clock-display { font-family: 'Courier New', monospace; text-align: center; min-width: 220px; background: var(--bg-panel); padding: 8px 15px; border-radius: 6px; border: 1px solid var(--border-color); }
.clock-time { font-size: 1.3rem; font-weight: bold; color: var(--accent-nts); display: block; }
.clock-label { font-size: 10px; color: var(--text-muted); letter-spacing: 2px; display: block; margin-bottom: 3px; }
.header-title { position: relative; margin: 0; flex: 1; text-align: center; font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: 6px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.header-sub   { display: block; font-size: 0.55rem; letter-spacing: 3px; color: #555; text-align: center; margin-top: 2px; font-weight: 600; }
.theme-toggle-btn { position: fixed; top: 10px; right: 15px; z-index: 1000; background: var(--bg-panel); border: 1px solid var(--border-color); color: var(--text-muted); padding: 6px 10px; border-radius: 6px; font-size: 1.1rem; cursor: pointer; line-height: 1; transition: 0.2s; }
.theme-toggle-btn:hover { color: var(--text-main); border-color: var(--text-muted); filter: none; }

/* Navigation */
.master-nav { 
    display: flex; 
    flex-wrap: nowrap;         /* Force everything onto a single line */
    overflow-x: auto;          /* Allow smooth horizontal scrolling on small screens */
    gap: 8px;                  /* Tighter gap to fit all 10 tabs */
    margin-bottom: 20px; 
    border-bottom: 2px solid var(--border-color); 
    padding-bottom: 10px; 
    scrollbar-width: none;     /* Hides the ugly scrollbar in Firefox */
}
.master-nav::-webkit-scrollbar {
    display: none;             /* Hides the ugly scrollbar in Chrome/Safari */
}
.m-tab { 
    background: transparent; 
    border: 1px solid transparent; 
    color: var(--text-muted); 
    padding: 8px 12px;         /* Tighter padding */
    cursor: pointer; 
    border-radius: 6px; 
    font-weight: bold; 
    font-size: 11px;           /* Slightly smaller text to fit nicely */
    text-decoration: none; 
    text-align: center; 
    transition: 0.3s; 
    white-space: nowrap;       /* Forbids the text from breaking onto a second line */
    flex-shrink: 0;            /* Forbids the buttons from squishing */
}
.m-tab:hover { color: var(--text-main); background: rgba(255,255,255,0.05); }

/* Active Navigation Tabs */
.active-home     { border-color: var(--accent-home);    color: var(--accent-home);    background: rgba(255,77,77,0.1); }
.active-prop     { border-color: #9b59b6;               color: #9b59b6;               background: rgba(155,89,182,0.1); }
.active-nts      { border-color: var(--accent-nts);     color: var(--accent-nts);     background: rgba(77,184,255,0.1); }
.active-log      { border-color: var(--accent-log);     color: var(--accent-log);     background: rgba(0,255,157,0.1); }
.active-sat      { border-color: var(--accent-sat);     color: var(--accent-sat);     background: rgba(232,67,147,0.1); }
.active-scratchpad { border-color: var(--accent-scratch); color: var(--accent-scratch); background: rgba(46,204,113,0.1); }
.active-links    { border-color: var(--accent-links);   color: var(--accent-links);   background: rgba(212,135,255,0.1); }
.active-about    { border-color: var(--accent-about);   color: var(--accent-about);   background: rgba(243,156,18,0.1); }
.active-contact  { border-color: var(--accent-contact); color: var(--accent-contact); background: rgba(52,152,219,0.1); }
.active-freq     { border-color: #00bcd4;               color: #00bcd4;               background: rgba(0,188,212,0.1); }
.active-activity { border-color: #9b59b6;               color: #9b59b6;               background: rgba(155,89,182,0.1); }
.active-blog     { border-color: var(--accent-blog);    color: var(--accent-blog);    background: rgba(232,131,76,0.1); }

/* =========================================
   Dashboard Specifics
   ========================================= */
.net-table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: 'Segoe UI', sans-serif; }
.net-table th { text-align: left; padding: 8px 4px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); font-size: 11px; letter-spacing: 1px; }
.net-table td { padding: 12px 4px; border-bottom: 1px solid #222; }
.net-freq { font-family: 'Courier New', monospace; color: var(--accent-home); font-weight: bold; }

/* =========================================
   Frequencies Page (scoped — does not affect .net-table on other pages)
   ========================================= */
.freq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    table-layout: fixed;
}

/* Column widths — band-first HF table (1 band col + 7 mode cols) */
.freq-table-hf  .col-band        { width: 7%;  }
.freq-table-hf  .col-hf-ft8,
.freq-table-hf  .col-hf-ft4,
.freq-table-hf  .col-hf-js8,
.freq-table-hf  .col-hf-psk,
.freq-table-hf  .col-hf-rtty     { width: 12%; }
.freq-table-hf  .col-hf-olivia,
.freq-table-hf  .col-hf-vara     { width: 13%; }
/* VHF/UHF table */
.freq-table-vhf .col-mode-label  { width: 16%; }
.freq-table-vhf .col-band        { width: 8%;  }
.freq-table-vhf .col-freq        { width: 20%; }
.freq-table-vhf .col-vhf-mod     { width: 10%; }
.freq-table-vhf .col-vhf-notes   { width: auto; }

/* Sticky header: border-collapse drops borders on sticky <th> in Chrome.
   Use box-shadow for the bottom rule instead. */
.freq-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-panel);
    text-align: left;
    padding: 10px 10px;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 1px;
    box-shadow: 0 1px 0 var(--border-color);
}

.freq-table td {
    padding: 11px 10px;
    border-bottom: 1px solid #222;
    border-left: 3px solid transparent;
}

/* Band label cell in the HF band-first table */
.freq-band-label {
    font-weight: bold;
    color: var(--text-muted);
    letter-spacing: 1px;
    font-size: 12px;
    border-left: 3px solid rgba(0, 188, 212, 0.35);
}

/* Nil/dash cell where no standard freq exists */
.freq-nil {
    font-family: 'Courier New', monospace;
    color: #444;
    text-align: center;
}

/* Frequency value — cyan, matching the frequencies section accent */
.freq-val {
    font-family: 'Courier New', monospace;
    color: #00bcd4;
    font-weight: bold;
    text-align: center;
}

/* Horizontal scroll wrapper for narrow screens */
.freq-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Explanatory note between legend and table */
.freq-table-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0.75rem;
    line-height: 1.5;
    text-transform: none;
}
.freq-table-note strong { color: var(--text-main); }

/* Footer row below the HF table */
.freq-table-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.freq-table-footer p {
    margin: 0;
    font-size: 0.85rem;
    color: #888;
    text-transform: none;
}

/* "Show extended bands" toggle button */
.btn-toggle-bands {
    background: transparent;
    border: 1px solid rgba(0, 188, 212, 0.35);
    color: #00bcd4;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Segoe UI', sans-serif;
}
.btn-toggle-bands:hover {
    background: rgba(0, 188, 212, 0.08);
}

/* Mode legend — soft table above the HF frequencies table */
.mode-legend {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden; /* clip border-radius on table */
}
.mode-legend .col-legend-name    { width: 80px; }
.mode-legend .col-legend-divider { width: 1px;  }
.mode-legend td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}
.mode-legend tbody tr:last-child td { border-bottom: none; }
.mode-legend-name {
    font-family: 'Courier New', monospace;
    color: #00bcd4;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid var(--border-color);
    background: rgba(0, 188, 212, 0.04);
}
.mode-legend-desc {
    color: var(--text-muted);
    line-height: 1.5;
    text-transform: none;
}
.mode-legend-divider {
    padding: 0;
    width: 1px;
    background: var(--border-color);
}
.mode-legend-empty {
    background: transparent;
    border-right: none;
}

/* Light theme overrides */
[data-theme="light"] .freq-table td  { border-bottom-color: #d0c8c0; }
[data-theme="light"] .freq-nil       { color: #bbb; }
[data-theme="light"] .btn-toggle-bands { border-color: rgba(0,160,180,0.4); color: #007a8e; }
[data-theme="light"] .btn-toggle-bands:hover { background: rgba(0,160,180,0.08); }

/* Modulation badges */
.mode-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 1px;
    vertical-align: middle;
    margin-left: 4px;
}
.mode-badge.mode-fm  { background: rgba(255,179,0,0.15); color: #ffb300; border: 1px solid rgba(255,179,0,0.3); }
.mode-badge.mode-usb { background: rgba(0,188,212,0.12); color: #00bcd4; border: 1px solid rgba(0,188,212,0.25); }

.widget-img { width: 100%; border-radius: 4px; border: 1px solid #333; margin-bottom: 10px; }
.widget-btn { display: block; width: 100%; text-align: center; background: #333; color: #fff; text-decoration: none; padding: 15px; border-radius: 4px; font-weight: bold; }
.widget-btn:hover { background: var(--accent-home); color: #000; }

/* =========================================
   NTS Specifics
   ========================================= */
.tab-container { display: flex; gap: 10px; margin-bottom: 20px; }
.s-tab { background: transparent; border: none; color: var(--text-muted); padding: 8px 20px; cursor: pointer; border-radius: 4px; font-weight: bold; border-bottom: 3px solid transparent; }
.s-tab.active-send { color: var(--accent-nts); border-bottom-color: var(--accent-nts); background: rgba(77,184,255,0.05); }
.s-tab.active-recv { color: var(--accent-recv); border-bottom-color: var(--accent-recv); background: rgba(255,179,0,0.05); }

.nts-content { display: none; }
.nts-content.active { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: start; }
.output { background: var(--terminal-bg); color: var(--terminal-text); padding: 15px; border-radius: 6px; white-space: pre-wrap; font-weight: bold; font-family: 'Courier New', monospace; min-height: 100px; border: 1px solid #111; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); margin-bottom: 15px;}
.check-display { text-align: right; margin-bottom: 15px; color: var(--text-muted); font-size: 14px; font-family: 'Segoe UI', sans-serif; text-transform: none;}
.check-display span { color: var(--accent-nts); font-weight: bold; }

.gen-btn { background: #d32f2f; } 
.recv-btn { background: #f57c00; } 
.copy-btn { background: #0277bd; } 
.clear-btn, .next-btn { background: #546e7a; color: #fff; } 
.reset-btn { background: #e65100; color: #fff; } 
.backup-btn { background: #6a1b9a; padding: 6px 10px; font-size: 10px; }

/* =========================================
   Station Directory Specifics
   ========================================= */
.import-export-bar {
    background: #151515;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
}

.contact-card {
    background: #151515;
    border-left: 4px solid var(--accent-log);
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-radius: 0 4px 4px 0;
    border: 1px solid #222;
    overflow: hidden;
}

.contact-card-main {
    flex: 1;
    min-width: 0;
}

.contact-call {
    color: var(--accent-log);
    font-weight: bold;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    display: inline-block;
    margin-right: 10px;
}

.contact-meta {
    color: #ccc;
    font-size: 13px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.contact-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-delete {
    background: #600;
    color: #fff;
    padding: 6px 12px;
    font-size: 10px;
    border-radius: 4px;
}

.btn-delete-log {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 15px;
    font-size: 11px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.qrz-btn {
    background: #0056b3;
    color: #fff;
    padding: 6px 12px;
    font-size: 10px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.2s;
    white-space: nowrap;
}

.qrz-btn:hover {
    filter: brightness(1.2);
}

.directory-status {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    display: none;
    border: 1px solid transparent;
    text-align: center;
}

.directory-status.show {
    display: block;
}

.directory-status.success {
    background: rgba(0, 255, 157, 0.12);
    border-color: var(--accent-log);
    color: var(--accent-log);
}

.directory-status.update {
    background: rgba(77, 184, 255, 0.12);
    border-color: var(--accent-nts);
    color: var(--accent-nts);
}

.directory-status.delete {
    background: rgba(255, 77, 77, 0.12);
    border-color: var(--accent-home);
    color: var(--accent-home);
}

/* =========================================
   Resources (Links) Specifics
   ========================================= */
.links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.link-item { display: flex; align-items: center; justify-content: center; min-height: 70px; background: #151515; padding: 10px 15px; text-align: center; border-radius: 6px; border: 1px solid #333; transition: 0.2s; text-decoration: none; color: var(--text-main); font-weight: bold; letter-spacing: 1px; box-sizing: border-box; }
.link-item:hover { background: var(--accent-links); color: #000; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(212,135,255,0.3); }

/* =========================================
   About Page Specifics
   ========================================= */
.about-links { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; justify-content: flex-start; }
.about-link-btn { padding: 12px 20px; text-decoration: none; font-weight: bold; border-radius: 6px; font-size: 13px; transition: 0.2s; color: #fff; display: inline-block; }

.rig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
.rig-category { background: #151515; padding: 15px; border-radius: 6px; border: 1px solid #333; }
.rig-category h4 { margin: 0 0 10px 0; font-size: 12px; color: var(--accent-about); letter-spacing: 1px; }
.rig-category ul { list-style: none; padding: 0; margin: 0; font-size: 14px; text-transform: none; color: #ccc; }
.rig-category li { margin-bottom: 5px; border-bottom: 1px solid #222; padding-bottom: 5px; }
.rig-category li:last-child { border: none; }

.affil-list { columns: 2; font-size: 13px; text-transform: none; color: #ccc; list-style-type: square; }
.affil-list a { color: var(--accent-log); text-decoration: none; }
.affil-list a:hover { text-decoration: underline; }

.station-gallery-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; align-items: flex-start; margin-bottom: 30px; }
.photo-card { background: #151515; padding: 12px; border-radius: 12px; border: 1px solid var(--border-color); width: fit-content; }
.station-photo { width: 220px; height: 220px; object-fit: cover; object-position: top center; border-radius: 8px; display: block; border: 1px solid #333; }

/* =========================================
   Contact Page Tooltip
   ========================================= */
.tooltip { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted var(--text-muted); color: var(--text-muted); font-size: 11px; text-transform: none; }
.tooltip .tooltiptext { visibility: hidden; width: 240px; background-color: #333; color: #fff; text-align: center; border-radius: 4px; padding: 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -120px; opacity: 0; transition: opacity 0.3s; font-size: 11px; font-weight: bold; line-height: 1.4; border: 1px solid #555; box-shadow: 0 4px 8px rgba(0,0,0,0.5); }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

/* =========================================
   Satellite Page Layout
   ========================================= */

/* Full-width toolbar panel above both columns */
.sat-toolbar-panel {
    margin-bottom: 20px;
}

.satellite-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.satellite-title {
    margin: 0;
    border: none;
    padding: 0;
    color: var(--accent-sat);
}

.satellite-select {
    width: 250px;
    margin: 0;
    background: #151515;
}

.satellite-description {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
    text-transform: none;
}

/* Two-column grid: fixed left for tracker, fluid right for info panels */
.sat-columns {
    display: grid;
    grid-template-columns: 846px 1fr;
    gap: 20px;
    align-items: start;
}

.sat-col-tracker .panel {
    margin-bottom: 0;
}

.sat-col-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sat-col-info .panel {
    margin-bottom: 0;
}

/* Tracker container — sized for N2YO large widget (810×680) */
#tracker-container {
    min-height: 680px;
    overflow: hidden;
}

.tracker-loading {
    color: #555;
    font-weight: bold;
    font-size: 12px;
    display: block;
    text-align: center;
    padding-top: 300px;
    letter-spacing: 2px;
}

/* =========================================
   Satellite Detail Panel (single-satellite view)
   ========================================= */
.sat-detail {
    margin-top: 12px;
}

.sat-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.sat-detail-name {
    font-weight: bold;
    font-size: 12px;
    color: var(--accent-sat);
    letter-spacing: 1px;
}

.sat-detail-norad {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

.sat-detail-type {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.sat-detail-table {
    margin-bottom: 10px;
}

.sat-detail-notes {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: none;
    line-height: 1.5;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.sat-detail-unknown {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: none;
    margin: 12px 0 0;
}

.sat-freq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.sat-freq-table td {
    padding: 3px 0;
    vertical-align: top;
}

.sat-freq-label {
    color: var(--text-muted);
    width: 45%;
    letter-spacing: 1px;
}

.sat-freq-val {
    color: var(--text-main);
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

/* =========================================
   Satellite Pass Predictions Panel
   ========================================= */
.sat-planner-body {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: none;
    line-height: 1.6;
}

.sat-planner-body p {
    margin: 0 0 12px 0;
}

.sat-planner-body strong {
    color: var(--text-main);
}

.sat-planner-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sat-planner-links li {
    padding-left: 12px;
    border-left: 2px solid var(--accent-sat);
}

.sat-planner-links a {
    color: var(--accent-sat);
    text-decoration: none;
    font-weight: bold;
}

.sat-planner-links a:hover {
    text-decoration: underline;
}

/* Collapse to single column when viewport is too narrow for the tracker */
@media (max-width: 1100px) {
    .sat-columns {
        grid-template-columns: 1fr;
    }
    .sat-col-tracker {
        max-width: 846px;
    }
}

@media (max-width: 850px) {
    .satellite-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .satellite-select {
        width: 100%;
    }
}

/* =========================================
   Footer & Mobile Optimizations
   ========================================= */
.master-footer { text-align: center; padding: 25px 15px; margin-top: 30px; border-top: 1px solid var(--border-color); font-size: 12px; color: var(--text-muted); letter-spacing: 1px;}
.master-footer a { color: var(--accent-log); text-decoration: none; font-weight: bold; }
.footer-credit { font-size: 10px; color: #555; display: block; margin-top: 8px; }

@media (max-width: 850px) {
    /* 1. The Mobile Header Fix */
    .master-header { 
        flex-direction: column; 
        gap: 12px; 
        padding: 15px 10px; 
        text-align: center; 
    }
    .header-title { 
        font-size: 1.3rem; 
        letter-spacing: 2px; /* Reduced tracking so it fits on screen */
        order: -1; /* Forces the title to the very top */
    }
    .clock-display { 
        min-width: 100%; /* Allows clocks to fill the width neatly */
        padding: 8px; 
        box-sizing: border-box; 
    }
    .clock-time { 
        font-size: 1.1rem; /* Slightly smaller numbers */
    }

    /* 2. The Mobile Nav Fix (Preserved) */
    .master-nav { 
        flex-wrap: wrap; 
        justify-content: center; 
        overflow-x: visible; 
    }
    .m-tab { 
        flex: 1 1 calc(50% - 10px); 
        padding: 10px; 
        font-size: 11px; 
        white-space: normal; 
    }

    /* 3. Existing Grid Fixes (Preserved) */
    .grid-2, .grid-3, .grid-dashboard { grid-template-columns: 1fr; }
    .nts-content.active { grid-template-columns: 1fr; }
    .station-gallery-container { justify-content: center; }
    .affil-list { columns: 1; }
    .contact-card { flex-direction: column; align-items: flex-start; }
    .contact-actions { width: 100%; justify-content: flex-end; }

    /* 4. Frequencies page — footer stacks on small screens */
    .freq-table-footer { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* --- DEEP DIVE PAGE BUTTONS --- */
.time-toggle {
    background: #151515;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 11px;
}
.time-toggle.active {
    background: #9b59b6;
    color: #fff;
    border-color: #9b59b6;
}
.share-btn {
    background: var(--accent-contact);
    border: 1px solid transparent;
}

/* =========================================
   Extracted Inline Styles
   ========================================= */

/* --- Shared Across Pages --- */
.clock-local { color: var(--accent-log); }
.heading-home { color: var(--accent-home); }
.heading-nts { color: var(--accent-nts); }
.heading-recv { color: var(--accent-recv); }
.heading-about { color: var(--accent-about); }
.heading-contact { color: var(--accent-contact); }
.heading-links { color: var(--accent-links); }
.heading-scratch { color: var(--accent-scratch); }
.heading-freq { color: #00bcd4; }
.heading-prop { color: #9b59b6; }
.heading-blog { color: var(--accent-blog); }
.description-text { color: var(--text-muted); font-size: 13px; margin-bottom: 15px; text-transform: none; }
.h3-flush { margin: 0; border: none; padding: 0; }
.scroll-box { max-height: 400px; overflow-y: auto; }
.flex-col-gap { display: flex; flex-direction: column; gap: 20px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.text-center { text-align: center; }
.link-plain { display: block; text-decoration: none; color: inherit; }
.input-normal-case { text-transform: none; }
.el-hidden { display: none; }
.grid-span-2 { grid-column: span 2; }

/* --- Dashboard (index.html) --- */
.panel-compact { padding: 15px; }
.heading-home-tight { color: var(--accent-home); margin-bottom: 10px; }
.widget-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.widget-header-row .heading-home-tight { margin-bottom: 0; }
.dashboard-widget { display: block; width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.1); padding: 10px; border-radius: 4px; border: 1px solid var(--border-color); transition: 0.2s; }
.table-flush { margin: 0; }
.td-placeholder { color: var(--text-muted); text-align: center; }
.qrz-embed-container { text-align: center; margin-top: 15px; background: #ffffff; border: 1px solid var(--border-color); border-radius: 4px; padding: 10px; overflow: hidden; }
.qrz-embed-frame { max-width: 640px; border: none; color-scheme: light; }
.widget-img-md { max-width: 600px; display: inline-block; }

/* --- NTS Traffic (nts.html) --- */
.nts-label-row { display: flex; justify-content: space-between; align-items: flex-end; }
.nts-badge { color: #2ecc71; font-size: 9px; font-weight: normal; letter-spacing: 1px; }
.nts-preview-label { margin-bottom: 10px; display: block; }
.nts-log-header { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; margin-bottom: 15px; }
.btn-download { background: #8e44ad; color: #fff; padding: 8px 15px; font-size: 11px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; }
.text-muted-sm { color: var(--text-muted); font-size: 13px; }
.panel-recv { border-color: #4a3b1c; }
.recv-word-count { color: var(--text-muted); }
.recv-check-status { font-size: 10px; margin-left: 10px; display: inline-block; }
.btn-group-recv { grid-template-columns: 2fr 1fr 1fr; }
.output-recv { color: var(--accent-recv); }
.nts-recv-log-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.btn-recv-download { background: #b96a00; }

/* --- About (about.html) --- */
.panel-md { max-width: 1000px; margin: 0 auto; }
.about-link-qrz { background: #0056b3; color: #fff; }
.about-link-pota { background: #27ae60; color: #fff; }
.about-link-linkedin { background: #0e76a8; color: #fff; }
.about-link-github { background: #333; color: #fff; border: 1px solid #555; }
.about-text { text-transform: none; line-height: 1.6; font-size: 15px; color: #ddd; }
.panel-dark { background: rgba(0,0,0,0.2); }
.about-subheading { color: var(--accent-about); font-size: 12px; margin-top: 0; }
.about-detail-text { text-transform: none; font-size: 13px; color: #bbb; }

/* --- Blog (blog.html / roadmap.html) --- */
.blog-post { margin-bottom: 10px; }
.blog-post-date { font-family: 'Courier New', monospace; font-size: 11px; color: var(--text-muted); letter-spacing: 1px; margin-bottom: 15px; display: block; }
.blog-post-body { text-transform: none; line-height: 1.7; font-size: 15px; color: #ddd; }
.blog-post-body p { margin: 0 0 1em 0; }
.blog-roadmap-cta { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; border: 1px solid var(--accent-blog); border-radius: 6px; padding: 18px 20px; margin-top: 10px; max-width: 1000px; margin-left: auto; margin-right: auto; background: rgba(232,131,76,0.06); text-decoration: none; color: inherit; transition: background 0.2s; }
.blog-roadmap-cta:hover { background: rgba(232,131,76,0.14); }
.blog-roadmap-cta-label { font-size: 11px; color: var(--text-muted); letter-spacing: 1px; display: block; margin-bottom: 4px; }
.blog-roadmap-cta-title { font-size: 15px; font-weight: bold; color: var(--accent-blog); }
.blog-roadmap-cta-arrow { font-size: 1.4rem; color: var(--accent-blog); flex-shrink: 0; }
[data-theme="light"] .blog-post-body { color: var(--text-main); }
[data-theme="light"] .blog-roadmap-cta { background: rgba(192,82,10,0.04); }
[data-theme="light"] .blog-roadmap-cta:hover { background: rgba(192,82,10,0.1); }

/* --- Contact (contact.html) --- */
.panel-sm { max-width: 600px; margin: 0 auto; }
.btn-submit { background: var(--accent-contact); color: #000; width: 100%; font-size: 14px; padding: 12px; margin-top: 10px; }
.form-footer { text-align: center; margin-top: 15px; }

/* --- Propagation (activity.html) --- */
.activity-toolbar { border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.grid-selector-compact { width: auto; margin: 0; padding: 5px 10px; }

/* --- Band Deep Dive (band.html) --- */
.band-toolbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.band-back-nav { display: flex; align-items: center; gap: 15px; }
.back-link { color: var(--text-muted); text-decoration: none; font-size: 1.2rem; }
.h3-flush-lg { color: #9b59b6; margin: 0; border: none; padding: 0; font-size: 1.5rem; }
.time-btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
.chart-stage { position: relative; height: 50vh; width: 100%; }

/* --- Links (links.html) --- */
.panel-spaced { margin-bottom: 25px; }

/* --- Station Directory (log.html) --- */
.directory-page-header { margin-bottom: 20px; }
.directory-title { color: var(--accent-log); font-size: 20px; font-weight: bold; letter-spacing: 2px; margin: 0 0 6px 0; }
.directory-desc { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.5; }
.directory-tools { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.btn-delete-all { background: #7a0000; color: #fff; margin-left: auto; }
.btn-export { background: #2e7d32; }
.btn-import { background: #1565c0; }
.btn-save-directory { width: 100%; background: #00ff88; color: #000; padding: 10px; border: none; font-weight: bold; cursor: pointer; margin-top: 10px; }
.scroll-box-padded { max-height: 400px; overflow-y: auto; padding-right: 5px; }

/* --- Scratchpad (scratchpad.html) --- */
.scratchpad-layout { display: flex; flex-direction: column; min-height: 70vh; }
.scratchpad-textarea { flex: 1; resize: vertical; text-transform: none; font-size: 16px; padding: 20px; font-family: 'Segoe UI', sans-serif; }
.scratchpad-actions { grid-template-columns: 200px 200px; justify-content: start; margin-top: 15px; }
.btn-save-txt { background: #2e7d32; }
.btn-clear-note { background: #c62828; }

/* --- Nets widget status rows + station cell (index.html) --- */
.net-row-onair { background: rgba(46, 204, 113, 0.15); color: #2ecc71; font-weight: bold; }
.net-row-soon  { background: rgba(243, 156, 18, 0.10); color: var(--text-muted); }
.net-callsign { color: var(--accent-home); border-bottom-color: var(--accent-home); font-weight: bold; font-size: 12px; }
.net-club-link { color: var(--text-muted); font-size: 12px; text-decoration: none; text-transform: none; letter-spacing: 0; }
.net-club-link:hover { color: #fff; }

.widget-promo {
    margin: 10px 0 0 0;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    text-align: center;
}
.widget-promo-link {
    color: var(--accent-contact);
    text-decoration: none;
    font-weight: bold;
}
.widget-promo-link:hover { text-decoration: underline; }

/* --- Compact widget band cards --- */
.widget-bands-container { display: flex; flex-direction: column; gap: 4px; }
.widget-band-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border-color);
}
.widget-band-card:last-child { border-bottom: none; }
.widget-band-name {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1rem;
    min-width: 38px;
}
.widget-sparkline { flex: 1; min-width: 0; }
.widget-sparkline svg { width: 100%; height: 28px; display: block; }
.widget-sparkline path { fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.widget-band-spots {
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: right;
    min-width: 72px;
}
.widget-spots-label { font-size: 0.65rem; color: var(--text-muted); }