/* ============================================================================
   RealRadio — Neon Grid Theme
   - Futuristic high-contrast palette for overnight monitoring shifts
   - Builds on base site styles with electric accenting
   ========================================================================== */
@import url("./site.css");

:root {
    color-scheme: dark;
    --bg: #05010f;
    --fg: #f5f3ff;
    --muted: #bdb4ff;
    --border: rgba(94, 234, 212, 0.35);
    --accent-color: #7c3aed;
    --accent-weak: rgba(124, 58, 237, 0.2);
    --accent-strong: #a855f7;
    --accent-ring: rgba(168, 85, 247, 0.55);
    --header-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(124, 58, 237, 0.92));
    --header-fg: #f8fafc;
    --header-fg-dim: rgba(241, 245, 249, 0.82);
    --header-active-bg: rgba(14, 165, 233, 0.3);
    --link: #38bdf8;
    --link-hover: #a855f7;
    --shadow: 0 0 32px rgba(56, 189, 248, 0.4);

    /* Stage B tokens (2026-05-27) */
    --surface: rgba(15, 12, 35, 0.85);
    --surface-strong: rgba(30, 20, 55, 0.9);
    --surface-sunken: rgba(5, 1, 15, 0.6);
    --surface-hover: rgba(124, 58, 237, 0.2);
    --sidebar-bg: rgba(30, 20, 55, 0.65);
    --input-bg: rgba(5, 1, 15, 0.85);
    --input-border: rgba(124, 58, 237, 0.4);
    --input-fg: var(--fg);
    --input-placeholder: rgba(189, 180, 255, 0.5);
    --input-focus-ring: rgba(168, 85, 247, 0.45);
    --code-bg: rgba(5, 1, 15, 0.85);
    --code-fg: #fbcfe8;
    --code-border: rgba(124, 58, 237, 0.35);
    --success-bg: rgba(16, 185, 129, 0.2);
    --success-fg: #a7f3d0;
    --success-border: rgba(45, 212, 191, 0.45);
    --warning-bg: rgba(234, 179, 8, 0.18);
    --warning-fg: #fef3c7;
    --warning-border: rgba(234, 179, 8, 0.45);
    --danger-bg: rgba(248, 113, 113, 0.18);
    --danger-fg: #fecdd3;
    --danger-border: rgba(248, 113, 113, 0.45);
    --info-bg: rgba(56, 189, 248, 0.18);
    --info-fg: #67e8f9;
    --info-border: rgba(56, 189, 248, 0.5);
    --shard-offline-bg: linear-gradient(135deg, rgba(30, 27, 55, 0.8), rgba(5, 1, 15, 0.9));
    --shard-offline-fg: #bdb4ff;
    --shard-offline-fg-dim: #bdb4ff;
    --shard-offline-strong: #bdb4ff;
    --shard-offline-border: rgba(124, 58, 237, 0.25);
    --shard-offline-status-bg: rgba(124, 58, 237, 0.15);
    --shard-offline-status-fg: #bdb4ff;
    --map-label-fg: #c4b5fd;
    --map-label-halo: rgba(5, 1, 15, 0.9);
    --notam-bg: linear-gradient(90deg, rgba(124, 58, 237, 0.18), rgba(56, 189, 248, 0.1));
    --notam-fg: #f5f3ff;
    --notam-border: rgba(124, 58, 237, 0.5);
    --table-head-bg: rgba(124, 58, 237, 0.45);
    --table-head-fg: #ecfeff;
    --table-head-border: rgba(168, 85, 247, 0.4);
    --table-row-hover: rgba(124, 58, 237, 0.22);
    --fir-option-name-fg: #bdb4ff;
    --fir-option-traffic-fg: #c4b5fd;

    /* Solid-color overrides (--warning matches base amber; --surface-alt overrides base slate with neon's deep purple) */
    --surface-alt: rgba(30, 20, 55, 0.9);
}

body {
    /* The pre-paint inline style="background:#0f172a;color:#f8fafc" is a
       background *shorthand* (resets background-image to none) and is cleared
       by theme-selector.js once Neon is active — so Neon's signature radial
       glow applies cleanly without !important. (When JS is off the default
       Dark theme shows, not Neon, so this isn't in play.) */
    background-color: #05010f;
    background-image: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.3), transparent 60%),
                      radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.28), transparent 55%),
                      linear-gradient(180deg, rgba(8, 47, 73, 0.85), rgba(5, 1, 15, 0.95));
    color: var(--fg);
}

.cards {
    gap: 16px;
}

