/* =========================================================
   Site Theme - Dark (Default) & Light Overrides
   ========================================================= */

/* ---- DARK THEME (Default) ---- */
:root, [data-bs-theme="dark"] {
    --bs-primary: #39F368;
    --bs-primary-rgb: 57, 243, 104;
    --bs-secondary: #0099ff;
    --bs-secondary-rgb: 0, 153, 255;
    --bs-success: #39F368;
    --bs-danger: #ff0080;
    --bs-warning: #ffcc00;
    --bs-info: #0099ff;
    --bs-body-bg: #0a0a0f;
    --bs-body-color: #ffffff;
    --bs-border-color: #2a2a35;
    --bs-secondary-bg: #151520;
    --bs-tertiary-bg: #1a1a25;
    --bs-primary-text-emphasis: #66ffbb;
    --bs-secondary-text-emphasis: #66bbff;
    --bs-body-color-rgb: 255, 255, 255;
    /* BootstrapBlazor Layout Variables */
    --bb-bg-primary: #0a0a0f;
    --bb-bg-secondary: #151520;
    --bb-bg-card: #1a1a25;
    --bb-border-color: #2a2a35;
    --bb-text-primary: #ffffff;
    --bb-text-muted: #a0a0b0;    
}

/* ---- LIGHT THEME ---- */
[data-bs-theme="light"] {
    --bs-primary: #0099ff;
    --bs-primary-rgb: 0, 153, 255;
    --bs-secondary: #5E6278;
    --bs-secondary-rgb: 94, 98, 120;
    --bs-success: #1bc5bd;
    --bs-danger: #f1416c;
    --bs-warning: #ffc700;
    --bs-info: #7239ea;
    --bs-body-bg: #f5f8fa;
    --bs-body-color: #181c32;
    --bs-border-color: #e4e6ef;
    --bs-secondary-bg: #ffffff;
    --bs-tertiary-bg: #eff2f5;
    --bs-primary-text-emphasis: #005f94;
    --bs-secondary-text-emphasis: #3f4254;
    --bs-body-color-rgb: 24, 28, 50;
    --bb-bg-primary: #f5f8fa;
    --bb-bg-secondary: #ffffff;
    --bb-bg-card: #ffffff;
    --bb-border-color: #e4e6ef;
    --bb-text-primary: #181c32;
    --bb-text-muted: #7e8299;
}

/* ---- PURPLE NIGHT THEME ---- */
[data-bs-theme="dark"][data-accent="purple"] {
    --bs-primary: #9b59b6;
    --bs-primary-rgb: 155, 89, 182;
    --bs-primary-text-emphasis: #c39bd3;
}

/* ---- GOLD THEME ---- */
[data-bs-theme="dark"][data-accent="gold"] {
    --bs-primary: #f1c40f;
    --bs-primary-rgb: 241, 196, 15;
    --bs-primary-text-emphasis: #f4d35e;
}

/* ---- Global Body & Scrollbar ---- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bs-secondary-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}

::selection {
    background: rgba(var(--bs-primary-rgb), 0.3);
    color: var(--bs-body-color);
}

/* ---- Layout Shell ---- */
.layout {
    background-color: var(--bb-bg-primary) !important;
}

.layout-header {
    background-color: var(--bb-bg-secondary) !important;
    border-bottom: 1px solid var(--bb-border-color) !important;
}

.layout .layout-header {
    padding: 4px 1rem !important;
}

.layout-side {
    background-color: var(--bb-bg-secondary) !important;
    border-right: 1px solid var(--bb-border-color) !important;
}

.layout-main {
    background-color: var(--bb-bg-primary) !important;
    padding: 1.5rem;
}

.layout-footer {
    background-color: var(--bb-bg-secondary) !important;
    border-top: 1px solid var(--bb-border-color) !important;
    color: var(--bb-text-muted);
}

.layout-banner {
    background-color: transparent !important;
    border-bottom: 1px solid var(--bb-border-color);    
}

.layout-title span {
    color: var(--bb-text-primary) !important;
    font-weight: 600;
}

.layout-header-bar {
    color: var(--bb-text-muted) !important;
}

    .layout-header-bar:hover {
        color: var(--bs-primary) !important;
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    }

/* ---- Sidebar Menu ---- */
.menu {
    background-color: transparent !important;
    border-right: none !important;
}

.menu-item {
    color: var(--bb-text-muted) !important;
    transition: all 0.2s ease;
}

    .menu-item:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
        color: var(--bs-primary) !important;
    }

    .menu-item.active, .menu-item.is-active {
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
        color: var(--bs-primary) !important;
        border-right: 2px solid var(--bs-primary) !important;
    }

    .menu-item .menu-icon, .menu-item .menu-text {
        color: inherit !important;
    }

/* ---- Cards & Panels ---- */
.card {
    background-color: var(--bb-bg-card) !important;
    border: 1px solid var(--bb-border-color) !important;
    color: var(--bb-text-primary) !important;
    box-shadow: 0 0 2rem 0 rgba(0,0,0,0.05);
}

