/* ============================================================================
   RealRadio — Horizon Theme
   - Warm daylight palette inspired by ATC towers at dawn
   - Inherits base styling and swaps key variables
   ========================================================================== */
@import url("./site.css");

:root {
    --bg: #fffaf3;
    --fg: #3d2f1b;
    --muted: #8c7851;
    --border: rgba(209, 174, 122, 0.45);
    --accent-color: #f97316;
    --accent-weak: rgba(249, 115, 22, 0.14);
    --accent-strong: #ea580c;
    --accent-ring: rgba(249, 115, 22, 0.4);
    --header-bg: linear-gradient(135deg, #fca311, #fb8500);
    --header-fg: #fffbeb;
    --header-fg-dim: rgba(255, 251, 235, 0.82);
    --header-active-bg: rgba(251, 133, 0, 0.25);
    --link: #fb8500;
    --link-hover: #f97316;
    --shadow: 0 12px 28px rgba(251, 133, 0, 0.18);

    /* Stage B tokens (2026-05-27) — warm-light palette */
    --surface: #ffffff;
    --surface-strong: #fffaf3;
    --surface-sunken: #fff3e2;
    --surface-hover: rgba(249, 115, 22, 0.1);
    --sidebar-bg: rgba(249, 115, 22, 0.08);
    --input-bg: #fffaf3;
    --input-border: rgba(209, 174, 122, 0.55);
    --input-fg: var(--fg);
    --input-placeholder: rgba(140, 120, 81, 0.55);
    --input-focus-ring: rgba(249, 115, 22, 0.3);
    --code-bg: #2d1b00;
    --code-fg: #fed7aa;
    --code-border: rgba(249, 115, 22, 0.35);
    --success-bg: rgba(34, 197, 94, 0.14);
    --success-fg: #166534;
    --success-border: rgba(34, 197, 94, 0.4);
    --warning-bg: rgba(249, 115, 22, 0.18);
    --warning-fg: #7c2d12;
    --warning-border: rgba(249, 115, 22, 0.5);
    --danger-bg: rgba(220, 38, 38, 0.12);
    --danger-fg: #991b1b;
    --danger-border: rgba(220, 38, 38, 0.4);
    --info-bg: rgba(14, 165, 233, 0.12);
    --info-fg: #075985;
    --info-border: rgba(14, 165, 233, 0.4);
    --shard-offline-bg: linear-gradient(135deg, #f3e7d3 0%, #e0c9a3 100%);
    --shard-offline-fg: #6b5536;
    --shard-offline-fg-dim: rgba(107, 85, 54, 0.75);
    --shard-offline-strong: #3d2f1b;
    --shard-offline-border: rgba(140, 120, 81, 0.4);
    --shard-offline-status-bg: rgba(61, 47, 27, 0.12);
    --shard-offline-status-fg: #3d2f1b;
    --map-label-fg: #7c2d12;
    --map-label-halo: rgba(255, 251, 235, 0.9);
    --notam-bg: linear-gradient(90deg, #fed7aa 0%, #fdba74 100%);
    --notam-fg: #7c2d12;
    --notam-border: #f97316;
    --table-head-bg: rgba(249, 115, 22, 0.15);
    --table-head-fg: #7c2d12;
    --table-head-border: rgba(249, 115, 22, 0.32);
    --table-row-hover: rgba(249, 115, 22, 0.1);
    --fir-option-name-fg: #8c7851;
    --fir-option-traffic-fg: #166534;
}

body {
    /* The pre-paint inline style="background:#0f172a;color:#f8fafc" is cleared
       by theme-selector.js once Horizon is active, so this rule applies cleanly
       without !important. (When JS is off, the default Dark theme shows — not
       Horizon — so this isn't in play.) */
    background-color: var(--bg);
    color: var(--fg);
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 214, 153, 0.35), transparent 55%),
                      radial-gradient(circle at 80% 0%, rgba(253, 186, 116, 0.28), transparent 60%);
}

header.navbar,
.navbar {
    box-shadow: 0 15px 40px rgba(249, 115, 22, 0.2);
}

.cards .card {
    border-color: rgba(249, 115, 22, 0.35);
    background: linear-gradient(180deg, rgba(255, 237, 213, 0.92), rgba(254, 215, 170, 0.78));
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.2);
}

.cards .card h4 {
    color: #c2410c;
}

.badge.bg-success,
.alert-success {
    background: linear-gradient(135deg, #facc15, #f97316);
    color: #3d2f1b;
    border-color: rgba(250, 204, 21, 0.6);
}

.btn-primary {
    background: linear-gradient(135deg, #f97316, #fb8500);
    border-color: #f97316;
    color: #fffaf3;
}

.btn-outline-primary {
    color: #f97316;
    border-color: rgba(249, 115, 22, 0.45);
}

.sidebar {
    background: rgba(255, 247, 237, 0.92);
    border-right: 1px solid rgba(209, 174, 122, 0.45);
}

.sidebar .nav-link.active {
    background: rgba(253, 186, 116, 0.35);
    color: #9a3412;
}

.table thead th,
.aa-table th {
    background: rgba(251, 133, 0, 0.16);
    color: #7c2d12;
}

.progress-bar {
    background: linear-gradient(90deg, #f59e0b, #fb7185);
}

/* Cards — warm tones */
.rr-card {
    border-color: rgba(209, 174, 122, 0.4);
    background: linear-gradient(180deg, rgba(255, 237, 213, 0.85), rgba(255, 247, 237, 0.92));
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.12);
}

/* Headings/labels in warm burnt-orange. Generic single-class selectors stay
   below the per-card accent rules in Home/Index.cshtml (TCAS orange, ELT red,
   Space-Wx blue, SELCAL green = two-class specificity), so those win and keep
   their brand colours — only the un-coloured titles (Departing, Arriving,
   ACARS, SATCOM, Alerts, Busiest FIRs, sidebar section titles) go burnt-orange
   instead of inheriting the now-dark body text. */
.rr-card h4,
.card-header,
.rr-card-toolbar strong,
.section-title,
h1, h2, h3, h4 {
    color: #9a3412;
}

/* NOTAM ribbon — warm amber matching horizon palette */
.notam-ribbon {
    background: linear-gradient(90deg, rgba(253, 186, 116, 0.5), rgba(251, 191, 36, 0.3));
    border-bottom: 1px solid #f59e0b;
    color: #7c2d12;
}

.notam-ribbon__close:hover,
.notam-ribbon__close:focus-visible {
    background: rgba(249, 115, 22, 0.15);
}

/* Alert styling */
.alert {
    border-color: rgba(209, 174, 122, 0.5);
    background: rgba(255, 237, 213, 0.6);
    color: var(--fg);
}

.alert-danger {
    background: rgba(254, 202, 202, 0.5);
    border-color: rgba(248, 113, 113, 0.4);
    color: #991b1b;
}