/*
 * SIKAB v3 - Tema Gelap (Dark Mode)
 * -------------------------------------------------------------
 * Palet diambil dari rujukan reka bentuk "Design Dashboard.docx":
 *   ungu plum  #412C49  (sudut kiri-atas / kanan-bawah imej)
 *   navy gelap #0C1B3A  (sudut kanan-atas / kiri-bawah imej)
 *
 * Fail ini SENGAJA diasingkan daripada custom.css / custom.min.css
 * supaya tidak terikat dengan masalah penyelenggaraan dua fail
 * (head-css memuatkan custom.min.css, bukan custom.css).
 * Ia dimuatkan PALING AKHIR dalam views/layouts/head-css.php.
 *
 * SEMUA rule di bawah discope pada [data-bs-theme=dark]. Halaman
 * cetakan (views/layouts/print.php) tidak menetapkan atribut itu,
 * jadi cetakan kekal latar putih.
 */

/* =========================================================
   1. Token warna
   ========================================================= */
[data-bs-theme=dark] {
    --sikab-navy-900: #0A1730;
    --sikab-navy-800: #0C1B3A;
    --sikab-navy-700: #101F4A;
    --sikab-purple-900: #2B1A3A;
    --sikab-purple-800: #412C49;
    --sikab-purple-700: #542B4A;
    --sikab-glow-tl: rgba(88, 45, 102, .85);
    --sikab-glow-br: rgba(122, 52, 92, .85);

    --sikab-surface: #1C1836;
    --sikab-surface-2: #241E42;
    --sikab-surface-3: #2C2550;
    --sikab-border: #34305A;
    --sikab-text: #D6D3E8;
    --sikab-text-muted: #9A94BC;
    --sikab-heading: #FFFFFF;
}

/* =========================================================
   2. Tulis semula palet gelap Velzon (asalnya kelabu #1a1d21)
   ========================================================= */
[data-bs-theme=dark] {
    --vz-body-bg: var(--sikab-navy-800);
    --vz-body-bg-rgb: 12, 27, 58;
    --vz-body-color: var(--sikab-text);
    --vz-body-color-rgb: 214, 211, 232;
    --vz-emphasis-color: var(--sikab-heading);
    --vz-heading-color: var(--sikab-heading);

    --vz-secondary-bg: var(--sikab-surface);      /* latar .card */
    --vz-secondary-bg-rgb: 28, 24, 54;
    --vz-secondary-color: var(--sikab-text-muted);
    --vz-tertiary-bg: var(--sikab-surface-2);
    --vz-tertiary-color: var(--sikab-text-muted);

    --vz-border-color: var(--sikab-border);
    --vz-border-color-translucent: rgba(255, 255, 255, .10);

    --vz-light: var(--sikab-surface-2);
    --vz-light-rgb: 36, 30, 66;
    --vz-dark: var(--sikab-surface-3);
    --vz-dark-rgb: 44, 37, 80;

    --vz-header-bg: rgba(23, 22, 51, .92);
    --vz-header-border: rgba(255, 255, 255, .08);
    --vz-footer-bg: rgba(23, 22, 51, .92);
    --vz-footer-color: var(--sikab-text-muted);

    --vz-input-bg-custom: #201B3C;
    --vz-input-border-custom: var(--sikab-border);
    --vz-boxed-body-bg: var(--sikab-navy-900);

    --vz-topnav-bg: var(--sikab-surface-2);
    --vz-topnav-item-color: var(--sikab-text-muted);
    --vz-topnav-item-active-color: #fff;

    --vz-page-title-border: none;
    --vz-page-title-box-shadow: none;
}

/* =========================================================
   3. Latar halaman - gradient dwi-warna ikut imej rujukan
      navy sebagai asas + cahaya ungu di kiri-atas & kanan-bawah
   ========================================================= */
[data-bs-theme=dark] body {
    background-color: var(--sikab-navy-800);
    background-image:
        radial-gradient(1200px 800px at 0% 0%, var(--sikab-glow-tl), transparent 62%),
        radial-gradient(1200px 900px at 100% 100%, var(--sikab-glow-br), transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--sikab-text);
}

[data-bs-theme=dark] .main-content,
[data-bs-theme=dark] .page-content,
[data-bs-theme=dark] #layout-wrapper {
    background: transparent;
}

/* =========================================================
   4. Sidebar - gradient ungu (atas) -> navy (bawah)
      Varian baharu "gradient-sikab" + turut dikenakan pada
      varian "gradient" sedia ada supaya konsisten.
   ========================================================= */
[data-bs-theme=dark]:is([data-sidebar=gradient-sikab], [data-sidebar=gradient]) {
    --vz-vertical-menu-bg: linear-gradient(180deg, var(--sikab-purple-800) 0%, #23204A 55%, var(--sikab-navy-800) 100%);
    --vz-vertical-menu-border: rgba(255, 255, 255, .08);
    --vz-twocolumn-menu-iconview-bg: var(--sikab-purple-800);
    --vz-vertical-menu-item-color: rgba(255, 255, 255, .62);
    --vz-vertical-menu-item-bg: rgba(255, 255, 255, .12);
    --vz-vertical-menu-item-hover-color: #fff;
    --vz-vertical-menu-item-active-color: #fff;
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, .14);
    --vz-vertical-menu-sub-item-color: rgba(255, 255, 255, .55);
    --vz-vertical-menu-sub-item-hover-color: #fff;
    --vz-vertical-menu-sub-item-active-color: #fff;
    --vz-vertical-menu-title-color: rgba(255, 255, 255, .45);
    --vz-vertical-menu-box-shadow: 0 0 24px rgba(0, 0, 0, .35);
    --vz-vertical-menu-dropdown-box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

[data-bs-theme=dark] .navbar-brand-box {
    background: transparent;
}

/* submenu terapung dalam mod ikon (sidebar-size=sm/sm-hover) */
[data-bs-theme=dark] .navbar-menu .navbar-nav .menu-dropdown {
    background: var(--sikab-surface-2);
}

/* =========================================================
   5. Topbar
   ========================================================= */
[data-bs-theme=dark] #page-topbar {
    background: rgba(23, 22, 51, .92);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: none;
}

[data-bs-theme=dark] #page-topbar .btn-topbar,
[data-bs-theme=dark] #page-topbar .topbar-head-dropdown .btn {
    color: var(--sikab-text);
}

[data-bs-theme=dark] .app-search .form-control {
    background-color: rgba(255, 255, 255, .07);
    border-color: transparent;
    color: var(--sikab-text);
}

[data-bs-theme=dark] .app-search span.search-widget-icon,
[data-bs-theme=dark] .app-search .form-control::placeholder {
    color: var(--sikab-text-muted);
}

/* =========================================================
   6. Kad, tajuk halaman, footer
   ========================================================= */
[data-bs-theme=dark] .card {
    background-color: var(--sikab-surface);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .30);
}

[data-bs-theme=dark] .card-header,
[data-bs-theme=dark] .card-footer {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .07);
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .page-title-box {
    background: transparent;
    box-shadow: none;
}

[data-bs-theme=dark] .page-title-box h4,
[data-bs-theme=dark] .page-title-box .breadcrumb-item.active {
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--sikab-text-muted);
}