.cards .card {
    border-color: rgba(124, 58, 237, 0.55);
    background: linear-gradient(160deg, rgba(56, 189, 248, 0.16), rgba(124, 58, 237, 0.22));
    box-shadow: 0 20px 45px rgba(37, 99, 235, 0.35);
    backdrop-filter: blur(6px);
}

.cards .card h4 {
    color: #f5f3ff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.table thead th,
.aa-table th {
    background: rgba(124, 58, 237, 0.45);
    color: #ecfeff;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(15, 118, 110, 0.2);
}

.badge.bg-success,
.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.8), rgba(45, 212, 191, 0.8));
    border-color: rgba(45, 212, 191, 0.6);
    color: #022c22;
}

.btn-primary {
    background: linear-gradient(135deg, #38bdf8, #a855f7);
    border: 1px solid rgba(168, 85, 247, 0.6);
    color: #05010f;
}

.btn-outline-primary {
    color: #a855f7;
    border-color: rgba(168, 85, 247, 0.6);
}

.sidebar {
    background: rgba(5, 1, 15, 0.88);
    border-right-color: rgba(37, 99, 235, 0.35);
    box-shadow: inset -1px 0 0 rgba(59, 130, 246, 0.25);
}

.sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.65), rgba(236, 72, 153, 0.6));
    color: #f8fafc;
}

.alert-info {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(129, 140, 248, 0.35));
    border-color: rgba(129, 140, 248, 0.5);
    color: #f5f3ff;
}

/* Cards and surfaces */
.card,
.rr-card,
.card-section,
.stat-card {
    /* Solid dark floor under the translucent purple sheen. The gradient's top
       stop is only 15% opacity, so on tall cards (Operations Alerts, Busiest
       FIRs) — or anywhere the body's pink/blue radial glow bleeds through —
       the top washed out and white headers lost contrast. The opaque base
       color guarantees a dark field regardless of card height or body
       bleed-through. (2026-06-03 legibility fix.) */
    background-color: #0a061c;
    background-image: linear-gradient(180deg, rgba(124, 58, 237, 0.18), rgba(5, 1, 15, 0.6));
    border-color: rgba(124, 58, 237, 0.45);
    color: var(--fg);
}

.card-body,
.card h4,
.card-header {
    color: var(--fg);
}

/* Forms and inputs */

.btn {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.45);
    color: var(--fg);
}

.btn:hover {
    background: rgba(124, 58, 237, 0.2);
}

/* Badge pills */
.badge-pill {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.45);
    color: var(--fg);
}

.badge-pill.active {
    background: var(--accent-color);
    color: #f5f3ff;
}

/* Chips */
.chip {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.35);
    color: var(--fg);
}

/* Sidebar elements */
.sidebar-badge {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.6);
    color: var(--fg);
}

/* Busiest FIRs sidebar rows */
.fir-row {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.35);
    color: var(--fg);
}

.fir-row__name {
    color: var(--fg);
}

/* Role management */
.role-results {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.35);
}

.role-result,
.role-pill {
    background: rgba(5, 1, 15, 0.6);
    border-color: rgba(124, 58, 237, 0.3);
    color: var(--fg);
}

.role-result:hover,
.role-result.active {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.5);
}

/* FIR options */
.rr-fir-option {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.35);
    color: var(--fg);
}

.rr-fir-option:hover,
.rr-fir-option.is-selected {
    border-color: rgba(124, 58, 237, 0.6);
    background: rgba(124, 58, 237, 0.15);
}

/* ACARS sandbox */
.acars-list,
.acars-choice,
.acars-select,
.acars-toggle,
.acars-flight-field input,
.acars-field input {
    background: rgba(5, 1, 15, 0.85);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

.acars-badge {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.35);
    color: var(--fg);
}

/* Billing panel */
#billingCatalog .billing-panel__surface {
    background: rgba(5, 1, 15, 0.85);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

#billingCatalog .billing-panel__hint {
    background: rgba(124, 58, 237, 0.2);
    color: var(--fg);
}

/* User admin */
#user-admin-root .rr-card {
    background: rgba(5, 1, 15, 0.85);
    border-color: rgba(124, 58, 237, 0.45);
    color: var(--fg);
}

/* Product cards */
.product {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.45);
}

.product h4 {
    color: #c4b5fd;
}

/* Bootstrap overrides */
.dropdown-menu {
    background: rgba(5, 1, 15, 0.95);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

.nav-tabs {
    border-bottom-color: rgba(124, 58, 237, 0.3);
}

.nav-tabs .nav-link.active {
    background: rgba(5, 1, 15, 0.85);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

.list-group-item {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.3);
    color: var(--fg);
}

.page-link {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.35);
    color: var(--fg);
}

