/* ============================================================================
   RealRadio — Dark Ops Theme
   - Imports base site styles
   - Overrides CSS custom properties for dark palette
   - Tweaks cards, tables, and panels to match dark scheme
   ========================================================================== */
@import url("./site.css");

:root {
    color-scheme: dark;
    --bg: #0b1120;
    --fg: #f8fafc;
    --muted: #94a3b8;
    --border: rgba(148, 163, 184, 0.25);
    --accent-color: #38bdf8;
    --accent-weak: rgba(56, 189, 248, 0.12);
    --accent-strong: #0284c7;
    --surface: rgba(15, 23, 42, 0.82);
    --surface-strong: rgba(8, 47, 73, 0.88);
    --header-bg: rgba(2, 6, 23, 0.92);
    --header-fg: #e2e8f0;
    --header-fg-dim: #cbd5f5;
    --header-active-bg: rgba(56, 189, 248, 0.32);
    --link: #38bdf8;
    --link-hover: #0ea5e9;
    --shadow: 0 6px 16px rgba(15, 23, 42, 0.45);
}

body {
    background-image: radial-gradient(circle at top, rgba(56, 189, 248, 0.08), transparent 55%);
}

/* Apply dark theme to all card elements, not just those in .cards container */
.card,
.cards .card,
.rr-card {
    border-color: rgba(56, 189, 248, 0.45);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(7, 12, 20, 0.9));
    box-shadow: 0 10px 30px rgba(8, 47, 73, 0.45);
}

.card h4,
.cards .card h4,
.rr-card h4,
.card-header {
    color: #bae6fd;
}

/* Card body text should be readable in dark theme */
.card-body {
    color: var(--fg);
}

/* Brighten all text elements in dark theme */
p, li, span, div, td, th, label {
    color: var(--fg);
}

/* Ensure muted text is still visible in dark theme */
.muted {
    color: var(--muted) !important;
}

/* Fix white panels/backgrounds */
section,
.panel,
.content-panel,
.ops-panel {
    background: transparent;
    color: var(--fg);
}

.card-section,
.stat-card,
.sidebar-badge,
.role-result,
.role-pill,
#user-admin-root .rr-card,
#billingCatalog .billing-panel__surface,
#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: var(--surface);
    color: var(--fg);
    border-color: rgba(148, 163, 184, 0.4);
    box-shadow: 0 10px 24px rgba(8, 47, 73, 0.35);
}

.card-section,
.stat-card,
.role-result,
.role-pill,
#billingCatalog .billing-panel__surface,
#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 {
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.role-result:hover,
.role-result.active,
#acars-sandbox-root .acars-choice:hover,
#acars-sandbox-root .acars-choice:focus-visible,
#acars-sandbox-root .acars-toggle:hover,
#acars-sandbox-root .acars-select:focus,
#acars-sandbox-root .acars-flight-field input:focus,
#acars-sandbox-root .acars-field input:focus {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18);
}

.card-section h3,
.stat-card .stat-label,
.role-result h4,
#billingCatalog .billing-panel__header h4,
#billingCatalog .billing-panel__surface,
#billingCatalog .billing-panel__surface * {
    color: var(--fg);
}

.table,
.aa-table,
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(15, 23, 42, 0.65);
    color: var(--fg);
}

.table thead th,
.aa-table th {
    background: rgba(8, 47, 73, 0.8);
    color: #cbd5f5;
}

.form-control,
.form-select,
.input-group-text {
    background-color: rgba(15, 23, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.4);
    color: var(--fg);
}

.btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #22d3ee);
    border-color: #0ea5e9;
    color: #0f172a;
}

.btn,
#user-admin-root .btn,
#acars-sandbox-root .acars-toggle {
    background: var(--surface);
    color: var(--fg);
    border-color: rgba(148, 163, 184, 0.45);
}

.btn:hover,
#user-admin-root .btn:hover,
#acars-sandbox-root .acars-toggle:hover {
    background: rgba(56, 189, 248, 0.16);
    color: var(--fg);
}

.btn-outline-primary {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.55);
}

.sidebar {
    background: rgba(2, 6, 23, 0.86);
    border-left-color: rgba(148, 163, 184, 0.25);
    color: var(--fg);
}

.sidebar .nav-link.active {
    background: rgba(56, 189, 248, 0.2);
    color: #f8fafc;
}

/* Sidebar text should be bright in dark theme */
.sidebar h3,
.sidebar h4,
.sidebar h5,
.sidebar .section-title {
    color: #bae6fd;
}

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

.alert {
    border-color: rgba(94, 234, 212, 0.45);
    background: rgba(45, 212, 191, 0.16);
    color: #f0fdf4;
}

.alert-success {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.18), rgba(7, 12, 20, 0.82));
    color: #e0f2fe;
    border-color: rgba(56, 189, 248, 0.55);
}

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

/* NOTAM ribbon — dark theme */
.notam-ribbon {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.14), rgba(56, 189, 248, 0.08));
    border-bottom: 1px solid rgba(56, 189, 248, 0.45);
    color: #e0f2fe;
}

.notam-ribbon__close:hover,
.notam-ribbon__close:focus-visible {
    background: rgba(56, 189, 248, 0.2);
}

#billingCatalog #billingStatus.ok,
#acars-sandbox-root .acars-badge.is-success {
    background: rgba(56, 189, 248, 0.2);
    color: #e0f2fe;
    border-color: rgba(56, 189, 248, 0.45);
}

#billingCatalog .billing-panel__hint,
#acars-sandbox-root .acars-badge {
    background: var(--surface);
    color: var(--fg);
    border-color: rgba(148, 163, 184, 0.35);
}

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

#acars-sandbox-root .acars-badge.is-info {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.4);
}