[data-bs-theme=dark] .footer {
    background: transparent;
    color: var(--sikab-text-muted);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* panel lama (BS3 carry-over) yang masih dipakai beberapa skrin */
[data-bs-theme=dark] .panel,
[data-bs-theme=dark] .panel-body {
    background-color: var(--sikab-surface);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .panel-heading {
    background-color: var(--sikab-surface-2);
    border-color: rgba(255, 255, 255, .07);
    color: var(--sikab-heading);
}

/* =========================================================
   7. Jadual (Bootstrap)
   ========================================================= */
[data-bs-theme=dark] .table {
    --vz-table-color: var(--sikab-text);
    --vz-table-bg: transparent;
    --vz-table-border-color: rgba(255, 255, 255, .09);
    --vz-table-striped-bg: rgba(255, 255, 255, .035);
    --vz-table-striped-color: var(--sikab-text);
    --vz-table-hover-bg: rgba(255, 255, 255, .06);
    --vz-table-hover-color: #fff;
    --vz-table-active-bg: rgba(255, 255, 255, .08);
    --vz-table-active-color: #fff;
}

[data-bs-theme=dark] .table > thead {
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .table-light,
[data-bs-theme=dark] .table > thead.table-light th,
[data-bs-theme=dark] .table thead th.table-light {
    --vz-table-color: var(--sikab-heading);
    --vz-table-bg: var(--sikab-surface-2);
    --vz-table-border-color: rgba(255, 255, 255, .09);
    --vz-table-striped-bg: var(--sikab-surface-2);
    --vz-table-striped-color: var(--sikab-heading);
    --vz-table-hover-bg: var(--sikab-surface-3);
    --vz-table-hover-color: #fff;
    --vz-table-active-bg: var(--sikab-surface-3);
    --vz-table-active-color: #fff;
}

/* =========================================================
   8. Borang / input
   ========================================================= */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select,
[data-bs-theme=dark] .input-group-text {
    background-color: #201B3C;
    border-color: var(--sikab-border);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
    background-color: #241E42;
    border-color: #6559cc;
    color: #fff;
    box-shadow: 0 0 0 .15rem rgba(101, 89, 204, .25);
}

[data-bs-theme=dark] .form-control::placeholder {
    color: var(--sikab-text-muted);
}

[data-bs-theme=dark] .form-control:disabled,
[data-bs-theme=dark] .form-control[readonly],
[data-bs-theme=dark] .form-select:disabled {
    background-color: #191536;
    color: var(--sikab-text-muted);
}

[data-bs-theme=dark] .form-label,
[data-bs-theme=dark] .form-check-label,
[data-bs-theme=dark] .col-form-label {
    color: var(--sikab-text);
}

[data-bs-theme=dark] .form-check-input {
    background-color: #201B3C;
    border-color: var(--sikab-border);
}

/* =========================================================
   9. Dropdown, modal, offcanvas, tooltip, popover
   ========================================================= */
[data-bs-theme=dark] .dropdown-menu {
    --vz-dropdown-bg: var(--sikab-surface-2);
    --vz-dropdown-border-color: rgba(255, 255, 255, .09);
    --vz-dropdown-link-color: var(--sikab-text);
    --vz-dropdown-link-hover-color: #fff;
    --vz-dropdown-link-hover-bg: var(--sikab-surface-3);
    --vz-dropdown-link-active-color: #fff;
    --vz-dropdown-link-active-bg: var(--sikab-surface-3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

[data-bs-theme=dark] .modal-content,
[data-bs-theme=dark] .offcanvas {
    background-color: var(--sikab-surface);
    color: var(--sikab-text);
    border: 1px solid rgba(255, 255, 255, .09);
}

/* custom.css beri .modal-header gradient teal
   linear-gradient(135deg,#0d9488,#0891b2). Menetapkan
   background-color SAHAJA tidak memadai - imej gradient masih
   melukis di atasnya, jadi background-image MESTI dibatalkan.
   Gradient tidak muncul dalam getComputedStyle().backgroundColor,
   itu sebabnya imbasan warna latar terlepas ia. */
[data-bs-theme=dark] .modal-header {
    background: var(--sikab-surface-2) !important;
    background-image: none !important;
    color: var(--sikab-heading) !important;
    border-color: rgba(255, 255, 255, .09);
}

[data-bs-theme=dark] .modal-header .modal-title,
[data-bs-theme=dark] .modal-header .btn-close {
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .modal-footer {
    border-color: rgba(255, 255, 255, .09);
}

/* custom.css .alert-info guna teal #0d9488 utk latar DAN teks */
[data-bs-theme=dark] .alert-info {
    background-color: rgba(30, 155, 208, .12) !important;
    border-color: rgba(30, 155, 208, .28) !important;
    color: #C9C4E8 !important;
}

[data-bs-theme=dark] .modal-title {
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme=dark] .popover {
    --vz-popover-bg: var(--sikab-surface-2);
    --vz-popover-border-color: rgba(255, 255, 255, .09);
}

/* =========================================================
   10. Nav tabs / pills (termasuk kartik TabsX)
   ========================================================= */
[data-bs-theme=dark] .nav-tabs,
[data-bs-theme=dark] .nav-tabs-custom {
    border-bottom-color: rgba(255, 255, 255, .10);
}

[data-bs-theme=dark] .nav-tabs .nav-link {
    color: var(--sikab-text-muted);
    background: transparent;
    border-color: transparent;
}

[data-bs-theme=dark] .nav-tabs .nav-link:hover {
    color: #fff;
    border-color: transparent;
}

[data-bs-theme=dark] .nav-tabs .nav-link.active {
    color: #fff;
    background-color: var(--sikab-surface-2);
    border-color: rgba(255, 255, 255, .12) rgba(255, 255, 255, .12) transparent;
}

[data-bs-theme=dark] .tab-content {
    background: transparent;
}

/* =========================================================
   11. Pagination
   ========================================================= */
[data-bs-theme=dark] .pagination {
    --vz-pagination-bg: var(--sikab-surface-2);
    --vz-pagination-color: var(--sikab-text);
    --vz-pagination-border-color: rgba(255, 255, 255, .10);
    --vz-pagination-hover-bg: var(--sikab-surface-3);
    --vz-pagination-hover-color: #fff;
    --vz-pagination-hover-border-color: rgba(255, 255, 255, .16);
    --vz-pagination-disabled-bg: #191536;
    --vz-pagination-disabled-color: var(--sikab-text-muted);
    --vz-pagination-disabled-border-color: rgba(255, 255, 255, .08);
}

/* =========================================================
   12. Kartik GridView (kv-grid) - 160 view bergantung padanya
   ========================================================= */
[data-bs-theme=dark] .kv-grid-table,
[data-bs-theme=dark] .grid-view .table {
    color: var(--sikab-text);
}

[data-bs-theme=dark] .kv-grid-container,
[data-bs-theme=dark] .kv-grid-wrapper,
[data-bs-theme=dark] .kv-table-wrap {
    background: transparent;
}

[data-bs-theme=dark] .kv-table-header,
[data-bs-theme=dark] .kv-table-float,
[data-bs-theme=dark] .kv-float-header {
    background: var(--sikab-surface-2) !important;
    background-image: none !important;
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .kv-table-footer,
[data-bs-theme=dark] .kv-float-footer {
    background: var(--sikab-surface-2) !important;
    background-image: none !important;
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .kv-grid-table > thead > tr > th,
[data-bs-theme=dark] .grid-view thead th {
    background-color: var(--sikab-surface-2);
    border-color: rgba(255, 255, 255, .09);
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .kv-grid-table > tbody > tr > td,
[data-bs-theme=dark] .grid-view tbody td {
    border-color: rgba(255, 255, 255, .07);
}

[data-bs-theme=dark] .kv-page-summary-container,
[data-bs-theme=dark] .kv-page-summary,
[data-bs-theme=dark] .kv-grouped-row {
    background-color: var(--sikab-surface-3) !important;
    color: #fff;
}

[data-bs-theme=dark] .kv-panel-before,
[data-bs-theme=dark] .kv-panel-after,
[data-bs-theme=dark] .kv-grid-toolbar,
[data-bs-theme=dark] .kv-panel-pager {
    background: transparent;
    color: var(--sikab-text);
}

[data-bs-theme=dark] .kv-grid-panel > .card-header,
[data-bs-theme=dark] .kv-grid-panel > .panel-heading {
    background-color: var(--sikab-surface-2);
    color: var(--sikab-heading);
    border-color: rgba(255, 255, 255, .09);
}

[data-bs-theme=dark] .kv-loader,
[data-bs-theme=dark] .kv-grid-loading,
[data-bs-theme=dark] .kv-loader-overlay {
    background-color: rgba(12, 27, 58, .72) !important;
}

[data-bs-theme=dark] .kv-sort-link,
[data-bs-theme=dark] .kv-sort-link:hover {
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .kv-group-odd {
    background-color: rgba(255, 255, 255, .04) !important;
}

[data-bs-theme=dark] .kv-group-even {
    background-color: rgba(255, 255, 255, .015) !important;
}

/* baris penapis GridView */
[data-bs-theme=dark] .grid-view .filters td {
    background-color: var(--sikab-surface);
}

[data-bs-theme=dark] .summary,
[data-bs-theme=dark] .empty {
    color: var(--sikab-text-muted);
}

/* =========================================================
   13. Kartik / Yii DetailView
   ========================================================= */
[data-bs-theme=dark] .detail-view,
[data-bs-theme=dark] .kv-detail-view .table {
    color: var(--sikab-text);
}

[data-bs-theme=dark] .detail-view > tbody > tr > th,
[data-bs-theme=dark] .kv-detail-view th {
    background-color: var(--sikab-surface-2);
    color: var(--sikab-heading);
    border-color: rgba(255, 255, 255, .08);
}

[data-bs-theme=dark] .detail-view > tbody > tr > td,
[data-bs-theme=dark] .kv-detail-view td {
    border-color: rgba(255, 255, 255, .07);
}

[data-bs-theme=dark] .kv-detail-view .kv-detail-header,
[data-bs-theme=dark] .kv-detail-view .panel-heading {
    background-color: var(--sikab-surface-2);
    color: var(--sikab-heading);
}

/* =========================================================
   14. Kartik Select2 (tema krajee-bs5)
   ========================================================= */
[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-selection {
    background-color: #201B3C;
    border-color: var(--sikab-border);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-selection__rendered {
    color: var(--sikab-text);
}

[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-selection__placeholder {
    color: var(--sikab-text-muted);
}

[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-dropdown,
[data-bs-theme=dark] .select2-dropdown {
    background-color: var(--sikab-surface-2);
    border-color: rgba(255, 255, 255, .12);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-results__option {
    color: var(--sikab-text);
    background-color: transparent;
}

[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-results__option--highlighted,
[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-results__option--selected {
    background-color: var(--sikab-surface-3);
    color: #fff;
}

/* custom.css:236 memaksa bg #e0e0e0 + teks #000 !important pada
   option --highlighted (opsyen semasa kekursor bila dropdown
   dibuka, DAN opsyen yang di-hover) TANPA skop tema - kotak
   kelabu terang tercabut dari latar gelap sekeliling. Perlu
   [aria-selected] utk sepadan/atasi spesifikasi asal + !important
   utk atasi importance sama, susunan fail menang krn dimuat akhir. */
[data-bs-theme=dark] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--sikab-surface-3) !important;
    color: #fff !important;
}

[data-bs-theme=dark] .select2-container--default .select2-results__option[aria-selected=true]:hover,
[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-results__option[aria-selected=true]:hover {
    background-color: var(--sikab-surface-3) !important;
    color: #fff !important;
}

[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-results__group {
    color: var(--sikab-text-muted);
}

[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-search__field,
[data-bs-theme=dark] .select2-search--dropdown .select2-search__field {
    background-color: #201B3C !important;
    border-color: var(--sikab-border);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-selection__choice {
    background-color: var(--sikab-surface-3);
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
}

[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--sikab-text-muted);
}

/* ikon pangkah (x) "keluarkan semua item" - krajee-bs5 asal set
   color:#000 + text-shadow putih (direka utk latar putih); pada
   latar gelap warna hitam terbenam & shadow putih tak cukup, jadi
   ikon nyaris tak kelihatan. Spesifisiti (0,3,0) > krajee (0,2,0)
   jadi menang tanpa !important. */
[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-selection__clear {
    color: var(--sikab-text);
    text-shadow: none;
    opacity: 0.7;
}

[data-bs-theme=dark] .select2-container--krajee-bs5 .select2-selection__clear:hover {
    color: #fff;
    opacity: 1;
}

[data-bs-theme=dark] .select2-container--disabled .select2-selection {
    background-color: #191536;
    color: var(--sikab-text-muted);
}

/* =========================================================
   15. Kartik FileInput (bootstrap-fileinput)
   ========================================================= */
[data-bs-theme=dark] .file-input .form-control,
[data-bs-theme=dark] .file-caption-main .form-control {
    background-color: #201B3C;
    border-color: var(--sikab-border);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .file-preview {
    background-color: var(--sikab-surface-2);
    border-color: rgba(255, 255, 255, .10);
}

[data-bs-theme=dark] .file-drop-zone {
    border-color: rgba(255, 255, 255, .18);
    background-color: transparent;
    color: var(--sikab-text-muted);
}

[data-bs-theme=dark] .file-drop-zone-title {
    color: var(--sikab-text-muted);
}

[data-bs-theme=dark] .file-preview-frame,
[data-bs-theme=dark] .file-preview-frame:not(.file-preview-error):hover {
    background-color: var(--sikab-surface-3);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
}

[data-bs-theme=dark] .file-thumbnail-footer,
[data-bs-theme=dark] .file-footer-caption {
    color: var(--sikab-text-muted);
}

[data-bs-theme=dark] .file-caption-icon,
[data-bs-theme=dark] .file-caption-name {
    color: var(--sikab-text);
}

/* =========================================================
   16. Flatpickr (DateControl) + Choices.js
   ========================================================= */
[data-bs-theme=dark] .flatpickr-calendar.open,
[data-bs-theme=dark] .flatpickr-calendar.inline {
    background: var(--sikab-surface-2);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .flatpickr-months,
[data-bs-theme=dark] .flatpickr-month,
[data-bs-theme=dark] .flatpickr-weekdays,
[data-bs-theme=dark] span.flatpickr-weekday {
    background: transparent;
    color: var(--sikab-text-muted);
    fill: var(--sikab-text-muted);
}

[data-bs-theme=dark] .flatpickr-current-month input.cur-year,
[data-bs-theme=dark] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .flatpickr-monthDropdown-month {
    background: var(--sikab-surface-2);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .flatpickr-day {
    color: var(--sikab-text);
}

[data-bs-theme=dark] .flatpickr-day:hover {
    background: var(--sikab-surface-3);
    border-color: var(--sikab-surface-3);
    color: #fff;
}

[data-bs-theme=dark] .flatpickr-day.prevMonthDay,
[data-bs-theme=dark] .flatpickr-day.nextMonthDay,
[data-bs-theme=dark] .flatpickr-day.flatpickr-disabled {
    color: rgba(214, 211, 232, .35);
}

[data-bs-theme=dark] .flatpickr-prev-month svg,
[data-bs-theme=dark] .flatpickr-next-month svg {
    fill: var(--sikab-text-muted);
}

[data-bs-theme=dark] .choices__inner {
    background-color: #201B3C;
    border-color: var(--sikab-border);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .choices__list--dropdown,
[data-bs-theme=dark] .choices__list[aria-expanded] {
    background-color: var(--sikab-surface-2);
    border-color: rgba(255, 255, 255, .12);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--sikab-surface-3);
    color: #fff;
}

[data-bs-theme=dark] .choices__list--multiple .choices__item {
    background-color: var(--sikab-surface-3);
    border-color: rgba(255, 255, 255, .14);
}

/* =========================================================
   17. Carta ApexCharts - teks paksi & legend
       (tooltip sudah ikut pemboleh ubah --vz-* secara automatik)
   ========================================================= */
[data-bs-theme=dark] .apexcharts-text tspan,
[data-bs-theme=dark] .apexcharts-xaxis-label,
[data-bs-theme=dark] .apexcharts-yaxis-label,
[data-bs-theme=dark] .apexcharts-datalabel,
[data-bs-theme=dark] .apexcharts-datalabel-label,
[data-bs-theme=dark] .apexcharts-datalabel-value {
    fill: var(--sikab-text) !important;
}

[data-bs-theme=dark] .apexcharts-legend-text {
    color: var(--sikab-text) !important;
}

[data-bs-theme=dark] .apexcharts-gridline,
[data-bs-theme=dark] .apexcharts-grid line {
    stroke: rgba(255, 255, 255, .08);
}

[data-bs-theme=dark] .apexcharts-title-text,
[data-bs-theme=dark] .apexcharts-subtitle-text {
    fill: var(--sikab-heading) !important;
}

/* =========================================================
   18. Kad KPI dwi-warna (utiliti pilihan)
       Gradient diambil terus dari 4 kad atas imej rujukan.
       Cara guna: tambah kelas kpi-gradient-1 pada elemen .card
   ========================================================= */
[data-bs-theme=dark] .kpi-gradient-1,
[data-bs-theme=dark] .kpi-gradient-2,
[data-bs-theme=dark] .kpi-gradient-3,
[data-bs-theme=dark] .kpi-gradient-4 {
    border: none;
    color: #fff;
}

[data-bs-theme=dark] :is(.kpi-gradient-1, .kpi-gradient-2, .kpi-gradient-3, .kpi-gradient-4) :is(.card-header, .card-body, .card-footer, h1, h2, h3, h4, h5, h6, p, span, small) {
    color: #fff;
    background: transparent;
}

[data-bs-theme=dark] .kpi-gradient-1 { background: linear-gradient(90deg, #F2A80B 0%, #F8D71A 100%); }
[data-bs-theme=dark] .kpi-gradient-2 { background: linear-gradient(90deg, #5160DF 0%, #726CB4 100%); }
[data-bs-theme=dark] .kpi-gradient-3 { background: linear-gradient(90deg, #24AAB5 0%, #7A81C7 100%); }
[data-bs-theme=dark] .kpi-gradient-4 { background: linear-gradient(90deg, #DD5190 0%, #DF4DC9 100%); }

/* teks gelap lebih terbaca atas gradient kuning */
[data-bs-theme=dark] .kpi-gradient-1,
[data-bs-theme=dark] .kpi-gradient-1 :is(.card-header, .card-body, h1, h2, h3, h4, h5, h6, p, span, small) {
    color: #2B1A3A;
}

/* =========================================================
   19. Pembetulan warna cerah yang dikodkan keras dalam view
   ========================================================= */
[data-bs-theme=dark] .bg-white {
    background-color: var(--sikab-surface) !important;
}

[data-bs-theme=dark] .bg-light {
    background-color: var(--sikab-surface-2) !important;
}

[data-bs-theme=dark] .text-dark {
    color: var(--sikab-text) !important;
}

[data-bs-theme=dark] .text-muted {
    color: var(--sikab-text-muted) !important;
}

[data-bs-theme=dark] .border,
[data-bs-theme=dark] .border-top,
[data-bs-theme=dark] .border-bottom,
[data-bs-theme=dark] .border-start,
[data-bs-theme=dark] .border-end {
    border-color: rgba(255, 255, 255, .10) !important;
}

[data-bs-theme=dark] hr {
    border-color: rgba(255, 255, 255, .12);
    opacity: 1;
}

[data-bs-theme=dark] .alert {
    border-color: rgba(255, 255, 255, .10);
}

/* imej / thumbnail muat naik supaya tidak terapung atas latar gelap */
[data-bs-theme=dark] .img-thumbnail {
    background-color: var(--sikab-surface-2);
    border-color: rgba(255, 255, 255, .12);
}

/* =========================================================
   21. Sokongan logo untuk varian opt-in "gradient-sikab"
       Velzon hanya mengenali gradient .. gradient-4 dalam
       10 rule penukaran .logo-dark / .logo-light. Kalau
       sesiapa menukar main.php kepada data-sidebar="gradient-sikab",
       rule di bawah memastikan logo terang tetap dipakai.
   ========================================================= */
:is([data-layout=vertical], [data-layout=semibox], [data-layout=twocolumn])[data-sidebar=gradient-sikab] .logo-dark {
    display: none;
}

:is([data-layout=vertical], [data-layout=semibox], [data-layout=twocolumn])[data-sidebar=gradient-sikab] .logo-light {
    display: inline-block;
}

/* =========================================================
   22. Mengatasi gaya rumah TEAL sedia ada dalam custom.css
   ---------------------------------------------------------
   custom.css (baris 17-200) menetapkan tema teal
   linear-gradient(135deg, #0d9488, #0891b2) pada sidebar,
   card-header, panel-heading, accordion dan nav-tabs, sebahagian
   besarnya dengan !important. Rule di bawah menggantikannya
   dengan palet ungu/navy HANYA bila mod gelap aktif; mod cerah
   kekal teal seperti sedia ada.
   ========================================================= */

/* --- sidebar: teal -> ungu (atas) ke navy (bawah) --- */
[data-bs-theme=dark][data-sidebar=gradient] .navbar-menu,
[data-bs-theme=dark][data-sidebar=gradient-sikab] .navbar-menu {
    background: linear-gradient(180deg, #412C49 0%, #23204A 55%, #0C1B3A 100%) !important;
}

[data-bs-theme=dark][data-sidebar=gradient] .navbar-menu .navbar-nav .nav-link:hover,
[data-bs-theme=dark][data-sidebar=gradient-sikab] .navbar-menu .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, .12);
}

[data-bs-theme=dark][data-sidebar=gradient] .navbar-menu .navbar-nav .nav-link.active,
[data-bs-theme=dark][data-sidebar=gradient-sikab] .navbar-menu .navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, .16);
}

/* --- tajuk kad: gradient teal -> permukaan gelap rata --- */
[data-bs-theme=dark] .card-header,
[data-bs-theme=dark] .card > .card-header {
    background: var(--sikab-surface-2) !important;
    background-image: none !important;
    color: var(--sikab-heading) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

[data-bs-theme=dark] .card-header .card-title {
    color: var(--sikab-heading);
}

/* --- panel-heading (GridView kartik) --- */
[data-bs-theme=dark] .panel-heading,
[data-bs-theme=dark] .panel-info > .panel-heading,
[data-bs-theme=dark] .panel > .panel-heading {
    background: var(--sikab-surface-2) !important;
    background-image: none !important;
    color: var(--sikab-heading) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

[data-bs-theme=dark] .panel-heading .panel-title,
[data-bs-theme=dark] .panel-heading h3,
[data-bs-theme=dark] .panel-heading .panel-title i,
[data-bs-theme=dark] .panel-heading i {
    color: var(--sikab-heading) !important;
}

[data-bs-theme=dark] .kv-panel-before,
[data-bs-theme=dark] .kv-panel-after {
    background-color: rgba(255, 255, 255, .03) !important;
}

/* --- accordion --- */
[data-bs-theme=dark] .accordion-item {
    background-color: var(--sikab-surface);
    border-color: rgba(255, 255, 255, .08);
}

[data-bs-theme=dark] .accordion-button {
    background-color: var(--sikab-surface-2);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .accordion-button:not(.collapsed) {
    background: var(--sikab-surface-3);
    background-image: none;
    color: #fff;
    box-shadow: none;
}

[data-bs-theme=dark] .accordion-body {
    background-color: var(--sikab-surface);
    color: var(--sikab-text);
}

/* --- nav tabs aktif --- */
[data-bs-theme=dark] .nav-tabs .nav-link.active {
    background: var(--sikab-surface-2);
    background-image: none;
    color: #fff;
    border-color: rgba(255, 255, 255, .12) rgba(255, 255, 255, .12) transparent;
}

/* --- bayang kad: terlalu lembut untuk latar gelap --- */
[data-bs-theme=dark] .card,
[data-bs-theme=dark] .panel {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

/* =========================================================
   23. Kemasan topbar
       --vz-topbar-user-bg lalai (#31373c) kelabu dan menonjol
       sebagai kotak asing atas topbar ungu/navy.
   ========================================================= */
[data-bs-theme=dark] {
    --vz-topbar-user-bg: transparent;
}

[data-bs-theme=dark] .topbar-user .user-name-text,
[data-bs-theme=dark] .topbar-user .user-name-sub-text {
    color: var(--sikab-text);
}

/* jadikan warna ungu sidebar lebih ketara di bahagian atas,
   selaras dengan imej rujukan */
[data-bs-theme=dark][data-sidebar=gradient] .navbar-menu,
[data-bs-theme=dark][data-sidebar=gradient-sikab] .navbar-menu {
    background: linear-gradient(180deg, #4A3054 0%, #2E2650 45%, #0C1B3A 100%) !important;
}

/* =========================================================
   25. Halaman log masuk / auth
   ---------------------------------------------------------
   views/layouts/auth.php kini juga bertema gelap.
   Velzon (app.css:12608) menetapkan
   .auth-bg-cover { linear-gradient(45deg, #405189 50%, #0ab39c) }
   iaitu navy->teja. Diganti dengan gradient ungu/navy yang sama
   dengan latar dashboard supaya log masuk dan sistem sepadan.

   NOTA: warna dalam views/user/security/login.php diubah TERUS
   dalam fail itu, bukan di sini - registerCss() dimuatkan SELEPAS
   dark-theme.css jadi ia akan mengatasi apa-apa rule di sini.
   ========================================================= */
[data-bs-theme=dark] .auth-bg-cover {
    background: #0C1B3A;
    background-image:
        radial-gradient(900px 700px at 0% 0%, rgba(88, 45, 102, .90), transparent 62%),
        radial-gradient(900px 800px at 100% 100%, rgba(122, 52, 92, .90), transparent 62%);
}

[data-bs-theme=dark] .auth-bg-cover > .bg-overlay {
    opacity: .25;
}

/* .text-primary lalai (#405189) terlalu gelap atas kad gelap */
[data-bs-theme=dark] .auth-page-content .text-primary {
    color: #8E86E8 !important;
}

[data-bs-theme=dark] .auth-page-wrapper .footer,
[data-bs-theme=dark] .auth-bg-cover .footer {
    color: rgba(255, 255, 255, .55);
    background: transparent;
    border-top: none;
}

/* kad pembalut borang log masuk */
[data-bs-theme=dark] .auth-page-content .card {
    background-color: var(--sikab-surface);
    border: 1px solid rgba(255, 255, 255, .08);
}

/* kotak logo MPK mesti kekal putih - lambang berwarna perlu
   latar cerah supaya kekal jelas */
[data-bs-theme=dark] .sikab-logo-card {
    background: #fff;
}

/* medan borang usuario dalam .input-group tersuai */
[data-bs-theme=dark] .sikab-input-group .form-control {
    background-color: #201B3C;
    color: var(--sikab-text);
}

[data-bs-theme=dark] .sikab-input-group .form-control::placeholder {
    color: var(--sikab-text-muted);
}

/* =========================================================
   26. Warna baris status GridView (inline style dalam view)
   ---------------------------------------------------------
   Banyak view menetapkan warna pastel TERUS pada <tr> melalui
   rowOptions, cth views/pradaftar-online/index.php:100
       ['style' => 'background-color: #FFFDD0;']
   Pastel itu direka untuk latar putih. Atas tema gelap, teks
   terang (#D6D3E8) di atasnya jadi hampir tidak kelihatan.

   Inline style tidak boleh diatasi tanpa !important, jadi kita
   padankan nilai hex itu terus melalui pemilih atribut. Bendera
   `i` menjadikannya tidak sensitif huruf besar/kecil, supaya
   #FFFDD0 dan #fffdd0 kedua-duanya kena.

   MAKNA SEMANTIK DIKEKALKAN - hanya kepekatan diubah:
     kuning = perlu tindakan   hijau = selesai/lulus
     biru   = sedang diproses  kelabu = tiada tindakan
   ========================================================= */

/* PENTING: warna mesti dikenakan pada <tr> ITU SENDIRI dengan
   !important (important pengarang mengatasi inline biasa), dan
   <td> dijadikan telus. Kalau warna rgba lut sinar diletak pada
   <td> sahaja, pastel inline pada <tr> masih menembus dari bawah.
   Sebab itu tint di bawah LEGAP, bukan rgba. */

/* --- kuning: perlu tindakan --- */
[data-bs-theme=dark] tr[style*="#fffdd0" i],
[data-bs-theme=dark] tr[style*="#fff3cd" i],
[data-bs-theme=dark] tr[style*="#ffffcc" i] {
    background-color: #2A2446 !important;
}

[data-bs-theme=dark] tr[style*="#fffdd0" i] > *,
[data-bs-theme=dark] tr[style*="#fff3cd" i] > *,
[data-bs-theme=dark] tr[style*="#ffffcc" i] > * {
    background-color: transparent !important;
    color: #EBD6F0 !important;
}

/* --- hijau: selesai / lulus --- */
[data-bs-theme=dark] tr[style*="#d4edda" i],
[data-bs-theme=dark] tr[style*="#e9f7f5" i],
[data-bs-theme=dark] tr[style*="#e1f3f3" i] {
    background-color: #221E40 !important;
}

[data-bs-theme=dark] tr[style*="#d4edda" i] > *,
[data-bs-theme=dark] tr[style*="#e9f7f5" i] > *,
[data-bs-theme=dark] tr[style*="#e1f3f3" i] > * {
    background-color: transparent !important;
    color: #C9C4E8 !important;
}

/* --- biru: sedang diproses --- */
[data-bs-theme=dark] tr[style*="#d1e7ff" i],
[data-bs-theme=dark] tr[style*="#f0f8ff" i],
[data-bs-theme=dark] tr[style*="#f6f9fc" i] {
    background-color: #252048 !important;
}

[data-bs-theme=dark] tr[style*="#d1e7ff" i] > *,
[data-bs-theme=dark] tr[style*="#f0f8ff" i] > *,
[data-bs-theme=dark] tr[style*="#f6f9fc" i] > * {
    background-color: transparent !important;
    color: #CDCAF0 !important;
}

/* --- kelabu / putih: tiada tindakan --- */
[data-bs-theme=dark] tr[style*="#e0e0e0" i],
[data-bs-theme=dark] tr[style*="#e9ecef" i],
[data-bs-theme=dark] tr[style*="#f0f0f0" i],
[data-bs-theme=dark] tr[style*="#f9f9f9" i],
[data-bs-theme=dark] tr[style*="#f5f5f5" i],
[data-bs-theme=dark] tr[style*="#ffffff" i] {
    background-color: #262138 !important;
}

[data-bs-theme=dark] tr[style*="#e0e0e0" i] > *,
[data-bs-theme=dark] tr[style*="#e9ecef" i] > *,
[data-bs-theme=dark] tr[style*="#f0f0f0" i] > *,
[data-bs-theme=dark] tr[style*="#f9f9f9" i] > *,
[data-bs-theme=dark] tr[style*="#f5f5f5" i] > *,
[data-bs-theme=dark] tr[style*="#ffffff" i] > * {
    background-color: transparent !important;
    color: var(--sikab-text) !important;
}

/* pautan dalam baris berwarna kekal boleh dibeza */
[data-bs-theme=dark] tr[style*="background-color" i] a:not(.btn) {
    color: #A9B4FF !important;
}

/* hover mesti masih terasa walaupun latar baris dipaksa */
[data-bs-theme=dark] .table-hover > tbody > tr[style*="background-color" i]:hover {
    background-color: #3A3560 !important;
}

[data-bs-theme=dark] .table-hover > tbody > tr[style*="background-color" i]:hover > * {
    background-color: transparent !important;
    color: #fff !important;
}

/* butang dalam lajur tindakan tidak boleh diwarnakan semula
   oleh rule baris di atas */
[data-bs-theme=dark] tr[style*="background-color" i] .btn {
    color: #fff !important;
}

[data-bs-theme=dark] tr[style*="background-color" i] .btn-warning {
    color: #2B1A3A !important;
}

/* =========================================================
   27. Sempadan panel GridView
   ---------------------------------------------------------
   kartik GridView `'type' => 'info'` menghasilkan
   `card border-info` (GridViewTrait.php:1764) - sempadan biru
   #299cdb yang menonjol keras atas latar gelap.
   Semua varian dilembutkan supaya panel kelihatan sebahagian
   daripada halaman, bukan kotak amaran.
   ========================================================= */
[data-bs-theme=dark] .card:is(.border-info, .border-primary, .border-secondary,
                              .border-success, .border-warning, .border-danger,
                              .border-light, .border-dark, .border) {
    border-color: rgba(255, 255, 255, .10) !important;
}

[data-bs-theme=dark] .btn-warning {
    --vz-btn-bg: #E8A317;
    --vz-btn-border-color: #E8A317;
    --vz-btn-color: #2B1A3A;
    --vz-btn-hover-bg: #F2B532;
    --vz-btn-hover-border-color: #F2B532;
    --vz-btn-hover-color: #2B1A3A;
    --vz-btn-active-bg: #CC8F10;
    --vz-btn-active-border-color: #CC8F10;
    --vz-btn-active-color: #2B1A3A;
}

[data-bs-theme=dark] .btn-light {
    --vz-btn-bg: var(--sikab-surface-3);
    --vz-btn-border-color: rgba(255, 255, 255, .12);
    --vz-btn-color: var(--sikab-text);
    --vz-btn-hover-bg: #372F60;
    --vz-btn-hover-border-color: rgba(255, 255, 255, .18);
    --vz-btn-hover-color: #fff;
}

/* Dijana dgn semakan kontras: setiap keadaan >= 4.5:1 dengan teks putih.
   Hover DIGELAPKAN (bukan dicerahkan) supaya kontras tidak jatuh. */

/* primary: indigo - kad KPI ke-2 imej */
[data-bs-theme=dark] .btn-primary {
    --vz-btn-bg: #5160DF;
    --vz-btn-border-color: #5160DF;
    --vz-btn-hover-bg: #3B4CDB;
    --vz-btn-hover-border-color: #3B4CDB;
    --vz-btn-active-bg: #2A3DD8;
    --vz-btn-active-border-color: #2A3DD8;
}

/* success: biru langit #1E9BD0 (hue 198 - jelas BIRU, bukan hijau).
   Sejarah keputusan ini, supaya tidak diulang:
     1. #0ab39c hijau Velzon        -> ditolak, hijau
     2. #1C828A cyan digelapkan     -> ditolak, teal berlumpur
     3. #24AAB5 cyan terang imej    -> ditolak, masih terbaca hijau
     4. violet #7C4DD8 / #8A4FD8    -> TIDAK BOLEH: dE Lab hanya
        17-19 dari primary #5160DF (terlalu rapat pada mata)
   Jarak RGB Euclidean mengelirukan di sini; dE Lab perseptual
   yang menentukan. #1E9BD0 beri dE 41.5 dari peranan terdekat.
   Teks GELAP (5.50:1) supaya birunya kekal terang & bersih. */
[data-bs-theme=dark] .btn-success {
    --vz-btn-bg: #1E9BD0;
    --vz-btn-border-color: #1E9BD0;
    --vz-btn-color: #0A1B2E;
    --vz-btn-hover-bg: #35AEDF;
    --vz-btn-hover-border-color: #35AEDF;
    --vz-btn-hover-color: #0A1B2E;
    --vz-btn-active-bg: #1888B8;
    --vz-btn-active-border-color: #1888B8;
    --vz-btn-active-color: #0A1B2E;
}

/* info: ungu-magenta - dari kad KPI ke-4 imej */
[data-bs-theme=dark] .btn-info {
    --vz-btn-bg: #B93FA8;
    --vz-btn-border-color: #B93FA8;
    --vz-btn-hover-bg: #A63997;
    --vz-btn-hover-border-color: #A63997;
    --vz-btn-active-bg: #973389;
    --vz-btn-active-border-color: #973389;
}

/* danger: merah dikekalkan - amaran memusnah */
[data-bs-theme=dark] .btn-danger {
    --vz-btn-bg: #D73F26;
    --vz-btn-border-color: #D73F26;
    --vz-btn-hover-bg: #C13922;
    --vz-btn-hover-border-color: #C13922;
    --vz-btn-active-bg: #B0341F;
    --vz-btn-active-border-color: #B0341F;
}

/* secondary: ungu lembut - keluarga latar */
[data-bs-theme=dark] .btn-secondary {
    --vz-btn-bg: #4A4472;
    --vz-btn-border-color: #4A4472;
    --vz-btn-hover-bg: #403A62;
    --vz-btn-hover-border-color: #403A62;
    --vz-btn-active-bg: #373355;
    --vz-btn-active-border-color: #373355;
}

/* jarak antara butang lajur tindakan supaya tidak berhimpit */
[data-bs-theme=dark] td .btn + .btn {
    margin-left: 2px;
}

/* =========================================================
   29. Lencana (badge) - sama alasan dengan butang
   ========================================================= */
[data-bs-theme=dark] .badge.bg-warning,
[data-bs-theme=dark] .bg-warning {
    background-color: #E8A317 !important;
    color: #2B1A3A !important;
}

/* lencana status di sebelah butang - hijau stok akan menonjol
   semula kalau butang sahaja ditukar */
[data-bs-theme=dark] .badge.bg-success,
[data-bs-theme=dark] .bg-success {
    background-color: #1E9BD0 !important;
    color: #0A1B2E !important;
}

[data-bs-theme=dark] .badge.bg-info,
[data-bs-theme=dark] .bg-info {
    background-color: #B93FA8 !important;
}

[data-bs-theme=dark] .badge.bg-primary,
[data-bs-theme=dark] .bg-primary {
    background-color: #5160DF !important;
}

[data-bs-theme=dark] .badge.bg-danger,
[data-bs-theme=dark] .bg-danger {
    background-color: #D73F26 !important;
}

/* teks berwarna - versi cerah supaya terbaca atas latar gelap */
[data-bs-theme=dark] .text-success { color: #5CC2EC !important; }
[data-bs-theme=dark] .text-info    { color: #E58CD2 !important; }
[data-bs-theme=dark] .text-primary { color: #8E96EC !important; }
[data-bs-theme=dark] .text-warning { color: #F0B94A !important; }
[data-bs-theme=dark] .text-danger  { color: #F08571 !important; }


/* =========================================================
   30. Latar CERAH dikodkan keras dalam view (inline style)
   ---------------------------------------------------------
   Imbasan penuh views/ menjumpai 41 warna latar cerah unik yg
   ditulis terus dlm atribut style="". Seksyen 26 dahulu hanya
   liputi 13 daripadanya, dan HANYA pd <tr> - sebab itu borang
   dgn latar putih & teks tak nampak terus berulang.

   Blok ini meliputi KESEMUANYA, pd SEBARANG elemen (div, td,
   span, tr). Inline style hanya boleh dikalahkan oleh
   !important pengarang, jadi ia digunakan di sini.

   Makna semantik dikekalkan; setiap pasangan teks/latar
   disahkan >= 7.4:1 (jauh melepasi WCAG AA 4.5:1).

   PADANAN SUBSTRING: '#fff' ialah substring '#ffffff'/'#fff3cd'.
   Rule 3-digit diletak DAHULU, 6-digit KEMUDIAN - pd spesifisiti
   sama, rule terkemudian menang, jadi padanan 6-digit betul.
   ========================================================= */

/* --- padanan 3-digit --- */

/* neutral */
[data-bs-theme=dark] [style*="background-color: #fff" i],
[data-bs-theme=dark] [style*="background-color:#fff" i],
[data-bs-theme=dark] [style*="background: #fff" i],
[data-bs-theme=dark] [style*="background:#fff" i] {
    background-color: #262138 !important;
    color: #D6D3E8 !important;
}

/* --- padanan 6-digit --- */

/* kuning */
[data-bs-theme=dark] [style*="background-color: #ffffe0" i],
[data-bs-theme=dark] [style*="background-color:#ffffe0" i],
[data-bs-theme=dark] [style*="background: #ffffe0" i],
[data-bs-theme=dark] [style*="background:#ffffe0" i],
[data-bs-theme=dark] [style*="background-color: #fefce8" i],
[data-bs-theme=dark] [style*="background-color:#fefce8" i],
[data-bs-theme=dark] [style*="background: #fefce8" i],
[data-bs-theme=dark] [style*="background:#fefce8" i],
[data-bs-theme=dark] [style*="background-color: #fffbeb" i],
[data-bs-theme=dark] [style*="background-color:#fffbeb" i],
[data-bs-theme=dark] [style*="background: #fffbeb" i],
[data-bs-theme=dark] [style*="background:#fffbeb" i],
[data-bs-theme=dark] [style*="background-color: #fffdd0" i],
[data-bs-theme=dark] [style*="background-color:#fffdd0" i],
[data-bs-theme=dark] [style*="background: #fffdd0" i],
[data-bs-theme=dark] [style*="background:#fffdd0" i],
[data-bs-theme=dark] [style*="background-color: #fff3cd" i],
[data-bs-theme=dark] [style*="background-color:#fff3cd" i],
[data-bs-theme=dark] [style*="background: #fff3cd" i],
[data-bs-theme=dark] [style*="background:#fff3cd" i],
[data-bs-theme=dark] [style*="background-color: #fef08a" i],
[data-bs-theme=dark] [style*="background-color:#fef08a" i],
[data-bs-theme=dark] [style*="background: #fef08a" i],
[data-bs-theme=dark] [style*="background:#fef08a" i],
[data-bs-theme=dark] [style*="background-color: #fde68a" i],
[data-bs-theme=dark] [style*="background-color:#fde68a" i],
[data-bs-theme=dark] [style*="background: #fde68a" i],
[data-bs-theme=dark] [style*="background:#fde68a" i],
[data-bs-theme=dark] [style*="background-color: #fff3e0" i],
[data-bs-theme=dark] [style*="background-color:#fff3e0" i],
[data-bs-theme=dark] [style*="background: #fff3e0" i],
[data-bs-theme=dark] [style*="background:#fff3e0" i] {
    background-color: #2A2446 !important;
    color: #EBD6F0 !important;
}

/* hijau */
[data-bs-theme=dark] [style*="background-color: #f0fff0" i],
[data-bs-theme=dark] [style*="background-color:#f0fff0" i],
[data-bs-theme=dark] [style*="background: #f0fff0" i],
[data-bs-theme=dark] [style*="background:#f0fff0" i],
[data-bs-theme=dark] [style*="background-color: #f0fdf4" i],
[data-bs-theme=dark] [style*="background-color:#f0fdf4" i],
[data-bs-theme=dark] [style*="background: #f0fdf4" i],
[data-bs-theme=dark] [style*="background:#f0fdf4" i],
[data-bs-theme=dark] [style*="background-color: #f0fdfa" i],
[data-bs-theme=dark] [style*="background-color:#f0fdfa" i],
[data-bs-theme=dark] [style*="background: #f0fdfa" i],
[data-bs-theme=dark] [style*="background:#f0fdfa" i],
[data-bs-theme=dark] [style*="background-color: #d4edda" i],
[data-bs-theme=dark] [style*="background-color:#d4edda" i],
[data-bs-theme=dark] [style*="background: #d4edda" i],
[data-bs-theme=dark] [style*="background:#d4edda" i],
[data-bs-theme=dark] [style*="background-color: #bbf7d0" i],
[data-bs-theme=dark] [style*="background-color:#bbf7d0" i],
[data-bs-theme=dark] [style*="background: #bbf7d0" i],
[data-bs-theme=dark] [style*="background:#bbf7d0" i],
[data-bs-theme=dark] [style*="background-color: #e2f0e8" i],
[data-bs-theme=dark] [style*="background-color:#e2f0e8" i],
[data-bs-theme=dark] [style*="background: #e2f0e8" i],
[data-bs-theme=dark] [style*="background:#e2f0e8" i] {
    background-color: #221E40 !important;
    color: #C9C4E8 !important;
}

/* merah */
[data-bs-theme=dark] [style*="background-color: #fef2f2" i],
[data-bs-theme=dark] [style*="background-color:#fef2f2" i],
[data-bs-theme=dark] [style*="background: #fef2f2" i],
[data-bs-theme=dark] [style*="background:#fef2f2" i],
[data-bs-theme=dark] [style*="background-color: #ffe4e1" i],
[data-bs-theme=dark] [style*="background-color:#ffe4e1" i],
[data-bs-theme=dark] [style*="background: #ffe4e1" i],
[data-bs-theme=dark] [style*="background:#ffe4e1" i],
[data-bs-theme=dark] [style*="background-color: #ffcccc" i],
[data-bs-theme=dark] [style*="background-color:#ffcccc" i],
[data-bs-theme=dark] [style*="background: #ffcccc" i],
[data-bs-theme=dark] [style*="background:#ffcccc" i],
[data-bs-theme=dark] [style*="background-color: #fecaca" i],
[data-bs-theme=dark] [style*="background-color:#fecaca" i],
[data-bs-theme=dark] [style*="background: #fecaca" i],
[data-bs-theme=dark] [style*="background:#fecaca" i] {
    background-color: #2F2350 !important;
    color: #DCD2F0 !important;
}

/* biru */
[data-bs-theme=dark] [style*="background-color: #f0f8ff" i],
[data-bs-theme=dark] [style*="background-color:#f0f8ff" i],
[data-bs-theme=dark] [style*="background: #f0f8ff" i],
[data-bs-theme=dark] [style*="background:#f0f8ff" i],
[data-bs-theme=dark] [style*="background-color: #f3f6fb" i],
[data-bs-theme=dark] [style*="background-color:#f3f6fb" i],
[data-bs-theme=dark] [style*="background: #f3f6fb" i],
[data-bs-theme=dark] [style*="background:#f3f6fb" i],
[data-bs-theme=dark] [style*="background-color: #f1f5f9" i],
[data-bs-theme=dark] [style*="background-color:#f1f5f9" i],
[data-bs-theme=dark] [style*="background: #f1f5f9" i],
[data-bs-theme=dark] [style*="background:#f1f5f9" i],
[data-bs-theme=dark] [style*="background-color: #f6f9fc" i],
[data-bs-theme=dark] [style*="background-color:#f6f9fc" i],
[data-bs-theme=dark] [style*="background: #f6f9fc" i],
[data-bs-theme=dark] [style*="background:#f6f9fc" i],
[data-bs-theme=dark] [style*="background-color: #d1e7ff" i],
[data-bs-theme=dark] [style*="background-color:#d1e7ff" i],
[data-bs-theme=dark] [style*="background: #d1e7ff" i],
[data-bs-theme=dark] [style*="background:#d1e7ff" i] {
    background-color: #252048 !important;
    color: #CDCAF0 !important;
}

/* cyan */
[data-bs-theme=dark] [style*="background-color: #e9f7f5" i],
[data-bs-theme=dark] [style*="background-color:#e9f7f5" i],
[data-bs-theme=dark] [style*="background: #e9f7f5" i],
[data-bs-theme=dark] [style*="background:#e9f7f5" i],
[data-bs-theme=dark] [style*="background-color: #e4f8f8" i],
[data-bs-theme=dark] [style*="background-color:#e4f8f8" i],
[data-bs-theme=dark] [style*="background: #e4f8f8" i],
[data-bs-theme=dark] [style*="background:#e4f8f8" i],
[data-bs-theme=dark] [style*="background-color: #e1f3f3" i],
[data-bs-theme=dark] [style*="background-color:#e1f3f3" i],
[data-bs-theme=dark] [style*="background: #e1f3f3" i],
[data-bs-theme=dark] [style*="background:#e1f3f3" i],
[data-bs-theme=dark] [style*="background-color: #c6f4f4" i],
[data-bs-theme=dark] [style*="background-color:#c6f4f4" i],
[data-bs-theme=dark] [style*="background: #c6f4f4" i],
[data-bs-theme=dark] [style*="background:#c6f4f4" i],
[data-bs-theme=dark] [style*="background-color: #9ae3e3" i],
[data-bs-theme=dark] [style*="background-color:#9ae3e3" i],
[data-bs-theme=dark] [style*="background: #9ae3e3" i],
[data-bs-theme=dark] [style*="background:#9ae3e3" i],
[data-bs-theme=dark] [style*="background-color: #61dbdb" i],
[data-bs-theme=dark] [style*="background-color:#61dbdb" i],
[data-bs-theme=dark] [style*="background: #61dbdb" i],
[data-bs-theme=dark] [style*="background:#61dbdb" i] {
    background-color: #242045 !important;
    color: #C9C4E8 !important;
}

/* neutral */
[data-bs-theme=dark] [style*="background-color: #ffffff" i],
[data-bs-theme=dark] [style*="background-color:#ffffff" i],
[data-bs-theme=dark] [style*="background: #ffffff" i],
[data-bs-theme=dark] [style*="background:#ffffff" i],
[data-bs-theme=dark] [style*="background-color: #f9f9f9" i],
[data-bs-theme=dark] [style*="background-color:#f9f9f9" i],
[data-bs-theme=dark] [style*="background: #f9f9f9" i],
[data-bs-theme=dark] [style*="background:#f9f9f9" i],
[data-bs-theme=dark] [style*="background-color: #f8f9fa" i],
[data-bs-theme=dark] [style*="background-color:#f8f9fa" i],
[data-bs-theme=dark] [style*="background: #f8f9fa" i],
[data-bs-theme=dark] [style*="background:#f8f9fa" i],
[data-bs-theme=dark] [style*="background-color: #f8f8f8" i],
[data-bs-theme=dark] [style*="background-color:#f8f8f8" i],
[data-bs-theme=dark] [style*="background: #f8f8f8" i],
[data-bs-theme=dark] [style*="background:#f8f8f8" i],
[data-bs-theme=dark] [style*="background-color: #f5f5f5" i],
[data-bs-theme=dark] [style*="background-color:#f5f5f5" i],
[data-bs-theme=dark] [style*="background: #f5f5f5" i],
[data-bs-theme=dark] [style*="background:#f5f5f5" i],
[data-bs-theme=dark] [style*="background-color: #f2f2f2" i],
[data-bs-theme=dark] [style*="background-color:#f2f2f2" i],
[data-bs-theme=dark] [style*="background: #f2f2f2" i],
[data-bs-theme=dark] [style*="background:#f2f2f2" i],
[data-bs-theme=dark] [style*="background-color: #f0f0f0" i],
[data-bs-theme=dark] [style*="background-color:#f0f0f0" i],
[data-bs-theme=dark] [style*="background: #f0f0f0" i],
[data-bs-theme=dark] [style*="background:#f0f0f0" i],
[data-bs-theme=dark] [style*="background-color: #e9ecef" i],
[data-bs-theme=dark] [style*="background-color:#e9ecef" i],
[data-bs-theme=dark] [style*="background: #e9ecef" i],
[data-bs-theme=dark] [style*="background:#e9ecef" i],
[data-bs-theme=dark] [style*="background-color: #e2e3e5" i],
[data-bs-theme=dark] [style*="background-color:#e2e3e5" i],
[data-bs-theme=dark] [style*="background: #e2e3e5" i],
[data-bs-theme=dark] [style*="background:#e2e3e5" i],
[data-bs-theme=dark] [style*="background-color: #e0e0e0" i],
[data-bs-theme=dark] [style*="background-color:#e0e0e0" i],
[data-bs-theme=dark] [style*="background: #e0e0e0" i],
[data-bs-theme=dark] [style*="background:#e0e0e0" i] {
    background-color: #262138 !important;
    color: #D6D3E8 !important;
}

/* teks gelap yg dipasangkan dgn latar cerah tadi (cth
   color:#155724 atas #d4edda) - kini tidak terbaca atas tint
   gelap, jadi dicerahkan semula ikut keluarga masing-masing */

/* hijau */
[data-bs-theme=dark] [style*="color: #155724" i],
[data-bs-theme=dark] [style*="color:#155724" i],
[data-bs-theme=dark] [style*="color: #0f5132" i],
[data-bs-theme=dark] [style*="color:#0f5132" i] {
    color: #C9C4E8 !important;
}

/* kuning */
[data-bs-theme=dark] [style*="color: #856404" i],
[data-bs-theme=dark] [style*="color:#856404" i],
[data-bs-theme=dark] [style*="color: #664d03" i],
[data-bs-theme=dark] [style*="color:#664d03" i] {
    color: #EBD6F0 !important;
}

/* biru */
[data-bs-theme=dark] [style*="color: #31708f" i],
[data-bs-theme=dark] [style*="color:#31708f" i],
[data-bs-theme=dark] [style*="color: #084298" i],
[data-bs-theme=dark] [style*="color:#084298" i] {
    color: #CDCAF0 !important;
}

/* merah */
[data-bs-theme=dark] [style*="color: #721c24" i],
[data-bs-theme=dark] [style*="color:#721c24" i],
[data-bs-theme=dark] [style*="color: #842029" i],
[data-bs-theme=dark] [style*="color:#842029" i] {
    color: #DCD2F0 !important;
}

/* =========================================================
   31. Kelas berlatar cerah yang ditakrif dalam blok <style>
       di dalam fail view
   ---------------------------------------------------------
   Blok <style> dalam view berada SELEPAS dark-theme.css dalam
   susunan dokumen, TETAPI spesifisiti mengatasi susunan. Setiap
   pemilih di bawah sengaja ditambah prefix [data-bs-theme=dark]
   supaya spesifisitinya SATU TAHAP lebih tinggi daripada rule
   asal dalam view - jadi ia menang TANPA perlu !important.

   (Bandingkan seksyen 30: itu inline style="" yang HANYA boleh
   dikalahkan oleh !important.)
   ========================================================= */

/* --- lencana jenis permohonan: cyan terang #00cccc -> cyan palet.
       Muncul dalam 12 view (jbe-mubahan/mnotis/mpelan/msementara/
       mwamanah/pradaftar - update.php & view.php). Inilah "bg hijau"
       pada teks "Ubahan dan Tambahan (Tidak Berisiko)". --- */
/* (reka bentuk .row-height dipindahkan ke seksyen 35 - cip lembut) */

/* --- panel kanan "Senarai Item Semakan yang Tidak Lengkap" --- */
[data-bs-theme=dark] .blue-container {
    background-color: var(--sikab-surface-2);
    border-color: rgba(255, 255, 255, .10);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .col-right {
    background-color: var(--sikab-surface-2);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .left-column,
[data-bs-theme=dark] .right-column {
    border-color: rgba(255, 255, 255, .12) !important;
}

/* --- `table tr` ialah pemilih GLOBAL tanpa skop dalam
       _left_column_senarai_item_semakan...php - ia mewarnakan
       SETIAP <tr> pada halaman itu kepada #f8f8f8 --- */
[data-bs-theme=dark] table tr {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .09);
}

/* --- kepala/kaki jadual bayaran & peti --- */
[data-bs-theme=dark] .grid-view table thead,
[data-bs-theme=dark] table th,
[data-bs-theme=dark] tfoot td {
    background-color: var(--sikab-surface-2);
    color: var(--sikab-heading);
}

/* --- kad & tajuk dalam modul Peti --- */
[data-bs-theme=dark] .header {
    background-color: var(--sikab-surface-3);
    color: var(--sikab-heading);
}

/* --- medan baca-sahaja --- */
/* (medan readonly/disabled dipindahkan ke seksyen 36 - rupa seragam) */

/* --- jalur baris ganti (zebra striping) --- */
[data-bs-theme=dark] .custom-bordered-table tbody tr:nth-child(even),
[data-bs-theme=dark] .custom-bordered-table tbody tr:nth-child(odd),
[data-bs-theme=dark] .rak-table tr:nth-child(even),
[data-bs-theme=dark] .rak-table tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .035);
}

/* --- petak status pada dashboard (index.php) --- */
/* NOTA: site/index.php:380-389 menetapkan warna ini dengan
   !important. !important mengatasi spesifisiti, jadi prefix
   [data-bs-theme=dark] sahaja TIDAK memadai di sini - !important
   wajib supaya petak tidak kekal pastel. */
/* Jadual lampu isyarat ialah MATRIKS data - basuhan warna itu
   SENDIRI yang dibaca pengguna (pengguna x jenis permit), jadi ia
   TIDAK boleh guna latar ungu neutral spt baris borang seksyen 38.
   Ia perlukan 3 warna yg boleh dibeza.

   Hijau/amber/merah lazim TIDAK boleh dipakai: hijau ditolak, dan
   amber pd kecerahan rendah SECARA FIZIKAL menjadi coklat.
   Diganti dgn tangga eskalasi biru -> violet -> merah; ketiga-tiga
   dE Lab >= 23 (jelas berbeza) dan tiada hijau mahupun perang.
   Titik legend diselaraskan supaya metafora kekal utuh. */
[data-bs-theme=dark] .cell-hijau  { background-color: #14344E !important; color: #9AD0F0; }
[data-bs-theme=dark] .cell-kuning { background-color: #3A2A5C !important; color: #D3BFF5; }
[data-bs-theme=dark] .cell-lanjut { background-color: #3A2A5C !important; color: #D3BFF5; }
/* petak "Melebihi Tempoh" kekal MERAH (bukan rose spt baris borang) -
   ia isyarat lewat, jadi perlu amaran yg jelas. Ketepuan dinaikkan
   0.29 -> 0.48 supaya ia tidak lagi kelihatan perang/koko. */
[data-bs-theme=dark] .cell-merah  { background-color: #451821 !important; color: #F5A99E; }

[data-bs-theme=dark] .dot-hijau  { background-color: #2E86C9; }
[data-bs-theme=dark] .dot-kuning { background-color: #8B6FD4; }
[data-bs-theme=dark] .dot-lanjut { background-color: #8B6FD4; }
[data-bs-theme=dark] .dot-merah  { background-color: #C9584A; }

/* --- jadual & hover pada dashboard --- */
[data-bs-theme=dark] .table-traffic .total-cell {
    background-color: var(--sikab-surface-3);
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .table-white-div::-webkit-scrollbar-track {
    background-color: var(--sikab-surface-2);
}

[data-bs-theme=dark] .dashboard-toggle .btn-outline-primary:hover {
    background-color: var(--sikab-surface-3);
    color: #fff;
}


/* =========================================================
   32. Butang OUTLINE
   ---------------------------------------------------------
   Bootstrap beri btn-outline-* warna teks = warna asas penuh
   (cth --vz-primary #405189 navy gelap). Direka utk latar
   PUTIH; atas latar gelap ia hampir tidak kelihatan.

   Inilah punca teks "Dashboard Online" tidak nampak pada
   views/dashboard/index.php:73 (btn btn-outline-primary).

   Warna dicerahkan ikut palet; setiap satu >= 6.2:1 atas
   latar kad (#1C1836) DAN latar badan (#0C1B3A).

   Keadaan HOVER ditetapkan eksplisit: Bootstrap secara lalai
   guna warna sempadan sbg latar hover, yg kalau dibiar akan
   jadi latar CERAH + teks putih (tidak terbaca). Jadi hover
   dipaksa ke isian pekat + teks putih.
   ========================================================= */
[data-bs-theme=dark] .btn-outline-primary {
    --vz-btn-color: #8E96EC;
    --vz-btn-border-color: #5160DF;
    --vz-btn-hover-bg: #5160DF;
    --vz-btn-hover-border-color: #5160DF;
    --vz-btn-hover-color: #fff;
    --vz-btn-active-bg: #3B4CDB;
    --vz-btn-active-border-color: #3B4CDB;
    --vz-btn-active-color: #fff;
}

[data-bs-theme=dark] .btn-outline-success {
    --vz-btn-color: #5CC2EC;
    --vz-btn-border-color: #1E9BD0;
    --vz-btn-hover-bg: #1E9BD0;
    --vz-btn-hover-border-color: #1E9BD0;
    --vz-btn-hover-color: #0A1B2E;
    --vz-btn-active-bg: #1888B8;
    --vz-btn-active-border-color: #1888B8;
    --vz-btn-active-color: #0A1B2E;
}

[data-bs-theme=dark] .btn-outline-info {
    --vz-btn-color: #E58CD2;
    --vz-btn-border-color: #B93FA8;
    --vz-btn-hover-bg: #B93FA8;
    --vz-btn-hover-border-color: #B93FA8;
    --vz-btn-hover-color: #fff;
    --vz-btn-active-bg: #A63997;
    --vz-btn-active-border-color: #A63997;
    --vz-btn-active-color: #fff;
}

[data-bs-theme=dark] .btn-outline-warning {
    --vz-btn-color: #F0B94A;
    --vz-btn-border-color: #E8A317;
    --vz-btn-hover-bg: #E8A317;
    --vz-btn-hover-border-color: #E8A317;
    --vz-btn-hover-color: #2B1A3A;
    --vz-btn-active-bg: #CC8F10;
    --vz-btn-active-border-color: #CC8F10;
    --vz-btn-active-color: #2B1A3A;
}

[data-bs-theme=dark] .btn-outline-danger {
    --vz-btn-color: #F08571;
    --vz-btn-border-color: #D73F26;
    --vz-btn-hover-bg: #D73F26;
    --vz-btn-hover-border-color: #D73F26;
    --vz-btn-hover-color: #fff;
    --vz-btn-active-bg: #C13922;
    --vz-btn-active-border-color: #C13922;
    --vz-btn-active-color: #fff;
}

[data-bs-theme=dark] .btn-outline-secondary {
    --vz-btn-color: #A9A3C9;
    --vz-btn-border-color: #4A4472;
    --vz-btn-hover-bg: #4A4472;
    --vz-btn-hover-border-color: #4A4472;
    --vz-btn-hover-color: #fff;
}

[data-bs-theme=dark] .btn-outline-dark,
[data-bs-theme=dark] .btn-outline-light {
    --vz-btn-color: var(--sikab-text);
    --vz-btn-border-color: rgba(255, 255, 255, .22);
    --vz-btn-hover-bg: var(--sikab-surface-3);
    --vz-btn-hover-border-color: rgba(255, 255, 255, .30);
    --vz-btn-hover-color: #fff;
}

/* =========================================================
   33. views/site/index.php - Dashboard Online (tema lama)
   ---------------------------------------------------------
   Fail ini bawa tema teal/putihnya SENDIRI dalam blok <style>
   (baris 131-467), lengkap dgn pemboleh ubah CSS sendiri pada
   :root. Ia tidak pernah ikut tema gelap.

   :root dan [data-bs-theme=dark] kedua-duanya (0,1,0) dan
   blok <style> view datang KEMUDIAN - jadi view menang.
   Guna :root[data-bs-theme=dark] (0,2,0) utk mengatasinya.
   ========================================================= */
:root[data-bs-theme=dark] {
    --card-bg: var(--sikab-surface);
    --card-shadow: 0 8px 28px rgba(0, 0, 0, .35);
    --card-shadow-hover: 0 12px 36px rgba(0, 0, 0, .45);
}

/* kad pembalut jadual */
[data-bs-theme=dark] .table-white-div {
    background: var(--sikab-surface);
    border: 1px solid rgba(255, 255, 255, .07);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* tajuk h4 guna gradient sbg WARNA TEKS (background-clip:text).
   Gradient gelap akan jadikan teks halimunan - jadi gradient
   TERANG digunakan di sini, bukan warna permukaan. */
[data-bs-theme=dark] .table-white-div h4 {
    background: linear-gradient(135deg, #5CC2EC 0%, #8E96EC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-bs-theme=dark] .table-white-div h5 {
    color: var(--sikab-heading);
    border-bottom-color: rgba(255, 255, 255, .12);
}

/* jadual dalam site/index */
[data-bs-theme=dark] .table-white-div .table {
    background-color: transparent;
    box-shadow: none;
}

[data-bs-theme=dark] .table-white-div .table th,
[data-bs-theme=dark] .table-white-div .table td {
    border-bottom-color: rgba(255, 255, 255, .08);
}

[data-bs-theme=dark] .table-white-div .table th {
    background: var(--sikab-surface-3);
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .table-white-div .table tbody tr:hover {
    background-color: rgba(255, 255, 255, .06);
}

/* lencana di sini guna `background: linear-gradient(...)`, jadi
   background-color sahaja TIDAK memadai - imej gradient masih
   melukis di atasnya. background-image mesti dibatalkan. */
[data-bs-theme=dark] .table-white-div .badge.bg-success,
[data-bs-theme=dark] .table-white-div .badge.bg-danger,
[data-bs-theme=dark] .table-white-div .badge.bg-warning {
    background-image: none !important;
    box-shadow: none;
}

/* jadual lampu isyarat */
[data-bs-theme=dark] .table-traffic .user-cell {
    color: var(--sikab-heading);
}

[data-bs-theme=dark] .table-traffic .num-cell {
    color: var(--sikab-text-muted);
}

[data-bs-theme=dark] .table-traffic .total-cell,
[data-bs-theme=dark] .table-traffic tfoot th,
[data-bs-theme=dark] .table-traffic tfoot td {
    color: #C9C4E8;
}

[data-bs-theme=dark] .table-traffic .total-cell {
    background: var(--sikab-surface-3) !important;
}

/* pautan dalam petak status - warna gelap asal jadi tidak
   terbaca atas tint gelap seksyen 31 */
[data-bs-theme=dark] .cell-hijau a  { color: #9AD0F0; }
[data-bs-theme=dark] .cell-kuning a { color: #D3BFF5; }
[data-bs-theme=dark] .cell-merah a  { color: #F5A99E; }
[data-bs-theme=dark] .cell-lanjut a { color: #D3BFF5; }

/* petunjuk warna (legend) */
[data-bs-theme=dark] .color-legend {
    background: var(--sikab-surface-2);
    border-color: rgba(255, 255, 255, .10);
    color: var(--sikab-text);
}

[data-bs-theme=dark] .color-legend-dot {
    border-color: rgba(255, 255, 255, .18);
}

/* suis Dashboard Utama / Dashboard Online */
[data-bs-theme=dark] .dashboard-toggle {
    background: var(--sikab-surface-2);
    border-color: rgba(255, 255, 255, .10);
    box-shadow: none;
}

[data-bs-theme=dark] .dashboard-toggle .btn-outline-primary {
    color: var(--sikab-text);
    background: transparent;
}

[data-bs-theme=dark] .dashboard-toggle .btn-outline-primary:hover {
    color: #fff;
    background: var(--sikab-surface-3);
}

[data-bs-theme=dark] .dashboard-toggle .btn-primary {
    background: linear-gradient(135deg, #5160DF 0%, #726CB4 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(81, 96, 223, .35);
}


/* =========================================================
   34. Menghapuskan baki HIJAU yang dikodkan keras
   ---------------------------------------------------------
   Butang ini menetapkan hijau terus dalam atribut style="",
   bukan melalui kelas Bootstrap - jadi pemetaan btn-success
   tidak menyentuhnya. Kesemuanya dipetakan ke cyan palet.

   Sebahagiannya menukar warna melalui JS pada hover
   (onmouseover="this.style.backgroundColor='#45a049'"), yang
   menulis inline style. !important pengarang tetap mengatasi
   inline tanpa !important, jadi kedua-dua keadaan terliput.
   ========================================================= */

/* butang "Pilih Fail" (#4CAF50) + keadaan hover JS (#45a049)
   pradaftar-om-item-semakan/_form_..._upload.php:87-89 */
[data-bs-theme=dark] [style*="background-color: #4CAF50" i],
[data-bs-theme=dark] [style*="background-color:#4CAF50" i],
[data-bs-theme=dark] [style*="background-color: #45a049" i],
[data-bs-theme=dark] [style*="background-color:#45a049" i],
[data-bs-theme=dark] [style*="background: #4CAF50" i],
[data-bs-theme=dark] [style*="background:#4CAF50" i] {
    background-color: #1E9BD0 !important;
    color: #0A1B2E !important;
}

/* butang "Kembalikan kepada Pemohon" (#28a745 / hover #218838)
   pradaftar/_form_2024_partials/_right_column_...:90-98 */
[data-bs-theme=dark] [style*="background-color: #28a745" i],
[data-bs-theme=dark] [style*="background-color:#28a745" i],
[data-bs-theme=dark] [style*="background-color: #218838" i],
[data-bs-theme=dark] [style*="background-color:#218838" i] {
    background-color: #1E9BD0 !important;
    color: #0A1B2E !important;
}

/* penanda status hijau (bukan butang) - kekal sebagai penanda
   tetapi ikut cyan palet supaya tiada hijau tertinggal */
[data-bs-theme=dark] [style*="color: #28a745" i],
[data-bs-theme=dark] [style*="color:#28a745" i],
[data-bs-theme=dark] [style*="color: #059669" i],
[data-bs-theme=dark] [style*="color:#059669" i],
[data-bs-theme=dark] [style*="color: #198754" i],
[data-bs-theme=dark] [style*="color:#198754" i] {
    color: #5CC2EC !important;
}

/* teks teal GELAP guna sbg warna tajuk - direka utk latar putih.
   Cth pradaftar/update.php:64 "No. Fail Pendaftaran" (#0f7474)
   hanya 3.06:1 atas kad gelap. Dicerahkan ke cyan palet. */
[data-bs-theme=dark] [style*="color: #0f7474" i],
[data-bs-theme=dark] [style*="color:#0f7474" i],
[data-bs-theme=dark] [style*="color: #0f766e" i],
[data-bs-theme=dark] [style*="color:#0f766e" i],
[data-bs-theme=dark] [style*="color: #0d9488" i],
[data-bs-theme=dark] [style*="color:#0d9488" i],
[data-bs-theme=dark] [style*="color: #00cccc" i],
[data-bs-theme=dark] [style*="color:#00cccc" i],
[data-bs-theme=dark] [style*="color: #20c997" i],
[data-bs-theme=dark] [style*="color:#20c997" i] {
    color: #5CC2EC !important;
}

/* sempadan kad modul Peti (#2EA3A3) */
[data-bs-theme=dark] [style*="#2EA3A3" i] {
    border-color: rgba(30, 155, 208, .38) !important;
}

/* sel penanda rak (#4CAF50) - peti/partials/_rak-table.php:178 */
[data-bs-theme=dark] .rak-table [style*="#4CAF50" i] {
    background-color: #1E9BD0 !important;
}

/* =========================================================
   35. Lencana jenis permohonan - reka bentuk semula
   ---------------------------------------------------------
   Sebelum ini `.row-height` ialah blok PEJAL selebar 1/3 kepala
   kad (#00cccc asal, kemudian cyan). Blok tebal begitu menarik
   perhatian lebih daripada tajuk halaman itu sendiri, dan itulah
   yang terus terbaca sebagai "kotak hijau".

   Diganti dengan cip lembut: latar lut sinar + teks cyan cerah
   + sempadan nipis. Ia masih menonjol sebagai label jenis
   permohonan, tetapi tidak lagi bersaing dengan tajuk.

   Muncul dalam 12 view (jbe-mubahan / mnotis / mpelan /
   msementara / mwamanah / pradaftar, setiap satu update+view).
   ========================================================= */
[data-bs-theme=dark] .row-height {
    background-color: rgba(129, 140, 248, .15);
    color: #A9B4FF;
    border: 1px solid rgba(129, 140, 248, .34);
    border-radius: 999px;
    height: auto;
    padding: 4px 16px;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: none;
}


/* =========================================================
   36. Medan TIDAK AKTIF (disabled / readonly) - satu rupa
   ---------------------------------------------------------
   Sebelum ini medan disabled dapat DUA rupa berbeza secara
   tidak sengaja, bergantung cara ia ditulis dalam view:

     a) ['disabled' => true]  sahaja
        -> jatuh pada :disabled saya = #191536 (LEBIH GELAP
           daripada medan aktif - nampak seperti medan aktif)

     b) ['disabled' => true] + style sebaris
        'color:#212529;-webkit-text-fill-color:#212529;
         opacity:1;background-color:#e9ecef;cursor:not-allowed;'
        -> #e9ecef dipetakan seksyen 30 = #262138

   Contoh kedua-dua ada bersebelahan dalam
   jbe-mubahan/_form_2024.php:246-257 (Jenis Permohonan &
   Kategori vs Sub Kategori & Tingkat).

   BUG TERSEMBUNYI dalam (b): `-webkit-text-fill-color:#212529`
   mengatasi `color` dalam Chrome. Seksyen 30 hanya menetapkan
   `color`, jadi sebaik sahaja medan itu ADA NILAI, teksnya
   #212529 atas #262138 = 1.00:1 - luminans serupa, langsung
   tidak terbaca. Medan dalam tangkapan skrin kebetulan kosong
   jadi ia tidak kelihatan.

   Rupa seragam di bawah: latar lebih KELABU (nyahtepu), teks
   lebih malap, sempadan lebih lembut. Ketiga-tiga isyarat
   digabung kerana latar sahaja hanya beza 1.06x luminans
   daripada medan aktif - terlalu halus untuk dipercayai.
   ========================================================= */
[data-bs-theme=dark] .form-control:disabled,
[data-bs-theme=dark] .form-select:disabled,
[data-bs-theme=dark] .form-control[readonly],
[data-bs-theme=dark] .form-select[readonly],
[data-bs-theme=dark] input:disabled,
[data-bs-theme=dark] select:disabled,
[data-bs-theme=dark] textarea:disabled,
[data-bs-theme=dark] input[readonly],
[data-bs-theme=dark] textarea[readonly],
[data-bs-theme=dark] .readonly-field,
[data-bs-theme=dark] fieldset:disabled .form-control,
[data-bs-theme=dark] fieldset:disabled .form-select {
    background-color: #262138 !important;
    background-image: none !important;
    color: #A9A3C9 !important;
    -webkit-text-fill-color: #A9A3C9 !important;
    border-color: rgba(255, 255, 255, .06) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* placeholder dalam medan tidak aktif - lebih malap lagi */
[data-bs-theme=dark] .form-control:disabled::placeholder,
[data-bs-theme=dark] input[readonly]::placeholder,
[data-bs-theme=dark] textarea[readonly]::placeholder {
    color: #6F6992 !important;
    -webkit-text-fill-color: #6F6992 !important;
}

/* Select2 versi tidak aktif */
[data-bs-theme=dark] .select2-container--disabled .select2-selection,
[data-bs-theme=dark] .select2-container--krajee-bs5.select2-container--disabled .select2-selection {
    background-color: #262138 !important;
    border-color: rgba(255, 255, 255, .06) !important;
    cursor: not-allowed;
}

[data-bs-theme=dark] .select2-container--disabled .select2-selection__rendered {
    color: #A9A3C9 !important;
    -webkit-text-fill-color: #A9A3C9 !important;
}

/* kotak semak / radio tidak aktif */
[data-bs-theme=dark] .form-check-input:disabled,
[data-bs-theme=dark] .form-check-input[readonly] {
    background-color: #262138;
    border-color: rgba(255, 255, 255, .10);
    opacity: .7;
    cursor: not-allowed;
}

[data-bs-theme=dark] .form-check-input:disabled ~ .form-check-label {
    color: #8A84AD;
    opacity: 1;
}

/* input-group di sebelah medan tidak aktif ikut sama, kalau tidak
   ia kekal terang dan medan nampak separuh aktif */
[data-bs-theme=dark] .input-group:has(> :is(input, select, textarea):disabled) .input-group-text,
[data-bs-theme=dark] .input-group:has(> :is(input, select, textarea)[readonly]) .input-group-text {
    background-color: #262138;
    border-color: rgba(255, 255, 255, .06);
    color: #8A84AD;
}


/* =========================================================
   37. BUTANG tidak aktif (disabled)
   ---------------------------------------------------------
   Bootstrap mentakrifkan --vz-btn-disabled-bg / -color /
   -border-color SECARA BERASINGAN bagi setiap varian
   (bootstrap.css: .btn-success -> --vz-btn-disabled-bg:#0ab39c).

   Semua override warna butang saya sebelum ini hanya menyentuh
   --vz-btn-bg / -hover-bg / -active-bg, JADI SETIAP butang
   disabled di seluruh sistem masih memakai warna asal Velzon.
   Itulah sebabnya butang "Masuk Fail Ke Dalam Peti : (Tiada
   Peti)" kekal HIJAU walaupun btn-success sudah ditukar ke biru
   - butang itu ada atribut `disabled`.

   Butang tidak aktif tidak sepatutnya mengekalkan warna penuh:
   ia diberi rupa lengai yang SAMA dengan medan tidak aktif
   (seksyen 36), supaya "tidak aktif" ada satu bahasa visual di
   seluruh sistem.
   ========================================================= */
[data-bs-theme=dark] .btn:disabled,
[data-bs-theme=dark] .btn.disabled,
[data-bs-theme=dark] fieldset:disabled .btn {
    --vz-btn-disabled-bg: #262138;
    --vz-btn-disabled-border-color: rgba(255, 255, 255, .06);
    --vz-btn-disabled-color: #A9A3C9;
    --vz-btn-disabled-opacity: 1;
    background-color: #262138 !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, .06) !important;
    color: #A9A3C9 !important;
    -webkit-text-fill-color: #A9A3C9 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* butang outline tidak aktif - kekal telus, cuma malapkan */
[data-bs-theme=dark] :is(.btn-outline-primary, .btn-outline-success,
                         .btn-outline-info, .btn-outline-warning,
                         .btn-outline-danger, .btn-outline-secondary,
                         .btn-outline-dark, .btn-outline-light):disabled {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .10) !important;
    color: #8A84AD !important;
    -webkit-text-fill-color: #8A84AD !important;
}


/* =========================================================
   38. Jalur aksen baris - makna TANPA basuhan warna
   ---------------------------------------------------------
   Latar baris berhue (biru/rose/amber) terus dibaca sebagai
   "hijau" dan "perang" walaupun hue-nya betul secara teknikal.
   Sebabnya kontras serentak: kad sekeliling hue 250 (ungu), jadi
   basuhan hue 205 kelihatan condong hijau, dan basuhan gelap
   bertepu sederhana kelihatan maroon/coklat.

   Latar baris kini KEKAL dalam jalur ungu kad (hue 247-256),
   yang mustahil dibaca sbg hijau atau perang. Makna dibawa oleh
   JALUR AKSEN KIRI 4px - garisan nipis, bukan basuhan, jadi
   warna tepunya tidak boleh tersalah baca sebagai latar.

   Bonus kebolehcapaian: status tidak lagi bergantung pada warna
   latar semata-mata.
   ========================================================= */

/* kuning */
[data-bs-theme=dark] tr[style*="background-color: #ffffe0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#ffffe0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #ffffe0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#ffffe0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #fefce8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#fefce8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #fefce8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#fefce8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #fffbeb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#fffbeb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #fffbeb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#fffbeb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #fffdd0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#fffdd0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #fffdd0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#fffdd0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #fff3cd" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#fff3cd" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #fff3cd" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#fff3cd" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #fef08a" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#fef08a" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #fef08a" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#fef08a" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #fde68a" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#fde68a" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #fde68a" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#fde68a" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #fff3e0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#fff3e0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #fff3e0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#fff3e0" i] > *:first-child {
    border-left: 4px solid #E8A317 !important;
}

/* hijau */
[data-bs-theme=dark] tr[style*="background-color: #f0fff0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#f0fff0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #f0fff0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#f0fff0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #f0fdf4" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#f0fdf4" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #f0fdf4" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#f0fdf4" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #f0fdfa" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#f0fdfa" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #f0fdfa" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#f0fdfa" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #d4edda" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#d4edda" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #d4edda" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#d4edda" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #bbf7d0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#bbf7d0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #bbf7d0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#bbf7d0" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #e2f0e8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#e2f0e8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #e2f0e8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#e2f0e8" i] > *:first-child {
    border-left: 4px solid #1E9BD0 !important;
}

/* merah */
[data-bs-theme=dark] tr[style*="background-color: #fef2f2" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#fef2f2" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #fef2f2" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#fef2f2" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #ffe4e1" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#ffe4e1" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #ffe4e1" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#ffe4e1" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #ffcccc" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#ffcccc" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #ffcccc" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#ffcccc" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #fecaca" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#fecaca" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #fecaca" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#fecaca" i] > *:first-child {
    border-left: 4px solid #D73F26 !important;
}

/* biru */
[data-bs-theme=dark] tr[style*="background-color: #f0f8ff" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#f0f8ff" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #f0f8ff" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#f0f8ff" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #f3f6fb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#f3f6fb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #f3f6fb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#f3f6fb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #f1f5f9" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#f1f5f9" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #f1f5f9" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#f1f5f9" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #f6f9fc" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#f6f9fc" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #f6f9fc" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#f6f9fc" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #d1e7ff" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#d1e7ff" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #d1e7ff" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#d1e7ff" i] > *:first-child {
    border-left: 4px solid #5160DF !important;
}

/* cyan */
[data-bs-theme=dark] tr[style*="background-color: #e9f7f5" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#e9f7f5" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #e9f7f5" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#e9f7f5" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #e4f8f8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#e4f8f8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #e4f8f8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#e4f8f8" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #e1f3f3" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#e1f3f3" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #e1f3f3" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#e1f3f3" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #c6f4f4" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#c6f4f4" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #c6f4f4" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#c6f4f4" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #9ae3e3" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#9ae3e3" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #9ae3e3" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#9ae3e3" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color: #61dbdb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background-color:#61dbdb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background: #61dbdb" i] > *:first-child,
[data-bs-theme=dark] tr[style*="background:#61dbdb" i] > *:first-child {
    border-left: 4px solid #1E9BD0 !important;
}


/* =========================================================
   39. Varian -subtle / -emphasis Bootstrap
   ---------------------------------------------------------
   Bootstrap ada set pemboleh ubah KETIGA di sebelah warna asas
   dan warna butang: --vz-<peranan>-bg-subtle / -border-subtle /
   -text-emphasis. Ia dipakai oleh kelas `bg-*-subtle`,
   `text-*-emphasis` dan `border-*-subtle` (57 penggunaan dalam
   views/).

   Saya tidak pernah menyentuhnya, jadi:
     - `bg-success-subtle` kekal rgba(10,179,156,.15) = HIJAU TEAL
     - `bg-info-subtle` kekal BIRU sedangkan `.text-info` sudah
       saya tukar ke MAGENTA -> lencana "Cara isi : PTD001..."
       jadi latar biru + teks magenta, pasangan yang bercanggah

   Semuanya kini diselaraskan dgn palet sebenar. Setiap pasangan
   teks/latar disahkan >= 5.4:1.
   ========================================================= */
[data-bs-theme=dark] {
    --vz-primary-bg-subtle: rgba(81, 96, 223, .15);
    --vz-primary-border-subtle: rgba(81, 96, 223, .32);
    --vz-primary-text-emphasis: #8E96EC;

    --vz-success-bg-subtle: rgba(30, 155, 208, .15);
    --vz-success-border-subtle: rgba(30, 155, 208, .32);
    --vz-success-text-emphasis: #5CC2EC;

    --vz-info-bg-subtle: rgba(185, 63, 168, .15);
    --vz-info-border-subtle: rgba(185, 63, 168, .32);
    --vz-info-text-emphasis: #E58CD2;

    --vz-warning-bg-subtle: rgba(232, 163, 23, .15);
    --vz-warning-border-subtle: rgba(232, 163, 23, .32);
    --vz-warning-text-emphasis: #F0B94A;

    --vz-danger-bg-subtle: rgba(215, 63, 38, .15);
    --vz-danger-border-subtle: rgba(215, 63, 38, .32);
    --vz-danger-text-emphasis: #F08571;

    --vz-light-bg-subtle: var(--sikab-surface-2);
    --vz-light-border-subtle: rgba(255, 255, 255, .10);
    --vz-dark-bg-subtle: var(--sikab-surface-3);
    --vz-dark-border-subtle: rgba(255, 255, 255, .14);
}

/* kelas teks yg berpasangan dgn latar -subtle */
[data-bs-theme=dark] .text-primary-emphasis { color: #8E96EC !important; }
[data-bs-theme=dark] .text-success-emphasis { color: #5CC2EC !important; }
[data-bs-theme=dark] .text-info-emphasis    { color: #E58CD2 !important; }
[data-bs-theme=dark] .text-warning-emphasis { color: #F0B94A !important; }
[data-bs-theme=dark] .text-danger-emphasis  { color: #F08571 !important; }

/* =========================================================
   40. Panel kumpulan dalam borang
   ---------------------------------------------------------
   Beberapa view membungkus kumpulan medan dengan
   `style="border:1px solid #ccc; ...; background-color:#f0f0f0;"`
   (pradaftar/_form_2024.php:496,545,612,653 + laporan/kpi.php +
   laporan/wangamanah.php).

   `#f0f0f0` jatuh dalam keluarga NEUTRAL seksyen 30, yang
   memetakannya ke #262138 - iaitu warna medan disabled yang SAMA
   PERSIS. Jadi kotak kumpulan kelihatan seperti satu medan
   disabled gergasi, mengelirukan.

   Warna sahaja tidak memadai: sebarang tint halus hanya beza
   ~1.02x luminans dari #262138. Jadi panel diberi kedudukan
   TERSENDIRI dalam tangga kedalaman - LEBIH GELAP daripada kad -
   plus sempadan yang jelas, supaya ia dibaca sebagai bekas
   kumpulan, bukan kawalan:

     panel #171331 < kad #1C1836 < medan aktif #201B3C
                                 < medan disabled #262138
   ========================================================= */
[data-bs-theme=dark] [style*="background-color: #f0f0f0" i],
[data-bs-theme=dark] [style*="background-color:#f0f0f0" i],
[data-bs-theme=dark] [style*="background: #f0f0f0" i],
[data-bs-theme=dark] [style*="background:#f0f0f0" i] {
    background-color: #171331 !important;
    border-color: rgba(129, 140, 248, .22) !important;
    color: var(--sikab-text) !important;
    border-radius: 8px;
}

/* --- Kumpulan medan yang dibungkus sebagai ALERT ---
   20 tempat (12 fail) guna `class="alert alert-info p-3 mb-3"`
   sebagai BEKAS KUMPULAN medan, bukan mesej - cth panel Lot/PTD
   dalam pradaftar/_form_2024.php:737. Ia mewarisi latar biru
   alert, jadi kumpulan medan kelihatan spt kotak notis.

   Dibezakan secara SEMANTIK guna :has() - alert yang mengandungi
   medan borang ialah panel, bukan amaran. Alert mesej sebenar
   (~5 tempat, isinya teks/ikon) tidak tersentuh. Ini lebih
   selamat daripada menyenaraikan fail/baris satu per satu. */
[data-bs-theme=dark] .alert:has(> .form-group),
[data-bs-theme=dark] .alert:has(.form-control),
[data-bs-theme=dark] .alert:has(.form-select) {
    background-color: #171331 !important;
    border-color: rgba(129, 140, 248, .22) !important;
    color: var(--sikab-text) !important;
    border-radius: 8px;
}

/* label & teks dalam panel tersebut kembali neutral, bukan warna alert */
[data-bs-theme=dark] .alert:has(.form-control) :is(label, .form-label, .control-label),
[data-bs-theme=dark] .alert:has(.form-select) :is(label, .form-label, .control-label) {
    color: var(--sikab-text) !important;
}

/* =========================================================
   24. Pengecualian cetakan
   ---------------------------------------------------------
   Dua laluan cetakan wujud dalam sistem:
     (a) views/layouts/print.php - TIDAK menetapkan data-bs-theme,
         jadi ia tidak pernah mewarisi tema gelap langsung.
     (b) Ctrl+P / window.print() dari skrin biasa (printdiv) -
         di sini <html> MEMANG bertema gelap, jadi blok ini
         memaksanya kembali ke kertas putih.

   Velzon (app.css:3094) sudah menyembunyikan .app-menu,
   .navbar-header, .footer dan .page-title-box semasa cetak,
   jadi blok ini hanya perlu menangani WARNA.

   Diletakkan PALING AKHIR supaya mengatasi seksyen 22 yang
   menggunakan !important pada tajuk kad dan panel.
   ========================================================= */
@media print {
    [data-bs-theme=dark],
    [data-bs-theme=dark] body {
        background: #fff !important;
        background-image: none !important;
        color: #000 !important;
    }

    /* permukaan */
    [data-bs-theme=dark] :is(.card, .card-header, .card-body, .card-footer,
                             .panel, .panel-body, .panel-heading, .panel-footer,
                             .accordion-item, .accordion-button, .accordion-body,
                             .modal-content, .table, .kv-grid-table, .detail-view,
                             .kv-panel-before, .kv-panel-after, .tab-content,
                             .nav-tabs .nav-link.active) {
        background: #fff !important;
        background-image: none !important;
        color: #000 !important;
        border-color: #999 !important;
        box-shadow: none !important;
    }

    /* sel jadual */
    [data-bs-theme=dark] :is(.table, .kv-grid-table, .detail-view) :is(th, td),
    [data-bs-theme=dark] :is(.kv-page-summary, .kv-grouped-row, .kv-table-header,
                             .kv-table-footer, .kv-float-header, .kv-float-footer) {
        background: #fff !important;
        background-image: none !important;
        color: #000 !important;
        border-color: #999 !important;
    }

    /* teks am - termasuk yang dikelabukan dalam mod gelap */
    [data-bs-theme=dark] :is(h1, h2, h3, h4, h5, h6, p, span, small, label, li, a,
                             .card-title, .panel-title, .form-label, .col-form-label,
                             .text-muted, .text-dark, .summary, .breadcrumb-item) {
        color: #000 !important;
    }

    /* medan borang - nilai mesti kekal terbaca di atas kertas */
    [data-bs-theme=dark] :is(.form-control, .form-select, .input-group-text,
                             .select2-container--krajee-bs5 .select2-selection,
                             .select2-container--krajee-bs5 .select2-selection__rendered) {
        background: #fff !important;
        color: #000 !important;
        border-color: #999 !important;
    }

    /* medan tidak aktif (seksyen 36) - -webkit-text-fill-color MESTI
       direset, kalau tidak teksnya kekal malap di atas kertas putih */
    [data-bs-theme=dark] :is(.form-control, .form-select, input, select, textarea,
                             .readonly-field, .select2-selection__rendered) {
        -webkit-text-fill-color: #000 !important;
    }

    /* kad KPI dwi-warna: gradient tidak dicetak, jadi teks putih
       akan hilang di atas kertas putih */
    [data-bs-theme=dark] :is(.kpi-gradient-1, .kpi-gradient-2, .kpi-gradient-3, .kpi-gradient-4) {
        background: #fff !important;
        background-image: none !important;
        color: #000 !important;
        border: 1px solid #999 !important;
    }

    /* keturunan: warna sahaja, JANGAN beri sempadan sendiri
       (kalau tidak setiap teks dalam kad muncul berkotak) */
    [data-bs-theme=dark] :is(.kpi-gradient-1, .kpi-gradient-2, .kpi-gradient-3, .kpi-gradient-4) * {
        background: transparent !important;
        background-image: none !important;
        color: #000 !important;
        border: none !important;
    }

    /* pagination */
    [data-bs-theme=dark] .page-link,
    [data-bs-theme=dark] .page-item.active .page-link {
        background: #fff !important;
        background-image: none !important;
        color: #000 !important;
        border-color: #999 !important;
    }

    /* jalur aksen baris (seksyen 38) - jangan cetak */
    [data-bs-theme=dark] tr[style*="background" i] > *:first-child {
        border-left: none !important;
    }

    /* baris status berwarna (seksyen 26) - kertas mesti putih */
    [data-bs-theme=dark] tr[style*="background-color" i] > *,
    [data-bs-theme=dark] tr[style*="background-color" i] a:not(.btn) {
        background-color: #fff !important;
        color: #000 !important;
    }

    /* seksyen 30: latar cerah inline pada SEBARANG elemen (bukan
       hanya <tr>), termasuk <div>/<td>/<span> */
    [data-bs-theme=dark] [style*="background-color" i]:not(.btn),
    [data-bs-theme=dark] [style*="background:" i]:not(.btn) {
        background-color: #fff !important;
        background-image: none !important;
        color: #000 !important;
    }

    /* seksyen 31: kelas dari blok <style> dalam view. Seksyen itu
       menang melalui spesifisiti (tanpa !important), jadi senarai
       :is() blok cetakan MESTI menyebut nama kelasnya secara
       eksplisit - kalau tidak panel kekal gelap atas kertas. */
    [data-bs-theme=dark] :is(.blue-container, .col-right, .header,
                             .row-height, .left-column, .right-column,
                             .cell-hijau, .cell-kuning, .cell-lanjut, .cell-merah,
                             .table-traffic .total-cell),
    [data-bs-theme=dark] :is(.blue-container, .col-right) * {
        background-color: #fff !important;
        background-image: none !important;
        color: #000 !important;
        border-color: #999 !important;
    }

    /* carta */
    [data-bs-theme=dark] :is(.apexcharts-text tspan, .apexcharts-xaxis-label,
                             .apexcharts-yaxis-label, .apexcharts-datalabel,
                             .apexcharts-datalabel-label, .apexcharts-datalabel-value,
                             .apexcharts-title-text, .apexcharts-subtitle-text) {
        fill: #000 !important;
    }

    [data-bs-theme=dark] .apexcharts-legend-text {
        color: #000 !important;
    }
}