.page-item.active .page-link {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

/* Traffic page overrides */
.traffic-overlay-toggle {
    background: rgba(5, 1, 15, 0.85);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

#traffic-map {
    border-color: rgba(124, 58, 237, 0.3);
}

.leaflet-control.rr-connections-toggle {
    background: rgba(5, 1, 15, 0.92);
    color: var(--fg);
}

.ac-card {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.3);
    color: var(--fg);
}

.ac-card:hover {
    background: rgba(124, 58, 237, 0.15);
}

.ac-chip {
    background: rgba(5, 1, 15, 0.7);
    color: #c4b5fd;
    border-color: rgba(124, 58, 237, 0.5);
}

.ac-empty {
    border-color: rgba(124, 58, 237, 0.35);
}

.ac-meta-badge {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.5);
}

.ac-filters {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.3);
}

.ac-filters input,
.ac-filters select {
    background: rgba(5, 1, 15, 0.85);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

.ac-filters .btn {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

.ac-history {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.3);
}

.ac-history input {
    background: rgba(5, 1, 15, 0.85);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

/* NOTAM ribbon — neon theme */
.notam-ribbon__close:hover,
.notam-ribbon__close:focus-visible {
    background: rgba(124, 58, 237, 0.25);
}

/* ============================================================================
   LEGIBILITY PASS — 2026-05-27
   Fills the gaps where base site.css paints white panels or dark text on
   the neon palette and the original neon overrides didn't reach. Mirrors
   site.dark.css coverage but keeps neon's purple/cyan/teal aesthetic.
   Aesthetic intent of the original neon section above is preserved; this
   section is strictly additive.
   ========================================================================== */

/* Universal text — base Bootstrap inherits dark slate; force light. */
p, li, span, div, td, th, label, dt, dd,
h1, h2, h3, h4, h5, h6 {
    color: var(--fg);
}

dt {
    color: #c4b5fd;
}

a {
    color: var(--link);
}

a:hover,
a:focus-visible {
    color: var(--link-hover);
}

/* Drop white panel backgrounds inherited from base */
section,
.panel,
.content-panel,
.ops-panel {
    background: transparent;
    color: var(--fg);
}

/* Card text — cover all variants */
.card-body,
.card-header,
.rr-card .card-body {
    color: var(--fg);
}

.card-header {
    background: rgba(124, 58, 237, 0.22);
    border-bottom-color: rgba(124, 58, 237, 0.4);
    color: #f5f3ff;
}

/* Card-section/stat-card text (base paints these on white) */
.card-section,
.card-section h3,
.stat-card,
.stat-card .stat-label,
.stat-card .stat-value {
    color: var(--fg);
}

.card-section {
    background: var(--surface);
    border-color: rgba(124, 58, 237, 0.45);
}

.stat-card {
    background: var(--surface);
    border-color: rgba(124, 58, 237, 0.45);
}

/* Auth shell/forms */
.rr-auth-shell,
.auth-form,
.rr-auth-shell *,
.auth-form * {
    color: var(--fg);
}

.auth-form input,
.auth-form select,
.auth-form textarea {
    background: rgba(5, 1, 15, 0.85);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

/* .aa-table cells (custom non-Bootstrap table) need neon's purple border tint */
.aa-table {
    background-color: rgba(5, 1, 15, 0.55);
    color: var(--fg);
}

.aa-table td,
.aa-table th,
.table td,
.table th {
    border-color: rgba(124, 58, 237, 0.28);
}

/* Alerts — default + danger were missing */
.alert {
    background: rgba(124, 58, 237, 0.18);
    color: var(--fg);
    border-color: rgba(124, 58, 237, 0.5);
}

.alert-warning {
    background: rgba(234, 179, 8, 0.18);
    color: #fef3c7;
    border-color: rgba(234, 179, 8, 0.5);
}

#billingCatalog #billingStatus.err {
    background: rgba(248, 113, 113, 0.18);
    color: #fecdd3;
    border-color: rgba(248, 113, 113, 0.5);
}

#billingCatalog #billingStatus.ok {
    background: rgba(16, 185, 129, 0.22);
    color: #a7f3d0;
    border-color: rgba(45, 212, 191, 0.55);
}

/* Sidebar text — base paints light-green tint */
.sidebar {
    color: var(--fg);
}

.sidebar h3,
.sidebar h4,
.sidebar h5,
.sidebar .section-title {
    color: #c4b5fd;
}

.sidebar p,
.sidebar li,
.sidebar span,
.sidebar div,
.sidebar a {
    color: var(--fg);
}

/* Modal */
.modal-content {
    background: var(--bg);
    color: var(--fg);
    border-color: rgba(124, 58, 237, 0.4);
}

.modal-header {
    border-bottom-color: rgba(124, 58, 237, 0.3);
    color: var(--fg);
}

.modal-footer {
    border-top-color: rgba(124, 58, 237, 0.3);
}

.modal-title {
    color: #c4b5fd;
}

/* Bootstrap close button is a dark SVG — invert for visibility. */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Form focus + placeholder */
.form-control:focus,
.form-select:focus {
    background: rgba(5, 1, 15, 0.95);
    border-color: rgba(168, 85, 247, 0.6);
    color: var(--fg);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.22);
    outline: none;
}

