/* ==========================================================
   SchoolManage — Dark Theme
   Prefix: html.dark-theme
   Applied via JS toggle (localStorage key: sm_dark_theme)
   ========================================================== */

/* ----------------------------------------------------------
   CSS Variables (dark palette)
   ---------------------------------------------------------- */
html.dark-theme {
    --dk-bg:          #161b2e;
    --dk-bg2:         #1e2438;
    --dk-bg3:         #252c42;
    --dk-bg4:         #2d3450;
    --dk-border:      #2e3652;
    --dk-border2:     #3a4260;
    --dk-text:        #c8d3e8;
    --dk-text-muted:  #7a88a8;
    --dk-heading:     #e0e6f8;
    --dk-accent:      #32c5d2;
    --dk-input-bg:    #1a2035;
    --dk-hover:       #2d3450;
}

/* ----------------------------------------------------------
   Body & Page Wrapper
   ---------------------------------------------------------- */
html.dark-theme body,
html.dark-theme body.page-md {
    background: var(--dk-bg) !important;
    color: var(--dk-text);
}

html.dark-theme .page-wrapper-middle {
    background: var(--dk-bg) !important;
}

html.dark-theme .page-container {
    background: #161b2e !important;
}

html.dark-theme .page-content {
    background: #161b2e !important;
}

html.dark-theme .page-content-wrapper {
    background: #161b2e !important;
}

html.dark-theme .page-container-bg-solid .page-content-wrapper,
html.dark-theme .page-container-bg-solid .page-content {
    background: #161b2e !important;
}

html.dark-theme .page-content-inner {
    background: #161b2e !important;
}

/* ----------------------------------------------------------
   Page Head (white bar with page title h1)
   layout3/layout.css: .page-head { background: #fff }
   ---------------------------------------------------------- */
html.dark-theme .page-head {
    background: #1e2438 !important;
    border-bottom: 1px solid #2e3652;
}

html.dark-theme .page-head .page-title h1 {
    color: #c8d3e8 !important;
}

html.dark-theme .page-head .page-title h1 > small {
    color: #7a88a8 !important;
}

/* Breadcrumb inside .page-content */
html.dark-theme .page-breadcrumb.breadcrumb {
    background: transparent !important;
}

html.dark-theme .page-breadcrumb li a {
    color: #32c5d2 !important;
}

html.dark-theme .page-breadcrumb li span,
html.dark-theme .page-breadcrumb li.active span {
    color: #7a88a8 !important;
}

html.dark-theme .page-breadcrumb li i {
    color: #2e3652 !important;
}

/* ----------------------------------------------------------
   Page Header — Top Bar (white bar with logo & icons)
   ---------------------------------------------------------- */
html.dark-theme .page-header {
    background: var(--dk-bg2) !important;
}

html.dark-theme .page-header .page-header-top {
    background: var(--dk-bg2) !important;
    box-shadow: 0 1px 10px rgba(0,0,0,0.4);
}

html.dark-theme .page-header .page-header-top.fixed {
    background: var(--dk-bg2) !important;
}

/* Top icons color */
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown > .dropdown-toggle > i {
    color: #8899bb;
}
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover > i,
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:focus > i,
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:active > i,
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown.open > .dropdown-toggle > i {
    color: #b0c0e0;
}

html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover,
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:focus,
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:active,
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown:focus .dropdown-toggle,
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle {
    background: var(--dk-bg3) !important;
}

html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown .separator {
    border-left-color: var(--dk-border);
}
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-separator .separator {
    border-left-color: var(--dk-border);
}

/* Badge in top nav */
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown > .dropdown-toggle .badge.badge-default {
    background-color: #f36a5a;
}

/* User dropdown in header */
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username {
    color: #8899bb;
}
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-user:hover > .dropdown-toggle > .username,
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-user.open > .dropdown-toggle > .username {
    color: var(--dk-text);
}

/* Language dropdown */
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-language > .dropdown-toggle > .langname {
    color: #8899bb;
}
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-language:hover > .dropdown-toggle > .langname,
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-language.open > .dropdown-toggle > .langname {
    color: var(--dk-text);
}

/* Dropdown menus inside header top */
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu,
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-user .dropdown-menu {
    background: var(--dk-bg3);
    border-color: var(--dk-border);
}

html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu > li.external {
    background: var(--dk-bg2);
}
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu > li.external > h3 {
    color: var(--dk-text-muted);
}

html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu .dropdown-menu-list > li > a {
    border-bottom-color: var(--dk-border) !important;
    color: var(--dk-text);
}
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu .dropdown-menu-list > li > a:hover {
    background: var(--dk-hover);
}

html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-notification .dropdown-menu .dropdown-menu-list > li > a .time {
    background: var(--dk-bg2);
    color: var(--dk-text-muted);
}

/* User dropdown menu items */
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-user .dropdown-menu > li > a {
    color: var(--dk-text);
}
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-user .dropdown-menu > li > a:hover {
    background: var(--dk-hover);
    color: var(--dk-heading);
}
html.dark-theme .page-header .top-menu .navbar-nav > li.dropdown-user .dropdown-menu > li.divider {
    background: var(--dk-border);
}

/* @480px top-menu */
html.dark-theme .page-header .top-menu {
    background: var(--dk-bg2) !important;
}

/* ----------------------------------------------------------
   Page Header — Nav Menu Bar (dark bar with nav links)
   Already dark (#444d58) — just deepen it in dark mode
   ---------------------------------------------------------- */
html.dark-theme .page-header .page-header-menu {
    background: #0f1424 !important;
}

html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li > a {
    color: #8899bb;
}
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li > a > i {
    color: #8899bb;
}

