/* ==========================================================================
   Gensiti — Design System (light/dark)
   Dipakai di semua halaman (dashboard, desa, monitoring, profil, upload,
   auth). Font Quicksand, 2 mode: terang (default) & gelap.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700;800&display=swap');

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme: light;

  --bg:#F3F6FB;
  --surface:#FBFBFD;
  --card:#FBFBFD;
  --text:#2B2E33;
  --muted:#6B7280;
  --border:#E7ECF5;
  --ring:rgba(62,116,236,.28);

  --accent-soft:#6FA6FF;
  --accent:#3E74EC;
  --accent-strong:#1F4FD3;
  --accent2:#13A394;

  --success:#1FB879;
  --success-bg:#E6F8F0;
  --danger:#D44A53;
  --danger-bg:#FDEBEC;

  --sidebar-bg:#FBFBFD;
  --sidebar-text:#3C4350;
  --sidebar-text-muted:#8495AD;
  --sidebar-hover:#F0F5FF;
  --sidebar-active-bg:linear-gradient(135deg,var(--accent),var(--accent-strong));
  --sidebar-active-text:#FFFFFF;
  --sidebar-border:#ECF1F9;

  --navbar-bg:rgba(251,251,253,.88);
  --navbar-border:#ECF1F9;

  --table-head-bg:#F3F6FC;
  --table-head-text:#3C4350;
  --table-row-bg:#FBFBFD;
  --table-row-text:#30343C;
  --table-row-hover:#F4F8FF;
  --table-border:#ECF1F9;

  --input-bg:#FFFFFF;
  --input-border:#E1E7F2;
  --input-text:#2B2E33;
  --input-placeholder:#9AA7BC;

  --kpi-grad:linear-gradient(135deg,#EAF1FF,#F7FAFF);
  --kpi-text:#30343C;

  --shadow-sm:0 6px 16px rgba(16,24,40,.06);
  --shadow-md:0 14px 34px rgba(16,24,40,.08);
  --shadow-lg:0 22px 50px rgba(16,24,40,.10);

  --sidebar-w:260px;
  --sidebar-collapsed-w:64px;
  --radius:16px;
  --radius-sm:10px;

  --fs-xxs:clamp(10px, 2.2vw, 12px);
  --fs-xs:clamp(11px, 2.6vw, 13px);
  --fs-sm:clamp(12px, 3.0vw, 14px);
  --fs-md:clamp(13px, 3.4vw, 16px);
  --fs-lg:clamp(16px, 4.2vw, 20px);
  --fs-xl:clamp(18px, 5.0vw, 24px);
}

html[data-theme="dark"]{
  color-scheme: dark;

  /* Abu-abu netral (graphite) -- sengaja BUKAN navy/biru di background */
  --bg:#19191B;
  --surface:#212124;
  --card:#27272A;
  --text:#F2F2F3;
  --muted:#A3A3AA;
  --border:rgba(255,255,255,.09);
  --ring:rgba(91,155,255,.35);

  --accent-soft:#6FA6FF;
  --accent:#5B9BFF;
  --accent-strong:#2F6FEF;
  --accent2:#2DD4BF;

  --success:#2ED191;
  --success-bg:rgba(46,209,145,.14);
  --danger:#F0636C;
  --danger-bg:rgba(240,99,108,.14);

  --sidebar-bg:#1C1C1F;
  --sidebar-text:#F2F2F3;
  --sidebar-text-muted:#8B8B93;
  --sidebar-hover:#2B2B2F;
  --sidebar-active-bg:linear-gradient(135deg,var(--accent-strong),#1E4FC2);
  --sidebar-active-text:#FFFFFF;
  --sidebar-border:rgba(255,255,255,.07);

  --navbar-bg:rgba(28,28,31,.88);
  --navbar-border:rgba(255,255,255,.08);

  --table-head-bg:#2B2B2F;
  --table-head-text:#F2F2F3;
  --table-row-bg:#212124;
  --table-row-text:#EDEDEE;
  --table-row-hover:#2E2E32;
  --table-border:rgba(255,255,255,.08);

  --input-bg:#1E1E21;
  --input-border:rgba(255,255,255,.16);
  --input-text:#F2F2F3;
  --input-placeholder:#86868D;

  --kpi-grad:linear-gradient(135deg,#2A2A2E,#323237);
  --kpi-text:#F2F2F3;

  --shadow-sm:0 6px 18px rgba(0,0,0,.30);
  --shadow-md:0 14px 34px rgba(0,0,0,.34);
  --shadow-lg:0 22px 54px rgba(0,0,0,.40);
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Quicksand',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:600;
  color:var(--text);
  background:var(--bg);
  transition:background-color .2s ease, color .2s ease;
}
a{color:var(--accent)}
hr{border-color:var(--border)}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ---------- 3. Sidebar ---------- */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
  display:flex; flex-direction:column; background:var(--sidebar-bg); color:var(--sidebar-text);
  border-right:1px solid var(--sidebar-border); z-index:1001;
  transition:transform .25s ease, width .25s ease, background-color .2s ease; overflow-y:auto;
  box-shadow:var(--shadow-sm);
}
.sidebar-header{
  padding:16px; font-weight:700; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--sidebar-border); font-size:var(--fs-sm); min-height:56px; color:var(--sidebar-text);
}
.sidebar-header i{color:var(--accent)}
.sidebar-menu{list-style:none;margin:0;padding:12px}
.sidebar-menu li a{
  display:flex; align-items:center; gap:12px; color:var(--sidebar-text); text-decoration:none;
  padding:10px 12px; border-radius:var(--radius-sm); transition:background .15s ease, color .15s ease; font-size:var(--fs-sm);
  font-weight:600; margin-bottom:2px;
}
.sidebar-menu li a i{width:18px; text-align:center; color:var(--sidebar-text-muted); font-size:13px}
.sidebar-menu li a:hover{background:var(--sidebar-hover)}
.sidebar-menu li a.active{background:var(--sidebar-active-bg); color:var(--sidebar-active-text); box-shadow:var(--shadow-sm)}
.sidebar-menu li a.active i{color:var(--sidebar-active-text)}
.sidebar .logout{margin-top:auto; border-top:1px solid var(--sidebar-border); padding-top:8px}

