/*
 * Colour themes, part 2 (loaded after themes.css): the page content (boxes, tables, forms, tabs, pagination, dialogs) in the theme's
 * colours, and dark mode (body[data-mode="dark"], tblThemes.IsDark = 1). Pages that paint their own light background inline
 * (a few reports and print cards) stay light in dark mode.
 */
.content-header, .skin-blue .content-header { background: color-mix(in srgb, var(--t-tint, #fffdf5) 10%, #fff); }
.content-header > h1 { color: var(--t-title, #333); font-weight: 600; }
.content-wrapper a:not([class]) { color: var(--t-primary, #3c8dbc); }
.content-wrapper a:not([class]):hover { color: var(--t-accent, #3c8dbc); }
::selection { background: var(--t-primary, #3c8dbc); color: #fff; }

.box { border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04); transition: box-shadow .2s; }
.box:hover { box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.06); }
.box.box-primary, .box.box-info { border-top-color: var(--t-primary, #3c8dbc); }
.box.box-solid.box-primary > .box-header, .bg-light-blue, .bg-light-blue-active { background-color: var(--t-primary, #3c8dbc) !important; }
.box.box-solid.box-primary { border-color: var(--t-primary, #3c8dbc); }
.box-header.with-border { border-bottom-color: color-mix(in srgb, var(--t-primary, #3c8dbc) 25%, #f4f4f4); }
.box-header .box-title { color: var(--t-title, inherit); }
.text-light-blue { color: var(--t-primary, #3c8dbc) !important; }
.label-primary, .badge.bg-light-blue { background-color: var(--t-primary, #3c8dbc) !important; }

.table > thead > tr > th { background: color-mix(in srgb, var(--t-menu, #230c6e) 9%, #fff); color: var(--t-title, inherit); border-bottom: 2px solid var(--t-primary, #3c8dbc); }
.table-hover > tbody > tr:hover { background-color: color-mix(in srgb, var(--t-primary, #3c8dbc) 8%, #fff); }

.nav-tabs-custom { border-radius: 6px; }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--t-primary, #3c8dbc); }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: var(--t-primary, #3c8dbc); color: #fff; border-top-color: var(--t-primary, #3c8dbc); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span { background-color: var(--t-primary, #3c8dbc); border-color: var(--t-primary, #3c8dbc); color: #fff; }
.pagination > li > a { color: var(--t-primary, #3c8dbc); }
.progress-bar-primary, .progress-bar { background-color: var(--t-primary, #3c8dbc); }
.form-control:focus, .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--t-primary, #3c8dbc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-primary, #3c8dbc) 18%, transparent); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--t-primary, #3c8dbc); }
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--t-primary, #3c8dbc); }
.modal-content { border-radius: 8px; border: 0; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal-header { border-bottom: 2px solid var(--t-primary, #3c8dbc); }
.btn { border-radius: 4px; transition: filter .15s, box-shadow .15s; }
.btn:hover { box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.skin-blue .sidebar-menu > li > a, .skin-blue .sidebar-menu .treeview-menu > li > a { transition: background-color .15s, padding-left .15s; }
.skin-blue .sidebar-menu .treeview-menu > li > a:hover { padding-left: 24px; }
.user-menu > .dropdown-menu { border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.main-footer { border-top: 3px solid var(--t-primary, #d2d6de); }
.login-page .main-footer { border-top: 0; }
.login-page .btn-primary { box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.login-page .carousel-inner { box-shadow: 0 6px 24px rgba(0,0,0,.25); }

/* ---------------------------------------------- dark mode ---------------------------------------------- */
body[data-mode="dark"] {
    --d-bg: #0e131a; --d-surface: #151c26; --d-surface2: #1b2430; --d-border: #2a3646; --d-text: #d8dfe9; --d-muted: #8d9bb0;
    background: var(--d-bg); color: var(--d-text); color-scheme: dark;
}
body[data-mode="dark"] .wrapper, body[data-mode="dark"] .content-wrapper, body[data-mode="dark"] .right-side,
body[data-mode="dark"].skin-blue .wrapper, body[data-mode="dark"].login-page { background-color: var(--d-bg); }
body[data-mode="dark"] .content-header, body[data-mode="dark"].skin-blue .content-header, body[data-mode="dark"] .skin-blue .content-header { background: var(--d-bg); }
body[data-mode="dark"] .content-header > h1, body[data-mode="dark"] h1, body[data-mode="dark"] h2, body[data-mode="dark"] h3,
body[data-mode="dark"] h4, body[data-mode="dark"] h5, body[data-mode="dark"] h6, body[data-mode="dark"] .box-title { color: var(--d-text); }
body[data-mode="dark"] .content-header > .breadcrumb > li > a, body[data-mode="dark"] .text-muted, body[data-mode="dark"] small, body[data-mode="dark"] .help-block { color: var(--d-muted); }
body[data-mode="dark"].login-page h3, body[data-mode="dark"].login-page h5 { color: var(--t-accent); }
body[data-mode="dark"] .login-bar { background-image: none; background-color: #0a0e14; }
body[data-mode="dark"].login-page .login-slogan, body[data-mode="dark"] .mis-title { color: var(--t-title); }
body[data-mode="dark"] hr { border-top-color: var(--d-border); }
body[data-mode="dark"] .content-wrapper a:not([class]), body[data-mode="dark"].login-page a { color: #7cc4f0; }

/* menu */
body[data-mode="dark"] .main-sidebar, body[data-mode="dark"].skin-blue .main-sidebar, body[data-mode="dark"].skin-blue .left-side, body[data-mode="dark"] .skin-blue .main-sidebar { background-color: #0a0e14; }
body[data-mode="dark"].skin-blue .sidebar a { color: #c3cedd; }
body[data-mode="dark"].skin-blue .sidebar-menu > li > .treeview-menu { background: #121923; }
body[data-mode="dark"].skin-blue .sidebar-menu .treeview-menu > li > a { color: #aab6c8; }
body[data-mode="dark"].skin-blue .sidebar-menu > li:hover > a, body[data-mode="dark"].skin-blue .sidebar-menu > li.active > a, body[data-mode="dark"].skin-blue .sidebar-menu > li.menu-open > a { background: #1e293b; color: #fff; }
body[data-mode="dark"].skin-blue .sidebar-menu .treeview-menu > li.active > a, body[data-mode="dark"].skin-blue .sidebar-menu .treeview-menu > li > a:hover { background: var(--t-primary); color: #fff; }
body[data-mode="dark"].skin-blue .main-header .logo { background-color: #0a0e14; color: var(--t-title); }
body[data-mode="dark"] .treeview-menu::-webkit-scrollbar-track, body[data-mode="dark"] .treeview-menu::-webkit-scrollbar { background: #0a0e14; }
body[data-mode="dark"] .treeview-menu > li > ul { border-left-color: var(--d-border); }
body[data-mode="dark"] .main-footer { background: #0a0e14; color: var(--d-muted); border-top-color: var(--d-border); }
body[data-mode="dark"] .main-footer a { color: #7cc4f0; }

/* surfaces */
body[data-mode="dark"] .box, body[data-mode="dark"] .nav-tabs-custom, body[data-mode="dark"] .nav-tabs-custom > .tab-content, body[data-mode="dark"] .panel,
body[data-mode="dark"] .well, body[data-mode="dark"] .info-box, body[data-mode="dark"] .list-group-item, body[data-mode="dark"] .box-footer,
body[data-mode="dark"] .modal-content, body[data-mode="dark"] .dropdown-menu, body[data-mode="dark"] .user-body, body[data-mode="dark"] .user-footer,
body[data-mode="dark"] .mis-theme-pick, body[data-mode="dark"] .popover { background: var(--d-surface); color: var(--d-text); border-color: var(--d-border); }
body[data-mode="dark"] .box { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
body[data-mode="dark"] .box:not(.box-primary):not(.box-info):not(.box-success):not(.box-warning):not(.box-danger) { border-top-color: var(--d-border); }
body[data-mode="dark"] .box-header.with-border, body[data-mode="dark"] .modal-footer, body[data-mode="dark"] .box-footer { border-color: var(--d-border); }
body[data-mode="dark"] .modal-header { border-bottom-color: var(--t-primary); }
body[data-mode="dark"] .close { color: var(--d-text); text-shadow: none; }
body[data-mode="dark"] .dropdown-menu > li > a { color: var(--d-text); }
body[data-mode="dark"] .dropdown-menu > li > a:hover, body[data-mode="dark"] .dropdown-menu > li > a:focus { background: var(--d-surface2); color: #fff; }
body[data-mode="dark"] .mis-theme-pick .mis-theme-label { color: var(--d-muted); }
body[data-mode="dark"] .mis-theme-pick button { border-color: var(--d-surface); box-shadow: 0 0 0 1px #4a586d; }
body[data-mode="dark"] .mis-theme-pick button.on { box-shadow: 0 0 0 2px #fff; }
body[data-mode="dark"] .nav-tabs-custom > .nav-tabs { border-bottom-color: var(--d-border); }
body[data-mode="dark"] .nav-tabs-custom > .nav-tabs > li > a { color: var(--d-muted); }
body[data-mode="dark"] .nav-tabs-custom > .nav-tabs > li.active > a, body[data-mode="dark"] .nav-tabs-custom > .nav-tabs > li.active:hover > a { background: var(--d-surface); color: var(--d-text); border-color: var(--d-border); }
body[data-mode="dark"] .nav-tabs-custom > .nav-tabs > li:hover > a { color: var(--d-text); }

/* tables */
body[data-mode="dark"] .table, body[data-mode="dark"] table.dataTable { color: var(--d-text); background: transparent; }
body[data-mode="dark"] .table > thead > tr > th { background: var(--d-surface2); color: #fff; border-bottom-color: var(--t-primary); }
body[data-mode="dark"] .table > tbody > tr > td, body[data-mode="dark"] .table > tbody > tr > th, body[data-mode="dark"] .table > tfoot > tr > td,
body[data-mode="dark"] .table-bordered, body[data-mode="dark"] .table-bordered > thead > tr > th, body[data-mode="dark"] .table-bordered > tbody > tr > td,
body[data-mode="dark"] table.dataTable.no-footer { border-color: var(--d-border); }
body[data-mode="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,.03); }
body[data-mode="dark"] .table-hover > tbody > tr:hover, body[data-mode="dark"] table.dataTable tbody tr:hover { background-color: var(--d-surface2); }
body[data-mode="dark"] table.dataTable tbody tr { background-color: transparent; }
body[data-mode="dark"] .dataTables_wrapper .dataTables_info, body[data-mode="dark"] .dataTables_wrapper .dataTables_length, body[data-mode="dark"] .dataTables_wrapper .dataTables_filter { color: var(--d-muted); }

/* forms */
body[data-mode="dark"] .form-control, body[data-mode="dark"] .input-group-addon, body[data-mode="dark"] select, body[data-mode="dark"] textarea,
body[data-mode="dark"] input[type="text"], body[data-mode="dark"] input[type="search"], body[data-mode="dark"] input[type="number"], body[data-mode="dark"] input[type="date"],
body[data-mode="dark"] input[type="password"], body[data-mode="dark"] input[type="email"], body[data-mode="dark"] input[type="time"] { background-color: var(--d-surface2); border-color: var(--d-border); color: var(--d-text); }
body[data-mode="dark"] .form-control::placeholder { color: #6c7a8e; }
body[data-mode="dark"] .form-control[disabled], body[data-mode="dark"] .form-control[readonly], body[data-mode="dark"] fieldset[disabled] .form-control { background-color: #10161e; color: var(--d-muted); }
body[data-mode="dark"] .form-control:focus { border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
body[data-mode="dark"] label, body[data-mode="dark"] .control-label { color: var(--d-text); }
body[data-mode="dark"] .btn-default { background: var(--d-surface2); border-color: var(--d-border); color: var(--d-text); }
body[data-mode="dark"] .btn-default:hover, body[data-mode="dark"] .btn-default:focus { background: #243142; color: #fff; }
body[data-mode="dark"] .pagination > li > a, body[data-mode="dark"] .pagination > li > span { background: var(--d-surface2); border-color: var(--d-border); color: var(--d-text); }
body[data-mode="dark"] .pagination > .active > a, body[data-mode="dark"] .pagination > .active > a:hover { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }
body[data-mode="dark"] .pagination > .disabled > a { color: #5b6a80; }

/* select2 */
body[data-mode="dark"] .select2-container--default .select2-selection--single, body[data-mode="dark"] .select2-container--default .select2-selection--multiple,
body[data-mode="dark"] .select2-dropdown, body[data-mode="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--d-surface2); border-color: var(--d-border); color: var(--d-text); }
body[data-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--d-text); }
body[data-mode="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background-color: #243142; }
body[data-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background: #243142; border-color: var(--d-border); color: var(--d-text); }

/* editor, charts, alerts */
body[data-mode="dark"] .note-editor.note-frame, body[data-mode="dark"] .note-editor .note-toolbar { background: var(--d-surface2); border-color: var(--d-border); }
body[data-mode="dark"] .note-editing-area, body[data-mode="dark"] .note-editor .note-editing-area .note-editable { background: var(--d-surface) !important; color: var(--d-text); }
body[data-mode="dark"] .note-btn { background: var(--d-surface2); border-color: var(--d-border); color: var(--d-text); }
body[data-mode="dark"] .highcharts-container text { fill: var(--d-text) !important; }
body[data-mode="dark"] .highcharts-background { fill: transparent; }
body[data-mode="dark"] .highcharts-grid-line { stroke: var(--d-border); }
body[data-mode="dark"] .alert-warning, body[data-mode="dark"] .alert-info { background-color: var(--d-surface2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; }
body[data-mode="dark"] .progress { background: var(--d-surface2); }
body[data-mode="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; background: #0a0e14; }
body[data-mode="dark"] ::-webkit-scrollbar-thumb { background: #2f3d52; border-radius: 6px; }

/*
 * The page stylesheets (finance, homework, WhatsApp, diary ...) write their greys and white cards as var(--c-xxxxxx, #xxxxxx).
 * In dark mode the variables carry the dark equivalents; on screen only, so printouts stay as they are.
 */
@media screen {
    body[data-mode="dark"] {
        --c-fff: #151c26; --c-263238: #d8dfe9; --c-455a64: #b4c0cf; --c-546e7a: #9fb0c2; --c-607d8b: #93a4b8; --c-78909c: #8d9bb0; --c-90a4ae: #7d8da3;
        --c-b0bec5: #5d6d82; --c-cfd8dc: #334155; --c-eceff1: #243142; --c-e3e8ec: #2a3646; --c-e3e8ef: #2a3646; --c-dde3e8: #2a3646;
        --c-f0f3f5: #1b2430; --c-f1f4f6: #1b2430; --c-e8edf0: #243142; --c-f6f8fa: #18212c; --c-fafbfc: #18212c; --c-f7f9fc: #18212c; --c-f7fafc: #18212c;
        --c-eef3f7: #1b2430; --c-eef1f6: #1b2430; --c-37474f: #b4c0cf;
    }
    /* documents (mark sheets, result cards, vouchers, statements) keep their paper look */
    body[data-mode="dark"] :is(.dmc-sheet, .cs-paper) {
        --c-fff: #fff; --c-263238: #263238; --c-455a64: #455a64; --c-546e7a: #546e7a; --c-607d8b: #607d8b; --c-78909c: #78909c; --c-90a4ae: #90a4ae;
        --c-b0bec5: #b0bec5; --c-cfd8dc: #cfd8dc; --c-eceff1: #eceff1; --c-e3e8ec: #e3e8ec; --c-e3e8ef: #e3e8ef; --c-dde3e8: #dde3e8;
        --c-f0f3f5: #f0f3f5; --c-f1f4f6: #f1f4f6; --c-e8edf0: #e8edf0; --c-f6f8fa: #f6f8fa; --c-fafbfc: #fafbfc; --c-f7f9fc: #f7f9fc; --c-f7fafc: #f7fafc;
        --c-eef3f7: #eef3f7; --c-eef1f6: #eef1f6; --c-37474f: #37474f; color: #263238;
    }
}
.main-footer a { color: var(--t-title, #230c6e); font-weight: 600; }
body[data-mode="dark"] .main-footer a { color: #7cc4f0; }