/* ============================================================================
   RealRadio – Windows Theme
   - Imports base site styles
   - Overrides CSS custom properties for the Win32/WinUI mica palette
   - Keeps only the rules that visually diverge from base + token values
     (raised-button gradients, mica radial body bg, gradient header bar,
     blue-tinted cards/sidebar, gradient rr-table head)
   ========================================================================== */
@import url("./site.css");

:root {
    color-scheme: light;

    /* Core palette (Windows 11 accent blue, mica light) */
    --bg: #f3f3f3;
    --fg: #1e1e1e;
    --muted: #5f6a7d;
    --border: #d0d0d0;
    --accent-color: #0f6cbd; /* Windows 11 accent blue */
    --accent-weak: #e4f1ff;  /* subtle acrylic wash */
    --accent-strong: #0a4a86;
    --accent-ring: rgba(15, 108, 189, 0.4);
    --header-bg: #1f4f95;    /* app chrome */
    --header-fg: #f7faff;
    --header-fg-dim: #d7e3f7;
    --header-active-bg: rgba(255, 255, 255, 0.28);
    --link: #0f6cbd;
    --link-hover: #0b4f8a;
    --radius: 6px;
    --pad: 10px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --sidebar-w: 320px;

    /* Stage B tokens */
    --surface: #ffffff;
    --surface-strong: #f4f7fc;
    --surface-sunken: #eef3fb;
    --surface-hover: rgba(15, 108, 189, 0.12);
    --surface-alt: #1e293b;
    --sidebar-bg: linear-gradient(180deg, #f8faff 0%, #e2e8f5 100%);

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: rgba(12, 62, 114, 0.28);
    --input-fg: var(--fg);
    --input-placeholder: #94a3b8;
    --input-focus-ring: rgba(15, 108, 189, 0.35);

    /* Code */
    --code-bg: #0f172a;
    --code-fg: #e2e8f0;
    --code-border: #1e293b;

    /* Semantic triples */
    --success-bg: var(--accent-weak);
    --success-fg: #0b3f73;
    --success-border: rgba(15, 108, 189, 0.35);
    --warning-bg: #fef3c7;
    --warning-fg: #78350f;
    --warning-border: #f59e0b;
    --danger-bg: rgba(202, 32, 32, 0.10);
    --danger-fg: #8b1a1a;
    --danger-border: rgba(168, 24, 24, 0.35);
    --info-bg: rgba(15, 108, 189, 0.12);
    --info-fg: #0f4c81;
    --info-border: rgba(15, 108, 189, 0.35);

    /* Single-color tokens */
    --warning: #f59e0b;

    /* Shard offline (base default works for windows light) */
    --shard-offline-bg: linear-gradient(135deg, #e2e8f0 0%, #cbd5f5 100%);
    --shard-offline-fg: #334155;
    --shard-offline-fg-dim: rgba(51, 65, 85, 0.8);
    --shard-offline-strong: #1e293b;
    --shard-offline-border: rgba(148, 163, 184, 0.35);
    --shard-offline-status-bg: rgba(15, 23, 42, 0.12);
    --shard-offline-status-fg: #0f172a;

    /* Map labels */
    --map-label-fg: #155b2e;
    --map-label-halo: #fff;

    /* NOTAM */
    --notam-bg: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    --notam-fg: #78350f;
    --notam-border: #f59e0b;

    /* Tables (blue-tinted gradient on heads) */
    --table-head-bg: rgba(15, 108, 189, 0.14);
    --table-head-fg: #0f3a6d;
    --table-head-border: rgba(15, 108, 189, 0.35);
    --table-row-hover: rgba(15, 108, 189, 0.12);

    /* FIR options */
    --fir-option-name-fg: #6c757d;
    --fir-option-traffic-fg: #0f5132;

    /* Typography — Segoe UI Variable for Windows mica feel */
    --font-mono: "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", Consolas, "Courier New", monospace;
}

/* --------------------------------- Base ---------------------------------- */
/* Windows uses Segoe UI Variable and a mica radial-gradient body background */
body {
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    /* The pre-paint inline style="background:#0f172a;color:#f8fafc" is cleared
       by theme-selector.js once Windows is active, so this light mica field
       applies cleanly without !important. (When JS is off the default Dark
       theme shows, not Windows, so this isn't in play.) */
    background-color: var(--bg);
    color: var(--fg);
    background-image: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(243, 243, 243, 0.95) 55%, rgba(229, 234, 244, 0.85) 100%);
}

/* Windows link hover gets underline+color transitions (base has no transition) */
a {
    transition: color 120ms ease, text-decoration-color 120ms ease;
}

    a:hover {
        text-decoration-color: var(--link-hover);
    }

/* -------------------------------- Header --------------------------------- */
/* Windows uses a gradient blue chrome bar (base is solid slate-900).         */
.rr-header {
    background: linear-gradient(180deg, #2a6bc7 0%, var(--header-bg) 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    padding: 10px 18px;
    border-bottom: 1px solid rgba(8, 40, 84, 0.55);
}

/* Translucent white hover/active states on the blue bar */
.rr-header a:hover,
.rr-header .nav-link:hover {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.rr-header a.active,
.rr-header .nav-link.active,
.rr-header a[aria-current="page"] {
    outline: 1px solid rgba(15, 108, 189, 0.45);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 0 12px rgba(255, 255, 255, 0.25);
}

.rr-header .brand {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Dropdown menu — light mica panel instead of dark glass */
.nav-dropdown__menu {
    background: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%);
    border: 1px solid rgba(12, 62, 114, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}

.nav-dropdown__menu .nav-link {
    color: #1f1f1f;
    transition: background 120ms ease, color 120ms ease;
}

.nav-dropdown__menu .nav-link:hover {
    background: rgba(15, 108, 189, 0.12);
    color: #0f3a6d;
}

.nav-dropdown__menu .nav-link.active,
.nav-dropdown__menu a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.6);
    outline: 1px solid rgba(15, 108, 189, 0.45);
    color: #0f3a6d;
}

.nav-dropdown__group-label {
    color: #6b7280;
}

.rr-header .rr-right .nav-dropdown__menu {
    left: auto;
    right: 0;
}

/* Theme switcher — Windows-specific raised pill with light dropdown */
.rr-header .theme-switcher {
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.18);
    color: var(--header-fg);
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
}

    .rr-header .theme-switcher label {
        display: inline-block;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 0.68rem;
        color: var(--header-fg-dim);
    }

    .rr-header .theme-switcher__select {
        background: rgba(255, 255, 255, 0.85);
        background-image: linear-gradient(45deg, transparent 50%, #0f3a6d 50%),
                          linear-gradient(135deg, #0f3a6d 50%, transparent 50%),
                          linear-gradient(#ffffff, #e0e7f5);
        background-position: calc(100% - 14px) calc(50% - 3px),
                             calc(100% - 10px) calc(50% - 3px),
                             center;
        background-size: 6px 6px, 6px 6px, 100% 100%;
        background-repeat: no-repeat;
        color: #1e1e1e;
        border: 1px solid rgba(12, 62, 114, 0.35);
        padding: 4px 30px 4px 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

/* Nav clock — translucent navy pill on the blue header */
.rr-header .nav-clock {
    padding: 6px 12px;
    background: rgba(12, 54, 108, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* -------------------------------- Buttons -------------------------------- */
/* Win32 raised gradient with inset highlight. Base is flat.                  */
.btn {
    border: 1px solid rgba(12, 62, 114, 0.35);
    color: #1f1f1f;
    background: linear-gradient(180deg, #fcfdff 0%, #e6ecf6 100%);
    padding: 6px 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

    .btn:hover {
        background: linear-gradient(180deg, #f5faff 0%, #dbe6f8 100%);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transform: translateY(-1px);
    }

.btn-primary,
.btn-success {
    background: linear-gradient(180deg, var(--accent-color) 0%, #0d5fa6 100%);
    border-color: rgba(6, 44, 92, 0.65);
    color: #f7fbff;
    box-shadow: 0 6px 16px rgba(15, 108, 189, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

    .btn-primary:hover,
    .btn-success:hover {
        background: linear-gradient(180deg, #0d5fa6 0%, #0b4f8a 100%);
        border-color: rgba(6, 40, 88, 0.8);
        color: #f7fbff;
    }

.btn-warn {
    background: linear-gradient(180deg, #ffd66b 0%, #f5a623 100%);
    border-color: rgba(184, 102, 10, 0.6);
    color: #3f2d00;
}

    .btn-warn:hover {
        background: linear-gradient(180deg, #f5a623 0%, #cf7c00 100%);
        color: #fff;
    }

.btn-danger {
    background: linear-gradient(180deg, #c2383a 0%, #8e1f22 100%);
    border-color: rgba(94, 18, 21, 0.65);
    color: #fff;
}

    .btn-danger:hover {
        background: linear-gradient(180deg, #8e1f22 0%, #6c1619 100%);
    }

.btn-ghost {
    border-color: rgba(12, 62, 114, 0.25);
    background: rgba(255, 255, 255, 0.65);
    color: var(--link);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

    .btn-ghost:hover {
        background: rgba(228, 241, 255, 0.85);
    }

/* Custom RealRadio button set */
.rr-btn {
    padding: 8px 14px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fefefe 0%, #e7ecf5 100%);
    color: #1f1f1f;
    border: 1px solid rgba(12, 62, 114, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

    .rr-btn:hover {
        background: linear-gradient(180deg, #f6f9ff 0%, #dbe6f8 100%);
    }

.rr-btn--primary {
    background: linear-gradient(180deg, var(--accent-color) 0%, #0d5fa6 100%);
    border-color: rgba(6, 44, 92, 0.65);
    color: #f7fbff;
}

.rr-btn--ghost {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(12, 62, 114, 0.28);
}

.rr-btn--danger {
    background: linear-gradient(180deg, #c2383a 0%, #8e1f22 100%);
    border-color: rgba(94, 18, 21, 0.65);
    color: #fff;
}

/* --------------------------------- Inputs -------------------------------- */
/* Windows inputs have an inner top shadow + soft gradient fill */
.form-control {
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

    .form-control:focus {
        outline: 2px solid rgba(15, 108, 189, 0.35);
        outline-offset: 1px;
        box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.12);
        background: #fff;
    }

.rr-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(12, 62, 114, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #f0f4fb 100%);
    color: var(--fg);
    border-radius: var(--radius);
}

    .rr-input:focus {
        outline: none;
        border-color: rgba(15, 108, 189, 0.45);
        box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.12);
        background: #fff;
    }

/* --------------------------- Cards / surfaces ---------------------------- */
/* Mica raised white→soft-blue gradient with inset highlight */
.card,
.rr-card {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cards .card {
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

    .cards .card h4 {
        color: #0c4f8c;
    }

.card-section {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
    border: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.stat-card {
    background: linear-gradient(180deg, #ffffff 0%, #ebf3ff 100%);
    border: 1px solid rgba(15, 108, 189, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Pill badges */
.badge-pill {
    border: 1px solid rgba(12, 62, 114, 0.35);
    background: linear-gradient(180deg, #ffffff 0%, #e7eef9 100%);
    color: #0f3a6d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    padding: 4px 12px;
}

    .badge-pill.active {
        background: linear-gradient(180deg, var(--accent-color) 0%, #0d5fa6 100%);
        border-color: rgba(6, 44, 92, 0.65);
        color: #f7fbff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }

.chip {
    border: 1px solid rgba(12, 62, 114, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%);
}

/* Alerts — Windows gradient mica */
.alert-success {
    background: linear-gradient(180deg, #e4f1ff 0%, #d2e9ff 100%);
    color: #0b3f73;
    border: 1px solid rgba(15, 108, 189, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.alert-danger {
    background: linear-gradient(180deg, rgba(202, 32, 32, 0.12) 0%, rgba(168, 24, 24, 0.08) 100%);
    color: #8b1a1a;
    border: 1px solid rgba(168, 24, 24, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.rr-alert {
    border: 1px solid rgba(12, 62, 114, 0.25);
    background: linear-gradient(180deg, #ffffff 0%, #f0f4fb 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.rr-alert--error {
    background: linear-gradient(180deg, #ffe5e7 0%, #f7c8cc 100%);
    border: 1px solid rgba(179, 37, 49, 0.4);
    color: #6c1a1f;
}

.rr-alert--success {
    background: linear-gradient(180deg, #e6f6ff 0%, #d0edff 100%);
    border: 1px solid rgba(15, 108, 189, 0.32);
    color: #0b3f73;
}

/* -------------------------- Role manager surfaces ------------------------ */
.role-results {
    border: 1px solid rgba(12, 62, 114, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.role-result {
    background: rgba(255, 255, 255, 0.75);
}

.role-result:hover {
    background: rgba(15, 108, 189, 0.12);
    border-color: rgba(15, 108, 189, 0.35);
}

.role-result.active {
    border-color: rgba(15, 108, 189, 0.6);
    background: rgba(15, 108, 189, 0.16);
}

/* -------------------------------- Sidebar -------------------------------- */
/* Light mica panel on the right edge */
.sidebar {
    padding: var(--space-4);
    background: linear-gradient(180deg, #f8faff 0%, #e2e8f5 100%);
    border-left: 1px solid rgba(12, 62, 114, 0.18);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08), inset 1px 0 0 rgba(255, 255, 255, 0.75);
    min-height: 100vh;
}

.sidebar-badge {
    background-color: rgba(15, 108, 189, 0.12);
    border: 2px solid rgba(15, 108, 189, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: #0f3a6d;
}

/* --------------------------------- Maps ---------------------------------- */
.map-card,
.public-map-card {
    padding: var(--pad);
    border: 1px solid rgba(15, 108, 189, 0.28);
    border-radius: var(--radius);
    margin: 12px 0;
    background: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* ----------------------------- rr-table ---------------------------------- */
/* Gradient blue head + hover tint that goes with the rest of the windows blue */
.rr-table thead th {
    text-align: left;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(15, 108, 189, 0.18) 0%, rgba(15, 108, 189, 0.05) 100%);
    border-bottom: 1px solid rgba(15, 108, 189, 0.35);
    color: #0f3a6d;
}

.rr-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.75);
}

.rr-table tbody tr:hover {
    background: rgba(15, 108, 189, 0.12);
}

/* ----------------------------- Section title ----------------------------- */
.section-title {
    color: var(--accent-strong);
}

/* Un-coloured card/section headers in Windows accent blue. Single-class
   specificity stays below the per-card accent rules in Home/Index.cshtml
   (TCAS orange, ELT red, Space-Wx blue, SELCAL green = two classes), so those
   keep their brand colours — only the un-coloured titles (Departing, Arriving,
   ACARS, SATCOM, Operations Alerts, Busiest FIRs) pick up the accent instead
   of inheriting the now-dark body text. (2026-06-03 legibility fix.) */
.rr-card-toolbar strong,
.card-header {
    color: var(--accent-strong);
}

/* ----------------------------- Billing panel ----------------------------- */
/* Mica acrylic gradient backgrounds + saturated header h4 color */
#billingCatalog .billing-panel {
    border: 1px solid rgba(15, 108, 189, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(228, 241, 255, 0.96) 100%);
    box-shadow: 0 18px 34px rgba(15, 108, 189, 0.12);
}

#billingCatalog .billing-panel__header h4 {
    color: #0f4f8c;
}

#billingCatalog .billing-panel__surface {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 108, 189, 0.22);
    box-shadow: 0 10px 26px rgba(15, 108, 189, 0.14);
}

#billingCatalog .billing-panel__hint {
    background: rgba(15, 108, 189, 0.12);
    color: #0f4f8c;
}

#billingCatalog .billing-form label {
    color: #0f3a6d;
}

#billingCatalog .billing-sections {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

#billingCatalog #billingStatus.err {
    background: rgba(185, 50, 50, 0.16);
    color: #8a1d1d;
}

/* ----------------------------- Main content ------------------------------ */
/* Windows flattens the main-content/container chrome with !important so the
   sidebar/header gradients meet flush at the page edge. Base does not use
   !important, so overriding here. */
.main-content {
    padding: 0 !important;
}

    .main-content .container {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none;
    }

/* ----------------------------- ACARS sandbox ----------------------------- */
/* Windows visually diverges from base for the ACARS sandbox in the mica
   hero gradient + raised list/choice surfaces. Most acars rules come from
   base; only the ones that look distinctly Windows-y stay here. */
.acars-hero {
    background: linear-gradient(135deg, rgba(15, 108, 189, 0.18), rgba(15, 108, 189, 0.06));
    border-radius: var(--radius);
    padding: var(--space-3);
    box-shadow: 0 12px 30px rgba(15, 108, 189, 0.18);
}

.acars-hero__title {
    color: var(--accent-strong);
}

.acars-step {
    border: 1px solid rgba(15, 108, 189, 0.35);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(15, 108, 189, 0.18);
}

.acars-toggle:focus-visible {
    outline: 2px solid rgba(15, 108, 189, 0.45);
    outline-offset: 2px;
}

.acars-toggle.is-active {
    box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.18);
}

.acars-flight-field input,
.acars-field input {
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: border .2s, box-shadow .2s;
}

.acars-flight-field input:focus,
.acars-field input:focus {
    outline: 2px solid rgba(15, 108, 189, 0.45);
    outline-offset: 1px;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.18);
}

/* Windows badges are mica gradients (not the base flat surface fill) */
.acars-badge {
    border: 1px solid rgba(12, 62, 114, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #e7eef9 100%);
    color: #425a73;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.acars-badge.is-success {
    background: linear-gradient(180deg, rgba(15, 108, 189, 0.22) 0%, rgba(15, 108, 189, 0.08) 100%);
    border-color: rgba(15, 108, 189, 0.45);
    color: #0f3a6d;
}

.acars-badge.is-warn {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
}

.acars-badge.is-error {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.acars-status.is-success {
    color: var(--accent-strong);
}

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

.acars-status.is-error {
    color: #b91c1c;
}

.acars-select {
    border: 1px solid rgba(12, 62, 114, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #f0f4fb 100%);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
}

.acars-select:focus {
    border-color: rgba(15, 108, 189, 0.45);
    box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.18);
    background: #fff;
}

.acars-list {
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
}

.acars-choice {
    border: 1px solid rgba(12, 62, 114, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%);
}

.acars-choice:hover {
    border-color: rgba(15, 108, 189, 0.45);
    background: rgba(15, 108, 189, 0.12);
}

.acars-choice:focus-visible {
    outline: 2px solid rgba(15, 108, 189, 0.45);
    outline-offset: 2px;
}

.acars-choice.is-active {
    border-color: rgba(15, 108, 189, 0.6);
    background: rgba(15, 108, 189, 0.16);
    color: #0f3a6d;
    box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.18);
}