.card-header {
    background-color: rgba(var(--bs-body-color-rgb), 0.03) !important;
    border-bottom: 1px solid var(--bb-border-color) !important;
    color: var(--bb-text-primary) !important;
}

/* ---- Forms & Inputs ---- */
.form-control, .form-select {
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bb-border-color) !important;
    color: var(--bb-text-primary) !important;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--bs-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
        background-color: var(--bs-body-bg) !important;
        color: var(--bb-text-primary) !important;
    }

    .form-control::placeholder {
        color: var(--bb-text-muted) !important;
    }

.input-group-text {
    background-color: var(--bs-secondary-bg) !important;
    border: 1px solid var(--bb-border-color) !important;
    color: var(--bb-text-muted) !important;
}

/* ---- Tables ---- */
.table {
    color: var(--bb-text-primary) !important;
    border-color: var(--bb-border-color) !important;
}

    .table thead th {
        background-color: var(--bs-secondary-bg) !important;
        border-bottom: 2px solid var(--bs-primary) !important;
        color: var(--bb-text-muted) !important;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
    }

    .table tbody tr:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
        color: var(--bs-primary) !important;
    }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(var(--bs-body-color-rgb), 0.02);
}

/* ---- Buttons ---- */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #0a0a0f !important;
}

    .btn-primary:hover {
        filter: brightness(1.1);
    }

.btn-outline-primary {
    border: 1px solid var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    background: transparent !important;
}

    .btn-outline-primary:hover {
        background: rgba(var(--bs-primary-rgb), 0.1) !important;
        color: var(--bs-primary) !important;
    }

/* ---- Tabs ---- */
.nav-tabs {
    border-bottom: 1px solid var(--bb-border-color) !important;
}

    .nav-tabs .nav-link {
        color: var(--bb-text-muted) !important;
        border: none !important;
    }

        .nav-tabs .nav-link:hover {
            color: var(--bs-primary) !important;
            background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
        }

        .nav-tabs .nav-link.active {
            color: var(--bs-primary) !important;
            border-bottom: 2px solid var(--bs-primary) !important;
        }

/* ---- Modals / Dialogs ---- */
.modal-content {
    background-color: var(--bb-bg-card) !important;
    border: 1px solid var(--bb-border-color) !important;
}

.modal-header {
    border-bottom: 1px solid var(--bb-border-color) !important;
}

.modal-footer {
    border-top: 1px solid var(--bb-border-color) !important;
}

/* ---- Alerts / Toasts ---- */
.alert-success {
    background-color: rgba(var(--bs-success-rgb), 0.1) !important;
    border-color: rgba(var(--bs-success-rgb), 0.3) !important;
    color: var(--bs-success) !important;
}

.alert-danger {
    background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
    border-color: rgba(var(--bs-danger-rgb), 0.3) !important;
    color: var(--bs-danger) !important;
}

.alert-info {
    background-color: rgba(var(--bs-info-rgb), 0.1) !important;
    border-color: rgba(var(--bs-info-rgb), 0.3) !important;
    color: var(--bs-info) !important;
}

/* ---- Drawer / Settings Panel ---- */
.drawer {
    background-color: var(--bb-bg-secondary) !important;
    border-left: 1px solid var(--bb-border-color) !important;
    color: var(--bb-text-primary);
}

.layout-drawer-body .cell-label {
    color: var(--bb-text-muted);
}

/* ---- Dropdowns ---- */
.dropdown-menu {
    background-color: var(--bb-bg-card) !important;
    border: 1px solid var(--bb-border-color) !important;
}

.dropdown-item {
    color: var(--bb-text-muted) !important;
}

.dropdown-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: var(--bs-primary) !important;
}

/* ---- Fix Tabs Background Variables ---- */
:root, [data-bs-theme="dark"], [data-bs-theme="light"] {
    --bb-tabs-header-bg-color: var(--bb-bg-card);
}

/* Ensure corners and nav respect the variable or force match the card */
.tabs-nav,
.tabs-header,
.tab-corner {
    background-color: var(--bb-bg-card) !important;
    --bb-tabs-header-bg-color: var(--bb-bg-card) !important;
}

/* ---- Fix Header Drawer/Settings Bar Background ---- */
.layout-header-bar {
    background-color: var(--bb-bg-card) !important;
}

/* ---- Fix Sidebar Submenu Variables ---- */
:root, [data-bs-theme="dark"], [data-bs-theme="light"] {
    .submenu {
        /* Use the neon primary color with low opacity for the hover/active background */
        --bb-menu-item-hover-bg: rgba(var(--bs-primary-rgb), 0.08);
        /* Use the neon primary color for the hover/active text */
        --bb-menu-item-hover-color: var(--bs-primary);
    }
}

/* Force submenu wrappers to be transparent so the neon hover glow shows properly */
.menu .submenu,
.menu .menu {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ---- Fix Layout Logo Sizing ---- */
.layout-logo {
    background-color: transparent !important;
    border: none !important;
    height: 30px;
    width: auto;
    margin-right: 10px;
}