/* ═══════════════════════════════════════════════════════════════
   SIPADI — Clean Professional UI
   Font: Poppins | Icons: Material Symbols Rounded
   ═══════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
html{font-size:14px;scroll-behavior:smooth}

/* ── CSS VARIABLES (Light mode default) ── */
:root{
  /* Brand */
  --primary:#1D6B45;
  --primary-dk:#134E32;
  --primary-lt:#2D8057;
  --primary-pale:rgba(29,107,69,.08);

  /* Gold accent */
  --gold:#B8922A;
  --gold-lt:rgba(184,146,42,.1);

  /* Semantic aliases — used in JS-generated HTML */
  --leaf:#1D6B45;--leaf2:#134E32;--leaf3:#2D8057;--leaf4:#3EAA6D;
  --ember:#B8922A;--ember2:#A07E24;--ember3:#C9A84C;--ember4:#E8D48E;
  --ink:#F2F6F4;--ink2:#E8EEE9;
  --cream:#1A2C20;--cream2:#2A4232;--cream3:#3F5A4B;--cream4:#4F6B5D;
  --glass:rgba(29,107,69,.05);--glass2:rgba(29,107,69,.08);--glass3:rgba(29,107,69,.13);
  --bdr:rgba(29,107,69,.12);--bdr2:rgba(29,107,69,.20);--bdr3:rgba(29,107,69,.30);
  --bdr4:rgba(184,146,42,.20);
  --glow:rgba(29,107,69,.18);--glow2:rgba(184,146,42,.22);
  --shadow:0 1px 4px rgba(0,0,0,.05);
  --shadow2:0 3px 14px rgba(0,0,0,.08);
  --shadow3:0 10px 40px rgba(0,0,0,.12);

  /* Layout */
  --sb:240px;--hh:60px;--r:10px;--r2:14px;--r3:20px;

  /* Theme tokens — light */
  --mode-bg:#F2F6F4;
  --mode-bg2:#E8EEE9;
  --mode-surface:#FFFFFF;
  --mode-surface2:rgba(29,107,69,.05);
  --mode-border:rgba(29,107,69,.12);
  --mode-border2:rgba(29,107,69,.22);
  --mode-text:#1A2C20;
  --mode-text2:#3A5444;
  --mode-text3:#456150;
  --mode-shadow:rgba(29,107,69,.08);
  --mode-input-bg:#FFFFFF;
  --mode-card-bg:#FFFFFF;
  --mode-sidebar:#FFFFFF;
  --mode-topbar:rgba(255,255,255,.96);
  --mode-modal:#FFFFFF;
}

/* ── DARK MODE ── */
html:not(.light){
  --ink:#0C1F14;--ink2:#102018;
  --cream:#D8EAE0;--cream2:#A8C8B8;--cream3:#7A9888;--cream4:#507060;
  --glass:rgba(45,122,79,.07);--glass2:rgba(45,122,79,.12);--glass3:rgba(45,122,79,.17);
  --bdr:rgba(45,122,79,.18);--bdr2:rgba(45,122,79,.30);--bdr3:rgba(45,122,79,.42);
  --shadow:0 2px 8px rgba(0,0,0,.3);--shadow2:0 4px 20px rgba(0,0,0,.4);--shadow3:0 12px 48px rgba(0,0,0,.55);
  --mode-bg:#0C1F14;--mode-bg2:#102018;
  --mode-surface:rgba(45,122,79,.08);
  --mode-surface2:rgba(45,122,79,.13);
  --mode-border:rgba(45,122,79,.20);
  --mode-border2:rgba(45,122,79,.32);
  --mode-text:#D8EAE0;--mode-text2:#A8C8B8;--mode-text3:#7A9888;
  --mode-shadow:rgba(0,0,0,.5);
  --mode-input-bg:rgba(45,122,79,.09);
  --mode-card-bg:rgba(45,122,79,.07);
  --mode-sidebar:rgba(8,18,12,.98);
  --mode-topbar:rgba(8,18,12,.93);
  --mode-modal:rgba(10,20,14,.99);
}

/* ── LIGHT MODE overrides for --cream/--ink swap (used in JS inline styles) ── */
html.light *{
  --cream:#1A2C20;--cream2:#2A4232;--cream3:#3F5A4B;--cream4:#4F6B5D;
  --ink:#F2F6F4;--ink2:#E8EEE9;
  --leaf4:#1D6B45;
  /* emas gelap: teks emas di atas putih & teks terang di atas emas sama-sama >= 4.5:1 */
  --ember:#8A6A12;--ember2:#735910;--ember3:#8A6A12;--ember4:#6B510C;
}

/* ── BODY ── */
body{font-family:'Poppins',sans-serif;font-weight:400;background:var(--mode-bg);color:var(--mode-text);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}
option{background:var(--mode-surface);color:var(--mode-text)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--mode-border2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--primary-lt)}

/* ── MATERIAL SYMBOLS ── */
.material-symbols-rounded{
  font-size:18px;line-height:1;vertical-align:middle;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  user-select:none;
}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle{
  position:fixed;bottom:22px;right:22px;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--mode-border2);
  background:var(--mode-surface);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  z-index:9999;box-shadow:var(--shadow2);
  transition:transform .2s,box-shadow .2s,background .3s;
}
.theme-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow3)}

/* ════════════════════════════════════════════════════
   LOGIN PAGE
════════════════════════════════════════════════════ */
#lp{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;z-index:10;padding:1.5rem;background:#EFF4F1;
}
.lp-bg,.backdrop,.orns{display:none}

.lp-container{
  display:grid;grid-template-columns:1fr 450px;width:100%;max-width:1060px;min-height:580px;
  background:#fff;border:1px solid rgba(29,107,69,.14);border-radius:22px;
  overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.1);
}

