/*
 * ra-theme.css - Command & Conquer: Red Alert "Allied Command Console" skin.
 *
 * Layered on top of Bootstrap 5.3 native dark mode (data-bs-theme="dark").
 * Bootstrap handles the base dark surfaces/components; here we (1) nudge the
 * base palette toward a navy "command console" slate and (2) recolor the
 * accent to the Red Alert Allied team blue, with subtle sci-fi glow.
 */

:root {
    --ra-blue: #2f80ff;
    --ra-blue-rgb: 47, 128, 255;
    --ra-blue-glow: #5aa0ff;
    --ra-blue-deep: #1b4fa8;
    --ra-red: #ff5c5c;
}

/* ---- Base palette: re-point Bootstrap's dark-mode variables to navy slate
   and Allied blue. Scoped to the dark theme so it only applies to our skin. */
[data-bs-theme="dark"] {
    --bs-body-bg: #0b1120;
    --bs-body-bg-rgb: 11, 17, 32;
    --bs-body-color: #dce6f5;
    --bs-body-color-rgb: 220, 230, 245;
    --bs-secondary-bg: #141d2e;
    --bs-secondary-bg-rgb: 20, 29, 46;
    --bs-tertiary-bg: #1b2740;
    --bs-tertiary-bg-rgb: 27, 39, 64;
    --bs-secondary-color: rgba(220, 230, 245, 0.65);
    --bs-tertiary-color: rgba(220, 230, 245, 0.45);
    --bs-border-color: #27374f;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);

    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    /* Accent = Allied blue */
    --bs-primary: var(--ra-blue);
    --bs-primary-rgb: var(--ra-blue-rgb);
    --bs-link-color: var(--ra-blue-glow);
    --bs-link-color-rgb: 90, 160, 255;
    --bs-link-hover-color: #87bcff;
    --bs-link-hover-color-rgb: 135, 188, 255;

    /* Card surface uses our panel slate */
    --bs-card-bg: #131d30;
    --bs-card-cap-bg: #18233a;
    --bs-card-border-color: var(--bs-border-color);
}

/* ---- Page background: a subtle radial "console" glow over the navy base. */
[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg);
    background-image:
        radial-gradient(1200px 600px at 50% -10%, rgba(var(--ra-blue-rgb), 0.10), transparent 60%),
        linear-gradient(180deg, #0c1322 0%, #0b1120 100%);
    background-attachment: fixed;
}

/* ---- Headings (Orbitron): cool blue tint + faint glow for the C&C UI feel. */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: #eaf2ff;
    text-shadow: 0 0 12px rgba(var(--ra-blue-rgb), 0.25);
}

/* ---- Top accent bar + brand. */
[data-bs-theme="dark"] header > .navbar {
    border-bottom: 1px solid var(--ra-blue-deep) !important;
    box-shadow: 0 1px 0 rgba(var(--ra-blue-rgb), 0.35), 0 .35rem 1rem rgba(0, 0, 0, 0.5);
    background:
        linear-gradient(180deg, #12203a 0%, #0e1830 100%) !important;
}
[data-bs-theme="dark"] .navbar-brand {
    color: var(--ra-blue-glow) !important;
    letter-spacing: 0.06em;
    text-shadow: 0 0 14px rgba(var(--ra-blue-rgb), 0.45);
}
[data-bs-theme="dark"] .navbar .nav-link {
    color: #c6d6ef;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:focus {
    color: #ffffff;
    border-bottom-color: var(--ra-blue);
}

/* ---- Cards: panel slate + a thin Allied-blue accent rail on the header. */
[data-bs-theme="dark"] .card {
    border-color: var(--bs-border-color);
    box-shadow: 0 0 0 1px rgba(var(--ra-blue-rgb), 0.06), 0 .5rem 1.25rem rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] .card-header {
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: inset 3px 0 0 0 var(--ra-blue);
}

/* ---- Buttons: Allied-blue primary with glow on hover/focus. */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: var(--ra-blue);
    --bs-btn-border-color: var(--ra-blue);
    --bs-btn-hover-bg: #4a91ff;
    --bs-btn-hover-border-color: #4a91ff;
    --bs-btn-active-bg: var(--ra-blue-deep);
    --bs-btn-active-border-color: var(--ra-blue-deep);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
    box-shadow: 0 0 0 .15rem rgba(var(--ra-blue-rgb), 0.45), 0 0 14px rgba(var(--ra-blue-rgb), 0.5);
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--ra-blue-glow);
    --bs-btn-border-color: var(--ra-blue);
    --bs-btn-hover-bg: var(--ra-blue);
    --bs-btn-hover-border-color: var(--ra-blue);
    --bs-btn-hover-color: #fff;
}