html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li:hover > a,
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li.open > a,
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li > a:hover,
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li > a:focus,
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li > a:active {
    color: #fff !important;
    background: #1e2744 !important;
}
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li:hover > a > i,
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li.open > a > i {
    color: #fff;
}

html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li.active > a,
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li.active > a:hover,
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a,
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a:hover {
    color: #e0e8ff !important;
    background: #1a2240 !important;
}

/* Dropdown menus in nav bar */
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu {
    background: #141929 !important;
    border-color: var(--dk-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li > a {
    color: #aab4cc;
}
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li > a > i {
    color: var(--dk-accent);
}
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li:hover > a {
    color: #e0e8ff;
    background: var(--dk-hover);
}
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.active > a,
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.current > a {
    color: #e0e8ff;
    background: var(--dk-hover);
}
html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.divider {
    background: var(--dk-border);
}

/* hor-menu-light (the class used in admin) */
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li > a {
    color: #8899bb;
}
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li:hover > a,
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li.open > a {
    color: #fff !important;
    background: #1e2744 !important;
}
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li:hover > a > i,
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li.open > a > i {
    color: #fff !important;
}
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li.active > a,
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li.current > a {
    color: #e0e8ff;
    background: #1a2240;
}
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li .dropdown-menu {
    background: #141929 !important;
    border-color: var(--dk-border) !important;
}
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li .dropdown-menu li > a {
    color: #aab4cc;
}
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li .dropdown-menu li:hover > a {
    color: #e0e8ff;
    background: var(--dk-hover);
}
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li .dropdown-menu li.divider {
    background: var(--dk-border);
}
html.dark-theme .page-header .page-header-menu .hor-menu.hor-menu-light .navbar-nav > li > .dropdown-menu {
    border-color: var(--dk-border);
}

/* @991px mobile nav */
html.dark-theme .page-header .page-header-menu {
    /* already handled above */
}
@media (max-width: 991px) {
    html.dark-theme .page-header .page-header-menu {
        background: #0f1424 !important;
    }
    html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav {
        background: var(--dk-bg2) !important;
    }
    html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li {
        border-bottom-color: var(--dk-border);
    }
    html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li > a {
        color: #aab4cc !important;
    }
    html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li > a > i {
        color: #aab4cc !important;
    }
    html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu {
        background: var(--dk-bg3) !important;
        border-top-color: var(--dk-border);
    }
    html.dark-theme .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li > a {
        color: #aab4cc !important;
    }
    html.dark-theme .page-header .search-form {
        background: var(--dk-bg2) !important;
    }
}

/* ----------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------- */
html.dark-theme .page-bar {
    background: var(--dk-bg3) !important;
}
html.dark-theme .page-breadcrumb li a,
html.dark-theme .page-breadcrumb li span {
    color: var(--dk-text-muted);
}
html.dark-theme .page-breadcrumb li.active span {
    color: var(--dk-text);
}
html.dark-theme .page-breadcrumb > li + li:before {
    color: var(--dk-text-muted);
}

/* ----------------------------------------------------------
   Portlets
   ---------------------------------------------------------- */
html.dark-theme .portlet {
    background: var(--dk-bg3) !important;
    border: 1px solid var(--dk-border) !important;
}
html.dark-theme .portlet > .portlet-title {
    border-bottom: 1px solid var(--dk-border) !important;
}
html.dark-theme .portlet > .portlet-title > .caption {
    color: var(--dk-heading) !important;
}
html.dark-theme .portlet > .portlet-title > .caption > i {
    color: var(--dk-accent) !important;
}
html.dark-theme .portlet > .portlet-body {
    color: var(--dk-text);
}
html.dark-theme .portlet.light {
    background: var(--dk-bg3) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.dark-theme .portlet.light > .portlet-title {
    border-bottom: 1px solid var(--dk-border) !important;
}
html.dark-theme .portlet.box {
    border: 1px solid var(--dk-border) !important;
}
html.dark-theme .portlet.box > .portlet-title {
    border-bottom: 1px solid var(--dk-border) !important;
}
html.dark-theme .portlet.box > .portlet-body {
    background-color: var(--dk-bg3) !important;
}
html.dark-theme .portlet.box.default > .portlet-title {
    background: var(--dk-bg4);
}

/* ----------------------------------------------------------
   Bootstrap Panels
   ---------------------------------------------------------- */
html.dark-theme .panel {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text);
}
html.dark-theme .panel-heading {
    background: var(--dk-bg4) !important;
    border-bottom-color: var(--dk-border) !important;
    color: var(--dk-heading) !important;
}
html.dark-theme .panel-default > .panel-heading {
    background: var(--dk-bg4) !important;
    color: var(--dk-heading) !important;
    border-bottom-color: var(--dk-border) !important;
}
html.dark-theme .panel-body {
    color: var(--dk-text);
}
html.dark-theme .panel-footer {
    background: var(--dk-bg4) !important;
    border-top-color: var(--dk-border) !important;
    color: var(--dk-text-muted);
}
html.dark-theme .panel-group .panel {
    border-color: var(--dk-border) !important;
}

/* ----------------------------------------------------------
   Bootstrap Well
   ---------------------------------------------------------- */
html.dark-theme .well {
    background: var(--dk-bg4) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text);
}

/* ----------------------------------------------------------
   Tables — nuclear override
   Bootstrap 3 sets border shorthand on individual th/td
   We override at element level to guarantee win
   ---------------------------------------------------------- */

/* Universal border color for ALL table cells — catches Bootstrap 3 + inline styles */
html.dark-theme table th,
html.dark-theme table td {
    border-color: #2e3652 !important;
    color: #c8d3e8;
}
html.dark-theme table {
    border-color: #2e3652 !important;
}

/* thead background */
html.dark-theme table thead th {
    background-color: #2d3450 !important;
    color: #e0e6f8 !important;
    border-color: #2e3652 !important;
}

/* tbody rows — !important needed to beat Bootstrap striped (#f9f9f9 on nth-of-type(odd)) */
html.dark-theme table tbody tr td,
html.dark-theme table tbody tr th {
    background-color: #252c42 !important;
}
html.dark-theme table tbody tr:nth-child(even) td,
html.dark-theme table tbody tr:nth-child(even) th {
    background-color: #2a3148 !important;
}
html.dark-theme table tbody tr:hover td,
html.dark-theme table tbody tr:hover th {
    background-color: #2d3450 !important;
    color: #e0e6f8 !important;
}

/* tfoot */
html.dark-theme table tfoot td,
html.dark-theme table tfoot th {
    background-color: #2d3450 !important;
    border-color: #2e3652 !important;
}

/* Contextual rows */
html.dark-theme table tbody tr.success td { background: rgba(70,160,100,0.15) !important; }
html.dark-theme table tbody tr.danger  td { background: rgba(200,60,60,0.15)  !important; }
html.dark-theme table tbody tr.warning td { background: rgba(200,150,30,0.15) !important; }
html.dark-theme table tbody tr.info    td { background: rgba(50,150,220,0.15) !important; }
html.dark-theme table tbody tr.active  td { background: #2d3450 !important; }

/* Reported/done lesson rows — solid dark green, no transparency so stripe doesn't show through.
   Must beat our nth-child(even) rule (specificity 0,1,5), so we add tbody+tr+nth-child. */
html.dark-theme table tbody tr td[style*="rgba(85, 131, 71"],
html.dark-theme table tbody tr:nth-child(odd) td[style*="rgba(85, 131, 71"],
html.dark-theme table tbody tr:nth-child(even) td[style*="rgba(85, 131, 71"] {
    background-color: #2d4a30 !important;
    color: #e0e6f8 !important;
}
html.dark-theme table tbody tr td[style*="rgba(85, 131, 71"] a,
html.dark-theme table tbody tr:nth-child(odd) td[style*="rgba(85, 131, 71"] a,
html.dark-theme table tbody tr:nth-child(even) td[style*="rgba(85, 131, 71"] a {
    color: #b8f0c8 !important;
}

/* Grey-header class (style-lib.css) */
html.dark-theme .grey-header th {
    background-color: #1a2035 !important;
    color: #8899bb !important;
    border-color: #2e3652 !important;
}

/* Inline style overrides — hardcoded white/light backgrounds in table cells */
html.dark-theme table td[style*="#ffffff"],
html.dark-theme table td[style*="#fff"],
html.dark-theme table td[style*="white"] {
    background-color: #252c42 !important;
}
html.dark-theme table th[style*="background-color: #32C5D2"],
html.dark-theme table th[style*="background-color:#32C5D2"] {
    background-color: #1a5c63 !important;
    color: #c8d3e8 !important;
}

/* ----------------------------------------------------------
   Forms & Inputs
   ---------------------------------------------------------- */
html.dark-theme .form-control {
    background: var(--dk-input-bg) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
html.dark-theme .form-control:focus {
    border-color: var(--dk-accent) !important;
    background: #1e2540 !important;
    box-shadow: 0 0 0 0.2rem rgba(50, 197, 210, 0.15) !important;
}
html.dark-theme .form-control::-webkit-input-placeholder { color: var(--dk-text-muted); }
html.dark-theme .form-control:-ms-input-placeholder { color: var(--dk-text-muted); }
html.dark-theme .form-control::placeholder { color: var(--dk-text-muted); }
html.dark-theme .form-control[disabled],
html.dark-theme .form-control[readonly] {
    background: #161c30 !important;
    color: var(--dk-text-muted) !important;
}

html.dark-theme .input-group-addon {
    background: var(--dk-bg4) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-muted);
}

html.dark-theme select.form-control option {
    background: var(--dk-bg3);
    color: var(--dk-text);
}

html.dark-theme .control-label {
    color: var(--dk-text);
}

html.dark-theme .checkbox label,
html.dark-theme .radio label {
    color: var(--dk-text);
}

/* Native browser checkboxes & inputs — render in dark mode */
html.dark-theme input[type="checkbox"],
html.dark-theme input[type="radio"] {
    accent-color: var(--dk-accent);
    color-scheme: dark;
}

html.dark-theme .help-block {
    color: var(--dk-text-muted);
}

html.dark-theme fieldset {
    border-color: var(--dk-border);
}
html.dark-theme legend {
    color: var(--dk-heading);
    border-bottom-color: var(--dk-border);
}

/* Form actions bar (Save/Cancel buttons row) */
html.dark-theme .form-actions,
html.dark-theme .portlet-form .form-actions,
html.dark-theme .form .form-actions {
    background-color: var(--dk-bg4) !important;
    border-top-color: var(--dk-border) !important;
}

/* Portlet search input */
html.dark-theme .portlet .portlet-input .form-control {
    background: var(--dk-input-bg) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */
/* btn-default */
html.dark-theme .btn-default {
    background: #2d3450 !important;
    border-color: #3a4260 !important;
    color: #c8d3e8 !important;
}
html.dark-theme .btn-default:hover,
html.dark-theme .btn-default:focus,
html.dark-theme .btn-default:active {
    background: #353c52 !important;
    border-color: #32c5d2 !important;
    color: #e0e6f8 !important;
}

/* ----------------------------------------------------------
   Dropdowns (Bootstrap)
   ---------------------------------------------------------- */
html.dark-theme .dropdown-menu {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
html.dark-theme .dropdown-menu > li > a {
    color: var(--dk-text) !important;
}
html.dark-theme .dropdown-menu > li > a:hover,
html.dark-theme .dropdown-menu > li > a:focus {
    background: var(--dk-hover) !important;
    color: var(--dk-heading) !important;
}
html.dark-theme .dropdown-menu > li.active > a,
html.dark-theme .dropdown-menu > li.active > a:hover {
    background: var(--dk-accent) !important;
    color: #fff !important;
}
html.dark-theme .dropdown-menu .divider {
    background: var(--dk-border) !important;
}
html.dark-theme .dropdown-menu > li.disabled > a {
    color: var(--dk-text-muted) !important;
}

/* ----------------------------------------------------------
   Modals
   ---------------------------------------------------------- */
html.dark-theme .modal-content {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text);
}
html.dark-theme .modal-header {
    background: var(--dk-bg3) !important;
    border-bottom-color: var(--dk-border) !important;
}
html.dark-theme .modal-header .modal-title {
    color: var(--dk-heading);
}
html.dark-theme .modal-body {
    background: var(--dk-bg3) !important;
    color: var(--dk-text);
}
html.dark-theme .modal-footer {
    border-top-color: var(--dk-border) !important;
    background: var(--dk-bg4) !important;
}
html.dark-theme .modal-backdrop {
    background: #000;
}
/* msg_modal_div — content loaded directly into .modal.container */
html.dark-theme .msg_modal_div,
html.dark-theme .modal_div {
    background: var(--dk-bg3) !important;
    color: var(--dk-text);
}

/* ----------------------------------------------------------
   Nav Tabs & Pills
   ---------------------------------------------------------- */
html.dark-theme .nav-tabs {
    border-bottom-color: var(--dk-border) !important;
}
html.dark-theme .nav-tabs > li > a {
    color: var(--dk-text-muted) !important;
    border-color: transparent transparent var(--dk-border);
}
html.dark-theme .nav-tabs > li > a:hover {
    background: var(--dk-bg4) !important;
    border-color: var(--dk-border) var(--dk-border) transparent;
    color: var(--dk-text) !important;
}
html.dark-theme .nav-tabs > li.active > a,
html.dark-theme .nav-tabs > li.active > a:hover,
html.dark-theme .nav-tabs > li.active > a:focus {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) var(--dk-border) transparent !important;
    color: var(--dk-heading) !important;
}

/* tabbable-line (from style-lib.css) */
html.dark-theme .tabbable-line > .nav-tabs {
    background: var(--dk-bg3) !important;
    border-bottom-color: var(--dk-border) !important;
}
html.dark-theme .tabbable-line > .nav-tabs > li > a {
    color: var(--dk-text-muted);
    background: transparent !important;
}
html.dark-theme .tabbable-line > .nav-tabs > li > a:hover {
    background: var(--dk-bg4) !important;
}
html.dark-theme .tabbable-line > .nav-tabs > li.active > a {
    color: var(--dk-heading);
    background: transparent !important;
}
html.dark-theme .tabbable-line > .tab-content {
    background: transparent !important;
    border-color: transparent !important;
}

html.dark-theme .nav-pills > li > a {
    color: var(--dk-text);
}
html.dark-theme .nav-pills > li.active > a,
html.dark-theme .nav-pills > li.active > a:hover {
    background: var(--dk-accent);
    color: #fff;
}

/* ----------------------------------------------------------
   Alerts
   ---------------------------------------------------------- */
html.dark-theme .alert {
    border-color: transparent;
}
html.dark-theme .alert-success {
    background: rgba(70, 160, 100, 0.15) !important;
    border-color: rgba(70, 160, 100, 0.3) !important;
    color: #7ddfaa !important;
}
html.dark-theme .alert-danger,
html.dark-theme .alert-error {
    background: rgba(200, 60, 60, 0.15) !important;
    border-color: rgba(200, 60, 60, 0.3) !important;
    color: #f08080 !important;
}
html.dark-theme .alert-warning {
    background: rgba(200, 150, 30, 0.15) !important;
    border-color: rgba(200, 150, 30, 0.3) !important;
    color: #f0c060 !important;
}
html.dark-theme .alert-info {
    background: rgba(50, 150, 220, 0.15) !important;
    border-color: rgba(50, 150, 220, 0.3) !important;
    color: #70b8e8 !important;
}

/* ----------------------------------------------------------
   Labels & Badges
   ---------------------------------------------------------- */
html.dark-theme .label-default {
    background: var(--dk-bg4);
    color: var(--dk-text);
}

/* ----------------------------------------------------------
   List Groups
   ---------------------------------------------------------- */
html.dark-theme .list-group-item {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text);
}
html.dark-theme .list-group-item:hover,
html.dark-theme .list-group-item:focus {
    background: var(--dk-hover) !important;
    color: var(--dk-heading);
}
html.dark-theme .list-group-item.active,
html.dark-theme .list-group-item.active:hover {
    background: var(--dk-accent) !important;
    border-color: var(--dk-accent) !important;
}

/* ----------------------------------------------------------
   Tooltips
   ---------------------------------------------------------- */
html.dark-theme .tooltip-inner {
    background: #0f1424 !important;
    color: #c8d3e8 !important;
    border: 1px solid var(--dk-border);
}
html.dark-theme .tooltip-arrow {
    border-bottom-color: #0f1424 !important;
    border-top-color: #0f1424 !important;
}

/* ----------------------------------------------------------
   Popovers
   ---------------------------------------------------------- */
html.dark-theme .popover {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
}
html.dark-theme .popover-title {
    background: var(--dk-bg4) !important;
    border-bottom-color: var(--dk-border) !important;
    color: var(--dk-heading);
}
html.dark-theme .popover-content {
    color: var(--dk-text);
}

/* ----------------------------------------------------------
   Progress Bars
   ---------------------------------------------------------- */
html.dark-theme .progress {
    background: var(--dk-bg4) !important;
}

/* ----------------------------------------------------------
   Breadcrumb (Bootstrap)
   ---------------------------------------------------------- */
html.dark-theme .breadcrumb {
    background: var(--dk-bg4) !important;
    color: var(--dk-text-muted);
}
html.dark-theme .breadcrumb > li a {
    color: var(--dk-accent);
}
html.dark-theme .breadcrumb > .active {
    color: var(--dk-text);
}

/* ----------------------------------------------------------
   Pagination
   ---------------------------------------------------------- */
html.dark-theme .pagination > li > a,
html.dark-theme .pagination > li > span {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
html.dark-theme .pagination > li > a:hover {
    background: var(--dk-hover) !important;
    color: var(--dk-heading) !important;
}
html.dark-theme .pagination > .active > a,
html.dark-theme .pagination > .active > span {
    background: var(--dk-accent) !important;
    border-color: var(--dk-accent) !important;
    color: #fff !important;
}
html.dark-theme .pagination > .disabled > a,
html.dark-theme .pagination > .disabled > span {
    background: var(--dk-bg4) !important;
    color: var(--dk-text-muted) !important;
}

/* ----------------------------------------------------------
   Page Footer
   ---------------------------------------------------------- */
html.dark-theme .page-prefooter {
    background: #0f1424 !important;
    color: var(--dk-text-muted);
}
html.dark-theme .page-footer {
    background: #0d1020 !important;
    color: var(--dk-text-muted);
}
html.dark-theme .page-footer a {
    color: var(--dk-accent);
}

/* ----------------------------------------------------------
   DataTables plugin
   ---------------------------------------------------------- */
/* DataTables sorted/reorder column highlights — override #fafafa/#f1f1f1 backgrounds */
html.dark-theme table td.sorting_1,
html.dark-theme table td.sorting_2,
html.dark-theme table td.sorting_3,
html.dark-theme table td.reorder,
html.dark-theme table.dataTable tbody tr.odd td.sorting_1,
html.dark-theme table.dataTable tbody tr.odd td.sorting_2,
html.dark-theme table.dataTable tbody tr.odd td.sorting_3,
html.dark-theme table.dataTable tbody tr.odd td.reorder,
html.dark-theme table.dataTable tbody tr.even td.sorting_1,
html.dark-theme table.dataTable tbody tr.even td.sorting_2,
html.dark-theme table.dataTable tbody tr.even td.sorting_3,
html.dark-theme table.dataTable tbody tr.even td.reorder {
    background: var(--dk-bg3) !important;
    background-color: var(--dk-bg3) !important;
}
html.dark-theme table.dataTable tbody tr.even td.sorting_1,
html.dark-theme table.dataTable tbody tr.even td.sorting_2,
html.dark-theme table.dataTable tbody tr.even td.sorting_3,
html.dark-theme table.dataTable tbody tr.even td.reorder,
html.dark-theme table tbody tr:nth-child(even) td.sorting_1,
html.dark-theme table tbody tr:nth-child(even) td.sorting_2,
html.dark-theme table tbody tr:nth-child(even) td.sorting_3,
html.dark-theme table tbody tr:nth-child(even) td.reorder {
    background: #2a3148 !important;
    background-color: #2a3148 !important;
}

html.dark-theme .dataTables_wrapper .dataTables_length,
html.dark-theme .dataTables_wrapper .dataTables_filter,
html.dark-theme .dataTables_wrapper .dataTables_info,
html.dark-theme .dataTables_wrapper .dataTables_paginate {
    color: var(--dk-text) !important;
}
html.dark-theme .dataTables_wrapper .dataTables_filter input {
    background: var(--dk-input-bg) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
html.dark-theme .dataTables_wrapper .dataTables_length select {
    background: var(--dk-input-bg) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* ----------------------------------------------------------
   Bootstrap Multiselect plugin
   ---------------------------------------------------------- */
html.dark-theme .multiselect.btn-default {
    background: var(--dk-input-bg) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
html.dark-theme .multiselect-container {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
}
html.dark-theme .multiselect-container > li > a {
    color: var(--dk-text) !important;
}
html.dark-theme .multiselect-container > li > a:hover,
html.dark-theme .multiselect-container > li:hover > a {
    background: var(--dk-hover) !important;
}
html.dark-theme .multiselect-container > li.active > a {
    background: var(--dk-accent) !important;
}

/* #v-multiselect-container from style-lib.css */
html.dark-theme #v-multiselect-container .multiselect {
    background: var(--dk-input-bg) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
html.dark-theme #v-multiselect-container .multiselect:hover {
    background: var(--dk-hover) !important;
}
html.dark-theme #v-multiselect-container .multiselect-selected-text {
    color: var(--dk-text) !important;
}
html.dark-theme #v-multiselect-container .multiselect-container {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
}

/* ----------------------------------------------------------
   jQuery UI Datepicker
   ---------------------------------------------------------- */
html.dark-theme .ui-datepicker {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text);
}
html.dark-theme .ui-datepicker .ui-datepicker-header {
    background: var(--dk-bg4) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-heading);
}
html.dark-theme .ui-datepicker th {
    color: var(--dk-text-muted);
}
html.dark-theme .ui-datepicker td a,
html.dark-theme .ui-datepicker td span {
    color: var(--dk-text);
}
html.dark-theme .ui-datepicker td a:hover {
    background: var(--dk-hover) !important;
    color: var(--dk-heading) !important;
}
html.dark-theme .ui-datepicker td.ui-datepicker-today a {
    background: var(--dk-bg4) !important;
    color: var(--dk-accent) !important;
}
html.dark-theme .ui-datepicker td.ui-state-active a,
html.dark-theme .ui-datepicker td .ui-state-active {
    background: var(--dk-accent) !important;
    color: #fff !important;
}
html.dark-theme .ui-datepicker .ui-datepicker-prev,
html.dark-theme .ui-datepicker .ui-datepicker-next {
    color: var(--dk-text-muted);
}
html.dark-theme .ui-datepicker-month,
html.dark-theme .ui-datepicker-year {
    background: var(--dk-bg4) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

/* ----------------------------------------------------------
   Toastr notifications
   ---------------------------------------------------------- */
html.dark-theme #toast-container > div {
    opacity: 0.95;
}
html.dark-theme #toast-container > .toast {
    background: var(--dk-bg3);
    border: 1px solid var(--dk-border);
    color: var(--dk-text);
}
html.dark-theme #toast-container > .toast-success {
    background: #1a3d2a !important;
    border-color: #2a6a42 !important;
    color: #7ddfaa;
}
html.dark-theme #toast-container > .toast-error {
    background: #3d1a1a !important;
    border-color: #6a2a2a !important;
    color: #f08080;
}
html.dark-theme #toast-container > .toast-warning {
    background: #3d2e10 !important;
    border-color: #6a4f20 !important;
    color: #f0c060;
}
html.dark-theme #toast-container > .toast-info {
    background: #1a2a3d !important;
    border-color: #2a4a6a !important;
    color: #70b8e8;
}

