:root {
    --gold: #d4af37;
    --gold-hover: #e6c458;

    /* topbar/brand stays fixed dark in both themes for brand consistency */
    --topbar-bg-1: #121b2e;
    --topbar-bg-2: #1a2540;

    --bg-page: #0b1220;
    --bg-panel: #121b2e;
    --bg-panel-alt: #1a2540;
    --bg-input: #0b1220;
    --border-color: #2c3b5c;
    --text-color: #e8ebf1;
    --text-muted: #9fb3d8;
    --row-hover: rgba(255,255,255,0.04);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg-page: #f4f6fa;
    --bg-panel: #ffffff;
    --bg-panel-alt: #eef1f7;
    --bg-input: #ffffff;
    --border-color: #dde3ee;
    --text-color: #1c2436;
    --text-muted: #5b6577;
    --row-hover: rgba(15,23,42,0.035);
    color-scheme: light;
}

body {
    background: var(--bg-page);
    color: var(--text-color);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    transition: background .2s ease, color .2s ease;
}

/* ---------- Topbar: always dark, regardless of theme ---------- */
.topbar {
    background: linear-gradient(90deg, var(--topbar-bg-1), var(--topbar-bg-2));
    border-bottom: 2px solid var(--gold);
}
.topbar, .topbar .navbar-brand, .topbar .text-light { color: #e8ebf1 !important; }

/* ---------- Cards / panels ---------- */
.panel-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-color);
}

.kpi-card .card-body { text-align: center; }
.kpi-value { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--text-color); }
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-top: 4px; }

/* ---------- Buttons ---------- */
.btn-gold {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1400;
    font-weight: 600;
}
.btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: #1a1400; }

.btn-outline-gold {
    border-color: var(--gold);
    color: var(--gold);
    background: transparent;
}
.btn-outline-gold:hover { background: var(--gold); color: #1a1400; }

.btn-outline-light { color: var(--text-color); border-color: var(--border-color); }
.btn-outline-light:hover { background: var(--bg-panel-alt); color: var(--text-color); border-color: var(--border-color); }

/* ---------- Tables (theme-aware — do NOT use Bootstrap's table-dark) ---------- */
.themed-table { color: var(--text-color); border-color: var(--border-color); background: transparent; }
.themed-table > :not(caption) > * > * {
    background: transparent;
    color: var(--text-color);
    border-bottom-color: var(--border-color);
    box-shadow: none;
}
.themed-table.table-hover > tbody > tr:hover > * {
    background: var(--row-hover);
    color: var(--text-color);
}
.themed-table thead th {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid var(--border-color);
}

/* DataTables chrome (pagination/info text) */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--text-muted); }
.dataTables_wrapper .paginate_button { color: var(--text-color) !important; }
.dataTables_wrapper .paginate_button.current {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #1a1400 !important;
}

.account-card { cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.account-card:hover { transform: translateY(-2px); border-color: var(--gold); }

.link-copy input {
    background: var(--bg-input);
    color: var(--text-muted);
    border-color: var(--border-color);
    font-size: 12px;
}

/* ---------- Login pages ---------- */
.login-body {
    background: radial-gradient(circle at top, var(--bg-panel), var(--bg-page));
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--gold);
    border-radius: 10px;
    padding: 32px;
    width: 100%;
    max-width: 380px;
    color: var(--text-color);
}
.brand-mark {
    font-weight: 800;
    letter-spacing: 4px;
    font-size: 22px;
    color: var(--gold);
}

/* ---------- Modals & forms ---------- */
.modal-content { background: var(--bg-panel); color: var(--text-color); border: 1px solid var(--border-color); }
.modal-header, .modal-footer { border-color: var(--border-color); }
.form-label { color: var(--text-color); }
.form-control, .form-select {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-color);
}
.form-control:focus, .form-select:focus {
    background: var(--bg-input);
    color: var(--text-color);
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem rgba(212,175,55,0.25);
}
.form-control::placeholder { color: var(--text-muted); opacity: .7; }

/* Bootstrap's close button is black by default; invert it to white only in dark theme */
.btn-close { filter: none; }
:root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---------- Nav tabs ---------- */
.nav-tabs { border-bottom-color: var(--border-color); }
.nav-tabs .nav-link { color: var(--text-muted); border-color: transparent; }
.nav-tabs .nav-link:hover { border-color: var(--border-color); }
.nav-tabs .nav-link.active {
    background: var(--bg-panel-alt);
    color: var(--text-color);
    border-color: var(--border-color) var(--border-color) var(--bg-panel-alt);
}

/* ---------- Misc text utilities respecting theme ---------- */
.text-muted { color: var(--text-muted) !important; }
code { color: var(--gold); background: var(--bg-panel-alt); padding: 1px 5px; border-radius: 4px; }

/* =========================================================
   SHARED APP SHELL — sidebar + topbar + content, used by
   every dashboard-style page (admin and portal alike)
   ========================================================= */
body.app-shell { display: flex; min-height: 100vh; margin: 0; }

.app-sidebar {
    width: 230px; flex-shrink: 0;
    background: linear-gradient(180deg, var(--topbar-bg-1), var(--topbar-bg-2));
    color: #e8ebf1;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.app-sidebar .brand { padding: 18px 16px; font-weight: 800; letter-spacing: 3px; color: var(--gold); border-bottom: 1px solid rgba(255,255,255,0.08); }
.app-sidebar .side-section-label { padding: 14px 16px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,0.45); }
.app-sidebar a.side-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px; color: #dbe2f0; text-decoration: none; font-size: 13.5px;
    border-left: 3px solid transparent;
}
.app-sidebar a.side-link:hover { background: rgba(255,255,255,0.06); }
.app-sidebar a.side-link.active { background: rgba(212,175,55,0.12); border-left-color: var(--gold); color: #fff; font-weight: 600; }
.app-sidebar .side-footer { margin-top: auto; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: rgba(255,255,255,0.6); }
.app-sidebar .side-footer a { color: #f0b5b5; text-decoration: none; }

.app-main { flex: 1; min-width: 0; }
.app-topbar-row {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    padding: 14px 22px; border-bottom: 1px solid var(--border-color); background: var(--bg-panel);
}
.app-content { padding: 22px; }

.small-box {
    border-radius: 10px; padding: 16px 18px; color: #fff; position: relative; overflow: hidden;
}
.small-box .sb-value { font-size: 26px; font-weight: 800; line-height: 1; }
.small-box .sb-label { font-size: 12px; opacity: .9; margin-top: 4px; }
.small-box .sb-icon { position: absolute; right: 12px; top: 12px; font-size: 34px; opacity: .35; }
.sb-blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.sb-green { background: linear-gradient(135deg, #10b981, #059669); }
.sb-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.sb-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.sb-red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.sb-teal { background: linear-gradient(135deg, #14b8a6, #0f766e); }

@media (max-width: 768px) {
    .app-sidebar { position: fixed; left: -230px; z-index: 1000; transition: left .2s ease; }
    .app-sidebar.open { left: 0; }
    .mobile-sidebar-toggle { display: inline-flex !important; }
}