/* =========================================================================
   Smart Kids — Theme Custom (futuristik, solid, putih-biru + dark mode)
   Ditambahkan tanpa mengubah style.css. Aman untuk fungsional yang ada.
   ========================================================================= */

:root {
    --sk-primary: #2f56d6;      /* biru solid utama */
    --sk-primary-600: #2547b8;
    --sk-primary-050: #eef2ff;  /* biru sangat muda */
    --sk-primary-100: #dbe4ff;
    --sk-accent: #18aefa;

    --sk-bg: #f5f7fb;           /* background halaman */
    --sk-surface: #ffffff;      /* kartu/header/sidebar */
    --sk-surface-2: #f8fafc;
    --sk-border: #e6e9f2;
    --sk-text: #1f2937;
    --sk-muted: #6b7280;
    --sk-shadow: 0 2px 10px rgba(24, 39, 75, .05);
}

html[data-theme="dark"] {
    --sk-primary: #4f7cff;
    --sk-primary-600: #3f68e6;
    --sk-primary-050: #1b2333;
    --sk-primary-100: #24304a;
    --sk-accent: #38bdf8;

    --sk-bg: #0e1116;
    --sk-surface: #171a21;
    --sk-surface-2: #1e222b;
    --sk-border: #2a2f3a;
    --sk-text: #e6e9ef;
    --sk-muted: #9aa4b2;
    --sk-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

/* ---------- Indikator Unit aktif di header (di samping logo) ---------- */
/* Logo + nama unit dijadikan satu grup di kiri */
.header .header-left {
    width: auto;
    justify-content: flex-start;
    padding: 0 16px;
    gap: 6px;
}
.sk-branch-indicator {
    float: none;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--sk-border);
}

/* Saat sidebar mengecil (mini): TAMPILKAN LOGO SAJA, sembunyikan nama unit.
   (App tidak punya varian .logo-small, jadi kita paksa .logo tetap tampil.) */
.mini-sidebar .header .header-left {
    width: 78px !important;
    justify-content: center !important;
    padding: 0 5px !important;
    gap: 0 !important;
}
.mini-sidebar .header .header-left .logo { display: inline-flex !important; }
.mini-sidebar .sk-branch-indicator { display: none !important; }

/* Header jadi flex row agar TIDAK ada tumpang tindih antar elemen
   (logo+unit, tombol hamburger, search, menu kanan) */
.header { display: flex; align-items: center; }
.header .user-menu { margin-left: auto; float: none; }
/* Tombol hamburger: di layout float lama #toggle_btn absolute (left:-22px;top:10px)
   → di flex jadi jatuh. Buat statis & pusatkan dalam menu-toggle setinggi 60px. */
