:root{
  color-scheme: dark;
  --bg: #0b0b12;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.55);

  --p1: #7c3aed;   /* ungu */
  --p2: #a855f7;   /* ungu muda */
  --p3: #22c55e;   /* hijau */
  --p4: #f59e0b;   /* amber */
}

html[data-theme="light"]{
  color-scheme: light;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface2: rgba(20,20,40,.04);
  --border: rgba(20,20,40,.08);
  --text: rgba(15,15,25,.92);
  --muted: rgba(15,15,25,.55);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.02);
  --shadow-md: 0 4px 20px rgba(0,0,0,.04);
}

body.adm{
  background: radial-gradient(1200px 600px at 10% 0%, rgba(124,58,237,.20), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(168,85,247,.16), transparent 55%),
              var(--bg);
  color: var(--text);
}

.adm-shell{ display:flex; min-height:100vh; }

.adm-side{
  width: 280px;
  padding: 14px;
  border-right: 1px solid var(--border);
  position: sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:14px;
  background: linear-gradient(180deg, rgba(124,58,237,.08), transparent 35%);
}

.adm-brand{
  display:flex; gap:10px; align-items:center;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background: var(--surface);
}
.adm-logo{
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(168,85,247,.15));
  border:1px solid rgba(124,58,237,.25);
}
.adm-brand-name{ font-weight:700; }
.adm-brand-sub{ font-size:12px; color: var(--muted); }

.adm-nav{ display:flex; flex-direction:column; gap:6px; }
.adm-nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  color: var(--text);
  text-decoration:none;
  border: 1px solid transparent;
}
.adm-nav-item i{ width:18px; color: rgba(168,85,247,.95); }
.adm-nav-item:hover{
  background: var(--surface);
  border-color: var(--border);
}
.adm-nav-item.is-active{
  background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(168,85,247,.10));
  border-color: rgba(124,58,237,.25);
}

.adm-side-foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.adm-user{
  display:flex; gap:10px; align-items:center;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background: var(--surface);
}
.adm-user-ava{
  width:38px; height:38px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(124,58,237,.18);
  border:1px solid rgba(124,58,237,.22);
}
.adm-user-name{ font-weight:700; font-size:13px; }
.adm-user-sub{ font-size:12px; color: var(--muted); }

.adm-main{ flex:1; display:flex; flex-direction:column; min-width:0; }

.adm-top{
  display:flex; align-items:center; gap:10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top:0;
  z-index: 20;
}
.adm-ico{
  border:1px solid var(--border) !important;
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
}
.adm-h{ font-weight:800; line-height:1.1; }
.adm-sub{ font-size:12px; color: var(--muted); }

.adm-content{ padding:16px; }
.adm-footer{
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  display:flex; justify-content:space-between; gap:10px;
}

.adm-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.adm-kpi{
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  display:flex; gap:12px; align-items:center;
  box-shadow: var(--shadow-sm, none);
  transition: .2s ease;
}
.adm-kpi:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, none);
}
.kpi-ico{
  width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.10);
  font-size: 18px;
}
.kpi-num{ font-size: 24px; font-weight: 900; }
.kpi-label{ font-size: 12px; color: var(--muted); }

.kpi-1 .kpi-ico{ background: rgba(124,58,237,.20); color: var(--p1); }
.kpi-2 .kpi-ico{ background: rgba(168,85,247,.18); color: var(--p2); }
.kpi-3 .kpi-ico{ background: rgba(34,197,94,.16); color: var(--p3); }
.kpi-4 .kpi-ico{ background: rgba(245,158,11,.16); color: var(--p4); }

html[data-theme="light"] .kpi-ico { border-color: rgba(0,0,0,.04); }

.adm-card{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm, none);
  overflow:hidden;
}
.adm-card-head{
  padding: 14px 14px 10px;
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  border-bottom: 1px solid var(--border);
}
.adm-card-title{ font-weight:800; }
.adm-card-sub{ font-size:12px; color: var(--muted); }
.adm-card-body{ padding: 14px; }

/* login */
.adm-auth .auth-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: 18px;
}
.auth-card{
  width:100%;
  max-width: 460px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
}
.auth-head{
  display:flex; gap:12px; align-items:center;
  margin-bottom: 12px;
}
.auth-logo{
  width:52px; height:52px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(168,85,247,.14));
  border:1px solid rgba(124,58,237,.25);
}
.auth-title{ font-weight:900; font-size: 18px; }
.auth-sub{ font-size:12px; color: var(--muted); }
.auth-theme{ margin-left:auto; }
.auth-btn{
  border:0 !important;
  background: linear-gradient(135deg, var(--p1), var(--p2)) !important;
  font-weight:800;
  border-radius: 14px !important;
}
.auth-foot{ margin-top: 12px; font-size: 12px; }