.sidebar-overlay{position:fixed; inset:0; background:rgba(10,19,34,.45); z-index:1000; display:none}
body.menu-open .sidebar-overlay{display:block}

@media (max-width:992px){
  .sidebar{transform:translateX(-100%); width:var(--sidebar-w)}
  body.menu-open .sidebar{transform:translateX(0)}
  body.is-collapsed .sidebar{width:var(--sidebar-w)}
  body.is-collapsed .sidebar-header{justify-content:flex-start; padding:16px}
  body.is-collapsed .sidebar-header span,
  body.is-collapsed .sidebar-menu li a span{width:auto!important; opacity:1!important; overflow:visible; white-space:normal}
  body.is-collapsed .sidebar-menu li a{justify-content:flex-start; gap:12px; padding:10px 12px}
  .content-wrapper, body.is-collapsed .content-wrapper{margin-left:0!important}
}
body.is-collapsed .sidebar{width:var(--sidebar-collapsed-w)}
body.is-collapsed .sidebar-header{justify-content:center; padding:16px 0}
body.is-collapsed .sidebar-header i{font-size:18px}
body.is-collapsed .sidebar-header span,
body.is-collapsed .sidebar-menu li a span{width:0!important; opacity:0!important; overflow:hidden; white-space:nowrap}
body.is-collapsed .sidebar-menu li a{justify-content:center; gap:0; padding-left:10px; padding-right:10px}
body.is-collapsed .content-wrapper{margin-left:var(--sidebar-collapsed-w)}

/* ---------- 4. Content wrapper & navbar ---------- */
.content-wrapper{
  margin-left:var(--sidebar-w); min-height:100%; position:relative; z-index:1;
  transition:margin-left .25s ease; background:var(--bg);
}
@media (max-width:992px){ .content-wrapper{margin-left:0!important} }