/* ----------------------------------------------------------
   Bootstrap Switch plugin
   ---------------------------------------------------------- */
html.dark-theme .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
html.dark-theme .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
    background: var(--dk-bg4);
    color: var(--dk-text);
}
html.dark-theme .bootstrap-switch .bootstrap-switch-label {
    background: var(--dk-bg2);
}

/* ----------------------------------------------------------
   Tabbable / Profile tabs
   ---------------------------------------------------------- */
html.dark-theme .tabbable-line > .nav-tabs > li > a:hover {
    border-bottom-color: var(--dk-accent);
}
html.dark-theme .tabbable-line > .nav-tabs > li.active > a {
    border-bottom-color: var(--dk-accent) !important;
}

/* ----------------------------------------------------------
   FAQ / Help page (pages/css/faq.css overrides)
   ---------------------------------------------------------- */
html.dark-theme .faq-content-1 .faq-section {
    background-color: var(--dk-bg3) !important;
}
html.dark-theme .faq-page .search-bar {
    background-color: var(--dk-bg3) !important;
}
html.dark-theme .faq-page .search-bar .input-group > input {
    background-color: var(--dk-input-bg) !important;
    color: var(--dk-text) !important;
}
html.dark-theme .faq-content-1 .faq-section > .faq-content .panel-heading .accordion-toggle {
    color: var(--dk-text) !important;
}
html.dark-theme .faq-content-1 .faq-section > .faq-content .panel-heading .accordion-toggle:hover {
    color: var(--dk-accent) !important;
}
html.dark-theme .faq-content-1 .faq-section > .faq-content .panel-heading i {
    color: var(--dk-border2) !important;
}
html.dark-theme .faq-content-1 .faq-section > .faq-content .panel-body {
    background-color: var(--dk-bg4) !important;
}

