/* V1.03SN -- TEMA "DARK NAV ELEKTRIK GRADASI".
   Aktif hanya bila <html data-tema="elektrik"> (dipasang oleh tema-elektrik.js). Admin Master dan POP Site
   menyimpan pilihan temanya sendiri-sendiri (kunci berbeda), jadi tidak saling mengikuti. */
html[data-tema="elektrik"] {
  --elk-bg: #04061a;
  --elk-card: rgba(11, 18, 58, .88);
  --elk-card-2: rgba(16, 26, 78, .92);
  --elk-line: rgba(88, 140, 255, .30);
  --elk-text: #f3f6ff;
  --elk-muted: #a8b6ee;
  --elk-cyan: #19d3ff;
  --elk-blue: #2f6bff;
  --elk-violet: #8a3dff;
  --elk-grad: linear-gradient(90deg, #0a1a7a 0%, #2438e0 38%, #6a2cf0 72%, #0aa6ff 100%);
  --elk-grad-v: linear-gradient(180deg, #060a2e 0%, #0b1560 45%, #1c0f5c 100%);
  --bg: #04061a; --surface: #0b123a; --surface-2: #101a4e; --text-main: #f3f6ff; --text-muted: #a8b6ee;
  --border-soft: rgba(88, 140, 255, .22);
  --bs-body-bg: #04061a; --bs-body-color: #f3f6ff; --bs-secondary-color: #a8b6ee;
  --bs-border-color: rgba(88, 140, 255, .28); --bs-emphasis-color: #fff;
  color-scheme: dark;
}
html[data-tema="elektrik"] body {
  color: var(--elk-text) !important;
  background:
    radial-gradient(900px 520px at 6% -8%, rgba(47, 107, 255, .28), transparent 68%),
    radial-gradient(800px 520px at 98% 0%, rgba(138, 61, 255, .24), transparent 68%),
    radial-gradient(700px 500px at 50% 108%, rgba(25, 211, 255, .12), transparent 70%),
    linear-gradient(180deg, #04061a 0%, #070c2c 55%, #04061a 100%) fixed !important;
}
html[data-tema="elektrik"] .content,
html[data-tema="elektrik"] .main-content { background: transparent !important; color: var(--elk-text); }

/* ===== NAV (topbar) + SIDEBAR: gradasi elektrik ===== */
html[data-tema="elektrik"] .topbar {
  background: var(--elk-grad) !important;
  border-bottom: 1px solid rgba(25, 211, 255, .55) !important;
  box-shadow: 0 4px 24px rgba(47, 107, 255, .45), 0 0 18px rgba(138, 61, 255, .30) !important;
  color: #fff !important;
}
html[data-tema="elektrik"] .topbar *:not(.badge):not(.dropdown-menu *) { color: #fff; }
html[data-tema="elektrik"] .topbar-btn,
html[data-tema="elektrik"] .topbar-user {
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}
html[data-tema="elektrik"] .topbar-btn:hover,
html[data-tema="elektrik"] .topbar-user:hover { background: rgba(255, 255, 255, .24) !important; box-shadow: 0 0 12px rgba(25, 211, 255, .6); }
html[data-tema="elektrik"] .topbar .topbar-icon-hitam,
html[data-tema="elektrik"] .topbar .bi { color: #fff !important; }
html[data-tema="elektrik"] .sidebar {
  background: var(--elk-grad-v) !important;
  border-right: 1px solid rgba(25, 211, 255, .45) !important;
  box-shadow: 4px 0 26px rgba(47, 107, 255, .35) !important;
}
html[data-tema="elektrik"] .sidebar-brand { border-bottom-color: rgba(88, 140, 255, .35) !important; background: transparent !important; }
html[data-tema="elektrik"] .sidebar,
html[data-tema="elektrik"] .sidebar a,
html[data-tema="elektrik"] .sidebar .nav-link,
html[data-tema="elektrik"] .sidebar-group-title,
html[data-tema="elektrik"] .sidebar .bi { color: #eaf0ff !important; }
html[data-tema="elektrik"] .sidebar .nav-link:hover,
html[data-tema="elektrik"] .sidebar-group-title:hover { background: rgba(25, 211, 255, .14) !important; color: #fff !important; }
html[data-tema="elektrik"] .sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(25, 211, 255, .38), rgba(138, 61, 255, .30)) !important;
  color: #fff !important; box-shadow: inset 3px 0 0 var(--elk-cyan), 0 0 14px rgba(25, 211, 255, .30);
}
html[data-tema="elektrik"] .sn-app-footer {
  background: linear-gradient(90deg, #060a2e, #141a6e 50%, #2a0f6a) !important;
  color: #dfe7ff !important; border-top: 1px solid rgba(25, 211, 255, .45) !important;
}
html[data-tema="elektrik"] .sn-app-footer * { color: #dfe7ff !important; }

/* ===== KARTU / PANEL / KOLOM ===== */
html[data-tema="elektrik"] .card,
html[data-tema="elektrik"] .ov-box,
html[data-tema="elektrik"] .stat-card-v2,
html[data-tema="elektrik"] [class*="stat-card"],
html[data-tema="elektrik"] .table-responsive,
html[data-tema="elektrik"] .list-group-item,
html[data-tema="elektrik"] .accordion-item,
html[data-tema="elektrik"] .offcanvas,
html[data-tema="elektrik"] .popover {
  background: var(--elk-card) !important; background-image: none !important; color: var(--elk-text) !important;
  border: 1px solid var(--elk-line) !important;
  box-shadow: 0 6px 26px rgba(0, 0, 40, .45), 0 0 0 1px rgba(25, 211, 255, .05) inset !important;
}
html[data-tema="elektrik"] .card-header,
html[data-tema="elektrik"] .card-footer,
html[data-tema="elektrik"] .modal-header,
html[data-tema="elektrik"] .modal-footer,
html[data-tema="elektrik"] .accordion-button {
  background: linear-gradient(90deg, rgba(36, 56, 224, .35), rgba(106, 44, 240, .28)) !important;
  color: #fff !important; border-color: var(--elk-line) !important;
}
html[data-tema="elektrik"] .modal-content {
  background: linear-gradient(180deg, #0a1245, #070b30) !important; color: var(--elk-text) !important;
  border: 1px solid rgba(25, 211, 255, .45) !important; box-shadow: 0 0 36px rgba(47, 107, 255, .45) !important;
}
html[data-tema="elektrik"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ===== TEKS ===== */
html[data-tema="elektrik"] h1, html[data-tema="elektrik"] h2, html[data-tema="elektrik"] h3,
html[data-tema="elektrik"] h4, html[data-tema="elektrik"] h5, html[data-tema="elektrik"] h6,
html[data-tema="elektrik"] .h1, html[data-tema="elektrik"] .h2, html[data-tema="elektrik"] .h3,
html[data-tema="elektrik"] .h4, html[data-tema="elektrik"] .h5, html[data-tema="elektrik"] .h6,
html[data-tema="elektrik"] label, html[data-tema="elektrik"] .form-label, html[data-tema="elektrik"] legend,
html[data-tema="elektrik"] .text-dark, html[data-tema="elektrik"] .text-black, html[data-tema="elektrik"] .text-body,
html[data-tema="elektrik"] .link-dark, html[data-tema="elektrik"] .card-title { color: var(--elk-text) !important; }
html[data-tema="elektrik"] .text-muted, html[data-tema="elektrik"] .text-secondary,
html[data-tema="elektrik"] .form-text, html[data-tema="elektrik"] small.text-muted { color: var(--elk-muted) !important; }
html[data-tema="elektrik"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) { color: #7fd8ff; }
html[data-tema="elektrik"] .bg-white, html[data-tema="elektrik"] .bg-light, html[data-tema="elektrik"] .bg-body,
html[data-tema="elektrik"] .bg-body-tertiary, html[data-tema="elektrik"] .bg-body-secondary { background-color: var(--elk-card-2) !important; color: var(--elk-text) !important; }
html[data-tema="elektrik"] .border, html[data-tema="elektrik"] hr { border-color: var(--elk-line) !important; }
html[data-tema="elektrik"] hr { opacity: .6; }

/* ===== KOLOM ISIAN ===== */
html[data-tema="elektrik"] .form-control,
html[data-tema="elektrik"] .form-select,
html[data-tema="elektrik"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html[data-tema="elektrik"] textarea,
html[data-tema="elektrik"] select,
html[data-tema="elektrik"] .input-group-text {
  background-color: #0a1240 !important; color: #fff !important;
  border: 1px solid rgba(88, 140, 255, .45) !important;
}
html[data-tema="elektrik"] .form-control:focus,
html[data-tema="elektrik"] .form-select:focus,
html[data-tema="elektrik"] input:focus, html[data-tema="elektrik"] textarea:focus, html[data-tema="elektrik"] select:focus {
  border-color: var(--elk-cyan) !important; box-shadow: 0 0 0 .2rem rgba(25, 211, 255, .25), 0 0 14px rgba(25, 211, 255, .35) !important; outline: 0;
}
html[data-tema="elektrik"] ::placeholder { color: #8d9bd6 !important; opacity: 1; }
html[data-tema="elektrik"] .form-control:disabled, html[data-tema="elektrik"] .form-control[readonly],
html[data-tema="elektrik"] .form-select:disabled, html[data-tema="elektrik"] input:disabled { background-color: #0d1650 !important; color: #c6d0ff !important; opacity: .85; }
html[data-tema="elektrik"] select option { background: #0a1240; color: #fff; }
html[data-tema="elektrik"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
html[data-tema="elektrik"] .form-check-input { background-color: #0a1240; border-color: rgba(88, 140, 255, .6); }
html[data-tema="elektrik"] .form-check-input:checked { background-color: var(--elk-blue); border-color: var(--elk-cyan); }

/* ===== TABEL ===== */
html[data-tema="elektrik"] .table {
  --bs-table-color: #f3f6ff; --bs-table-bg: transparent; --bs-table-border-color: rgba(88, 140, 255, .22);
  --bs-table-striped-color: #f3f6ff; --bs-table-striped-bg: rgba(47, 107, 255, .08);
  --bs-table-hover-color: #fff; --bs-table-hover-bg: rgba(25, 211, 255, .12);
  color: #f3f6ff !important;
}
html[data-tema="elektrik"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-color: rgba(88, 140, 255, .22) !important; }
html[data-tema="elektrik"] .table thead th, html[data-tema="elektrik"] thead th {
  background: linear-gradient(90deg, rgba(36, 56, 224, .55), rgba(106, 44, 240, .45)) !important; color: #fff !important;
  border-color: rgba(25, 211, 255, .35) !important;
}
html[data-tema="elektrik"] .table-light, html[data-tema="elektrik"] .table-light > * > * { --bs-table-bg: rgba(36, 56, 224, .35); background-color: rgba(36, 56, 224, .35) !important; color: #fff !important; }

/* ===== TOMBOL / BADGE / NAV / MENU ===== */
html[data-tema="elektrik"] .btn-primary {
  background: linear-gradient(90deg, #2f6bff, #19b5ff) !important; border: 0 !important; color: #fff !important;
  box-shadow: 0 0 14px rgba(47, 107, 255, .55);
}
html[data-tema="elektrik"] .btn-primary:hover { filter: brightness(1.15); box-shadow: 0 0 20px rgba(25, 211, 255, .7); }
html[data-tema="elektrik"] .btn-light, html[data-tema="elektrik"] .btn-white,
html[data-tema="elektrik"] .btn-outline-secondary, html[data-tema="elektrik"] .btn-outline-dark, html[data-tema="elektrik"] .btn-secondary {
  background: rgba(255, 255, 255, .08) !important; color: #eaf0ff !important; border: 1px solid rgba(140, 170, 255, .45) !important;
}
html[data-tema="elektrik"] .btn-light:hover, html[data-tema="elektrik"] .btn-outline-secondary:hover,
html[data-tema="elektrik"] .btn-outline-dark:hover, html[data-tema="elektrik"] .btn-secondary:hover { background: rgba(25, 211, 255, .22) !important; color: #fff !important; }
html[data-tema="elektrik"] .btn-outline-primary { color: #7fd8ff !important; border-color: #19d3ff !important; }
html[data-tema="elektrik"] .btn-outline-primary:hover { background: rgba(25, 211, 255, .25) !important; color: #fff !important; }
html[data-tema="elektrik"] .text-bg-light, html[data-tema="elektrik"] .badge.bg-light, html[data-tema="elektrik"] .badge.text-dark {
  background-color: rgba(255, 255, 255, .16) !important; color: #fff !important;
}
html[data-tema="elektrik"] .dropdown-menu {
  background: linear-gradient(180deg, #0b1450, #070b32) !important; color: #fff !important;
  border: 1px solid rgba(25, 211, 255, .45) !important; box-shadow: 0 10px 34px rgba(0, 0, 50, .6), 0 0 18px rgba(47, 107, 255, .35) !important;
}
html[data-tema="elektrik"] .dropdown-item, html[data-tema="elektrik"] .dropdown-header,
html[data-tema="elektrik"] .dropdown-menu .text-muted { color: #eaf0ff !important; }
html[data-tema="elektrik"] .dropdown-item:hover, html[data-tema="elektrik"] .dropdown-item:focus { background: rgba(25, 211, 255, .18) !important; color: #fff !important; }
html[data-tema="elektrik"] .dropdown-divider { border-color: var(--elk-line) !important; }
html[data-tema="elektrik"] .nav-tabs { border-bottom-color: var(--elk-line) !important; }
html[data-tema="elektrik"] .nav-tabs .nav-link { color: #b9c6ff !important; }
html[data-tema="elektrik"] .nav-tabs .nav-link.active, html[data-tema="elektrik"] .nav-pills .nav-link.active {
  background: linear-gradient(90deg, #2f6bff, #8a3dff) !important; color: #fff !important; border-color: transparent !important;
}
html[data-tema="elektrik"] .page-link { background: #0a1240 !important; color: #cfe0ff !important; border-color: var(--elk-line) !important; }
html[data-tema="elektrik"] .page-item.active .page-link { background: linear-gradient(90deg, #2f6bff, #19b5ff) !important; color: #fff !important; }
html[data-tema="elektrik"] .alert { background: rgba(20, 32, 100, .75); color: #fff; border-color: var(--elk-line); }
html[data-tema="elektrik"] .alert a { color: #7fd8ff; }
html[data-tema="elektrik"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-tema="elektrik"] ::-webkit-scrollbar-track { background: #060a2a; }
html[data-tema="elektrik"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2f6bff, #8a3dff); border-radius: 6px; }

/* Kelas dari penyesuai kontras (tema-elektrik.js): teks gelap di latar gelap -> putih; latar putih -> gelap. */
html[data-tema="elektrik"] .sn-elk-teks { color: #f3f6ff !important; }
html[data-tema="elektrik"] .sn-elk-bg { background-color: #0d1648 !important; }
html[data-tema="elektrik"] .sn-elk-bg:not(select) { background-image: none !important; }
/* strip jam/info di topbar: tanpa latar (ikut gradasi nav) */
html[data-tema="elektrik"] .topbar .sn-elk-bg,
html[data-tema="elektrik"] .topbar-left,
html[data-tema="elektrik"] .topbar-info-group,
html[data-tema="elektrik"] .topbar-clock,
html[data-tema="elektrik"] .topbar-clock-user { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; }
/* panah dropdown: satu panah kecil di kanan, tidak berulang */
html[data-tema="elektrik"] select,
html[data-tema="elektrik"] .form-select {
  background-repeat: no-repeat !important; background-position: right .6rem center !important; background-size: 12px 12px !important;
  padding-right: 1.8rem;
}

/* V1.05SN -- Ikon sidebar SEMUA putih saat tema Dark Elektrik Gradasi aktif (Admin Master & POP Site).
   Aturan ikon warna-warni di style.css (nth-child, data-group, dst.) memakai !important dengan spesifisitas tinggi,
   jadi di sini dikunci memakai dua :not(#_) (bobot ID) supaya pasti menang. Tema Terang tidak terpengaruh. */
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar i,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar i::before,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .bi,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .bi::before,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .nav-link i.bi,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .nav-link i.bi::before,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .sidebar-group-title i.bi,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .sidebar-group-title i.bi::before,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .sidebar-group-body .nav-item > .nav-link i.bi,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .sidebar-group-body .nav-item > .nav-link i.bi::before,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .nav-link.active i.bi,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .sidebar-group.open > .sidebar-group-title i.bi,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .sidebar-group-caret,
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar svg {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
}
html[data-tema="elektrik"]:not(#_):not(#__) .sidebar .sidebar-group-caret path { stroke: #ffffff !important; }

/* V1.05SN -- Animasi ganti tema: tema baru menyapu dari pojok kanan atas ke kiri bawah (dijalankan tema-elektrik.js). */
html.sn-tema-geser::view-transition-old(root),
html.sn-tema-geser::view-transition-new(root) { animation: none !important; mix-blend-mode: normal; }
html.sn-tema-geser::view-transition-old(root) { z-index: 1; }
html.sn-tema-geser::view-transition-new(root) { z-index: 2; }
/* Cadangan untuk browser tanpa View Transitions: pudar warna halus. */
html.sn-tema-pudar *, html.sn-tema-pudar *::before, html.sn-tema-pudar *::after {
  transition: background-color .55s ease, color .55s ease, border-color .55s ease, box-shadow .55s ease, fill .55s ease !important;
}