/* Bootstrap theme bridge for Bohio MAG
 *
 * Light page surface, yellow brand accents — matches assets/css/variables.css
 * (--bg-primary #FFFFFF, --text-primary #111827, --primary #FFD700).
 *
 * This file used to force `body { background:#000; color:#fff }`, which is what
 * made every page dark and overrode the white surface variables.css defines.
 * The navbar, the mobile nav panel and any explicit .bg-dark panel stay dark on
 * purpose — see the "dark islands" section at the bottom.
 */

:root {
    --bs-primary: #FFD700;
    --bs-primary-rgb: 255, 215, 0;
    --bs-dark: #111111;
    --bs-dark-rgb: 17, 17, 17;

    /* Bootstrap's own variables must track the design tokens. Left hardcoded to
       the old light values, every .card / .table / .text-muted kept painting
       near-black text onto the dark surface (~1.06:1 — invisible). */
    --bs-body-bg: var(--bg-primary, #121013);
    --bs-body-color: var(--text-primary, #F3F0EC);
    --bs-secondary-color: var(--text-secondary, #B7B0A7);
    --bs-border-color: var(--border-color, #322D34);

    /* On the dark surface the full gold is legible, so no darkening needed */
    --bs-link-color: var(--primary, #FFD700);
    --bs-link-hover-color: #FFE55C;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.card {
    background: var(--bg-card, #201D22);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.form-control,
.form-select {
    background-color: var(--bg-secondary, #1A171B);
    border-color: var(--border-color, #322D34);
    color: var(--bs-body-color);
}

.form-control::placeholder { color: var(--text-light, #8B847B); }

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-secondary, #1A171B);
    color: var(--bs-body-color);
    border-color: #FFD700;
    box-shadow: 0 0 0 .25rem rgba(255, 215, 0, 0.25);
}

.btn-primary {
    --bs-btn-color: #111111;
    --bs-btn-bg: #FFD700;
    --bs-btn-border-color: #E6C200;
    --bs-btn-hover-color: #111111;
    --bs-btn-hover-bg: #FFEE00;
    --bs-btn-hover-border-color: #FFD700;
}

.btn-outline-light {
    --bs-btn-color: var(--text-primary, #F3F0EC);
    --bs-btn-border-color: var(--border-color, #322D34);
    --bs-btn-hover-color: #111111;
    --bs-btn-hover-bg: #FFD700;
    --bs-btn-hover-border-color: #FFD700;
}

.table {
    --bs-table-color: var(--text-primary, #F3F0EC);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color, #322D34);
    --bs-table-striped-color: var(--text-primary, #F3F0EC);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
}

.footer-shell {
    background: linear-gradient(180deg, #111111 0%, #000000 100%);
    border-top: 3px solid #FFD700;
}

/* .text-white / .text-light / .link-light used to be forced dark here, because
   the admin markup assumed a dark page while the surface was white. The surface
   is dark again, so they are simply left alone — overriding them now would put
   near-black text back on a near-black background. */
.text-light {
    color: var(--text-primary, #F3F0EC) !important;
}

.link-light {
    color: var(--primary, #FFD700) !important;
}

.link-light:hover {
    color: #FFE55C !important;
}

/* ── Dark islands ────────────────────────────────────────────────────────────
   Regions that are meant to be dark: the navbar, the mobile nav panel, the
   footer, and anything explicitly marked .bg-dark. */
.bg-dark,
.bohio-navbar,
.mobile-nav-panel,
.footer-shell {
    color: #E8E8E8;
}

.bg-dark .text-white,
.bg-dark .text-light,
.bohio-navbar .text-white,
.bohio-navbar .text-light,
.mobile-nav-panel .text-white,
.mobile-nav-panel .text-light,
.footer-shell .text-white,
.footer-shell .text-light {
    color: #FFFFFF !important;
}

.bg-dark .link-light,
.bohio-navbar .link-light,
.mobile-nav-panel .link-light,
.footer-shell .link-light {
    color: #F3F4F6 !important;
}

.bg-dark .link-light:hover,
.bohio-navbar .link-light:hover,
.mobile-nav-panel .link-light:hover,
.footer-shell .link-light:hover {
    color: #FFD700 !important;
}

.footer-shell .text-secondary {
    color: #9CA3AF !important;
}