/* ----------------------------------------------------------
   Login page
   ---------------------------------------------------------- */
html.dark-theme.page-container-bg-solid.login,
html.dark-theme body.login {
    background: var(--dk-bg) !important;
}
html.dark-theme .login .content {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border);
}
html.dark-theme .login .content h3,
html.dark-theme .login .content h4,
html.dark-theme .login .content label,
html.dark-theme .login .content p {
    color: var(--dk-text) !important;
}
html.dark-theme .login .content .form-actions {
    border-bottom-color: var(--dk-border) !important;
    background: var(--dk-bg4) !important;
}

/* ----------------------------------------------------------
   General text & typography
   ---------------------------------------------------------- */
html.dark-theme h1, html.dark-theme h2, html.dark-theme h3,
html.dark-theme h4, html.dark-theme h5, html.dark-theme h6 {
    color: var(--dk-heading);
}
html.dark-theme a:not(.btn) {
    color: var(--dk-accent);
}
html.dark-theme a:not(.btn):hover {
    color: #4dd8e3;
}
html.dark-theme hr {
    border-top-color: var(--dk-border);
}
html.dark-theme .text-muted {
    color: var(--dk-text-muted) !important;
}
html.dark-theme small,
html.dark-theme .small {
    color: var(--dk-text-muted);
}
html.dark-theme code {
    background: var(--dk-bg4);
    color: #e06c75;
}
html.dark-theme pre {
    background: var(--dk-bg4);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
html.dark-theme blockquote {
    border-left-color: var(--dk-border);
    color: var(--dk-text-muted);
}

/* font-blue-steel (used for active icons) */
html.dark-theme .font-blue-steel {
    color: var(--dk-accent) !important;
}

/* ----------------------------------------------------------
   Profile sidebar (profile.css overrides)
   ---------------------------------------------------------- */
html.dark-theme .profile-usermenu ul li {
    border-bottom-color: var(--dk-border) !important;
}
html.dark-theme .profile-usermenu ul li a {
    color: var(--dk-text-muted) !important;
    background: transparent !important;
}
html.dark-theme .profile-usermenu ul li a:hover {
    background-color: var(--dk-hover) !important;
    color: var(--dk-accent) !important;
}
html.dark-theme .profile-usermenu ul li.active a {
    background-color: var(--dk-bg4) !important;
    color: var(--dk-accent) !important;
    border-left-color: var(--dk-accent) !important;
}

/* ----------------------------------------------------------
   Metronic custom checkboxes & radios (mt-checkbox, mt-radio)
   ---------------------------------------------------------- */
html.dark-theme .mt-checkbox > span,
html.dark-theme .mt-radio > span {
    background: var(--dk-bg4) !important;
    border-color: var(--dk-border2) !important;
}
html.dark-theme .mt-checkbox:hover > input:not([disabled]) ~ span,
html.dark-theme .mt-checkbox > input:focus ~ span,
html.dark-theme .mt-radio:hover > input:not([disabled]) ~ span,
html.dark-theme .mt-radio > input:focus ~ span {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-accent) !important;
}
html.dark-theme .mt-checkbox > input:checked ~ span,
html.dark-theme .mt-radio > input:checked ~ span {
    background: var(--dk-accent) !important;
    border-color: var(--dk-accent) !important;
}
html.dark-theme .mt-checkbox > input:checked ~ span:after,
html.dark-theme .mt-radio > input:checked ~ span:after {
    border-color: #fff !important;
}
html.dark-theme .mt-checkbox-outline > span,
html.dark-theme .mt-radio-outline > span {
    background: transparent !important;
    border-color: var(--dk-border2) !important;
}
html.dark-theme .mt-checkbox-outline > input:checked ~ span,
html.dark-theme .mt-radio-outline > input:checked ~ span {
    background: transparent !important;
    border-color: var(--dk-accent) !important;
}
html.dark-theme .mt-checkbox-outline > input:checked ~ span:after,
html.dark-theme .mt-radio-outline > input:checked ~ span:after {
    border-color: var(--dk-accent) !important;
}