/* ---- Focus ring: Allied-blue glow everywhere. */
[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:active:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-check-input:focus,
[data-bs-theme="dark"] .nav-link:focus {
    border-color: var(--ra-blue);
    box-shadow: 0 0 0 .2rem rgba(var(--ra-blue-rgb), 0.35);
}

/* ---- Nav tabs / pills: Allied-blue active state. */
[data-bs-theme="dark"] .nav-tabs {
    --bs-nav-tabs-link-active-bg: var(--bs-card-bg);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-card-bg);
    --bs-nav-tabs-border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #c6d6ef;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: #ffffff;
    box-shadow: inset 0 2px 0 0 var(--ra-blue);
}
[data-bs-theme="dark"] .nav-pills {
    --bs-nav-pills-link-active-bg: var(--ra-blue);
    --bs-nav-pills-link-active-color: #fff;
}

/* ---- Tables: blue-tinted hover + selected row, header emphasis. */
[data-bs-theme="dark"] .table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-hover-bg: rgba(var(--ra-blue-rgb), 0.10);
    --bs-table-hover-color: #ffffff;
}
[data-bs-theme="dark"] .table > thead th {
    color: #aebfdc;
    border-bottom-color: var(--ra-blue-deep);
    text-transform: uppercase;
    font-size: 0.82em;
    letter-spacing: 0.04em;
}
[data-bs-theme="dark"] tbody tr.selected {
    background-color: rgba(var(--ra-blue-rgb), 0.18) !important;
    box-shadow: inset 3px 0 0 0 var(--ra-blue);
}

/* ---- Badges: keep the neutral "secondary" legible on dark. */
[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: #33425e !important;
    color: #dce6f5;
}

/* ---- Site disclaimer footer: subtle, themed, non-affiliation notice. */
[data-bs-theme="dark"] .site-disclaimer {
    padding: 0.85rem 0 1.1rem;
    border-top: 1px solid var(--ra-blue-deep);
    box-shadow: 0 -1px 0 rgba(var(--ra-blue-rgb), 0.25);
    color: #7f93b3;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}
[data-bs-theme="dark"] .site-disclaimer .container {
    max-width: 880px;
}

/* ---- Roster team-group header rows: themed dark band with Allied-blue rail. */
[data-bs-theme="dark"] tr.ra-section-row > td {
    background-color: #172238;
    border-top: 1px solid var(--bs-border-color);
    box-shadow: inset 3px 0 0 0 var(--ra-blue);
    color: #cfe0ff;
}

/* ---- Table "Total" summary row: themed dark instead of Bootstrap table-light. */
[data-bs-theme="dark"] tr.ra-total-row > th,
[data-bs-theme="dark"] tr.ra-total-row > td {
    background-color: #16223a;
    border-top: 2px solid var(--ra-blue-deep);
    color: #eaf2ff;
}

/* ---- Links inside content default to the soft Allied glow blue. */
[data-bs-theme="dark"] a {
    color: var(--bs-link-color);
}
[data-bs-theme="dark"] a:hover {
    color: var(--bs-link-hover-color);
}

/* ---- Code / pre blocks: darker inset panels. */
[data-bs-theme="dark"] code,
[data-bs-theme="dark"] kbd,
[data-bs-theme="dark"] pre {
    color: #b9ccea;
}
[data-bs-theme="dark"] pre.bg-light,
[data-bs-theme="dark"] .bg-light {
    background-color: #0e1626 !important;
    color: #b9ccea !important;
}

/* ---- Scrollbars: blue-tinted to match the console look (WebKit). */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #0c1322;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #24344f;
    border-radius: 6px;
    border: 2px solid #0c1322;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--ra-blue-deep);
}