/* ============================================================================
   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;
    --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);
}

body {
    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));
}

.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 {
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.15), rgba(5, 1, 15, 0.9));
    border-color: rgba(124, 58, 237, 0.45);
    color: var(--fg);
}

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

/* Forms and inputs */
.form-control,
.form-select,
.input-group-text {
    background: rgba(5, 1, 15, 0.85);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--fg);
}

.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);
}

.sidebar-notice {
    background: rgba(234, 179, 8, 0.18);
    border-color: rgba(234, 179, 8, 0.45);
    color: #fef3c7;
}

/* 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);
}

.rr-fir-option__name {
    color: var(--muted);
}

.rr-fir-option__traffic {
    color: #c4b5fd;
}

/* Shard cards offline */
.shard-card--offline {
    background: linear-gradient(135deg, rgba(30, 27, 55, 0.8), rgba(5, 1, 15, 0.9));
    border-color: rgba(124, 58, 237, 0.25);
    color: var(--muted);
}

.shard-card--offline .shard-card__status {
    background: rgba(124, 58, 237, 0.15);
    color: var(--muted);
}

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

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

#acars-sandbox-root .acars-badge.is-success {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(45, 212, 191, 0.45);
    color: #a7f3d0;
}

#acars-sandbox-root .acars-badge.is-warn {
    background: rgba(234, 179, 8, 0.18);
    border-color: rgba(234, 179, 8, 0.45);
    color: #fef3c7;
}

#acars-sandbox-root .acars-badge.is-error {
    background: rgba(248, 113, 113, 0.18);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fecdd3;
}

/* 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);
}

.dropdown-item {
    color: var(--fg);
}

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

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

.nav-tabs .nav-link {
    color: var(--muted);
}

.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);
}

.traffic-legend-chip {
    background: rgba(5, 1, 15, 0.7);
}

/* NOTAM ribbon — neon theme */
.notam-ribbon {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.18), rgba(56, 189, 248, 0.1));
    border-bottom: 1px solid rgba(124, 58, 237, 0.5);
    color: #f5f3ff;
}

.notam-ribbon__close:hover,
.notam-ribbon__close:focus-visible {
    background: rgba(124, 58, 237, 0.25);
}