.navbar{
  position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:12px 16px; background:var(--navbar-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--navbar-border);
}
.brand-wrap{display:flex; align-items:center; gap:10px; min-width:0}
.brand-wrap img{height:28px; width:auto; max-width:48vw; object-fit:contain}
.hamburger{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:var(--radius-sm); padding:8px 10px; font-size:16px; flex-shrink:0;
}
.navbar-actions{display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:nowrap}
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border-radius:999px;
  color:var(--text); text-decoration:none; border:1px solid var(--border); background:var(--surface);
  font-size:var(--fs-sm); font-weight:600; transition:background .15s ease;
}
.btn-ghost:hover{background:var(--sidebar-hover); color:var(--text)}
.hello{font-size:var(--fs-sm); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:28ch; font-weight:600}
@media (max-width:992px){ .hello{display:none} }

/* ---------- 5. Theme toggle switch ---------- */
.theme-toggle-btn{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--accent);
  cursor:pointer; font-size:15px; flex-shrink:0; transition:background .15s ease, transform .15s ease;
}
.theme-toggle-btn:hover{background:var(--sidebar-hover); transform:rotate(12deg)}
.theme-toggle-btn:active{transform:scale(.92)}

/* ---------- 6. Topbar / KPI ---------- */
.topbar-row{padding:12px 16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.clock-wrap span{font-size:var(--fs-xs); color:var(--muted)}
#liveClock{font-size:var(--fs-lg); font-weight:800; letter-spacing:.3px; color:var(--text)}
.btn-grad{
  border:0; border-radius:var(--radius-sm); padding:10px 14px; font-weight:700; display:inline-flex; align-items:center;
  gap:8px; color:#fff; box-shadow:var(--shadow-sm); font-size:var(--fs-sm); cursor:pointer;
  transition:filter .15s ease, box-shadow .15s ease;
}
.btn-grad:hover{filter:brightness(1.05); box-shadow:var(--shadow-md)}
.btn-add, .btn-save{background:linear-gradient(135deg,var(--accent),var(--accent-strong))}
.btn-cancel{background:transparent; border:1.5px solid var(--muted)!important; color:var(--text)}
.btn-cancel:hover{background:var(--sidebar-hover); color:var(--text)}

.kpi-grid{display:grid; gap:12px; padding:12px 16px; grid-template-columns:repeat(12,1fr)}
.kpi{grid-column:span 3; min-width:0}
@media (max-width:1200px){ .kpi{grid-column:span 4} }
@media (max-width:992px){ .kpi{grid-column:span 6} }
@media (max-width:576px){ .kpi{grid-column:span 6} }
.kpi-card{border-radius:var(--radius-sm); overflow:hidden; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm)}
.kpi-body{padding:16px; background:var(--kpi-grad); color:var(--kpi-text)}
.kpi-title{font-size:var(--fs-xs); font-weight:700; opacity:.85; text-transform:uppercase; letter-spacing:.3px}
.kpi-value{font-size:clamp(18px, 5.5vw, 28px); font-weight:800; margin-top:6px; line-height:1.1}

/* ---------- 7. Card & table ---------- */
.card{background:var(--surface); border-radius:var(--radius-sm); border:1px solid var(--border); box-shadow:var(--shadow-sm); color:var(--text)}
.card .header{padding:16px 16px 0}
.card .body{padding:16px}
h3{font-size:var(--fs-lg); font-weight:800; letter-spacing:.2px; margin:0; color:var(--text)}
p.small, .helper{font-size:var(--fs-xxs); color:var(--muted); margin:.35rem 0 0; line-height:1.6}