/* Panel kiri */
.lp-left{
  padding:52px 48px;
  background:#fff;border-right:1px solid rgba(29,107,69,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;
  position:relative;overflow:hidden;
}
.lp-left::after{display:none}
.lp-rings,.lp-squares{display:none}
.lp-left-top{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.lp-left-bot{position:relative;z-index:1;text-align:center;margin-top:28px}

.lp-logo{
  width:68px;height:68px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.lp-logo-letter{font-family:'Poppins',sans-serif;font-size:24px;font-weight:800;color:#f5d161;line-height:1}
.lp-full-logo{width:360px;max-width:100%;height:auto;filter:drop-shadow(0 10px 22px rgba(13,92,58,.22))}
.lp-kantor{font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:1.5px;color:#1D6B45;text-transform:uppercase;line-height:1.4;margin-bottom:22px}
.lp-kemenag{font-size:9.5px;letter-spacing:2.5px;color:#fff;text-transform:uppercase;margin-bottom:3px}
.lp-lokasi{font-size:13px;color:#fff;margin-bottom:18px}
.lp-brand-title{font-family:'Poppins',sans-serif;font-size:52px;font-weight:800;color:#f5d161;letter-spacing:3px;line-height:1;margin-bottom:5px}
.lp-brand-sub{font-size:10px;color:#fff;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:24px}
.lp-quote{border-left:2px solid rgba(255,255,255,.3);padding:13px 16px;background:rgba(255,255,255,.07);border-radius:0 8px 8px 0;margin-bottom:24px}
.lp-quote p{font-size:12.5px;line-height:1.7;color:#fff;font-style:italic}
.lp-pills{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-bottom:0}
.lp-pill{
  display:flex;align-items:center;gap:6px;padding:5px 12px;
  background:rgba(29,107,69,.07);border:1px solid rgba(29,107,69,.18);
  border-radius:20px;font-size:11.5px;color:#1D6B45;font-weight:600;
}
.lp-pill-ico{font-size:14px;opacity:.9}
.lp-copy{font-size:11px;color:#5C6B62}

/* Panel kanan */
.lp-right{padding:52px 50px 40px;display:flex;flex-direction:column;justify-content:center;background:#fff}
.lp-right-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:24px}
.lp-icon-logo{width:60px;height:60px;object-fit:contain;margin-bottom:12px}
.lp-login-title{font-family:'Poppins',sans-serif;font-size:28px;font-weight:800;letter-spacing:.5px;color:var(--primary)}
.lp-welcome{font-size:10.5px;color:var(--mode-text3);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:3px}
.lp-brand-name{font-family:'Poppins',sans-serif;font-size:36px;font-weight:800;letter-spacing:3px;line-height:1;margin-bottom:26px;color:var(--primary)}
.lp-brand-logo{width:100%;max-width:280px;height:auto;display:block;margin-bottom:26px}
.lp-tagline{font-size:12.5px;color:var(--mode-text3);margin-bottom:22px;line-height:1.5}

/* Form login */
.fi-wrap{margin-bottom:13px}
.fi-lbl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.4px;color:var(--mode-text2);margin-bottom:5px}
.fi-inp{
  width:100%;background:#F7FAF8;border:1.5px solid rgba(29,107,69,.16);
  border-radius:var(--r);padding:11px 13px;
  font-family:'Poppins',sans-serif;font-size:13px;color:var(--mode-text);
  outline:none;transition:all .2s;
}
.fi-inp:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(29,107,69,.1)}
.fi-inp::placeholder{color:var(--mode-text3);opacity:.6}
.fi-inp.sel{
  -webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231D6B45' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-color:#F7FAF8;
}
.pw-wrap{position:relative}
.pw-wrap .fi-inp{padding-right:42px}
.pw-eye{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:4px;
  color:var(--mode-text3);display:flex;align-items:center;transition:color .18s;
}
.pw-eye:hover{color:var(--primary)}

.lbtn-g{
  width:100%;padding:11px 16px;background:#F2F6F4;
  border:1.5px solid rgba(29,107,69,.18);border-radius:var(--r);
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;color:var(--mode-text2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all .2s;margin-bottom:16px;
}
.lbtn-g:hover{background:#E8EEE9;border-color:rgba(29,107,69,.3)}

.divider{display:flex;align-items:center;gap:12px;margin:14px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--mode-border)}
.divider span{font-size:11px;letter-spacing:1px;color:var(--mode-text3)}

.lbtn-main{
  width:100%;padding:12px;border:none;border-radius:var(--r);cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.5px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dk));
  color:#fff;box-shadow:0 4px 16px rgba(29,107,69,.35);transition:all .2s;margin-top:4px;
}
.lbtn-main:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(29,107,69,.45)}

.online-indicator{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font-size:11px;color:var(--mode-text3)}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 6px var(--primary);animation:pls 2s ease infinite}
@keyframes pls{0%,100%{opacity:1;box-shadow:0 0 6px var(--primary)}50%{opacity:.4;box-shadow:0 0 2px var(--primary)}}

/* Login error box */
#loginErrBox{margin-top:10px;padding:9px 13px;border-radius:8px;font-size:12px;display:none}
#loginErrBox.show{display:block;background:rgba(160,30,30,.07);border:1px solid rgba(160,30,30,.2);color:#901818}

/* Login responsive */
@media(max-width:820px){
  .lp-container{grid-template-columns:1fr;max-width:420px;min-height:0}
  .lp-login-title{font-size:24px}
  .lp-left{padding:38px 32px 32px;border-right:none;border-bottom:1px solid rgba(29,107,69,.12)}
  .lp-brand-title{font-size:40px}
  .lp-full-logo{width:220px}
  .lp-quote{display:none}
  .lp-right{padding:38px 32px}
}
@media(max-width:440px){
  #lp{padding:.75rem}
  .lp-left,.lp-right{padding:28px 20px}
  .lp-brand-title{font-size:32px}
  .lp-full-logo{width:190px}
}

/* Transition on mode switch */
body,.sidebar,.card,.modal,.topbar,.nav-item,.fc,.fi-inp,.sec-panel{
  transition:background .3s,border-color .3s,color .3s,box-shadow .3s;
}

/* ════════════════════════════════════════════════════
   APP LAYOUT
════════════════════════════════════════════════════ */
/* Dulu default-nya "none" lalu JS set jadi "block" setelah login (SPA satu-halaman).
   Sejak halaman terpisah sungguhan (dashboard.php, nikah.php, dst), #app SELALU jadi
   satu-satunya konten halaman itu -- tidak pernah perlu disembunyikan lagi. */
#app{display:block;min-height:100vh;background:var(--mode-bg)}

/* SIDEBAR */
.sb{position:fixed;top:0;left:0;width:var(--sb);height:100vh;display:flex;flex-direction:column;z-index:200;overflow:hidden}
.sb-bg{
  position:absolute;inset:0;
  background:var(--mode-sidebar);
  border-right:1px solid var(--mode-border);
  transition:background .3s,border-color .3s;
}
.sb-glow{display:none}

.sb-inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden}

.sb-header{height:var(--hh);padding:0 18px;border-bottom:1px solid var(--mode-border);display:flex;align-items:center;flex-shrink:0}
.sb-logo-row{display:flex;align-items:center;justify-content:center;width:100%}
.sb-emblem{width:34px;height:34px;flex-shrink:0}
.sb-logo-full{height:36px;width:auto;max-width:100%;display:block}
.sb-kankemenag{margin-top:8px;text-align:center;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mode-text3)}
.sb-titles h2{
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:800;letter-spacing:2px;color:var(--primary);
}
html:not(.light) .sb-titles h2{color:var(--leaf4)}
.sb-titles span{font-size:9.5px;color:var(--mode-text3);letter-spacing:.4px;display:block;margin-top:1px}

.sb-user{padding:11px 18px;border-bottom:1px solid var(--mode-border);background:var(--mode-surface2)}
.sb-user-row{display:flex;align-items:center;gap:10px}
.sb-av{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dk));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;flex-shrink:0;
}
.sb-uname{font-size:12.5px;font-weight:600;color:var(--mode-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:158px}
.sb-urole{font-size:10.5px;color:var(--mode-text3);margin-top:1px}

.sb-section{padding:13px 18px 4px}
.sb-section-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mode-text3)}

.nav-item{
  display:flex;align-items:center;gap:9px;padding:9px 14px;
  margin:2px 8px;border-radius:var(--r);cursor:pointer;
  color:var(--mode-text2);font-size:12.5px;font-weight:500;
  transition:all .18s;position:relative;
  text-decoration:none; /* .nav-item sekarang <a>, bukan <div>, sejak halaman terpisah */
}
.nav-item::before{
  content:'';position:absolute;left:0;top:22%;height:56%;width:2.5px;
  background:var(--primary);border-radius:0 2px 2px 0;opacity:0;transition:opacity .18s;
}
html:not(.light) .nav-item::before{background:var(--leaf4)}
.nav-item:hover{color:var(--mode-text);background:var(--mode-surface2)}
.nav-item.active{color:var(--primary);background:rgba(29,107,69,.09);font-weight:600}
html:not(.light) .nav-item.active{color:var(--leaf4);background:rgba(45,122,79,.12)}
.nav-item.active::before{opacity:1}
.nav-ico{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;background:var(--mode-surface);flex-shrink:0;transition:.18s;
  border:1px solid var(--mode-border);
}
.nav-item:hover .nav-ico{background:var(--mode-surface2);border-color:var(--mode-border2)}
.nav-item.active .nav-ico{background:rgba(29,107,69,.1);border-color:rgba(29,107,69,.2)}
html:not(.light) .nav-item.active .nav-ico{background:rgba(45,122,79,.15);border-color:rgba(45,122,79,.3)}
.nav-badge{
  margin-left:auto;background:var(--primary);color:#fff;
  font-size:9px;padding:1px 6px;border-radius:10px;font-weight:700;
}
html:not(.light) .nav-badge{background:rgba(45,122,79,.3);color:var(--leaf4)}

