/*
 * Black & Gold admin theme override.
 * Loaded LAST (after app.min.css, style.css, components.css, custom.css,
 * customstyle.css and app.css) so these rules win the cascade without
 * needing to hunt down every vendor selector individually.
 *
 * Structural backgrounds go near-black; the old purple/blue/red accent
 * colors (buttons, links, active nav state, focus rings, checkboxes,
 * badges, pagination) become gold. Two gold shades, matching the
 * Android/iOS re-theme: base #F0C420, brighter #FFDD55 for hover/active.
 */

:root {
    --bg-gold: #F0C420;
    --bg-gold-bright: #FFDD55;
    --bg-black: #0f0f10;
    --bg-black-card: #17181a;
    --bg-black-elevated: #1f2023;
    --border-dark: #2c2c2e;
    --text-light: #e7e7ea;
    --text-muted: #9a9aa2;
}

/* ---------- Page canvas ---------- */
html, body, #app, .main-wrapper, .main-content {
    background-color: var(--bg-black) !important;
    color: var(--text-light) !important;
}

body {
    color: var(--text-light) !important;
}

a {
    color: var(--bg-gold);
}
a:hover, a:focus {
    color: var(--bg-gold-bright);
}

/* ---------- Navbar ---------- */
.navbar, .navbar-bg {
    background-color: var(--bg-black-card) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}
.navbar .navbar-nav .nav-link,
.navbar .nav-link-user span {
    color: var(--text-light) !important;
}
.navbar .btn-light {
    background-color: var(--bg-black-elevated) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-light) !important;
}
.navbar .btn-light:hover {
    background-color: rgba(240, 196, 32, 0.12) !important;
    color: var(--bg-gold-bright) !important;
}
.navbar .dropdown-menu {
    background-color: var(--bg-black-elevated) !important;
    border: 1px solid var(--border-dark) !important;
}
.navbar .dropdown-menu .dropdown-item {
    color: var(--text-light) !important;
}
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: rgba(240, 196, 32, 0.12) !important;
    color: var(--bg-gold-bright) !important;
}

/* ---------- Sidebar ---------- */
.main-sidebar {
    background-color: var(--bg-black-card) !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5) !important;
}
.main-sidebar .sidebar-brand a {
    color: var(--bg-gold) !important;
}
.sidebar-menu li.menu-header {
    color: var(--text-muted) !important;
}
.sidebar-menu li a {
    color: var(--text-light) !important;
}
.sidebar-menu li a i {
    color: var(--text-muted) !important;
}
.sidebar-menu li a:hover {
    background-color: rgba(240, 196, 32, 0.12) !important;
    color: var(--bg-gold-bright) !important;
}
.sidebar-menu li a:hover i {
    color: var(--bg-gold-bright) !important;
}

/* the active nav item — was a red gradient, now gold, with dark text
   for contrast (white-on-gold reads poorly) */
.activeLi {
    background: linear-gradient(to bottom, var(--bg-gold-bright) 0%, var(--bg-gold) 100%) !important;
}
.activeLi a,
.activeLi a i,
.activeLi a span {
    color: #16130a !important;
    font-weight: 600;
}

/* ---------- Cards / panels ---------- */
.card {
    background-color: var(--bg-black-card) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
.card .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-dark) !important;
    color: var(--text-light) !important;
}
.card .card-header h4, .card .card-title {
    color: var(--text-light) !important;
}

/* ---------- Tables ---------- */
.table, table.dataTable {
    color: var(--text-light) !important;
}
.table thead th, table.dataTable thead th {
    color: var(--bg-gold) !important;
    background-color: rgba(240, 196, 32, 0.06) !important;
    border-color: var(--border-dark) !important;
}
.table td, .table th, table.dataTable td, table.dataTable th {
    border-color: var(--border-dark) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
.table-hover tbody tr:hover {
    background-color: rgba(240, 196, 32, 0.06) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter label {
    color: var(--text-light) !important;
}

/* ---------- Forms ---------- */
.form-control, .custom-select, textarea, select,
.selectric, .selectric-items {
    background-color: var(--bg-black-elevated) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-light) !important;
}
.form-control::placeholder {
    color: var(--text-muted) !important;
}
.form-control:focus, select:focus, textarea:focus {
    border-color: var(--bg-gold) !important;
    box-shadow: 0 0 0 0.2rem rgba(240, 196, 32, 0.25) !important;
}
label {
    color: var(--text-light) !important;
}
.input-group-text {
    background-color: var(--bg-black-elevated) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-muted) !important;
}

/* checkboxes / radios / switches */
input:checked + .slider {
    background-color: var(--bg-gold) !important;
}
.pretty .state label:after,
.pretty.p-default input:checked ~ .state label:before {
    background-color: var(--bg-gold) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bg-gold) !important;
    border-color: var(--bg-gold) !important;
}

/* ---------- Buttons / primary accents ---------- */
.btn-primary,
.badge-primary,
.bg-primary {
    background-color: var(--bg-gold) !important;
    border-color: var(--bg-gold) !important;
    color: #16130a !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--bg-gold-bright) !important;
    border-color: var(--bg-gold-bright) !important;
    color: #16130a !important;
}
.btn-outline-primary {
    color: var(--bg-gold) !important;
    border-color: var(--bg-gold) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--bg-gold) !important;
    color: #16130a !important;
}
.text-primary {
    color: var(--bg-gold) !important;
}
.border-primary {
    border-color: var(--bg-gold) !important;
}

/* ---------- Pagination ---------- */
.pagination .page-item.active .page-link,
.active-page {
    background-color: var(--bg-gold) !important;
    border-color: var(--bg-gold) !important;
    color: #16130a !important;
}
.page-link {
    background-color: var(--bg-black-elevated) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-light) !important;
}
.page-link:hover {
    background-color: rgba(240, 196, 32, 0.12) !important;
    color: var(--bg-gold-bright) !important;
}

/* ---------- Modals / dropdowns / popovers ---------- */
.modal-content {
    background-color: var(--bg-black-card) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border-dark) !important;
}
.modal-header, .modal-footer {
    border-color: var(--border-dark) !important;
}
.dropdown-menu {
    background-color: var(--bg-black-elevated) !important;
    border: 1px solid var(--border-dark) !important;
}
.dropdown-item {
    color: var(--text-light) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(240, 196, 32, 0.12) !important;
    color: var(--bg-gold-bright) !important;
}

/* ---------- Video / image cards with a border (gold border, black bg) ---------- */
.article, .article-header .article-image, .video-thumb, .thumb-card {
    background-color: var(--bg-black-elevated) !important;
    border: 1px solid var(--bg-gold) !important;
}

/* ---------- Status pills (e.g. Live Streams "Battling"/"Solo") — the app's regular
   pill style: black background, gold border, white text. Steve, 2026-09-03: "Swich to
   our regular design, Black background with gold border and white text please." ---------- */
.bb-status-pill {
    background-color: var(--bg-black-elevated) !important;
    border: 1px solid var(--bg-gold) !important;
    color: var(--text-light) !important;
}

/* ---------- Misc ---------- */
::selection {
    background-color: rgba(240, 196, 32, 0.35);
}
.section-title:before {
    background-color: var(--bg-gold) !important;
}
hr {
    border-color: var(--border-dark) !important;
}