/* ----------------------------------------------------------
   Dark theme toggle button
   ---------------------------------------------------------- */
/* Restore padding/display lost by removing dropdown-toggle class */
#dark-theme-toggle {
    display: block;
    padding: 17px 10px 8px 10px;
    outline: 0 !important;
    line-height: 1;
}
#dark-theme-toggle > i {
    font-size: 19px;
    color: #C1CCD1;
}
html.dark-theme #dark-theme-toggle > i {
    color: #f0c060 !important;
}
html.dark-theme #dark-theme-toggle:hover,
html.dark-theme #dark-theme-toggle:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
/* Other top-menu dropdowns: replace white hover bg with subtle highlight in dark mode */
html.dark-theme .page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover,
html.dark-theme .page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:focus,
html.dark-theme .page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:active,
html.dark-theme .page-header .page-header-top .top-menu .navbar-nav > li.dropdown:active .dropdown-toggle,
html.dark-theme .page-header .page-header-top .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ----------------------------------------------------------
   Dashboard stats widgets (components-md.css overrides)
   ---------------------------------------------------------- */
html.dark-theme .dashboard-stat2 {
    background: var(--dk-bg3) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
html.dark-theme .dashboard-stat2 .display .number small {
    color: var(--dk-text-muted) !important;
}
html.dark-theme .dashboard-stat2 .display .icon > i {
    color: var(--dk-border2) !important;
}
html.dark-theme .dashboard-stat2 .progress-info .status {
    color: var(--dk-text-muted) !important;
}

html.dark-theme .dashboard-stat {
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ----------------------------------------------------------
   Inbox sidebar (apps/css/inbox.css overrides)
   ---------------------------------------------------------- */
html.dark-theme .inbox .inbox-sidebar,
html.dark-theme .page-container-bg-solid .inbox .inbox-sidebar {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
}
html.dark-theme .inbox .inbox-nav > li > a {
    color: var(--dk-text-muted) !important;
}
html.dark-theme .inbox .inbox-nav > li > a:hover {
    background: var(--dk-hover) !important;
    color: var(--dk-text) !important;
}
html.dark-theme .inbox .inbox-nav > li.active > a {
    color: var(--dk-text) !important;
}
html.dark-theme .inbox .inbox-nav > li.divider {
    border-top-color: var(--dk-border) !important;
}
html.dark-theme .inbox-compose-btn {
    background: var(--dk-bg4) !important;
    border-bottom-color: var(--dk-border) !important;
}
html.dark-theme .inbox .inbox-body {
    background: var(--dk-bg3) !important;
    border-color: var(--dk-border) !important;
}

/* ----------------------------------------------------------
   CKEditor 5
   ---------------------------------------------------------- */
html.dark-theme .ck.ck-editor {
    --ck-color-base-background:              #1a2035;
    --ck-color-toolbar-background:           #1e2438;
    --ck-color-base-border:                  #2e3652;
    --ck-color-base-text:                    #c8d3e8;
    --ck-color-base-foreground:              #252c42;
    --ck-color-button-default-background:    transparent;
    --ck-color-button-default-hover-background: #2d3450;
    --ck-color-button-default-active-background: #2d3450;
    --ck-color-button-on-background:         #2d3450;
    --ck-color-button-on-hover-background:   #353c52;
    --ck-color-input-background:             #1a2035;
    --ck-color-input-border:                 #2e3652;
    --ck-color-input-text:                   #c8d3e8;
    --ck-color-panel-background:             #252c42;
    --ck-color-panel-border:                 #2e3652;
    --ck-color-list-background:              #252c42;
    --ck-color-list-button-hover-background: #2d3450;
    --ck-color-list-button-on-background:    #2d3450;
    --ck-color-dropdown-panel-background:    #252c42;
    --ck-color-dropdown-panel-border:        #2e3652;
    --ck-color-shadow-small:                 rgba(0,0,0,0.4);
    --ck-color-shadow-drop:                  rgba(0,0,0,0.5);
    --ck-color-focus-border:                 #32c5d2;
    --ck-color-focus-outer-shadow:           rgba(50,197,210,0.15);
    --ck-icon-color:                         #8899bb;
    --ck-color-button-default-disabled-color: #5a6a88;
}

html.dark-theme .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
    background: #1a2035 !important;
    color: #c8d3e8 !important;
    border-color: #2e3652 !important;
}

html.dark-theme .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
    border-color: #32c5d2 !important;
    box-shadow: 0 0 0 3px rgba(50,197,210,0.15) !important;
}