.sb-footer{
  padding:10px 12px;border-top:1px solid var(--mode-border);
  flex-shrink:0;position:sticky;bottom:0;background:var(--mode-sidebar);z-index:5;
}
.logout-btn{
  display:flex;align-items:center;gap:8px;color:var(--mode-text3);
  font-size:12px;cursor:pointer;padding:8px 10px;border-radius:var(--r);transition:.18s;
  text-decoration:none; /* sekarang <a>, bukan <div> */
}
.logout-btn:hover{color:#c0392b;background:rgba(192,57,43,.07)}
.sb-version{font-size:10px;color:var(--mode-text3);margin-top:6px;text-align:center;font-family:'Poppins',monospace}

/* MAIN + TOPBAR */
.main{margin-left:var(--sb);min-height:100vh;display:flex;flex-direction:column}
.topbar{
  height:var(--hh);background:var(--mode-topbar);
  border-bottom:1px solid var(--mode-border);
  padding:0 26px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:100;
  box-shadow:var(--shadow);backdrop-filter:blur(12px);
  transition:background .3s,border-color .3s;
}
.topbar-breadcrumb{flex:1}
.topbar-title{font-size:14.5px;font-weight:700;color:var(--mode-text)}
.topbar-path{font-size:10px;color:var(--mode-text3);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-chip{
  padding:4px 11px;border-radius:20px;font-size:9.5px;font-weight:600;letter-spacing:.3px;
  background:var(--mode-surface2);color:var(--mode-text2);border:1px solid var(--mode-border2);
}
.topbar-btn{
  width:33px;height:33px;border-radius:9px;background:var(--mode-surface2);
  border:1px solid var(--mode-border);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--mode-text3);font-size:14px;transition:.18s;
}
.topbar-btn:hover{background:var(--mode-surface);color:var(--mode-text);border-color:var(--mode-border2)}

.content{padding:22px 26px;flex:1}

/* ════════════════════════════════════════════════════
   STAT CARDS
════════════════════════════════════════════════════ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stats-grid-1{grid-template-columns:repeat(1,1fr)}
.stats-grid-2{grid-template-columns:repeat(2,1fr)}
.stats-grid-5{grid-template-columns:repeat(5,1fr)}
.stats-grid-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:640px){.stats-grid-2{grid-template-columns:repeat(1,1fr)}}
@media(max-width:1100px){.stats-grid-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.stats-grid-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1300px){.stats-grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.stats-grid-6{grid-template-columns:repeat(2,1fr)}}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stat-card{
  position:relative;border-radius:var(--r2);padding:18px 16px;overflow:hidden;
  cursor:default;transition:transform .2s,box-shadow .2s;
  animation:fadeUp .4s cubic-bezier(.16,1,.3,1) both;
  box-shadow:var(--shadow2);
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow3)}
.stat-card:nth-child(1){animation-delay:.04s}
.stat-card:nth-child(2){animation-delay:.08s}
.stat-card:nth-child(3){animation-delay:.12s}
.stat-card:nth-child(4){animation-delay:.16s}
.stat-card:nth-child(5){animation-delay:.20s}
.stat-card:nth-child(6){animation-delay:.24s}

/* Remove decorative noise & corner */
.stat-noise,.stat-corner{display:none}

/* Badge kecil di pojok — chip putih tembus pandang di atas warna solid */
.stat-sub{
  position:absolute;top:13px;right:13px;font-size:10px;padding:2px 8px;border-radius:8px;
  font-weight:700;letter-spacing:.5px;background:rgba(0,0,0,.28);color:#fff;
}
.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3ee07a;margin-right:5px;vertical-align:1px;
  box-shadow:0 0 0 0 rgba(62,224,122,.7);animation:onlinePulse 2s infinite}