.form-control::placeholder,
.form-select::placeholder {
    color: rgba(189, 180, 255, 0.5);
}

.form-text,
.form-label,
.form-check-label {
    color: var(--fg);
}

/* Pagination — disabled state + active text color */
.page-link:hover {
    background: rgba(124, 58, 237, 0.22);
    color: var(--fg);
    border-color: rgba(124, 58, 237, 0.5);
}

.page-item.active .page-link {
    color: #f5f3ff;
}

.page-item.disabled .page-link {
    background: rgba(5, 1, 15, 0.4);
    color: var(--muted);
    border-color: rgba(124, 58, 237, 0.2);
}

/* Public map banner */
.public-map-banner {
    background: rgba(234, 179, 8, 0.24);
    color: #fef9c3;
    border-color: rgba(250, 204, 21, 0.55);
}

/* Generic chips/buttons from base that paint white */
.rr-chip {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.35);
    color: var(--fg);
}

.rr-chip:hover {
    background: rgba(124, 58, 237, 0.2);
}

.rr-chip--active {
    background: rgba(124, 58, 237, 0.22);
    border-color: rgba(168, 85, 247, 0.6);
    color: #f5f3ff;
}

.rr-chip--active:hover {
    background: rgba(124, 58, 237, 0.3);
}

.chip--server {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
    color: #c4b5fd;
}

.chip--warning {
    background: var(--warning);
    color: #1f1300;
}

/* Generic .btn from base is white bg + accent text — override. */
.btn-warn {
    background: rgba(234, 179, 8, 0.85);
    border-color: rgba(217, 119, 6, 0.85);
    color: #1f1300;
}

.btn-warn:hover {
    background: rgba(217, 119, 6, 0.95);
    color: #1f1300;
}

.btn-link {
    color: var(--link);
}

.btn-link:hover {
    color: var(--link-hover);
}

.btn-ghost {
    color: var(--link);
}

.btn-ghost:hover {
    background: rgba(124, 58, 237, 0.16);
}

/* Search box from base (.role-search input) — white bg */
.role-search input,
input[type="search"] {
    background: rgba(5, 1, 15, 0.85);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

/* aa-listen button from base is white */
.aa-listen {
    background: rgba(5, 1, 15, 0.7);
    border-color: rgba(124, 58, 237, 0.5);
    color: #c4b5fd;
}

.aa-listen:hover {
    background: rgba(124, 58, 237, 0.2);
    color: #f5f3ff;
}

/* ACARS — fill the states the original neon section skipped */
.acars-badge.is-info {
    background: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.45);
}

.acars-status.is-success {
    color: #a7f3d0;
}

.acars-status.is-warn {
    color: #fbbf24;
}

.acars-choice:focus-visible,
.acars-toggle:focus-visible,
.acars-select:focus,
.acars-flight-field input:focus,
.acars-field input:focus {
    border-color: rgba(168, 85, 247, 0.65);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.22);
    outline: none;
}

/* AC traffic page text helpers */
.ac-empty {
    color: var(--muted);
}

.ac-meta-badges {
    color: #c4b5fd;
}

/* Focus rings on selection cards */
.role-result:focus-visible,
.rr-fir-option:focus-visible {
    border-color: rgba(168, 85, 247, 0.65);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.22);
    outline: none;
}

/* Replay page borders */
.replay-map,
.replay-timeline,
.replay-clips {
    border-color: rgba(124, 58, 237, 0.3);
}

/* Sidebar/flight notice strips inherited from base with light yellow bg */
.bulk-progress-status,
.bulk-progress-detail {
    color: var(--fg);
}

/* Booking/flight rows from base default to var(--bg) — fine, but ensure
   the imminent flight strip stays legible (yellow tint over near-black). */
.flight-row--imminent {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.55);
    color: #fef3c7;
}

/* FIR map labels — base sets dark green text with white halo, fine on
   the map tiles. No change. */