/* responsive */
@media (max-width: 992px){
  .adm-side{ 
    position: fixed; 
    left: 0; 
    top:0; 
    transform: translateX(-105%); 
    transition:.2s; 
    z-index:50;
    
    /* Strong Glassmorphism Fix */
    background: var(--bg);
    box-shadow: 4px 0 24px rgba(0,0,0,.2);
    /* For extra frosted look (optional, but modern) */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .adm-side.is-open{ transform: translateX(0); }
  .adm-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .adm-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Dark/Light Table Theming (Bootstrap override)
   ========================= */

.adm .table-responsive {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

/* Bootstrap table variables override */
.adm .table {
  margin-bottom: 0;
  color: var(--text);
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;                 /* biar ngikut card */
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: rgba(124,58,237,.12);  /* ungu hover */
  --bs-table-hover-color: var(--text);
}

/* Header */
.adm .table thead th {
  background: rgba(0,0,0,.20);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  white-space: nowrap;
}

/* Body cells */
.adm .table tbody td {
  background: transparent;
  color: var(--text);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Row hover */
.adm .table tbody tr:hover td {
  background: var(--bs-table-hover-bg);
}

/* Small muted text inside table */
.adm .table .text-muted {
  color: var(--muted) !important;
}

/* In light theme, make header slightly brighter */
html[data-theme="light"] .adm .table thead th {
  background: rgba(20,20,40,.06);
}

/* Optional: make badges look nicer on dark table */
.adm .badge {
  border-radius: 999px;
}

/* =========================
   Standard Mobile Table Scroll (Admin)
   ========================= */

/* wrapper utama */
.table-scroll-x{
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch; /* iOS smooth */
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

/* jangan biarkan parent ngunci */
.adm-card,
.adm-card-body{
  overflow: visible !important;
}

/* table minimal width biar muncul scroll */
.table-modern-wrap table{
  min-width: 900px; /* default, bisa naik kalau kolom banyak */
}

/* tabel tetap ikut theme */
.table-modern-wrap .table{
  margin: 0;
  color: var(--text);
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-hover-bg: rgba(124,58,237,.12);
  --bs-table-hover-color: var(--text);
}

.table-modern-wrap .table thead th{
  background: rgba(0,0,0,.20);
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  white-space: nowrap;
}

html[data-theme="light"] .table-modern-wrap .table thead th{
  background: rgba(20,20,40,.06);
}

.table-modern-wrap .table td{
  white-space: nowrap; /* bikin rapi + memastikan scroll kepake */
  border-top: 1px solid rgba(255,255,255,.08);
}

.table-modern-wrap .table td:nth-child(2){
  white-space: normal; /* biar kolom nama boleh wrap sedikit */
}

/* scroll hint gradient kiri/kanan */
.table-scroll-x:before,
.table-scroll-x:after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 26px;
  pointer-events:none;
  opacity:0;
  transition: .15s;
}
.table-scroll-x:before{
  left:0;
  background: linear-gradient(90deg, rgba(0,0,0,.35), transparent);
}
.table-scroll-x:after{
  right:0;
  background: linear-gradient(270deg, rgba(0,0,0,.35), transparent);
}
html[data-theme="light"] .table-scroll-x:before{
  background: linear-gradient(90deg, rgba(0,0,0,.10), transparent);
}
html[data-theme="light"] .table-scroll-x:after{
  background: linear-gradient(270deg, rgba(0,0,0,.10), transparent);
}
.table-scroll-x.has-left:before{ opacity: 1; }
.table-scroll-x.has-right:after{ opacity: 1; }

.adm-card, .adm-card-body { overflow: visible !important; }

/* JSON viewer */
.json-pre{
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin: 0;
  max-height: 320px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.35;
}
.json-pre.expanded{ max-height: 72vh; }

/* mini toast */
.adm-toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(20,20,25,.92);
  color: #fff;
  display: flex;
  gap: 8px;
  align-items: center;
  transform: translateY(10px);
  opacity: 0;
  transition: .18s ease;
}
.adm-toast.show{
  transform: translateY(0);
  opacity: 1;
}

/* =========================
   Modal Override (Dark Mode Fix)
   ========================= */
.adm .modal-content {
  background-color: var(--bg);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
  color: var(--text);
  border: 1px solid var(--border);
}
.adm .modal-header {
  border-bottom: 1px solid var(--border);
}
.adm .modal-footer {
  border-top: 1px solid var(--border);
}
.adm .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
html[data-theme="light"] .adm .btn-close {
  filter: none;
}

/* =========================
   Form Controls Override (Dark Mode Fix)
   ========================= */
.adm .form-control,
.adm .form-select,
.adm input[type="text"] {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.adm .input-group-text {
  background-color: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.adm .form-control:focus,
.adm .form-select:focus,
.adm input[type="text"]:focus {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--p2);
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(168,85,247,.25); /* use --p2 color for focus glow */
}
/* Ensure placeholder text is readable */
.adm .form-control::placeholder,
.adm input::placeholder {
  color: var(--muted);
}
/* Option text color inside select dropdown (some browsers need this) */
.adm select,
.adm .form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--surface) !important;
  color: var(--text) !important;
  /* Add default dropdown arrow back since we removed appearance */
  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='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

/* Specific styling for the options list */
.adm select option,
.adm .form-select option {
  background-color: #1a1a24 !important; /* solid fallback for option bg */
  color: #ffffff !important;
}

html[data-theme="light"] .adm select,
html[data-theme="light"] .adm .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='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-theme="light"] .adm select option,
html[data-theme="light"] .adm .form-select option {
  background-color: #ffffff !important;
  color: #000000 !important;
}