/* ═══════════════════════════════════════════════════════════════════════════
   TEMPEST Ground Station — Astro UXDS Dark Theme
   Design Tokens: https://www.astrouxds.com/design-tokens/system/
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Background */
    --color-background-base-default: #101923;
    --color-background-base-header: #172635;
    --color-background-base-hover: #142435;
    --color-background-base-selected: #1c3f5e;
    --color-background-surface-default: #1b2d3e;
    --color-background-surface-header: #172635;
    --color-background-surface-hover: #1c3851;
    --color-background-interactive-default: #4dacff;
    --color-background-interactive-hover: #92cbff;
    --color-background-interactive-muted: #2b659b;
    /* Text */
    --color-text-primary: #ffffff;
    --color-text-secondary: #d4d8dd;
    --color-text-placeholder: #a4abb6;
    --color-text-inverse: #080c11;
    --color-text-interactive-default: #4dacff;
    --color-text-interactive-hover: #92cbff;
    --color-text-error: #ff3838;
    /* Border */
    --color-border-interactive-default: #4dacff;
    --color-border-interactive-hover: #92cbff;
    --color-border-interactive-muted: #2b659b;
    --color-border-error: #ff3838;
    /* Status */
    --color-status-critical: #ff3838;
    --color-status-serious: #ffb302;
    --color-status-caution: #fce83a;
    --color-status-normal: #56f000;
    --color-status-standby: #2dccff;
    --color-status-off: #a4abb6;
    /* Classification */
    --color-classification-topsecretsci: #fce83a;
    --color-classification-topsecret: #ff8c00;
    --color-classification-secret: #c8102e;
    --color-classification-confidential: #0033a0;
    --color-classification-cui: #502b85;
    --color-classification-unclassified: #007a33;
    /* Data Visualization */
    --color-data-vis-1: #00c7cb;
    --color-data-vis-2: #938bdb;
    --color-data-vis-3: #4dacff;
    /* Typography — Astro mandates Roboto */
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Roboto Mono', ui-monospace, 'Courier New', monospace;
    /* Shape / Spacing */
    --radius-base: 3px;
    --radius-circle: 50%;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --shadow-overlay: 0px 4px 4px 1px rgba(0, 0, 0, 0.45);
    --opacity-disabled: 0.4;
    /* Legacy aliases so existing JS (3d-viz, orientation colors) still works */
    --bg-primary: var(--color-background-base-default);
    --bg-secondary: var(--color-background-surface-default);
    --bg-tertiary: var(--color-background-base-header);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --accent-primary: var(--color-text-interactive-default);
    --accent-secondary: var(--color-status-normal);
    --accent-danger: var(--color-status-critical);
    --accent-warning: var(--color-status-serious);
    --border-color: var(--color-border-interactive-muted);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-size: 14px; line-height: 1.5;
    background: var(--color-background-base-default);
    color: var(--color-text-primary);
    height: 100vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}