.table-zone{padding:0 16px 20px}
.table-wrap, .table-responsive{
  position:relative; z-index:2; background:var(--card); border-radius:var(--radius-sm);
  border:1px solid var(--border); -webkit-overflow-scrolling:touch; overflow-y:auto; overflow-x:hidden;
}
table.dataTable{width:100%!important; border-collapse:separate; border-spacing:0}
table.dataTable thead th{
  position:sticky; top:0; z-index:5; color:var(--table-head-text); background:var(--table-head-bg);
  border-bottom:1px solid var(--table-border); font-size:var(--fs-xs); font-weight:700; padding:12px 10px;
}
table.dataTable tbody td{
  color:var(--table-row-text); background:var(--table-row-bg); font-size:var(--fs-xs); font-weight:700; padding:10px 10px;
  vertical-align:middle; border-bottom:1px solid var(--table-border);
}
table.dataTable tbody tr:hover{background:var(--table-row-hover)!important}
td .btn{font-size:var(--fs-xxs); line-height:1; border-radius:8px; padding:6px 10px}
td .btn + .btn{margin-left:8px}

.btn-sm-clean{padding:6px 10px!important; font-size:var(--fs-xxs)!important; line-height:1!important; border-radius:8px!important}
.btn-success.btn-sm-clean{background:var(--success); border:0}
.btn-danger.btn-sm-clean{background:var(--danger); border:0}
.btn-izin.btn-sm-clean, .btn-izin-active.btn-sm-clean{border:0; color:#1F2937; font-weight:700}
.btn-izin.btn-sm-clean{background:#F2C14E}
.btn-izin-active.btn-sm-clean{background:#E8A33D; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}

.dataTables_filter{display:none!important}
.dataTables_info{color:var(--muted)!important; font-size:var(--fs-xs)}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{color:var(--muted); font-size:var(--fs-xs)}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background:var(--input-bg); color:var(--input-text); border:1px solid var(--input-border);
  border-radius:8px; padding:6px 10px; font-size:var(--fs-xs);
}
.dataTables_wrapper .dataTables_paginate .paginate_button{padding:.25rem .55rem!important; font-size:var(--fs-xs)!important; color:var(--text)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; border-radius:8px!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{color:var(--muted)!important}

/* ---------- 8. Forms / inputs ---------- */
label{font-size:var(--fs-xs); font-weight:700; margin-bottom:6px; color:var(--text)}
.form-control, .form select, .form input, input[type="file"]{
  min-height:44px; border-radius:var(--radius-sm); background:var(--input-bg); color:var(--input-text);
  border:1px solid var(--input-border); font-weight:500; padding:10px 12px;
}
.form-control:focus, .form input:focus, .form select:focus, input[type="file"]:focus{
  background:var(--input-bg); color:var(--input-text); outline:none;
  box-shadow:0 0 0 .2rem var(--ring); border-color:var(--accent);
}
.form-control::placeholder, .form input::placeholder{color:var(--input-placeholder)}
.form-control:disabled, .form-control[readonly]{background:var(--bg); color:var(--muted); opacity:1; cursor:not-allowed}
input:-webkit-autofill{
  -webkit-text-fill-color:var(--input-text)!important;
  -webkit-box-shadow:0 0 0 30px var(--input-bg) inset!important;
  box-shadow:0 0 0 30px var(--input-bg) inset!important;
  transition:background-color 9999s ease-in-out 0s;
}
.input-group .form-control{border-right:0; border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.input-group .btn-eye{
  background:var(--input-bg); border:1px solid var(--input-border); color:var(--muted);
  border-left:0; min-width:44px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

.alert{border-radius:12px; border:1px solid var(--border); font-size:var(--fs-sm); padding:10px 14px; margin:12px 0}
.alert-success{background:var(--success-bg); color:var(--success); border-color:var(--success)}
.alert-danger{background:var(--danger-bg); color:var(--danger); border-color:var(--danger)}

/* ---------- 9. Auth card (sign / signup / uploads / locked) ---------- */
body.auth-page{
  display:flex; justify-content:center; align-items:center; margin:0; min-height:100vh; padding:16px;
  background:
    radial-gradient(900px 400px at -10% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(700px 500px at 110% 10%, color-mix(in srgb, var(--accent-strong) 10%, transparent), transparent 55%),
    var(--bg);
}
.login-container, .auth-card{
  background:var(--card); padding:32px; border-radius:var(--radius); width:100%; max-width:460px;
  text-align:center; box-shadow:var(--shadow-lg); border:1px solid var(--border);
}
.login-container img{width:160px; height:auto; margin-bottom:12px}
.login-container h6{margin:10px 0 22px; font-size:1.1rem; color:var(--text); font-weight:800; letter-spacing:.2px}

.btn-primary{
  --start:var(--accent-soft); --mid:var(--accent); --end:var(--accent-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)) padding-box,
             linear-gradient(135deg, var(--start), var(--mid) 45%, var(--end)) border-box;
  background-clip:padding-box, border-box; color:#fff; border:0; border-radius:var(--radius-sm);
  padding:12px 16px; font-weight:700; letter-spacing:.2px; box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover{filter:brightness(1.04); box-shadow:var(--shadow-md)}
.btn-primary:active{transform:translateY(1px)}
.btn-outline-primary{
  border-radius:var(--radius-sm); padding:12px 16px; font-weight:700; letter-spacing:.2px; color:var(--accent-strong);
  border:2px solid var(--accent); background:var(--surface); transition:color .15s ease, background .15s ease;
}
.btn-outline-primary:hover{color:#fff; background:linear-gradient(135deg,var(--accent-soft),var(--accent-strong))}

/* ---------- 10. Footer ---------- */
.footer{padding:16px; text-align:center; font-size:var(--fs-xxs); color:var(--muted)}

/* ---------- 11. Blur & readonly ---------- */
.is-blurred, .blur-target.is-blurred{filter:blur(6px); pointer-events:none; user-select:none}
.table-blur-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px; z-index:5; background:color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter:blur(2px); border:1px dashed var(--border); border-radius:var(--radius-sm);
}
.table-blur-overlay .overlay-inner{display:grid; gap:6px; place-items:center; font-size:var(--fs-sm); color:var(--text)}
.table-blur-overlay i{font-size:22px; opacity:.85; color:var(--accent)}
.table-blur-overlay strong{font-weight:800; letter-spacing:.2px}
.table-blur-overlay span{color:var(--muted)}
[data-readonly="1"] .confirm-btn, [data-readonly="1"] .delete-btn{display:none!important}
[data-readonly="1"] #searchInput{pointer-events:none; opacity:.5}

/* ---------- 12. Rekap (JM K1-K5 style cards) ---------- */
.jm-card{background:var(--card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-md); overflow:hidden}
.jm-card .body{padding:18px 18px 22px}
.jm-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 0}
.jm-title{margin:0; font-weight:800; letter-spacing:.2px; font-size:clamp(18px,2.2vw,23px); color:var(--text)}
.jm-sub{margin:0; font-size:12px; color:var(--muted)}
.jm-grid{display:grid; gap:12px; margin-top:14px; grid-template-columns:repeat(12,1fr)}
.jm-item{grid-column:span 2; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:14px 14px 16px}
@media (max-width:1199px){ .jm-item{grid-column:span 4} }
@media (max-width:767px){ .jm-item{grid-column:span 6} }
@media (max-width:480px){ .jm-item{grid-column:span 12} }
.jm-label{font-size:12.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:flex; align-items:center; gap:8px}
.jm-chip{font-size:11px; font-weight:800; line-height:1; padding:6px 8px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text)}
.jm-value{font-size:30px; font-weight:800; line-height:1.05; color:var(--text)}
.jm-izin-sub{font-size:13px; font-weight:700; color:#C9850B; margin-top:4px}
html[data-theme="dark"] .jm-izin-sub{color:#E8A33D}

/* ---------- 13. Monitoring (kiosk / TV display) ---------- */
.app{height:100vh; height:100dvh; display:grid; grid-template-rows:auto 1fr; width:100vw; max-width:100%}
.header{
  display:flex; align-items:center; justify-content:space-between; padding:12px 18px;
  background:var(--navbar-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--navbar-border);
}
.brand{display:flex; align-items:center; gap:12px}
.brand .title{font-size:var(--fs-lg); font-weight:800; letter-spacing:.2px; color:var(--text)}
.header .right{display:flex; align-items:center; gap:12px}
.btn-back{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  color:var(--text); text-decoration:none; border:1px solid var(--border); background:var(--surface);
  font-size:var(--fs-xs); font-weight:700;
}
.btn-back:hover{background:var(--sidebar-hover)}
.clock{display:flex; flex-direction:column; align-items:flex-end; line-height:1}
.clock small{color:var(--muted); font-size:var(--fs-xxs)}
.clock b{font-size:var(--fs-lg); letter-spacing:.5px; color:var(--text)}

.main{display:grid; grid-template-columns:320px 1fr; gap:14px; padding:14px 18px 18px; height:100%; min-height:0}
@media (max-width:1100px){ .main{grid-template-columns:260px 1fr} }
@media (max-width:768px){ body{overflow:auto} .app{height:auto} .main{grid-template-columns:1fr} }

.main .card{border-radius:var(--radius); box-shadow:var(--shadow-md); min-height:0; display:flex; flex-direction:column}
.main .card .head{
  padding:12px 14px; background:var(--kpi-grad); color:var(--kpi-text);
  display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;
}
.main .card .head .t{font-weight:800; font-size:var(--fs-xs)}
.main .card .body{padding:12px 14px; min-height:0; flex:1 1 auto; overflow:hidden}

.monitor-sidebar{display:grid; grid-template-rows:auto 1fr; gap:12px; min-height:0}
.kpi-number{font-size:clamp(34px, 3.5vw, 52px); font-weight:800; line-height:1.05; color:var(--text)}
.list-desa{display:flex; flex-direction:column; gap:6px; height:100%; max-height:100%; overflow-y:auto; padding-right:4px}
.list-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--border);
  border-radius:10px; padding:8px 10px; background:var(--bg);
}
.list-item .name{font-weight:700; font-size:var(--fs-xxs); color:var(--text)}
.list-item .val{font-weight:800; font-size:var(--fs-xs); color:var(--accent2)}

.monitor-content{display:grid; grid-template-rows:auto 1fr; gap:12px; min-height:0}
.top-kpi{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; min-height:0}
@media (max-width:992px){ .top-kpi{grid-template-columns:repeat(2, minmax(0,1fr))} }
.kpi-tile{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
  border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px;
  background:var(--kpi-grad); box-shadow:var(--shadow-md); color:var(--kpi-text);
}
.kpi-tile .label{font-size:var(--fs-xs); font-weight:800; text-transform:uppercase}
.kpi-tile .value{font-size:clamp(32px, 3.6vw, 54px); font-weight:800; line-height:1.0}

.grid-cards{display:grid; gap:12px; height:100%; min-height:0; overflow:auto; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(110px,1fr); padding-right:2px}
@media (max-width:1100px){ .grid-cards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:768px){ .grid-cards{grid-template-columns:repeat(2,1fr)} }
.card-desa{
  display:flex; flex-direction:column; min-height:0; border:1px solid var(--border); border-radius:14px;
  overflow:hidden; background:var(--card); box-shadow:var(--shadow-sm);
}
.card-desa .top{padding:10px 14px; background:var(--kpi-grad); color:var(--kpi-text); display:flex; align-items:center; justify-content:space-between; flex:0 0 auto}
.card-desa .desa{font-weight:800; font-size:var(--fs-xs); text-transform:uppercase}
.card-desa .body{flex:1 1 auto; padding:12px 14px; display:flex; flex-direction:column; justify-content:center; min-height:0}
.card-desa .cap{font-size:var(--fs-xxs); color:var(--muted); font-weight:700; text-transform:uppercase; margin-bottom:4px}
.card-desa .num{font-size:clamp(26px, 2.6vw, 38px); font-weight:800; line-height:1; color:var(--text)}

/* ---------- 14. Page header (profil, dsb) ---------- */
.page-header{padding:20px 16px 12px}
.page-header h1{font-size:var(--fs-xl); font-weight:800; margin:0; color:var(--text)}

/* ---------- 15. Modal (vanilla, tanpa dependency Bootstrap JS) ---------- */
.modal-backdrop-custom{
  position:fixed; inset:0; background:rgba(10,10,12,.55); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:16px;
}
.modal-backdrop-custom.show{display:flex}
.modal-box{
  background:var(--card); border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:var(--shadow-lg); max-width:540px; width:100%; max-height:90vh;
  overflow-y:auto; animation:modalPop .18s ease;
}
@keyframes modalPop{from{transform:translateY(8px); opacity:0} to{transform:translateY(0); opacity:1}}
.modal-box .modal-head{
  display:flex; align-items:center; justify-content:space-between; padding:18px 22px;
  border-bottom:1px solid var(--border);
}
.modal-box .modal-head h3{margin:0}
.modal-box .modal-close{
  background:transparent; border:0; font-size:22px; color:var(--muted); cursor:pointer;
  line-height:1; width:32px; height:32px; border-radius:50%; transition:background .15s ease;
}
.modal-box .modal-close:hover{background:var(--sidebar-hover)}
.modal-box .modal-body{padding:20px 22px}
.modal-box .modal-body label{display:block; margin-top:12px}
.modal-box .modal-body label:first-child{margin-top:0}
.modal-box .modal-footer{
  padding:16px 22px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end;
}
.modal-desa-locked{display:flex; align-items:center; gap:8px}
.modal-desa-locked i{color:var(--accent)}

/* ---------- 16. SweetAlert2 — selaraskan dgn tema & font Quicksand ---------- */
.swal-gensiti-popup{
  background:var(--card)!important; color:var(--text)!important;
  border-radius:var(--radius)!important; box-shadow:var(--shadow-lg)!important;
  font-family:'Quicksand',system-ui,sans-serif!important; border:1px solid var(--border);
}
.swal-gensiti-title{color:var(--text)!important; font-weight:800!important; font-family:inherit!important}
.swal-gensiti-text, .swal2-html-container{color:var(--muted)!important; font-family:inherit!important}
.swal-gensiti-confirm{
  background:linear-gradient(135deg,var(--accent),var(--accent-strong))!important;
  border-radius:var(--radius-sm)!important; font-weight:700!important; font-family:inherit!important;
  box-shadow:var(--shadow-sm)!important; padding:10px 22px!important;
}
.swal-gensiti-confirm.swal-gensiti-danger{
  background:linear-gradient(135deg,#F0636C,var(--danger))!important;
}
.swal-gensiti-cancel{
  background:transparent!important; color:var(--text)!important; border:1.5px solid var(--muted)!important;
  border-radius:var(--radius-sm)!important; font-weight:700!important; font-family:inherit!important;
  padding:10px 22px!important; box-shadow:none!important;
}
.swal-gensiti-toast{
  background:var(--card)!important; color:var(--text)!important; font-family:'Quicksand',sans-serif!important;
  box-shadow:var(--shadow-md)!important; border:1px solid var(--border);
}
.swal2-timer-progress-bar{background:var(--accent)!important}

@keyframes swalGensitiPop{
  0%{ transform:scale(.78) translateY(10px); opacity:0 }
  60%{ transform:scale(1.03) translateY(0); opacity:1 }
  100%{ transform:scale(1) translateY(0); opacity:1 }
}
@keyframes swalGensitiOut{
  0%{ transform:scale(1); opacity:1 }
  100%{ transform:scale(.85); opacity:0 }
}
.swal-gensiti-show{ animation:swalGensitiPop .32s cubic-bezier(.26,1.36,.52,1) both }
.swal-gensiti-hide{ animation:swalGensitiOut .18s ease both }

.swal-gensiti-icon-success{ animation:swalGensitiCheck .5s cubic-bezier(.26,1.36,.52,1) both .1s }
@keyframes swalGensitiCheck{
  0%{ transform:scale(0); opacity:0 }
  70%{ transform:scale(1.12); opacity:1 }
  100%{ transform:scale(1); opacity:1 }
}