html.dark-theme .ck.ck-toolbar {
    background: #1e2438 !important;
    border-color: #2e3652 !important;
}

html.dark-theme .ck.ck-toolbar .ck-toolbar__separator {
    background: #2e3652 !important;
}

html.dark-theme .ck.ck-button {
    color: #8899bb !important;
}
html.dark-theme .ck.ck-button:hover,
html.dark-theme .ck.ck-button.ck-on {
    background: #2d3450 !important;
    color: #c8d3e8 !important;
}

html.dark-theme .ck.ck-dropdown__panel,
html.dark-theme .ck.ck-list {
    background: #252c42 !important;
    border-color: #2e3652 !important;
}

html.dark-theme .ck.ck-list__item .ck-button:hover {
    background: #2d3450 !important;
}

html.dark-theme .ck.ck-input-text {
    background: #1a2035 !important;
    border-color: #2e3652 !important;
    color: #c8d3e8 !important;
}

html.dark-theme .ck.ck-balloon-panel {
    background: #252c42 !important;
    border-color: #2e3652 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}

html.dark-theme .ck.ck-color-grid__tile:hover {
    border-color: #32c5d2 !important;
}

/* ----------------------------------------------------------
   FullCalendar
   ---------------------------------------------------------- */
/* Outer borders */
html.dark-theme .fc-unthemed th,
html.dark-theme .fc-unthemed td,
html.dark-theme .fc-unthemed thead,
html.dark-theme .fc-unthemed tbody,
html.dark-theme .fc-unthemed .fc-row,
html.dark-theme .fc-unthemed .fc-divider {
    border-color: var(--dk-border) !important;
}
/* Header row (day names) */
html.dark-theme .fc th {
    background: var(--dk-bg4) !important;
    color: var(--dk-text-muted) !important;
}
html.dark-theme .fc-day-number,
html.dark-theme .fc-week-number {
    color: var(--dk-text-muted) !important;
}
/* Day cells — give each day column a distinct background */
html.dark-theme .fc-bg .fc-day,
html.dark-theme .fc-time-grid .fc-bg .fc-day {
    background: var(--dk-bg3) !important;
}
/* Today column — more visible teal tint */
html.dark-theme .fc-unthemed .fc-today,
html.dark-theme .fc-bg .fc-today,
html.dark-theme .fc-time-grid .fc-bg .fc-today {
    background: rgba(50, 197, 210, 0.13) !important;
}
/* fc-slats must be transparent — our general nth-child(even) table rule
   would otherwise make every 30-min slot alternate colors, making each
   hour look like only half a row. Let the .fc-bg layer show through. */
html.dark-theme .fc-slats td,
html.dark-theme .fc-slats tr td,
html.dark-theme .fc-slats tbody tr td,
html.dark-theme .fc-slats tbody tr:nth-child(odd) td,
html.dark-theme .fc-slats tbody tr:nth-child(even) td {
    background: transparent !important;
    background-color: transparent !important;
}
/* Hour lines — visible border */
html.dark-theme .fc-slats td {
    border-top-color: var(--dk-border) !important;
}
/* Half-hour (30 min) lines — subtler, matching light theme */
html.dark-theme .fc-slats .fc-minor td {
    border-top-color: var(--dk-bg4) !important;
    border-top-style: dotted !important;
}
/* Time labels (11:00, 12:00 …) */
html.dark-theme .fc-axis {
    color: var(--dk-text-muted) !important;
    background: var(--dk-bg2) !important;
}
/* Toolbar */
html.dark-theme .fc-toolbar h2 {
    color: var(--dk-heading) !important;
}
html.dark-theme .fc-toolbar .fc-button {
    background: var(--dk-bg4) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
html.dark-theme .fc-toolbar .fc-button:hover {
    background: var(--dk-hover) !important;
    color: var(--dk-heading) !important;
}
html.dark-theme .fc-toolbar .fc-button.fc-state-active,
html.dark-theme .fc-toolbar .fc-button.fc-state-down {
    background: var(--dk-accent) !important;
    border-color: var(--dk-accent) !important;
    color: #fff !important;
}
/* Events — override our a:not(.btn) teal color rule */
html.dark-theme .fc-event,
html.dark-theme a.fc-event,
html.dark-theme a.fc-event:hover,
html.dark-theme a.fc-event:not(.btn) {
    color: #fff !important;
}
html.dark-theme .fc-event .fc-title,
html.dark-theme .fc-event .fc-time,
html.dark-theme .fc-event .fc-content {
    color: #fff !important;
}