@keyframes onlinePulse{70%{box-shadow:0 0 0 6px rgba(62,224,122,0)}100%{box-shadow:0 0 0 0 rgba(62,224,122,0)}}
.stat-icon{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:17px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12);flex-shrink:0;
}
/* Ikon & angka sejajar di baris pertama; label, bar progres & keterangan selebar kartu di bawahnya */
.stat-card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.stat-icon{grid-column:1;grid-row:1}
.stat-num{grid-column:2;grid-row:1}
.stat-label,.stat-extra,.stat-card .prog{grid-column:1/-1}
.stat-card .stat-sub{position:static;grid-column:2;grid-row:2;justify-self:end;align-self:end;margin-top:12px} /* chip (persen/AKTIF) sebaris dengan label, kanan */
.stat-card .stat-label{grid-row:2}
.stat-card .stat-sub ~ .stat-label{padding-right:52px}
.stat-num:first-child{grid-column:1/-1} /* kartu tanpa ikon (mis. Kepegawaian) */
.stat-num:first-child + .stat-label{margin-top:6px}
/* Angka besar: Inter + digit tabular supaya deretan angka (11.599) jelas terbaca */
.stat-num{font-family:'Inter','Poppins',sans-serif;font-size:clamp(22px,2.2vw,30px);font-weight:800;line-height:1.05;letter-spacing:0;font-variant-numeric:tabular-nums lining-nums;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-num small{font-size:.55em;font-weight:600;opacity:.8;margin-left:2px}
.stat-label{font-size:11.5px;margin-top:12px;font-weight:600;color:#fff}
/* Sisa "belum upload" per card (register/NB nikah) — cuma tampil kalau angkanya >0 */
.stat-extra{font-size:10px;margin-top:4px;font-weight:700;color:rgba(255,255,255,.88)}

/* Jade — Register Nikah (hijau brand utama) */
.stat-card.c-jade{background:#1D6B45}
.c-jade .stat-icon{color:#1D6B45}

/* Gold — Arsip Ijazah (emas brand, dipekatkan untuk kontras teks putih) */
.stat-card.c-gold{background:#8A6A12}
.c-gold .stat-icon{color:#8A6A12}

/* Teal — Satuan Kerja */
.stat-card.c-blue{background:#146C8C}
.c-blue .stat-icon{color:#146C8C}

/* Indigo — Operator Aktif */
.stat-card.c-rose{background:#5B4B9E}

/* Copper — Kepegawaian */
.stat-card.c-copper{background:#8B5A2B}
.c-copper .stat-icon{color:#8B5A2B}

.stat-card.c-red{background:#A63A2E}
.c-red .stat-icon{color:#A63A2E}
.c-rose .stat-icon{color:#5B4B9E}

/* ════════════════════════════════════════════════════
   CARD
════════════════════════════════════════════════════ */
.card{
  background:var(--mode-card-bg);border:1px solid var(--mode-border);
  border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--shadow);
  animation:fadeUp .35s cubic-bezier(.16,1,.3,1) both;
}
.card-header{
  padding:13px 18px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--mode-border);background:var(--mode-surface2);
}
.card-header h3{font-size:13px;font-weight:700;color:var(--mode-text);flex:1}
.card-body{padding:18px}

/* ════════════════════════════════════════════════════
   TABLE
════════════════════════════════════════════════════ */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead tr{border-bottom:1px solid var(--mode-border)}
thead th{
  padding:10px 13px;text-align:left;font-size:9.5px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--mode-text3);
  white-space:nowrap;background:#fff;
}
tbody td{
  padding:11px 13px;font-size:12.5px;font-weight:400;
  border-bottom:1px solid var(--mode-border);color:var(--mode-text2);vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover td{background:var(--mode-surface2)}
.td-bold{color:var(--mode-text)!important;font-weight:600}
.td-mono{font-family:'Poppins',monospace;font-size:11px!important;color:var(--mode-text3)!important}

/* ════════════════════════════════════════════════════
   BADGES
════════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.badge-jade{background:rgba(29,107,69,.1);color:#1D6B45;border:1px solid rgba(29,107,69,.2)}
.badge-gold{background:rgba(184,146,42,.1);color:#7A5A10;border:1px solid rgba(184,146,42,.22)}
.badge-blue{background:rgba(30,80,180,.1);color:#1E50B4;border:1px solid rgba(60,120,220,.2)}
.badge-rose{background:rgba(160,40,100,.1);color:#A02864;border:1px solid rgba(200,60,130,.2)}
.badge-red{background:rgba(160,30,30,.08);color:#9A1818;border:1px solid rgba(160,30,30,.2)}
html:not(.light) .badge-jade{background:rgba(45,122,79,.18);color:var(--leaf4);border-color:rgba(45,122,79,.32)}
html:not(.light) .badge-gold{background:rgba(184,128,42,.18);color:var(--ember3);border-color:rgba(184,128,42,.32)}
html:not(.light) .badge-blue{background:rgba(30,80,180,.18);color:#7ec8ff;border-color:rgba(60,120,220,.32)}
html:not(.light) .badge-rose{background:rgba(200,50,110,.18);color:#ff90cc;border-color:rgba(200,50,110,.32)}
html:not(.light) .badge-red{background:rgba(200,50,50,.14);color:#ff8080;border-color:rgba(200,50,50,.28)}

/* ════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 16px;border:none;border-radius:var(--r);cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;
  transition:all .18s;white-space:nowrap;letter-spacing:.2px;
  text-decoration:none; /* .btn kadang dipakai di <a> juga (mis. "Lihat Semua") */
}
.btn-jade{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(29,107,69,.25)}
.btn-jade:hover{background:var(--primary-dk);transform:translateY(-1px);box-shadow:0 4px 16px rgba(29,107,69,.35)}
.btn-gold{background:#8A6A12;color:#fff;box-shadow:0 2px 8px rgba(138,106,18,.28)}
.btn-gold:hover{background:#735910;transform:translateY(-1px)}
.btn-glass{background:var(--mode-surface2);color:var(--mode-text2);border:1px solid var(--mode-border2)}
.btn-glass:hover{background:var(--mode-surface);color:var(--mode-text);border-color:var(--mode-border2)}
.btn-red{background:rgba(160,30,30,.08);color:#9A1818;border:1px solid rgba(160,30,30,.2)}
.btn-red:hover{background:rgba(160,30,30,.15)}
html:not(.light) .btn-red{background:rgba(200,50,50,.12);color:#ff8080;border-color:rgba(200,50,50,.25)}
.btn-sm{padding:5px 11px;font-size:11px;border-radius:8px}

/* ════════════════════════════════════════════════════
   FORM ELEMENTS
════════════════════════════════════════════════════ */
.fg{margin-bottom:14px}
.fg label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.3px;color:var(--mode-text2);margin-bottom:5px}
.fc{
  width:100%;background:var(--mode-input-bg);border:1.5px solid var(--mode-border);
  border-radius:var(--r);padding:10px 12px;
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:400;color:var(--mode-text);
  outline:none;transition:all .2s;-webkit-appearance:none;
}
.fc:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,107,69,.1)}
.fc::placeholder{color:var(--mode-text3);opacity:.55}
select.fc{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231D6B45' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  cursor:pointer;padding-right:34px;
}
html:not(.light) select.fc{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233EAA6D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* Section panel */
.sec-panel{background:var(--mode-surface2);border:1px solid var(--mode-border);border-radius:var(--r);padding:15px;margin-bottom:12px}
.sec-panel-title{font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--primary);margin-bottom:11px;display:flex;align-items:center;gap:7px}
html:not(.light) .sec-panel-title{color:var(--leaf4)}
.sec-panel-title::before{content:'';display:inline-block;width:2.5px;height:10px;background:currentColor;border-radius:2px}

/* ════════════════════════════════════════════════════
   SEARCH & FILTER
════════════════════════════════════════════════════ */
.search-wrap{position:relative;flex:1;min-width:180px}
.search-wrap input{
  width:100%;background:var(--mode-input-bg);border:1.5px solid var(--mode-border);
  border-radius:var(--r);padding:9px 12px 9px 36px;
  font-family:'Poppins',sans-serif;font-size:12.5px;color:var(--mode-text);outline:none;transition:.2s;
}
.search-wrap input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,107,69,.1)}
.search-wrap input::placeholder{color:var(--mode-text3);opacity:.55}
.search-wrap::before{
  content:'⌕';position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--mode-text3);pointer-events:none;
}
.search-input{
  width:100%;background:var(--mode-input-bg);border:1.5px solid var(--mode-border);
  border-radius:var(--r);padding:9px 12px;
  font-family:'Poppins',sans-serif;font-size:12.5px;color:var(--mode-text);outline:none;transition:.2s;
}
.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,107,69,.1)}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}

/* ════════════════════════════════════════════════════
   TABS
════════════════════════════════════════════════════ */
.tabs{
  display:flex;gap:3px;background:var(--mode-surface2);
  border:1px solid var(--mode-border);border-radius:12px;padding:4px;margin-bottom:16px;
}
.tab-btn{
  flex:1;padding:8px 12px;background:none;border:none;border-radius:9px;
  font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:500;
  cursor:pointer;color:var(--mode-text3);transition:.18s;text-align:center;
}
.tab-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(29,107,69,.25)}

/* ════════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);
  backdrop-filter:blur(5px);z-index:1000;
  align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--mode-modal);border:1px solid var(--mode-border2);
  border-radius:var(--r3);width:100%;max-width:580px;max-height:90vh;
  overflow-y:auto;box-shadow:var(--shadow3);
  animation:modalIn .25s cubic-bezier(.16,1,.3,1);
}
.modal-lg{max-width:740px}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
.modal::before{
  content:'';display:block;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--leaf4),var(--primary));
  border-radius:var(--r3) var(--r3) 0 0;
}
.modal-head{padding:15px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--mode-border)}
.modal-head h3{font-size:13.5px;font-weight:700;color:var(--mode-text);flex:1;letter-spacing:.2px}
.modal-close{
  background:none;border:none;cursor:pointer;
  font-size:16px;color:var(--mode-text3);padding:4px 7px;
  border-radius:7px;transition:.18s;line-height:1;
}
.modal-close:hover{color:var(--mode-text);background:var(--mode-surface2)}
.modal-body{padding:18px 20px}
.modal-footer{padding:13px 20px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--mode-border)}

/* ════════════════════════════════════════════════════
   DROP ZONE
════════════════════════════════════════════════════ */
.dropzone{
  border:2px dashed var(--mode-border2);border-radius:var(--r2);
  padding:36px 20px;text-align:center;cursor:pointer;
  transition:.2s;background:var(--mode-surface);
}
.dropzone:hover,.dropzone.dragging{border-color:var(--primary);background:rgba(29,107,69,.04)}
.dz-icon{font-size:40px;display:block;margin-bottom:11px;opacity:.55}
.dz-text{font-size:12.5px;color:var(--mode-text3);line-height:1.6}
.dz-text strong{color:var(--primary)}

/* ════════════════════════════════════════════════════
   DOC PREVIEW
════════════════════════════════════════════════════ */
.doc-preview{background:#fff;color:#1a1a1a;border-radius:var(--r);padding:24px;font-family:'Poppins',sans-serif}
.doc-header{display:flex;align-items:center;gap:14px;border-bottom:4px double #1D6B45;padding-bottom:13px;margin-bottom:6px;position:relative}
.doc-header img,.doc-logo{width:60px;height:60px;object-fit:contain;flex-shrink:0}
.doc-header-text{flex:1;text-align:center}
.doc-header-text .dept{font-family:Georgia,'Times New Roman',serif;font-size:14px;font-weight:700;letter-spacing:.5px;color:#111;text-transform:uppercase}
.doc-header-text .dept2{font-family:Georgia,'Times New Roman',serif;font-size:11px;color:#333;margin-top:2px}
.doc-title{font-size:17px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#1D6B45;text-align:center;margin:14px 0 16px}
.doc-h1{font-size:12px;font-weight:700;text-align:center;text-transform:uppercase;line-height:1.4}
.doc-h2{font-size:11px;text-align:center;color:#555}
.doc-section{font-size:8.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#1D6B45;padding:7px 0;border-bottom:1px solid rgba(29,107,69,.18);margin:12px 0 7px}
.doc-row{display:flex;gap:12px;margin-bottom:5px}
.doc-row .k{width:130px;flex-shrink:0;font-size:11.5px;color:#666}
.doc-row .v{font-size:11.5px;font-weight:600;color:#222}
/* Angka di ringkasan (NIK/NISN/NIP/nomor akta): sama dengan kartu statistik — Inter, digit tabular */
.doc-preview .num,.doc-row .v.num{font-family:'Inter','Poppins',sans-serif;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.3px}
.doc-qr p{font-size:9px;color:#888;margin-top:4px;font-family:'Courier New',monospace}
.doc-hash{background:#F0F5F2;border:1px solid rgba(29,107,69,.15);border-radius:6px;padding:7px 10px;font-size:9.5px;font-family:'Courier New',monospace;color:#1D6B45;word-break:break-all;margin-top:10px}

/* ════════════════════════════════════════════════════
   ALERTS
════════════════════════════════════════════════════ */
.alert-ok{padding:10px 14px;border-radius:var(--r);background:rgba(29,107,69,.07);border:1px solid rgba(29,107,69,.2);color:#1D4A30;font-size:12.5px}
.alert-warn{padding:10px 14px;border-radius:var(--r);background:rgba(184,146,42,.08);border:1px solid rgba(184,146,42,.2);color:#6A4A08;font-size:12.5px}
.alert-err{padding:10px 14px;border-radius:var(--r);background:rgba(160,30,30,.07);border:1px solid rgba(160,30,30,.2);color:#901818;font-size:12.5px}
.alert-info{padding:10px 14px;border-radius:var(--r);background:rgba(30,80,180,.06);border:1px solid rgba(30,80,180,.15);color:#1E50B4;font-size:12.5px}
html:not(.light) .alert-ok{background:rgba(45,122,79,.1);border-color:rgba(45,122,79,.25);color:#7ACA9A}
html:not(.light) .alert-warn{background:rgba(184,128,42,.1);border-color:rgba(184,128,42,.22);color:var(--ember3)}
html:not(.light) .alert-err{background:rgba(200,50,50,.1);border-color:rgba(200,50,50,.22);color:#ff8080}
html:not(.light) .alert-info{background:rgba(30,80,180,.12);border-color:rgba(30,80,180,.25);color:#bcdcff}
.mb-24{margin-bottom:24px}

/* ════════════════════════════════════════════════════
   VERIFY
════════════════════════════════════════════════════ */
.verify-box{background:var(--mode-surface);border:1px solid var(--mode-border);border-radius:var(--r2);padding:26px;text-align:center;margin-bottom:18px}
.verify-box p{font-size:13px;color:var(--mode-text3);margin-bottom:16px;line-height:1.6}
.verify-input-row{display:flex;gap:9px;max-width:620px;margin:0 auto}

/* ════════════════════════════════════════════════════
   GUIDE PAGE
════════════════════════════════════════════════════ */
.guide-tabs{display:flex;gap:3px;background:var(--mode-surface2);border:1px solid var(--mode-border);border-radius:12px;padding:4px;margin-bottom:18px;width:fit-content}
.guide-tab{padding:7px 18px;background:none;border:none;border-radius:9px;font-family:'Poppins',sans-serif;font-size:12px;font-weight:500;cursor:pointer;color:var(--mode-text3);transition:.18s}
.guide-tab.active,.guide-tab.netlify.active{background:var(--primary);color:#fff}
.guide-section{margin-bottom:18px}
.guide-section h3{font-size:13.5px;font-weight:700;color:var(--mode-text);margin-bottom:10px;display:flex;align-items:center;gap:9px}
.step-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:10.5px;font-weight:700;flex-shrink:0}
.step-badge.netlify{background:#00ad9f}
.step-item{display:flex;align-items:flex-start;gap:9px;padding:8px 0;font-size:12.5px;color:var(--mode-text2);border-bottom:1px solid var(--mode-border)}
.step-item:last-child{border-bottom:none}
.inline-code{background:var(--mode-surface2);border:1px solid var(--mode-border);border-radius:4px;padding:1px 5px;font-family:'Poppins',monospace;font-size:11px;color:var(--primary)}
html:not(.light) .inline-code{color:var(--leaf4)}
pre.code-block{background:var(--mode-surface2);border:1px solid var(--mode-border);border-radius:var(--r);padding:14px;font-family:'Poppins',monospace;font-size:11px;color:var(--mode-text2);overflow-x:auto;margin-bottom:10px;line-height:1.65;white-space:pre}
pre.code-block::before{content:attr(data-lang);display:block;font-size:8.5px;letter-spacing:1.5px;color:var(--mode-text3);text-transform:uppercase;margin-bottom:7px;font-weight:700}

/* Netlify card */
.netlify-card{background:var(--mode-surface);border:1px solid var(--mode-border);border-radius:var(--r2);margin-bottom:14px;overflow:hidden}
.netlify-card-header{padding:12px 16px;background:var(--mode-surface2);border-bottom:1px solid var(--mode-border);display:flex;align-items:center;gap:9px}
.netlify-card-header h4{font-size:13px;font-weight:700;color:var(--mode-text);flex:1}
.badge-netlify{background:#00ad9f;color:#fff;font-size:8.5px;padding:2px 7px;border-radius:8px;font-weight:700}
.netlify-step{display:flex;gap:11px;padding:11px 16px;border-bottom:1px solid var(--mode-border)}
.netlify-step:last-child{border-bottom:none}
.netlify-step-num{width:22px;height:22px;border-radius:50%;background:#00ad9f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex-shrink:0;margin-top:1px}
.netlify-step-content h5{font-size:12.5px;font-weight:600;color:var(--mode-text);margin-bottom:3px}
.netlify-step-content p{font-size:11.5px;color:var(--mode-text3);line-height:1.5}
.env-table{width:100%;border-collapse:collapse;font-size:11.5px}
.env-table th{padding:7px 11px;background:var(--mode-surface2);border:1px solid var(--mode-border);font-weight:700;color:var(--mode-text);text-align:left;font-size:10.5px;letter-spacing:.4px}
.env-table td{padding:7px 11px;border:1px solid var(--mode-border);color:var(--mode-text2)}
.check-list{padding-left:18px;color:var(--mode-text2)}
.check-list li{padding:4px 0;font-size:12.5px}

/* ════════════════════════════════════════════════════
   LAPORAN (BAR CHART)
════════════════════════════════════════════════════ */
.bar-row{display:flex;align-items:center;gap:11px;padding:7px 0;border-bottom:1px solid var(--mode-border)}
.bar-name{width:150px;font-size:12px;color:var(--mode-text2);flex-shrink:0}
.bar-track{flex:1;height:5px;background:var(--mode-surface2);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width 1s cubic-bezier(.2,1,.3,1)}
.bar-val{width:36px;font-size:12px;font-weight:700;color:var(--mode-text);text-align:right;flex-shrink:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Warna isi bar — dipakai bergantian sesuai jenis data (jangan pakai acak) */
.bar-fill.jade{background:var(--primary)}
.bar-fill.gold{background:var(--gold)}
.bar-fill.red{background:#A63A2E}
.bar-fill.blue{background:#2A78D6}
.bar-fill.orange{background:#EB6834}
.bar-fill.aqua{background:#1BAF7A}

/* ════════════════════════════════════════════════════
   LAPORAN — STATISTIK KEPEGAWAIAN, TREN, VERIFIKASI
════════════════════════════════════════════════════ */
.three-col-lap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.three-col-lap{grid-template-columns:1fr}}
.lap-subhead{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mode-text3);margin-bottom:10px}
.lap-empty{color:var(--mode-text3);font-size:12.5px;text-align:center;padding:20px 0;font-style:italic}

.lap-legend{display:flex;gap:14px;flex-wrap:wrap}
.lap-legend .lg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--mode-text3);font-weight:600}
.lap-legend .lg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

.tren-chart{display:flex;align-items:flex-end;gap:26px;min-height:190px;padding:26px 6px 0;overflow-x:auto}
.tren-col{display:flex;flex-direction:column;align-items:center;gap:9px;flex-shrink:0}
.tren-bars{display:flex;align-items:flex-end;gap:4px;height:140px}
.tren-bar{width:16px;min-height:2px;border-radius:4px 4px 0 0;position:relative}
.tren-bar .tren-val{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:700;color:var(--mode-text2);white-space:nowrap}
.tren-year{font-size:11px;color:var(--mode-text3);font-weight:600}

.verif-row{margin-bottom:16px}
.verif-row:last-child{margin-bottom:0}
.verif-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin-bottom:6px}
.verif-head .name{color:var(--mode-text2);font-weight:600}
.verif-head .pct{color:var(--mode-text);font-weight:700;font-size:13px}
.verif-head .sub{color:var(--mode-text3);font-size:11px;margin-left:6px}
.verif-track{height:8px;background:var(--mode-surface2);border-radius:4px;overflow:hidden}
.verif-fill{height:100%;background:var(--primary);border-radius:4px;transition:width 1s cubic-bezier(.2,1,.3,1)}

/* ════════════════════════════════════════════════════
   PAGES
════════════════════════════════════════════════════ */
.page{display:none}
.page.active{display:block}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.page-eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mode-text3);margin-bottom:3px}
.page-title{font-size:19px;font-weight:700;color:var(--mode-text)}

/* ════════════════════════════════════════════════════
   MISC
════════════════════════════════════════════════════ */
code{background:var(--mode-surface2);border-radius:4px;padding:1px 5px;font-family:'Poppins',monospace;font-size:11.5px;color:var(--primary)}
html:not(.light) code{color:var(--leaf4)}
strong{color:var(--mode-text)}
.icon{flex-shrink:0}

/* OCR status */
#ocrStatus{display:none;padding:12px 16px;border-radius:var(--r);margin-bottom:14px;font-size:12.5px;align-items:center;gap:9px}


/* Bar progres upload (Dashboard & Database Catin) */
.prog{height:6px;border-radius:99px;background:var(--mode-border);overflow:hidden;min-width:70px}
.prog>i{display:block;height:100%;width:0;background:var(--leaf);border-radius:inherit;transition:width .4s}
.stat-card .prog{position:relative;margin-top:10px;background:rgba(255,255,255,.25)}
.stat-card .prog>i{background:#fff}
@media(max-width:900px){.stats-grid:not(.stats-grid-1):not(.stats-grid-2):not(.stats-grid-5):not(.stats-grid-6){grid-template-columns:repeat(2,1fr)}}

/* Paginasi tabel (pgSlice di js/core.js) */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--mode-border);font-size:12px;color:var(--cream4)}
.pager label{display:flex;align-items:center;gap:8px}
.pager select.fc.pager-size{width:auto;min-width:76px;padding:6px 32px 6px 12px;background-position:right 11px center;font-size:12px}
.pager-nav{display:flex;align-items:center;gap:4px}
.pager-page{padding:0 8px;white-space:nowrap}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--mode-border);background:transparent;color:inherit;cursor:pointer}
.pager-btn .material-symbols-rounded{font-size:18px}
.pager-btn:hover:not(:disabled){background:var(--mode-surface2)}
.pager-btn:disabled{opacity:.35;cursor:default}

/* Database Catin: kelompok per KUA (renderDb di js/database.js) */
.kua-grp{border-top:1px solid var(--mode-border)}
.kua-grp-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;padding:14px 18px;background:transparent;border:none;cursor:pointer;text-align:left;font-family:'Poppins',sans-serif;color:var(--mode-text)}
.kua-grp-head:hover{background:var(--mode-surface2)}
.kua-grp-chev{transition:transform .2s;color:var(--cream4)}
.kua-grp:not(.open) .kua-grp-chev{transform:rotate(-90deg)}
.kua-grp-name{font-weight:600;font-size:13px}
.kua-grp-meta{font-size:12px;color:var(--cream4);margin-right:auto}
.kua-grp.open .kua-grp-head{background:var(--mode-surface2)}
.kua-grp-row{display:flex;align-items:center}
.kua-grp-row .kua-grp-head{flex:1;min-width:0}
.kua-grp-row:hover,.kua-grp.open .kua-grp-row{background:var(--mode-surface2)}
.kua-grp-del{margin:0 14px 0 4px;flex-shrink:0}

/* ════════════════════════════════════════════════════
   SIDEBAR BUKA/TUTUP
   Layar lebar: tombol ☰ / ✕ melipat sidebar (body.sb-collapsed, diingat di localStorage).
   Layar sempit (≤900px): sidebar tersembunyi, tampil melayang di atas konten (body.sb-open)
   dengan latar gelap; klik latar / ✕ / pilih menu menutupnya.
════════════════════════════════════════════════════ */
.sb{transition:transform .25s ease}
.main{transition:margin-left .25s ease}
.sb-header{position:relative;padding-right:44px}
.sb-close{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:30px;height:30px;border-radius:8px;border:1px solid var(--mode-border);
  background:var(--mode-surface);color:var(--mode-text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0
}
.sb-close:hover{color:var(--mode-text);border-color:var(--mode-border2)}
.sb-close .material-symbols-rounded{font-size:18px}
.sb-overlay{display:none}
body.sb-collapsed .sb{transform:translateX(-100%)}
body.sb-collapsed .main{margin-left:0}
/* Sidebar terbuka sudah punya tombol ✕, jadi ☰ di topbar hanya muncul saat sidebar tertutup */
@media(min-width:901px){ body:not(.sb-collapsed) .sb-toggle{display:none} }
@media(max-width:900px){
  .sb{transform:translateX(-100%)}
  .main{margin-left:0}
  body.sb-open .sb{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}
  body.sb-open .sb-overlay{display:block;position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.4)}
  .topbar{padding:0 14px}
  .topbar-chip{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ════════════════════════════════════════════════════
   ANTRIAN VERIFIKASI (antrian.php)
════════════════════════════════════════════════════ */
.av-layout{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start}
.av-list-card,.av-detail-card{margin:0}
.av-list{max-height:calc(100vh - 300px);min-height:200px;overflow-y:auto}
.av-item{padding:11px 16px;border-bottom:1px solid var(--mode-border);cursor:pointer;border-left:3px solid transparent}
.av-item:hover{background:var(--mode-surface2)}
.av-item.active{background:rgba(29,107,69,.07);border-left-color:var(--primary)}
.av-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.av-item-name{font-size:13px;font-weight:600;color:var(--mode-text);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-item-sub{font-size:11px;color:var(--mode-text3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-no{display:inline-block;min-width:22px;margin-right:6px;padding:1px 5px;border-radius:6px;background:var(--mode-surface2);color:var(--mode-text3);font-size:10.5px;font-weight:700;text-align:center}
.av-chk{display:inline-block;margin-top:5px;font-size:10.5px;font-weight:600;color:var(--mode-text3)}
.av-chk.on{color:var(--primary)}
.av-item.checked{background:rgba(29,107,69,.035)}
.av-periksa-sum{display:flex;gap:14px;padding:8px 16px;border-bottom:1px solid var(--mode-border)}
.av-periksa-sum .av-chk{margin-top:0}
#avBtnAll:disabled{opacity:.45;cursor:not-allowed}
.av-empty{padding:48px 20px;text-align:center;color:var(--mode-text3);font-size:13px}
.av-empty .material-symbols-rounded{display:block;font-size:36px;margin-bottom:8px;opacity:.6}
.av-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--mode-border);flex-wrap:wrap}
.av-title{font-size:15px;font-weight:700;color:var(--mode-text);display:flex;align-items:center;gap:8px}
.av-actions{display:flex;gap:6px;align-items:center}
.av-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.av-body{padding:14px 18px}
.av-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 18px;margin-bottom:14px}
.av-f{font-size:12px;min-width:0}
.av-f span{display:block;color:var(--mode-text3);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px}
.av-f b{color:var(--mode-text);font-weight:600;word-break:break-word}
.av-frame{width:100%;height:calc(100vh - 330px);min-height:420px;border:1px solid var(--mode-border);border-radius:8px;background:#fff}
@media(max-width:1000px){
  .av-layout{grid-template-columns:1fr}
  .av-list{max-height:280px}
  .av-frame{height:70vh}
}

/* ════════════════════════════════════════════════════
   DASHBOARD: kartu bisa diklik + Tren Upload Harian
════════════════════════════════════════════════════ */
a.stat-card{text-decoration:none;color:inherit;cursor:pointer}
a.stat-card:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.dtren-sum{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:18px;align-items:flex-end}
.dtren-sum>div{display:flex;flex-direction:column}
.dtren-sum b{font-size:20px;font-weight:700;color:var(--mode-text);line-height:1.1}
.dtren-sum span{font-size:11px;color:var(--mode-text3)}
.dtren-sum .dtren-note{font-size:11px;color:var(--mode-text3);font-style:italic}
.dtren{position:relative}
.dtren-plot{position:relative;height:160px;margin:18px 0 26px 30px}
.dtren-grid{position:absolute;left:0;right:0;border-top:1px dashed var(--mode-border);pointer-events:none}
.dtren-grid span{position:absolute;left:-30px;top:-8px;width:24px;text-align:right;font-size:10px;color:var(--mode-text3)}
.dtren-cols{position:absolute;inset:0;display:flex;gap:2px}
.dtren-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative;cursor:default}
.dtren-col:hover{background:rgba(127,127,127,.08)}
.dtren-stack{display:flex;flex-direction:column-reverse;gap:2px;align-items:center;position:relative}
.dtren-stack i{display:block;width:min(70%,18px)}
.dtren-stack i:last-of-type{border-radius:4px 4px 0 0}
.dtren-top{position:absolute;top:-17px;font-size:10px;font-weight:700;color:var(--mode-text2)}
.dtren-x{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--mode-text3);white-space:nowrap}
.dtren-tip{display:none;position:absolute;z-index:5;pointer-events:none;min-width:150px;padding:8px 10px;border-radius:8px;
  background:var(--mode-surface);border:1px solid var(--mode-border2);box-shadow:var(--shadow3);font-size:11.5px;color:var(--mode-text)}
.dtren-tip b{display:block;margin-bottom:4px}
.dtren-tip div{display:flex;align-items:center;gap:6px;line-height:1.7}
.dtren-tip em{margin-left:auto;font-style:normal;font-weight:700;padding-left:12px}
.dtren-tip .tot{border-top:1px solid var(--mode-border);margin-top:3px;padding-top:2px}
.dtren-tip .lg-dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ════════════════════════════════════════════════════
   PWA: tombol Install Aplikasi + panduan iPhone
════════════════════════════════════════════════════ */
.pwa-float{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;align-items:center;gap:6px}
.pwa-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:22px;cursor:pointer;border:0;
  background:var(--primary);color:#fff;font:600 13px Poppins,sans-serif;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.pwa-btn:hover{background:var(--primary-dk)}
.pwa-btn .material-symbols-rounded{font-size:20px}
.pwa-x{width:28px;height:28px;border-radius:50%;border:1px solid var(--mode-border2);background:var(--mode-surface,#fff);color:var(--mode-text2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.pwa-x .material-symbols-rounded{font-size:16px}
/* Kotak progres upload naik sedikit kalau tombol install sedang tampil, supaya tidak menutupinya. */
#pwaInstallBtn ~ #uploadProgressBox{bottom:72px!important}
.pwa-ios{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.pwa-ios-box{width:100%;max-width:420px;background:var(--mode-surface,#fff);color:var(--mode-text,#1B2B22);border-radius:16px;padding:20px;font-size:14px;line-height:1.6}
.pwa-ios-box ol{padding-left:20px;margin:10px 0 16px}
.pwa-ios-box .material-symbols-rounded{font-size:18px;vertical-align:-4px}
.pwa-ios-box .btn{width:100%}

/* ════════════════════════════════════════════════════
   CEK KEASLIAN DOKUMEN (cek.php, publik)
════════════════════════════════════════════════════ */
.ck-page{position:relative;z-index:1;min-height:100vh;display:flex;justify-content:center;padding:24px 16px;box-sizing:border-box}
.ck-card{width:100%;max-width:560px;background:var(--mode-surface,#fff);border:1px solid var(--mode-border);border-radius:20px;
  box-shadow:var(--shadow3);padding:28px 24px;align-self:flex-start}
.ck-head{text-align:center;margin-bottom:20px}
.ck-logo{width:190px;max-width:70%}
.ck-head h1{font-size:20px;margin:14px 0 6px;color:var(--primary);font-weight:800}
.ck-head p{font-size:13px;line-height:1.6;color:var(--mode-text3);margin:0}
.ck-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:12px;background:var(--mode-surface2);margin-bottom:18px}
.ck-tab{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border:0;border-radius:9px;background:transparent;
  color:var(--mode-text2);font:600 13px Poppins,sans-serif;cursor:pointer}
.ck-tab.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(29,107,69,.25)}
.ck-tab .material-symbols-rounded{font-size:19px}
.ck-label{font-size:11.5px;font-weight:700;color:var(--mode-text2);margin:0 0 7px}
.ck-jenis{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.ck-jenis button{flex:1;min-width:100px;height:38px;border-radius:10px;border:1px solid var(--mode-border2);background:transparent;
  color:var(--mode-text2);font:600 12.5px Poppins,sans-serif;cursor:pointer}
.ck-jenis button.active{border-color:var(--primary);background:rgba(29,107,69,.08);color:var(--primary)}
.ck-row{display:flex;gap:8px;align-items:stretch}
.ck-row .fc{flex:1;min-width:0}
.ck-row .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.ck-row .btn .material-symbols-rounded{font-size:18px}
.ck-cam{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3;margin-bottom:10px}
.ck-cam video{width:100%;height:100%;object-fit:cover;display:block}
/* Kotak = area NOMOR saja. Tanpa penggelapan di luar kotak: QR code terbaca di mana pun dalam tampilan kamera. */
.ck-frame{position:absolute;left:8%;right:8%;top:39%;height:22%;border:2px dashed rgba(255,255,255,.9);border-radius:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.ck-frame::after{content:'Area nomor 16 digit';position:absolute;left:8px;top:-22px;font-size:11px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);font-family:Poppins,sans-serif}
.ck-cam-msg{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;text-align:center}
.ck-hint{font-size:12px;line-height:1.6;color:var(--mode-text3);margin-bottom:10px}
.ck-loading{text-align:center;padding:22px;color:var(--mode-text3);font-size:13px}
#ckHasil{margin-top:18px}
.ck-res{border-radius:14px;padding:16px;border:1px solid}
.ck-res p{font-size:13px;line-height:1.6;margin:8px 0 12px;color:var(--mode-text)}
.ck-ok{background:rgba(29,107,69,.06);border-color:rgba(29,107,69,.3)}
.ck-wait{background:rgba(184,146,42,.08);border-color:rgba(184,146,42,.35)}
.ck-err{background:rgba(160,30,30,.06);border-color:rgba(160,30,30,.3)}
.ck-badge{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;letter-spacing:.4px}
.ck-badge .material-symbols-rounded{font-size:26px}
.ck-ok .ck-badge{color:var(--primary)} .ck-wait .ck-badge{color:#8A6A12} .ck-err .ck-badge{color:#A63A2E}
.ck-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.ck-fields div{min-width:0}
.ck-fields span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mode-text3)}
.ck-fields b{font-size:13px;color:var(--mode-text);word-break:break-word}
.ck-small{font-size:11px;color:var(--mode-text3);margin-top:10px;font-style:italic}
.ck-time{font-size:11px;color:var(--mode-text3);margin-top:10px}
.ck-file{margin-top:14px}
.ck-file-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px}
.ck-file-head a{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--primary);text-decoration:none;font-weight:600}
.ck-file-head a .material-symbols-rounded{font-size:16px}
.ck-file iframe{width:100%;height:70vh;min-height:420px;border:1px solid var(--mode-border);border-radius:10px;background:#fff}
.ck-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--mode-surface2);
  font-size:12.5px;line-height:1.6;color:var(--mode-text2)}
.ck-note .material-symbols-rounded{font-size:20px;color:var(--primary)}
.ck-foot{text-align:center;margin-top:22px;padding-top:16px;border-top:1px solid var(--mode-border)}
.ck-foot a{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--primary);text-decoration:none;font-weight:600;margin-bottom:8px}
.ck-foot a .material-symbols-rounded{font-size:16px}
@media(max-width:480px){.ck-card{padding:22px 16px}.ck-fields{grid-template-columns:1fr}}

/* Login: tautan cek dokumen tanpa garis bawah + hak cipta di bawahnya */
.lp-verify-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--primary);text-decoration:none}
.lp-verify-link:hover{opacity:.8}
.lp-verify-link .material-symbols-rounded{font-size:17px}
.lp-right-foot{text-align:center;margin-top:22px}
.lp-right-foot .lp-copy{margin-top:16px}

/* Filter di HP: kolom cari selebar penuh, dropdown & tombol berjajar 2 kolom (hemat ruang). */
@media(max-width:640px){
  .filter-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filter-row .search-wrap{grid-column:1/-1;min-width:0}
  .filter-row select.fc{width:100%!important;min-width:0;padding:9px 30px 9px 12px!important;font-size:13px}
  .filter-row .btn{width:100%;min-width:0;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:9px 10px;font-size:12.5px}
  .filter-row .btn .material-symbols-rounded{margin-right:4px!important}
}
.ck-file-view{border:1px solid var(--mode-border);border-radius:10px;background:#fff;overflow:hidden;position:relative}
/* Cadangan watermark untuk iframe (gambar/PDF diberi watermark langsung di canvas, lihat ckWatermark()) */
.ck-wm{position:absolute;inset:0;pointer-events:none;background-repeat:repeat;background-size:320px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Ctext x='160' y='90' text-anchor='middle' transform='rotate(-30 160 90)' font-family='Arial' font-weight='800' font-size='17' fill='rgba(13,92,58,0.16)'%3ESIPADI · KEMENAG JEMBER%3C/text%3E%3C/svg%3E")}
.ck-file-view img,.ck-file-view canvas{display:block;width:100%;height:auto}
.ck-file-view canvas+canvas{border-top:6px solid var(--mode-surface2)}
.ck-file-view iframe{border:0;border-radius:0}
.ck-file-more{padding:8px 12px;font-size:11.5px;color:var(--mode-text3);background:var(--mode-surface2);text-align:center}

/* Database per tahun: tab tahun (bisa digeser di HP) */
.db-years{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.db-year{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--mode-border2);background:var(--mode-surface,#fff);color:var(--mode-text2);font:700 13px Poppins,sans-serif}
.db-year span{font-weight:600;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--mode-surface2);color:var(--mode-text3)}
.db-year.active{background:var(--primary);border-color:var(--primary);color:#fff}
.db-year.active span{background:rgba(255,255,255,.2);color:#fff}

/* ── LOG AKTIVITAS (log.php, js/log.js) ── */
.lg-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--cream3);margin-left:12px;cursor:pointer;user-select:none}
.lg-sub{font-size:11px;color:var(--cream4);margin-top:2px}
.lg-empty{text-align:center;padding:28px;color:var(--cream4)}
.lg-err{color:#C0392B}
.lg-table td{vertical-align:top}
.lg-det-main{font-size:12.5px;line-height:1.45}
.lg-det{margin:4px 0 0;padding-left:16px;font-size:11.5px;color:var(--cream3);line-height:1.5}
.lg-det li{word-break:break-word}
.lg-more{text-align:center;padding:14px}
@media(max-width:640px){.lg-check{margin-left:0}}