/* ─── Classification Banners ─────────────────────────────────────────────── */
.classification-banner {
    text-align: center; padding: 2px 0;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.6px; text-transform: uppercase;
    user-select: none; flex-shrink: 0;
}
.classification-banner--unclassified { background: var(--color-classification-unclassified); color: #fff; }
.classification-banner--cui          { background: var(--color-classification-cui);          color: #fff; }
.classification-banner--secret       { background: var(--color-classification-secret);       color: #fff; }
.classification-banner--topsecret    { background: var(--color-classification-topsecret);    color: #fff; }
.classification-banner--topsecretsci { background: var(--color-classification-topsecretsci); color: #000; }

/* ─── Global Status Bar ──────────────────────────────────────────────────── */
.gsb {
    display: flex; align-items: center;
    background: var(--color-background-base-header);
    border-bottom: 1px solid var(--color-border-interactive-muted);
    padding: 0 var(--spacing-4); height: 52px;
    flex-shrink: 0; gap: var(--spacing-4);
}
.gsb__app-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gsb__app-icon svg { width: 28px; height: 28px; fill: var(--color-text-interactive-default); }
.gsb__app-meta { display: flex; flex-direction: column; line-height: 1.2; }
.gsb__app-domain { font-size: 10px; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.gsb__app-name { font-size: 17px; font-weight: 500; color: var(--color-text-primary); }
.gsb__app-version { font-size: 10px; color: var(--color-text-placeholder); font-family: var(--font-mono); margin-left: var(--spacing-1); }
.gsb__tabs { display: flex; height: 100%; margin-left: var(--spacing-6); gap: 0; }
.gsb__tab {
    display: flex; align-items: center;
    padding: 0 var(--spacing-4); height: 100%;
    font-size: 14px; font-weight: 400; color: var(--color-text-secondary);
    cursor: pointer; border: none; border-bottom: 3px solid transparent;
    background: none; font-family: var(--font-body);
    transition: all 0.15s ease; user-select: none;
}
.gsb__tab:hover { color: var(--color-text-primary); background: var(--color-background-base-hover); }
.gsb__tab--active { color: var(--color-text-primary); border-bottom-color: var(--color-border-interactive-default); }
.gsb__monitors { display: flex; align-items: center; gap: var(--spacing-4); margin-left: auto; }
.gsb__monitor { display: flex; align-items: center; gap: var(--spacing-2); font-size: 12px; color: var(--color-text-secondary); }
.gsb__monitor-label { text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
.gsb__monitor-value { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-primary); }
.astro-clock { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-mono); line-height: 1.2; padding: 0 var(--spacing-2); border-left: 1px solid var(--color-border-interactive-muted); }
.astro-clock__utc-label { font-size: 9px; color: var(--color-text-placeholder); text-transform: uppercase; letter-spacing: 1px; }
.astro-clock__time { font-size: 16px; font-weight: 500; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.astro-clock__date { font-size: 10px; color: var(--color-text-secondary); }

/* ─── Status Symbols ─────────────────────────────────────────────────────── */
.status-symbol { width: 12px; height: 12px; border-radius: var(--radius-circle); flex-shrink: 0; }
.status-symbol--critical { background: var(--color-status-critical); }
.status-symbol--serious  { background: var(--color-status-serious); }
.status-symbol--caution  { background: var(--color-status-caution); }
.status-symbol--normal   { background: var(--color-status-normal); }
.status-symbol--standby  { background: var(--color-status-standby); }
.status-symbol--off      { background: var(--color-status-off); }
.status-symbol--pulse    { animation: status-pulse 1.5s ease-in-out infinite; }
.status-symbol--critical.status-symbol--pulse { color: var(--color-status-critical); }
.status-symbol--normal.status-symbol--pulse   { color: var(--color-status-normal); }
@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; }
    50%      { box-shadow: 0 0 8px 2px currentColor; }
}

/* ─── Main App Body ──────────────────────────────────────────────────────── */
.app-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.tab-content { display: none; flex: 1; min-height: 0; }
.tab-content--active { display: flex; }

/* ─── 3-Column Container ─────────────────────────────────────────────────── */
.container {
    display: flex; gap: 12px; padding: 12px;
    flex: 1; overflow: hidden; min-height: 0;
}
@media (min-width: 1400px) { .left-column, .right-column { width: 320px; } .container { gap: 16px; padding: 16px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .left-column, .right-column { width: 280px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .left-column, .right-column { width: 250px; } }
@media (min-width: 1024px) {
    .left-column  { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; overflow-y: auto; max-height: 100%; padding-right: 4px; }
    .middle-column { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow: hidden; min-height: 0; }
    .right-column  { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; overflow-y: auto; max-height: 100%; padding-right: 4px; }
}

/* ─── Panel (Astro Container) ────────────────────────────────────────────── */
.panel {
    background: var(--color-background-surface-default);
    border: 1px solid var(--color-border-interactive-muted);
    border-radius: var(--radius-base);
    padding: 12px; overflow: hidden; flex-shrink: 0;
}
.panel-header {
    font-size: 13px; font-weight: 500; margin-bottom: 10px;
    color: var(--color-text-interactive-default);
    display: flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.panel-content { display: flex; flex-direction: column; gap: 12px; }

/* ─── Terminal Panel — THE scroll fix ────────────────────────────────────── */
.terminal-panel {
    display: flex; flex-direction: column;
    flex: 1;       /* grow to fill middle column */
    min-height: 0; /* allow shrinking — CRITICAL for overflow to work */
    overflow: hidden;
}
.terminal-panel > .panel-content {
    flex: 1; overflow: hidden; min-height: 0;
    display: flex; flex-direction: column;
}
.terminal {
    background: var(--color-background-base-default);
    border: 1px solid var(--color-border-interactive-muted);
    border-radius: var(--radius-base);
    padding: 8px 12px;
    font-family: var(--font-mono); font-size: 12px;
    flex: 1;           /* fill remaining space */
    min-height: 0;     /* CRITICAL — without this, the flex item won't shrink */
    overflow-y: auto;  /* enable scroll */
    overflow-x: hidden;
}
.terminal-line {
    margin-bottom: 2px; line-height: 1.4; word-wrap: break-word;
    padding: 1px 0; border-bottom: 1px solid rgba(43,101,155,0.1);
}
.terminal-line.command  { color: var(--color-text-interactive-default); }
.terminal-line.response { color: var(--color-status-normal); }
.terminal-line.error    { color: var(--color-status-critical); }
.terminal-line.warning  { color: var(--color-status-caution); }
.terminal-line.info     { color: var(--color-text-secondary); }

/* ─── Telemetry ──────────────────────────────────────────────────────────── */
.telemetry-panel { flex-shrink: 0; }
.telemetry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.telemetry-item {
    background: var(--color-background-base-default);
    border: 1px solid var(--color-border-interactive-muted);
    border-radius: var(--radius-base);
    padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: center;
}
.telemetry-section-label { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.telemetry-label { font-size: 10px; color: var(--color-text-placeholder); text-transform: uppercase; letter-spacing: 0.8px; }
.telemetry-value { font-size: 18px; font-weight: 500; color: var(--color-text-interactive-default); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.telemetry-value-sm { font-size: 13px; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    padding: 8px 12px; border: 1px solid transparent;
    border-radius: var(--radius-base); font-size: 13px; font-weight: 500;
    font-family: var(--font-body); cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; line-height: 1;
}
.btn-primary { background: var(--color-background-interactive-default); color: var(--color-text-inverse); border-color: var(--color-background-interactive-default); }
.btn-primary:hover:not(:disabled) { background: var(--color-background-interactive-hover); border-color: var(--color-background-interactive-hover); }
.btn-secondary { background: transparent; color: var(--color-text-interactive-default); border-color: var(--color-border-interactive-default); }
.btn-secondary:hover:not(:disabled) { color: var(--color-text-interactive-hover); border-color: var(--color-border-interactive-hover); background: var(--color-background-base-hover); }
.btn-danger { background: var(--color-status-critical); color: #fff; border-color: var(--color-status-critical); }
.btn-danger:hover:not(:disabled) { background: #e03030; }
.btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ─── Inputs ─────────────────────────────────────────────────────────────── */
.command-input, .settings-input {
    background: var(--color-background-base-default);
    border: 1px solid var(--color-border-interactive-muted);
    border-radius: var(--radius-base);
    padding: 6px 8px; color: var(--color-text-primary);
    font-size: 13px; font-family: var(--font-mono); min-height: 32px;
    transition: border-color 0.15s ease;
}
.command-input:focus, .settings-input:focus { outline: none; border-color: var(--color-border-interactive-default); }
.command-input::placeholder { color: var(--color-text-placeholder); }

.command-section { display: flex; flex-direction: column; gap: 8px; overflow: visible; }
.command-section > div:last-child { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--color-border-interactive-muted); flex-shrink: 0; }
.command-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(65px, 1fr)); gap: 6px; }
.command-preset { padding: 6px 4px; font-size: 11px; min-height: 30px; }

/* ─── Connection / Port ──────────────────────────────────────────────────── */
.connection-status { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
.status-indicator { width: 10px; height: 10px; border-radius: var(--radius-circle); background: var(--color-status-off); transition: all 0.3s ease; flex-shrink: 0; }
.status-indicator.connected { background: var(--color-status-normal); box-shadow: 0 0 8px var(--color-status-normal); }
.port-info { font-size: 11px; color: var(--color-text-placeholder); margin-top: 8px; font-family: var(--font-mono); word-break: break-all; }

/* ─── Radio Config ───────────────────────────────────────────────────────── */
.radio-section { padding: 8px; background: var(--color-background-base-default); border: 1px solid var(--color-border-interactive-muted); border-radius: var(--radius-base); }
.radio-section label { font-size: 12px; color: var(--color-text-secondary); display: block; margin-bottom: 6px; }
.radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.freq-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }

/* ─── LEDs ───────────────────────────────────────────────────────────────── */
.led-indicators { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.led-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-secondary); }
.led { width: 14px; height: 14px; border-radius: var(--radius-circle); background: var(--color-background-surface-header); border: 1px solid var(--color-border-interactive-muted); transition: all 0.15s ease; flex-shrink: 0; }
.led.active { background: var(--color-status-normal); border-color: var(--color-status-normal); box-shadow: 0 0 10px var(--color-status-normal); }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 0.3; } }

/* ─── Orientation ────────────────────────────────────────────────────────── */
.orientation-panel { min-height: 280px; }
.orientation-canvas { width: 100%; height: 200px; background: var(--color-background-base-default); border: 1px solid var(--color-border-interactive-muted); border-radius: var(--radius-base); position: relative; margin-bottom: 8px; }
@media (min-width: 1200px) { .orientation-canvas { height: 250px; } }
.orientation-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.orientation-value { text-align: center; padding: 6px; background: var(--color-background-base-default); border: 1px solid var(--color-border-interactive-muted); border-radius: var(--radius-base); }
.orientation-label { font-size: 10px; color: var(--color-text-placeholder); text-transform: uppercase; letter-spacing: 0.5px; }
.orientation-data { font-size: 14px; font-weight: 500; color: var(--color-text-interactive-default); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal.active { display: flex; }
.modal-content { background: var(--color-background-surface-default); border: 1px solid var(--color-border-interactive-muted); border-radius: var(--radius-base); box-shadow: var(--shadow-overlay); padding: 24px; max-width: 450px; width: 100%; max-height: 80vh; overflow-y: auto; }
.modal-header { font-size: 16px; font-weight: 500; margin-bottom: 16px; color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.5px; }
.settings-group { margin-bottom: 16px; }
.settings-label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--color-text-secondary); }

/* ─── Scrollbars ─────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-interactive-muted) var(--color-background-base-default); }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--color-background-base-default); }
*::-webkit-scrollbar-thumb { background: var(--color-border-interactive-muted); border-radius: var(--radius-base); }
*::-webkit-scrollbar-thumb:hover { background: var(--color-background-interactive-muted); }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    body { overflow: auto; }
    .container { flex-direction: column; height: auto; overflow: visible; }
    .left-column, .middle-column, .right-column { width: 100%; display: flex; flex-direction: column; gap: 12px; }
    .panel-header { cursor: pointer; user-select: none; position: relative; }
    .panel-header::after { content: '▼'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; font-size: 10px; color: var(--color-text-placeholder); }
    .panel.collapsed .panel-header::after { transform: translateY(-50%) rotate(-90deg); }
    .panel.collapsed .panel-content { display: none; }
    .gsb__tabs { display: none; }
}
@media (max-width: 767px) {
    body { overflow: auto; }
    .container { flex-direction: column; padding: 10px; gap: 10px; height: auto; overflow: visible; }
    .left-column, .middle-column, .right-column { width: 100%; display: flex; flex-direction: column; gap: 10px; }
    .panel-header { cursor: pointer; user-select: none; position: relative; }
    .panel-header::after { content: '▼'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; font-size: 10px; color: var(--color-text-placeholder); }
    .panel.collapsed .panel-header::after { transform: translateY(-50%) rotate(-90deg); }
    .panel.collapsed .panel-content { display: none; }
    .gsb { padding: 0 var(--spacing-2); height: 48px; gap: var(--spacing-2); }
    .gsb__app-name { font-size: 14px; }
    .gsb__monitors { gap: var(--spacing-2); }
    .gsb__tabs { display: none; }
    .btn { min-height: 40px; padding: 10px 12px; }
    .command-preset { min-height: 36px; padding: 8px 6px; }
}
@media (max-width: 480px) { .radio-grid { grid-template-columns: 1fr; } }