#acars-sandbox-root .acars-status.is-success {
    color: #e0f2fe;
}

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

#acars-sandbox-root .acars-status.is-error {
    color: #fecdd3;
}

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

/* Badge pills */
.badge-pill {
    background: var(--surface);
    color: var(--fg);
    border-color: rgba(148, 163, 184, 0.45);
}

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

/* Chips */
.chip {
    border-color: rgba(148, 163, 184, 0.35);
    background: var(--surface);
    color: var(--fg);
}

/* Sidebar elements */
.sidebar-badge {
    background: var(--surface);
    border-color: var(--accent-color);
    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: var(--surface);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--fg);
}

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

/* Role results container */
.role-results {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.35);
}

/* FIR option cards */
.rr-fir-option {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--fg);
}

.rr-fir-option:hover,
.rr-fir-option:focus-visible,
.rr-fir-option.is-selected {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.15);
    background-color: rgba(56, 189, 248, 0.12);
}

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

.rr-fir-option__traffic {
    color: #7dd3fc;
}

/* Offline shard cards */
.shard-card--offline {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    color: var(--muted);
    border-color: rgba(148, 163, 184, 0.25);
}

.shard-card--offline .shard-card__subtitle {
    color: rgba(148, 163, 184, 0.7);
}

.shard-card--offline .kv span,
.shard-card--offline .kv strong {
    color: var(--muted);
}

.shard-card--offline .shard-card__status {
    background: rgba(148, 163, 184, 0.15);
    color: var(--muted);
}

/* ACARS disabled select */
#acars-sandbox-root .acars-select:disabled {
    background: rgba(15, 23, 42, 0.6);
    color: var(--muted);
}

/* Product cards */
.product {
    background: var(--surface);
    border-color: rgba(56, 189, 248, 0.45);
}

.product h4 {
    color: #7dd3fc;
}

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

/* Ensure dropdown menus are dark */
.dropdown-menu {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--fg);
}

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

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(56, 189, 248, 0.12);
    color: var(--fg);
}

/* Bootstrap modal */
.modal-content {
    background: var(--bg);
    color: var(--fg);
    border-color: rgba(148, 163, 184, 0.35);
}

.modal-header {
    border-bottom-color: rgba(148, 163, 184, 0.25);
}

.modal-footer {
    border-top-color: rgba(148, 163, 184, 0.25);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Bootstrap overrides for dark theme */
.bg-white,
.bg-light {
    background: var(--surface) !important;
}

.text-dark {
    color: var(--fg) !important;
}

.border-light {
    border-color: rgba(148, 163, 184, 0.25) !important;
}

/* Nav tabs */
.nav-tabs {
    border-bottom-color: rgba(148, 163, 184, 0.25);
}

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

.nav-tabs .nav-link:hover {
    border-color: rgba(148, 163, 184, 0.25);
    color: var(--fg);
}

.nav-tabs .nav-link.active {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.35);
    border-bottom-color: transparent;
    color: var(--fg);
}

/* List groups */
.list-group-item {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.25);
    color: var(--fg);
}

.list-group-item:hover {
    background: rgba(56, 189, 248, 0.08);
}

/* Pagination */
.page-link {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--fg);
}

.page-link:hover {
    background: rgba(56, 189, 248, 0.12);
    color: var(--fg);
}

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

.page-item.disabled .page-link {
    background: rgba(15, 23, 42, 0.4);
    color: var(--muted);
}

/* ============================================================================
   Traffic page overrides
   ========================================================================== */

.traffic-overlay-toggle {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--fg);
}

#traffic-map {
    border-color: rgba(148, 163, 184, 0.25);
}

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

.ac-card {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.25);
    color: var(--fg);
}

.ac-card:hover {
    background: rgba(56, 189, 248, 0.08);
}

.ac-chip {
    background: var(--surface);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.45);
}

.ac-empty {
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--muted);
}

.ac-meta-badges {
    color: #7dd3fc;
}

.ac-meta-badge {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.45);
}

.ac-filters {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.25);
}

.ac-filters input[type="text"],
.ac-filters input[type="number"],
.ac-filters select {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.4);
    color: var(--fg);
}

.ac-filters .btn {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--fg);
}

.ac-filters .btn:hover {
    background: rgba(56, 189, 248, 0.12);
}

.ac-history {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.25);
}

.ac-history-range input[type="datetime-local"] {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.4);
    color: var(--fg);
}

.ac-history .btn {
    background: var(--surface);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--fg);
}

.ac-history .btn:hover {
    background: rgba(56, 189, 248, 0.12);
}

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

.traffic-legend-chip--adsb {
    color: #60a5fa;
    border-color: #3b82f6;
}

.traffic-legend-chip--presence {
    color: #fb923c;
    border-color: #f97316;
}

/* Replay page */
.replay-map,
.replay-timeline,
.replay-clips {
    border-color: rgba(148, 163, 184, 0.35);
}

/* ============================================================================
   Passenger flights page
   ========================================================================== */

/* Ensure table-hover rows have proper dark background */
.table-hover > tbody > tr:hover {
    background-color: rgba(56, 189, 248, 0.12);
    color: var(--fg);
}

/* Fix table-responsive wrapper potentially blocking background */
.table-responsive {
    background: transparent;
}

/* Ensure all table cells have proper dark theme colors */
.table td,
.table th {
    background-color: transparent;
    color: var(--fg);
    border-color: rgba(148, 163, 184, 0.25);
}

/* Override Bootstrap's text-muted for dark theme visibility */
.text-muted {
    color: var(--muted) !important;
}

/* Fix any nested small elements in tables */
.table small,
.table .text-muted {
    color: var(--muted) !important;
}