.header .menu-toggle { flex: 0 0 auto; height: 60px; align-items: center; padding: 0 6px 0 10px; }
.header .menu-toggle #toggle_btn { position: static; left: auto; top: auto; }
.sk-branch-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 190px;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--sk-primary-050);
    border: 1px solid var(--sk-primary-100);
    color: var(--sk-primary);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
}
.sk-branch-chip i { font-size: 13px; }
.sk-branch-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sk-branch-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--sk-primary);
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, transform .16s ease;
}
.sk-branch-switch:hover { background: var(--sk-primary-600); transform: translateY(-1px); color: #fff; }
.sk-branch-switch i { font-size: 12px; }

/* ---------- Tombol toggle tema ---------- */
.sk-theme-toggle { cursor: pointer; }
.sk-theme-toggle i { font-size: 18px; color: #6b7280; transition: color .16s ease; }
.sk-theme-toggle:hover i { color: var(--sk-primary); }
html[data-theme="dark"] .sk-theme-toggle i { color: #ffd166; }

/* Responsif: sembunyikan teks pada layar kecil, sisakan ikon */
@media (max-width: 1199px) {
    .sk-branch-switch span { display: none; }
    .sk-branch-switch { padding: 8px 10px; }
}
@media (max-width: 991px) {
    .sk-branch-indicator { margin-left: 8px; padding-left: 8px; }
    .sk-branch-name { max-width: 84px; }
    .sk-branch-chip { max-width: 130px; }
}
@media (max-width: 767px) {
    .sk-branch-indicator { border-left: 0; margin-left: 4px; padding-left: 4px; gap: 6px; }
    .sk-branch-name { display: none; }        /* cukup ikon unit */
    .sk-branch-chip { padding: 6px 9px; max-width: none; }
}

/* =========================================================================
   POLES FUTURISTIK (light) — solid, bukan gradient norak
   ========================================================================= */
.card {
    border: 1px solid var(--sk-border);
    border-radius: 14px;
    box-shadow: var(--sk-shadow);
}
.page-title { font-weight: 700; letter-spacing: -.2px; }
/* Avatar bulat: crop proporsional agar tidak lonjong walau foto tidak persegi */
img.rounded-circle { object-fit: cover; }
.star-student td img.rounded-circle { width: 28px; height: 28px; }
.btn-primary { background-color: var(--sk-primary); border-color: var(--sk-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--sk-primary-600); border-color: var(--sk-primary-600); }

/* =========================================================================
   DARK MODE — override permukaan utama (konservatif & solid)
   ========================================================================= */
html[data-theme="dark"] body { background-color: var(--sk-bg); color: var(--sk-text); }

html[data-theme="dark"] .header,
html[data-theme="dark"] .header .header-left {
    background: var(--sk-surface);
    border-color: var(--sk-border);
    box-shadow: none;
}
html[data-theme="dark"] .header { border-bottom: 1px solid var(--sk-border); }
html[data-theme="dark"] .sk-branch-indicator { border-left-color: var(--sk-border); }

html[data-theme="dark"] .sidebar { background: var(--sk-surface); border-right: 1px solid var(--sk-border); }

/* Teks menu default */
html[data-theme="dark"] .sidebar-menu li a { color: #b9c2d6; }
html[data-theme="dark"] .sidebar-menu li a i { color: #8b96ad; }

/* Hover & aktif level-1: biru gelap solid (BUKAN putih) */
html[data-theme="dark"] .sidebar-menu > ul > li > a:hover,
html[data-theme="dark"] .sidebar-menu li.active > a,
html[data-theme="dark"] .sidebar-menu li a.subdrop {
    background-color: rgba(79, 124, 255, .16) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .sidebar-menu > ul > li > a:hover i,
html[data-theme="dark"] .sidebar-menu li.active > a i,
html[data-theme="dark"] .sidebar-menu li a.subdrop i { color: #ffffff !important; }
html[data-theme="dark"] .sidebar-menu li.active > a::before { background: var(--sk-primary); }

/* Submenu */
html[data-theme="dark"] .sidebar-menu ul ul a { color: #a6b0c6; }
html[data-theme="dark"] .sidebar-menu ul ul a:hover,
html[data-theme="dark"] .sidebar-menu ul ul a.active {
    color: #fff !important;
    background: rgba(79, 124, 255, .20) !important;
}

/* Judul seksi ("Main Menu", "Master Data") */
html[data-theme="dark"] .menu-title,
html[data-theme="dark"] .menu-title span { color: #7f8aa0 !important; }
html[data-theme="dark"] .sidebar-menu li.menu-title a { color: var(--sk-primary) !important; }
html[data-theme="dark"] .sidebar-menu .menu-arrow { color: #8b96ad; }

html[data-theme="dark"] .card { background: var(--sk-surface); border-color: var(--sk-border); }
html[data-theme="dark"] .card .card-header { background: transparent; border-color: var(--sk-border); }
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--sk-text); }
html[data-theme="dark"] p, html[data-theme="dark"] span, html[data-theme="dark"] label,
html[data-theme="dark"] .breadcrumb-item.active { color: var(--sk-text); }
html[data-theme="dark"] .text-muted { color: var(--sk-muted) !important; }

/* Search + form controls */
html[data-theme="dark"] .top-nav-search .form-control { background: var(--sk-surface-2); border-color: var(--sk-border); color: var(--sk-text); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--sk-surface-2);
    border-color: var(--sk-border);
    color: var(--sk-text);
}
html[data-theme="dark"] .form-control::placeholder { color: #8b95a7; }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sk-text); }
html[data-theme="dark"] .select2-dropdown { background: var(--sk-surface); border-color: var(--sk-border); }
html[data-theme="dark"] .select2-results__option { color: var(--sk-text); }

/* Tabel — pakai variabel Bootstrap agar konsisten (striped/hover/border) */
html[data-theme="dark"] .table {
    --bs-table-color: var(--sk-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--sk-border);
    --bs-table-striped-color: var(--sk-text);
    --bs-table-striped-bg: rgba(255, 255, 255, .035);
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: rgba(79, 124, 255, .12);
    --bs-table-accent-bg: transparent;
    color: var(--sk-text);
    border-color: var(--sk-border);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    border-color: var(--sk-border);
    color: var(--sk-text);
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table thead td { color: #c7cede !important; border-color: var(--sk-border); }
html[data-theme="dark"] .table a { color: #cbd5f0; }

/* DataTables menambahkan tr.odd/tr.even & td.sorting_1 dengan warna terang — override */
html[data-theme="dark"] table.dataTable > tbody > tr { background-color: transparent !important; color: var(--sk-text); }
html[data-theme="dark"] table.dataTable.stripe > tbody > tr.odd > *,
html[data-theme="dark"] table.dataTable.display > tbody > tr.odd > *,
html[data-theme="dark"] table.dataTable > tbody > tr.odd > * {
    background-color: rgba(255, 255, 255, .035) !important;
    box-shadow: none !important;
    color: var(--sk-text) !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.even > * {
    background-color: transparent !important;
    color: var(--sk-text) !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable > tbody > tr.even > .sorting_1 {
    background-color: rgba(255, 255, 255, .02) !important;
    color: var(--sk-text) !important;
}
html[data-theme="dark"] table.dataTable.hover > tbody > tr:hover > *,
html[data-theme="dark"] table.dataTable.display > tbody > tr:hover > *,
html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(79, 124, 255, .12) !important;
    color: #ffffff !important;
}

/* Kontrol DataTables (Show entries, search, info, pagination) */
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--sk-muted) !important; }
html[data-theme="dark"] .dataTables_length select,
html[data-theme="dark"] .dataTables_filter input {
    background: var(--sk-surface-2) !important;
    border: 1px solid var(--sk-border) !important;
    color: var(--sk-text) !important;
}
html[data-theme="dark"] .dataTables_paginate .paginate_button { color: var(--sk-text) !important; }
html[data-theme="dark"] .dataTables_paginate .paginate_button:hover {
    background: var(--sk-surface-2) !important;
    border-color: var(--sk-border) !important;
    color: #fff !important;
}
html[data-theme="dark"] .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_paginate .paginate_button.current:hover {
    background: var(--sk-primary) !important;
    border-color: var(--sk-primary) !important;
    color: #fff !important;
}
/* Pagination Bootstrap (DataTables render sbg ul.pagination .page-link) */
html[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .dataTables_paginate .pagination .page-link {
    background: var(--sk-surface-2) !important;
    border-color: var(--sk-border) !important;
    color: var(--sk-text) !important;
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background: var(--sk-primary) !important;
    border-color: var(--sk-primary) !important;
    color: #fff !important;
}
html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background: var(--sk-surface) !important;
    color: var(--sk-muted) !important;
    border-color: var(--sk-border) !important;
}
html[data-theme="dark"] .pagination .page-link:hover {
    background: var(--sk-primary) !important;
    border-color: var(--sk-primary) !important;
    color: #fff !important;
}

/* Form: label mengambang (.local-forms) + judul kartu di dark */
html[data-theme="dark"] .card-header .card-title,
html[data-theme="dark"] .card-header h1,
html[data-theme="dark"] .card-header h2,
html[data-theme="dark"] .card-header h3,
html[data-theme="dark"] .card-header h4,
html[data-theme="dark"] .card-header h5,
html[data-theme="dark"] .card-header h6 { color: var(--sk-text) !important; }
html[data-theme="dark"] .card .card-header { border-bottom-color: var(--sk-border); }
html[data-theme="dark"] .local-forms label {
    background: var(--sk-surface) !important;
    color: var(--sk-muted) !important;
}
html[data-theme="dark"] .local-forms .form-control::placeholder,
html[data-theme="dark"] .form-control::placeholder { color: #8b95a7 !important; }
html[data-theme="dark"] .settings-label,
html[data-theme="dark"] .settings-size,
html[data-theme="dark"] .settings-size span { color: var(--sk-muted) !important; }
html[data-theme="dark"] .btn-light { background: var(--sk-surface-2); border-color: var(--sk-border); color: var(--sk-text); }
html[data-theme="dark"] .btn-outline-primary { color: var(--sk-primary); border-color: var(--sk-primary); background: transparent; }
html[data-theme="dark"] .btn-outline-primary:hover { background: var(--sk-primary); color: #fff; }

/* Tombol toggle list/grid (btn-outline-gray) — dulu kotak putih di dark */
html[data-theme="dark"] .btn-outline-gray { border-color: var(--sk-border); color: var(--sk-muted); background: transparent; }
html[data-theme="dark"] .btn-outline-gray:hover,
html[data-theme="dark"] .btn-outline-gray.active {
    background-color: var(--sk-primary) !important;
    border-color: var(--sk-primary) !important;
    color: #fff !important;
}
html[data-theme="dark"] .btn-white { background: var(--sk-surface-2); border-color: var(--sk-border); color: var(--sk-text); }
html[data-theme="dark"] .btn-secondary { background: var(--sk-surface-2); border-color: var(--sk-border); color: var(--sk-text); }

/* Tombol aksi di kolom Action (bg-danger-light dipakai edit & hapus) */
html[data-theme="dark"] .bg-danger-light { background-color: var(--sk-surface-2) !important; color: #c7cede !important; }
html[data-theme="dark"] .bg-danger-light:hover { background-color: #2a3040 !important; color: #fff !important; }
html[data-theme="dark"] a.bg-danger-light.kasbon_delete:hover,
html[data-theme="dark"] .bg-danger-light[class*="delete"]:hover { background-color: rgba(220, 53, 69, .25) !important; color: #ff9aa2 !important; }

/* Pagination DataTables (Previous / 1 / Next) */
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--sk-text) !important;
    background: transparent !important;
    border-color: var(--sk-border) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--sk-primary) !important;
    border-color: var(--sk-primary) !important;
    color: #fff !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--sk-surface-2) !important;
    border-color: var(--sk-primary) !important;
    color: #fff !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--sk-muted) !important;
    background: transparent !important;
    border-color: var(--sk-border) !important;
}
/* Ikon panah sort & teks kontrol datatable */
html[data-theme="dark"] table.dataTable thead .sorting:before,
html[data-theme="dark"] table.dataTable thead .sorting:after,
html[data-theme="dark"] table.dataTable thead .sorting_asc:before,
html[data-theme="dark"] table.dataTable thead .sorting_desc:after { color: var(--sk-muted); }
html[data-theme="dark"] .dataTables_wrapper label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info { color: var(--sk-muted) !important; }

/* Logo tetap terlihat di dark: taruh di atas plate putih */
html[data-theme="dark"] .header .header-left .logo {
    background: #ffffff;
    border-radius: 8px;
    padding: 4px 8px;
    line-height: normal;
    display: inline-flex;
    align-items: center;
}

/* Ikon bulat di header (bahasa, notifikasi, fullscreen, tema) —
   selektor tema aslinya .user-menu.nav .header-nav-list (spesifisitas tinggi), jadi samakan + !important */
html[data-theme="dark"] .user-menu.nav .header-nav-list,
html[data-theme="dark"] .header-nav-list { background: var(--sk-surface-2) !important; }
html[data-theme="dark"] .user-menu.nav .header-nav-list i,
html[data-theme="dark"] .header-nav-list i { color: #c7cede !important; }
/* Ikon SVG gelap (notifikasi, fullscreen) — buat terang di dark, TANPA menyentuh foto profil */
html[data-theme="dark"] .user-menu img[src*="header-icon"] { filter: brightness(0) invert(1); opacity: .85; }
html[data-theme="dark"] .user-menu.nav .header-nav-list:hover { background: #2a3040 !important; }
html[data-theme="dark"] .user-menu.nav > li > a:hover { background-color: rgba(255, 255, 255, .06) !important; }

/* Profil: header, menu tab, konten */
html[data-theme="dark"] .profile-header {
    background: var(--sk-surface) !important;
    border-color: var(--sk-border) !important;
}
html[data-theme="dark"] .profile-header .user-name,
html[data-theme="dark"] .profile-user-info h4 { color: var(--sk-text); }
html[data-theme="dark"] .profile-header h6,
html[data-theme="dark"] .profile-header .about-text,
html[data-theme="dark"] .profile-header .user-Location { color: var(--sk-muted) !important; }
html[data-theme="dark"] .profile-menu {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    box-shadow: none;
}
html[data-theme="dark"] .nav-tabs-solid { background-color: var(--sk-surface-2); }
html[data-theme="dark"] .nav-tabs-solid > li > a { color: var(--sk-text); }
html[data-theme="dark"] .nav-tabs-solid > li > a:hover,
html[data-theme="dark"] .nav-tabs.nav-tabs-solid > li > a:focus { background-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .profile-tab-cont .edit-link { color: var(--sk-primary); }

/* Footer */
html[data-theme="dark"] footer { background: var(--sk-surface); border-top-color: var(--sk-border); }
html[data-theme="dark"] footer p { color: var(--sk-muted); }

/* Alert */
html[data-theme="dark"] .alert-danger { background: rgba(220, 53, 69, .12); border-color: rgba(220, 53, 69, .35); color: #f1a7ad; }

/* =========================================================================
   LOADING OVERLAY — futuristik (dual-ring conic spinner), theme-aware
   ========================================================================= */
#loadingLogo {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    background: rgba(244, 247, 251, .72) !important;
    -webkit-backdrop-filter: blur(9px) saturate(130%);
    backdrop-filter: blur(9px) saturate(130%);
}
html[data-theme="dark"] #loadingLogo { background: rgba(10, 14, 20, .76) !important; }

.sk-loader-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.sk-loader {
    position: relative;
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    margin: 0 auto;
}
.sk-loader::before,
.sk-loader::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.sk-loader::before {
    inset: 0;
    background: conic-gradient(from 90deg at 50% 50%, transparent 0 25%, var(--sk-primary, #2f56d6) 92%);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 7px), #000 0);
            mask: radial-gradient(farthest-side, #0000 calc(100% - 7px), #000 0);
    animation: sk-spin .9s linear infinite;
}
.sk-loader::after {
    inset: 17px;
    background: conic-gradient(from 270deg at 50% 50%, transparent 0 35%, var(--sk-accent, #18aefa) 92%);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 0);
            mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 0);
    animation: sk-spin 1.3s linear infinite reverse;
}
.sk-loader-logo {
    width: 54px;
    height: 54px;
    object-fit: contain;
    z-index: 1;
    animation: sk-pulse 1.6s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(47, 86, 214, .35));
}
.sk-loader-text {
    margin-top: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sk-primary, #2f56d6);
}
.sk-loader-text .sk-dot { animation: sk-dot 1.2s infinite; }
.sk-loader-text .sk-dot:nth-child(2) { animation-delay: .15s; }
.sk-loader-text .sk-dot:nth-child(3) { animation-delay: .3s; }

@keyframes sk-spin { to { transform: rotate(360deg); } }
@keyframes sk-pulse { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.06); } }
@keyframes sk-dot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* ---------- Area yang WAJIB tetap terang (mis. dokumen sertifikat) ---------- */
html[data-theme="dark"] .sk-keep-light { background: #ffffff !important; color: #333333 !important; }
html[data-theme="dark"] .sk-keep-light .card,
html[data-theme="dark"] .sk-keep-light .card-body { background: #ffffff !important; }

/* Dropdown / modal / offcanvas */
html[data-theme="dark"] .dropdown-menu { background: var(--sk-surface); border-color: var(--sk-border); }
html[data-theme="dark"] .dropdown-item { color: var(--sk-text); }
html[data-theme="dark"] .dropdown-item:hover { background: var(--sk-surface-2); color: #fff; }
html[data-theme="dark"] .user-menu .dropdown-menu .dropdown-item { border-color: var(--sk-border); }
html[data-theme="dark"] .modal-content { background: var(--sk-surface); color: var(--sk-text); border: 1px solid var(--sk-border); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--sk-border); }
html[data-theme="dark"] .noti-content, html[data-theme="dark"] .topnav-dropdown-header,
html[data-theme="dark"] .topnav-dropdown-footer { border-color: var(--sk-border); }
html[data-theme="dark"] .new-user-menus h6, html[data-theme="dark"] .user-menu .user-text h6 { color: var(--sk-text); }

/* Header search & profile teks di dark */
html[data-theme="dark"] .user-menu.nav > li > a { color: var(--sk-muted); }

/* Border tipis solid untuk kartu widget dashboard */
html[data-theme="dark"] .bg-comman, html[data-theme="dark"] .comman-shadow { background: var(--sk-surface) !important; }