/* =====================================================================
   Relawan SPPG — sistem desain tunggal untuk semua peran.
   Skala jarak kelipatan 4 px (--s1..--s8); skala huruf terukur (--fs-*).
   Ubah token di :root, bukan nilai di masing-masing halaman.
   ===================================================================== */
:root{
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* warna */
  --bg:#eef1f8;--bg2:#f6f8fc;--card:#fff;--ink:#0f1b3d;--ink2:#3b4660;--mut:#6b7590;--line:#e5e9f2;--line2:#d7deeb;
  --pri:#1250cc;--pri2:#0c3ca3;--soft:#e8effd;--accent:#f97316;
  --ok:#157a54;--warn:#a1620a;--bad:#c0392b;--info:#1250cc;
  --okbg:#e3f5ec;--warnbg:#fdf1d8;--badbg:#fde8e5;--infobg:#e8effd;--mutbg:#eef1f7;
  /* jarak (4 px) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;
  /* huruf */
  --fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:15px;--fs-lg:17px;--fs-xl:20px;--fs-num:28px;
  /* sudut & bayangan */
  --r-sm:8px;--r:12px;--r-lg:16px;
  --shadow:0 1px 2px rgba(15,27,61,.05),0 1px 1px rgba(15,27,61,.03);
  --shadow-lg:0 12px 32px rgba(15,27,61,.16);
  /* tata letak */
  --sbw:256px;--sbw-mini:72px;--topbar:64px;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:1.55;font-weight:500;background:var(--bg);color:var(--ink)}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:var(--fs-xl);line-height:1.25;font-weight:800;margin:0;letter-spacing:-.01em}
h2{font-size:var(--fs-lg);line-height:1.3;font-weight:700;margin:0 0 var(--s4)}
h3{font-size:var(--fs-md);font-weight:700;margin:0 0 var(--s2)}
p{margin:0 0 var(--s3)}
b,strong{font-weight:700}
@media (max-width:640px){.hide-sm{display:none!important}}
.mut{color:var(--mut)}.small{font-size:var(--fs-sm)}.xs{font-size:var(--fs-xs)}.right{text-align:right}.nowrap{white-space:nowrap}
.mt{margin-top:var(--s4)}.mb{margin-bottom:var(--s4)}.mt0{margin-top:0}.mb0{margin-bottom:0}
code{background:var(--mutbg);padding:1px 6px;border-radius:6px;font-size:.9em}
.ico{flex:none;vertical-align:middle}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- kartu, grid, statistik ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s4);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.card-head h2{margin:0}
.grid{display:grid;gap:var(--s4)}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid>.card,.grid>.stat{margin-bottom:0}
/* Satu ukuran jarak antar blok (16px) ke semua arah: kartu, grid, dan stat yang bertumpuk tidak boleh menempel */
.grid{margin-bottom:var(--s4)}
.stat{margin-bottom:var(--s4)}
.card>.grid:last-child,.card>.kpis:last-child,.card>:last-child{margin-bottom:0}
.grid>.grid{margin-bottom:0}
.section{margin-bottom:var(--s6)}
/* Divisi & Jam Kerja: daftar ringkas yang bisa dibuka, tombol simpan menempel di bawah */
.div-add>summary,.div-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.div-add>summary::-webkit-details-marker,.div-item>summary::-webkit-details-marker{display:none}
.div-add>summary h2{margin:0}
.div-item{border-top:1px solid var(--line)}
.div-item>summary{padding:var(--s3) 0}
.div-item>summary::after{content:'›';font-size:1.3rem;line-height:1;color:var(--mut);transition:transform .15s}
.div-item[open]>summary::after{transform:rotate(90deg)}
.div-name{display:flex;align-items:center;gap:var(--s2);flex:1 1 180px}
.div-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);color:var(--mut);font-size:.85rem}
.div-item:not(.changed) .div-changed{display:none!important}
.div-body{padding:0 0 var(--s4)}
.div-list>.hint{margin-top:var(--s3)}
.save-bar{position:sticky;bottom:var(--s3);z-index:5;display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;padding:var(--s3) var(--s4)}
.save-bar input{flex:1 1 220px;margin:0}
/* daftar pilihan bercentang (hapus data uji coba) */
.check-row{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s2) 0;border-bottom:1px solid var(--line);font-weight:400;cursor:pointer;margin:0}
.check-row:last-child{border-bottom:0}.check-row input{width:auto;margin-top:.2rem;flex:none}.check-row.locked{opacity:.75}
.pick-list{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);padding:0 var(--s3);margin-bottom:var(--s3)}
.err-text{color:var(--bad);font-size:var(--fs-sm);margin-top:var(--s1);font-weight:600}
input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:var(--bad)!important;box-shadow:0 0 0 3px var(--badbg)}
/* profil relawan: menu berupa ubin di dalam kartu profil */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s2);margin-top:var(--s4)}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);min-height:76px;padding:var(--s2);border-radius:var(--r);background:var(--soft);color:var(--pri);text-decoration:none;font-weight:700;font-size:var(--fs-sm);text-align:center;line-height:1.2;transition:background .15s}
.tile:hover,.tile:active{background:#d6e2fb}
table.kv th{width:42%;background:none;text-transform:none;letter-spacing:0;font-size:var(--fs-sm);color:var(--mut);font-weight:600;white-space:normal;padding-left:0}
table.kv td{padding-right:0;word-break:break-word}
table.kv tr:last-child th,table.kv tr:last-child td{border-bottom:0}
/* unggah & atur foto profil */
.pc-frame{position:relative;width:min(260px,72vw);aspect-ratio:492/600;margin:0 auto;border-radius:14px;overflow:hidden;border:3px solid #D6B66B;background:#f1f3f8;touch-action:none}
.pc-frame canvas{display:block;width:100%;height:100%;cursor:grab}.pc-frame canvas:active{cursor:grabbing}
.pc-guide{position:absolute;left:22%;right:22%;top:12%;height:52%;border:2px dashed rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.pc-zoom{display:flex;align-items:center;gap:var(--s2);margin:var(--s3) auto 0;max-width:340px;font-size:var(--fs-sm);font-weight:600;color:var(--mut)}
.pc-zoom input{flex:1;margin:0}
.pc-tools{justify-content:center;margin-top:var(--s3)}
.photo-step{border:2px solid var(--pri)}
.avatar-edit{position:relative;display:inline-block;flex:none;text-decoration:none}
.avatar-badge{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
/* pengajuan perubahan data */
.reject-box>summary{list-style:none}.reject-box>summary::-webkit-details-marker{display:none}
.reject-box[open]{flex:1 1 280px}
/* tombol ikon ringkas (aksi per baris tabel) */
.push-right{margin-left:auto}
.icon-actions{display:inline-flex;gap:var(--s2)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);background:var(--soft);color:var(--pri);text-decoration:none;transition:background .15s}
.icon-btn:hover{background:#d6e2fb}
/* tabel relawan: baris lebih lega & rata tengah */
.vol-table td{padding-top:14px;padding-bottom:14px;vertical-align:middle}
.vol-table td .small{margin-top:2px}
.vthumb{display:inline-flex;align-items:center;justify-content:center;width:38px;height:46px;border-radius:7px;object-fit:cover;border:2px solid #D6B66B;background:var(--bg2)}
.vthumb.none{border:1.5px dashed var(--line2);color:var(--mut);font-size:10px;font-weight:700}
/* Rekap Presensi: kehadiran per divisi (klik = filter) */
.div-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.div-chips a{display:inline-flex;gap:var(--s2);align-items:center;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--ink2);text-decoration:none;font-size:var(--fs-sm)}
.div-chips a.on{background:var(--pri);border-color:var(--pri);color:#fff}
.div-chips a span{font-weight:700;color:var(--mut)}.div-chips a span.ok-t{color:var(--ok)}.div-chips a.on span{color:#fff}
.photo-hist{display:flex;flex-wrap:wrap;gap:var(--s3)}
.photo-hist figure{margin:0;width:110px;text-align:center}
.photo-hist img{width:110px;height:134px;object-fit:cover;border-radius:10px;border:2px solid var(--line);display:block}
.photo-hist figure.now img{border-color:#D6B66B}
.stat{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);box-shadow:var(--shadow);color:inherit}
.stat>span:not(.num){display:block;color:var(--mut);font-size:var(--fs-sm);font-weight:600}
.stat>b{display:block;font-size:var(--fs-xl);line-height:1.2;font-weight:800;margin-top:var(--s1)}
.stat .sh{display:flex;align-items:center;gap:var(--s3)}
.stat .ic{width:40px;height:40px;border-radius:50%;background:var(--soft);color:var(--pri);display:inline-flex;align-items:center;justify-content:center;flex:none}
.stat .lb{color:var(--mut);font-weight:600;font-size:var(--fs-sm)}
.stat .num{display:block;font-size:var(--fs-num);font-weight:800;line-height:1.1;margin:var(--s3) 0 var(--s2);letter-spacing:-.01em}
.stat .sf{color:var(--mut);font-size:var(--fs-xs);font-weight:600}
.stat.pri{background:linear-gradient(135deg,#1250cc,#0b3aa8);border-color:transparent;color:#fff}
.stat.pri .ic{background:var(--accent);color:#fff}.stat.pri .lb,.stat.pri .sf{color:#d5e1ff}
.stat.alert .num,.stat.alert>b{color:var(--bad)}.stat.alert .ic{background:var(--badbg);color:var(--bad)}
a.stat:hover{text-decoration:none;border-color:var(--line2);box-shadow:0 4px 14px rgba(18,80,204,.10)}
/* angka ringkas dalam satu kartu */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s3)}
.kpi{background:var(--bg2);border-radius:var(--r);padding:var(--s3) var(--s4)}
.kpi span{display:block;font-size:var(--fs-xs);color:var(--mut);font-weight:600}
.kpi b{display:block;font-size:var(--fs-xl);font-weight:800;line-height:1.25}
a.kpi{color:inherit;text-decoration:none;border:1px solid transparent}a.kpi:hover{border-color:var(--line);background:#fff}
.kpi.ok b{color:var(--ok)}.kpi.warn b{color:var(--warn)}.kpi.bad b{color:var(--bad)}
.meter{height:8px;background:var(--mutbg);border-radius:99px;overflow:hidden;display:flex}
.meter i{display:block;height:100%}.meter .ok{background:var(--ok)}.meter .warn{background:#e2a33b}.meter .bad{background:var(--bad)}.meter .info{background:#7aa2ec}

/* ---------- tombol & form ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:38px;border:1px solid var(--pri);background:var(--pri);color:#fff;padding:0 var(--s4);border-radius:var(--r-sm);font:inherit;font-size:var(--fs-base);font-weight:700;cursor:pointer;text-decoration:none;line-height:1.2;transition:background .15s,opacity .15s}
.btn:hover{background:var(--pri2);border-color:var(--pri2);text-decoration:none}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn.sec{background:var(--soft);border-color:transparent;color:var(--pri)}.btn.sec:hover{background:#d6e2fb}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--ink2)}.btn.ghost:hover{background:var(--bg2)}
.btn.bad{background:var(--bad);border-color:var(--bad);color:#fff}.btn.warnb{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.sm{min-height:30px;padding:0 var(--s3);font-size:var(--fs-sm);border-radius:7px}
.btn.big{display:flex;width:100%;min-height:52px;font-size:var(--fs-lg);border-radius:var(--r)}
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.sec.is-loading::after,.btn.ghost.is-loading::after{border-color:var(--pri);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.linkbtn{background:none;border:0;padding:0;color:var(--pri);font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer}
label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink2);margin:var(--s3) 0 var(--s1)}
input,select,textarea{width:100%;min-height:38px;padding:var(--s2) var(--s3);border:1px solid var(--line2);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:inherit;font-size:var(--fs-base);font-weight:500}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(18,80,204,.35);outline-offset:0;border-color:var(--pri)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0}textarea{min-height:88px}
.row{display:flex;gap:var(--s3);flex-wrap:wrap}.row>*{flex:1 1 160px}
.inline{display:flex;gap:var(--s2);align-items:end;flex-wrap:wrap}.inline>*{flex:0 1 auto}
.inline label{margin-top:0}
.hint{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--s1)}
[data-live-results]{transition:opacity .15s}[data-live-results].is-busy{opacity:.5;pointer-events:none}
[data-live-status]{align-self:center;font-size:var(--fs-xs);color:var(--mut);font-weight:600}
.pw-wrap{position:relative}.pw-wrap input{padding-right:48px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:transparent;color:var(--mut);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pw-toggle:hover{color:var(--ink2);background:var(--bg2)}.pw-toggle:focus-visible{outline:2px solid var(--pri)}
fieldset{border:0;padding:0;margin-left:0;margin-right:0;min-width:0}fieldset[hidden]{display:none}legend{padding:0;margin-bottom:var(--s1)}
label.check{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:600;font-size:var(--fs-sm);cursor:pointer;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
label.check input{width:auto;margin:0}
label.check:has(input:checked){border-color:var(--pri);background:var(--soft);color:var(--pri)}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.chips{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:3px}
.chips a{padding:4px 12px;border-radius:99px;font-size:var(--fs-sm);font-weight:700;color:var(--ink2);text-decoration:none}
.chips a.on{background:#fff;color:var(--pri);box-shadow:var(--shadow)}

/* ---------- tabel ---------- */
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:var(--fs-base)}
th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;white-space:nowrap;background:var(--bg2)}
tr:last-child td{border-bottom:0}
table.small th,table.small td{padding:8px 10px;font-size:var(--fs-sm)}
.tw{overflow-x:auto}
.card.tw{padding:0}.card.tw>h2,.card.tw>.card-head,.card.tw>p{padding:var(--s5) var(--s5) 0}.card.tw>table{margin-top:var(--s2)}

/* ---------- lencana, pesan, status kosong ---------- */
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:var(--fs-xs);font-weight:700;white-space:nowrap;line-height:1.5}
.badge.ok{background:var(--okbg);color:var(--ok)}.badge.warn{background:var(--warnbg);color:var(--warn)}.badge.bad{background:var(--badbg);color:var(--bad)}
.badge.info{background:var(--infobg);color:var(--info)}.badge.muted{background:var(--mutbg);color:var(--mut)}
.flash{white-space:pre-line;padding:var(--s3) var(--s4);border-radius:var(--r);margin-bottom:var(--s4);font-weight:600;border:1px solid transparent}
.flash.warn-box{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.flash.ok{background:var(--okbg);color:var(--ok);border-color:#bfe6d2}.flash.err{background:var(--badbg);color:var(--bad);border-color:#f5c7c0}.flash.warn{background:var(--warnbg,#fff6e0);color:var(--warn,#8a5a00);border-color:#f0d9a0}
/* buku tamu */
.kind-pick{display:grid;gap:var(--s2)}
.kind-opt{display:flex;gap:var(--s3);align-items:flex-start;border:1.5px solid var(--line2);border-radius:var(--r);padding:var(--s3);cursor:pointer;margin:0}
.kind-opt input{margin-top:3px;width:auto}
.kind-opt span{display:flex;flex-direction:column;gap:2px}
.kind-opt:has(input:checked){border-color:var(--info);background:var(--infobg)}
.photo-box{margin-top:var(--s3)}
.photo-pick{display:flex;align-items:center;justify-content:center;gap:var(--s2);border:1.5px dashed var(--line2);border-radius:var(--r);padding:var(--s3);cursor:pointer;font-weight:600;color:var(--info);margin:0}
.photo-box.has .photo-pick{border-style:solid}
.photo-box img{display:block;max-width:100%;max-height:220px;border-radius:var(--r);margin-top:var(--s2)}
.sign-box{margin-top:var(--s3)}
.sign-box canvas{display:block;width:100%;height:150px;border:1.5px solid var(--line2);border-radius:var(--r);background:#fff;touch-action:none}
.loan-item{align-items:center;margin-bottom:var(--s2)}
.callout{border:1px solid var(--line2);border-radius:var(--r);padding:var(--s3);background:var(--bg2)}
.card.attn{border-color:#f0d9a0;background:var(--warnbg)}
.guest-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;flex:1;min-width:0}
.guest-row span:first-child{display:flex;flex-direction:column;min-width:0}
.guest-row small{overflow:hidden;text-overflow:ellipsis}
.guest-row-wrap{display:flex;align-items:center;gap:var(--s2)}
.guest-imgs{display:flex;flex-wrap:wrap;gap:var(--s2)}
.guest-img{margin:0;width:120px}
.guest-img img{width:120px;height:120px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
table.kv th{width:32%;text-align:left;vertical-align:top}
.roster-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s3)}
.roster-slot{border:1px solid var(--line,#e3e7ee);border-radius:var(--r);padding:var(--s3)}
.roster-slot.empty{border-style:dashed;border-color:var(--warn,#c98a00)}
.roster-slot select{width:100%}
.reassign-row{display:grid;grid-template-columns:minmax(160px,1.4fr) minmax(120px,1fr) 24px minmax(160px,1.4fr) auto;gap:var(--s2);align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--line,#e3e7ee)}
@media (max-width:640px){.reassign-row{grid-template-columns:1fr}.reassign-row .arrow{display:none}}
.err{color:var(--bad);font-size:var(--fs-sm)}
.pill{background:var(--bad);color:#fff;border-radius:99px;padding:0 6px;font-size:11px;font-weight:700;min-width:18px;height:18px;line-height:18px;text-align:center;display:inline-block}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s1);padding:var(--s8) var(--s4);color:var(--mut)}
.empty b{color:var(--ink2);font-size:var(--fs-md)}.empty.sm{padding:var(--s5) var(--s3)}
.list-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
[hidden]{display:none!important}
.center{text-align:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.week-table input[type=checkbox]{width:20px;height:20px;accent-color:#008B89}
.preview-table tr.is-today td{background:var(--soft)}
form.is-dirty .actions{position:sticky;bottom:0;background:#fff;padding:var(--s3) 0;box-shadow:0 -6px 12px -8px rgba(15,27,61,.2);z-index:5}
.poll-row{margin-bottom:var(--s3)}.poll-label{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--fs-sm);margin-bottom:4px}
.poll-row.top .poll-label span{font-weight:700}.poll-row.top .meter i{background:#008B89}
.poll-opt{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:2px solid var(--line);border-radius:var(--r);margin-bottom:var(--s2);cursor:pointer;font-weight:600}
.poll-opt:has(input:checked){border-color:#008B89;background:rgba(0,139,137,.06)}.poll-opt input{width:20px;height:20px;accent-color:#008B89}
.msg{padding:var(--s3);border-radius:var(--r);margin-bottom:var(--s2);background:var(--bg2)}.msg.staff{background:var(--soft)}
.msg .meta{font-size:var(--fs-xs);color:var(--mut);margin-bottom:4px}
.bulk-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s5) 0}
.progress-wrap .meter{height:10px}
a.list-row{color:inherit;text-decoration:none}a.review-row:hover{background:var(--bg2)}
.review-item{padding:var(--s3) 0;border-bottom:1px solid var(--line)}.review-item:last-child{border-bottom:0}
.offline-bar{position:fixed;left:0;right:0;top:0;z-index:90;background:var(--bad);color:#fff;text-align:center;font-size:var(--fs-sm);font-weight:700;padding:6px}
.offline-bar[hidden]{display:none}

/* ---------- tata letak Kepala: sidebar tetap + header tetap + konten scroll sendiri ---------- */
body.admin{overflow:hidden}
.layout{display:flex;height:100vh;height:100dvh}
.sidebar{width:var(--sbw);flex:none;height:100%;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);transition:width .2s ease;z-index:50}
.sb-head{height:var(--topbar);flex:none;display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);border-bottom:1px solid var(--line);overflow:hidden}
.sb-head img{width:36px;height:36px;object-fit:contain;flex:none}
.sb-head b{display:block;font-size:var(--fs-md);font-weight:800;line-height:1.1;white-space:nowrap}.sb-head small{display:block;color:var(--mut);font-size:11px;font-weight:600;white-space:nowrap}
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--s3);scrollbar-width:thin}
.sb-sec{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;padding:var(--s4) var(--s3) var(--s1);white-space:nowrap}
.sb-nav a{position:relative;display:flex;align-items:center;gap:var(--s3);height:40px;padding:0 var(--s3);margin-bottom:2px;border-radius:var(--r-sm);color:var(--ink2);font-weight:600;font-size:var(--fs-base);text-decoration:none;white-space:nowrap}
.sb-nav a:hover{background:var(--bg2)}
.sb-nav a.on{background:var(--soft);color:var(--pri);font-weight:700}
.sb-nav a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--pri)}
.sb-nav a .t{flex:1;overflow:hidden;text-overflow:ellipsis}
.sb-foot{flex:none;padding:var(--s3);border-top:1px solid var(--line)}
.sb-toggle{width:100%;display:flex;align-items:center;gap:var(--s3);height:38px;padding:0 var(--s3);border:0;background:transparent;border-radius:var(--r-sm);color:var(--mut);font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer}
.sb-toggle:hover{background:var(--bg2);color:var(--ink2)}
.sb-toggle .ico{transition:transform .2s}
/* mode ikon saja */
html.sb-mini .sidebar{width:var(--sbw-mini)}
html.sb-mini .sb-head{justify-content:center;padding:0}
html.sb-mini .sb-head span,html.sb-mini .sb-nav .t,html.sb-mini .sb-toggle .t{display:none}
html.sb-mini .sb-sec{font-size:0;padding:var(--s2) 0;margin:var(--s2) var(--s2) 0;border-top:1px solid var(--line)}
html.sb-mini .sb-nav a{justify-content:center;padding:0}
html.sb-mini .sb-nav a .pill{position:absolute;top:3px;right:6px;min-width:16px;height:16px;line-height:16px;font-size:10px}
html.sb-mini .sb-toggle{justify-content:center}html.sb-mini .sb-toggle .ico{transform:rotate(180deg)}
.tip{position:fixed;z-index:100;background:var(--ink);color:#fff;font-size:var(--fs-sm);font-weight:600;padding:5px 10px;border-radius:6px;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow-lg)}
.tip[hidden]{display:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
.topbar{height:var(--topbar);flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:0 var(--s6);background:#fff;border-bottom:1px solid var(--line);z-index:40}
.tb-left{display:flex;align-items:center;gap:var(--s3);min-width:0}
.tb-title{min-width:0}.tb-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdate{display:flex;align-items:center;gap:6px;color:var(--mut);font-weight:600;font-size:var(--fs-xs)}
.tb-right{display:flex;align-items:center;gap:var(--s2)}
.content{flex:1;overflow-y:auto;padding:var(--s6);scroll-behavior:smooth}
.content-inner{max-width:1440px;margin:0 auto}
.iconbtn{position:relative;width:40px;height:40px;border-radius:50%;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ink2);border:0;cursor:pointer;text-decoration:none!important;flex:none}
.iconbtn:hover{background:var(--bg2)}
.iconbtn .pill{position:absolute;top:2px;right:0}
.iconbtn.red{color:var(--bad)}
.menu-btn{display:none}
.user-chip{display:flex;align-items:center;gap:var(--s2);padding:4px 4px 4px 4px;border-radius:99px}
.uavatar{width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--pri);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-sm);flex:none}
.uname{font-weight:700;line-height:1.2;font-size:var(--fs-sm);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.urole{color:var(--mut);font-size:11px;font-weight:600}
.sb-backdrop{display:none}
@media (max-width:1023px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .2s ease;width:var(--sbw)!important;box-shadow:var(--shadow-lg)}
  html.sb-open .sidebar{transform:none}
  html.sb-open .sb-backdrop{display:block;position:fixed;inset:0;background:rgba(15,27,61,.35);z-index:45}
  html.sb-mini .sb-head span,html.sb-mini .sb-nav .t,html.sb-mini .sb-toggle .t{display:initial}
  html.sb-mini .sb-nav a{justify-content:flex-start;padding:0 var(--s3)}
  .sb-foot{display:none}
  .menu-btn{display:inline-flex}
  .topbar{padding:0 var(--s4)}.content{padding:var(--s4)}
  .uname,.urole{display:none}
}

/* ---------- popover notifikasi ---------- */
.pop-wrap{position:relative}
.popover{position:absolute;right:0;top:calc(100% + 8px);width:380px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:60;overflow:hidden}
.popover[hidden]{display:none}
@media (max-width:640px){.popover{position:fixed;left:12px;right:12px;top:72px;width:auto;max-width:none}}
.pop-head{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.pop-list{max-height:min(420px,60vh);overflow-y:auto}
.pop-item{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);color:inherit;text-decoration:none!important;position:relative}
.pop-item:hover{background:var(--bg2)}
.pop-item .dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:transparent}
.pop-item.unread{background:#f8faff}.pop-item.unread .dot{background:var(--pri)}
.pi-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pi-title{font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.pi-text{font-size:var(--fs-sm);color:var(--ink2)}
.pi-time{font-size:11px;color:var(--mut)}
.pi-mark{border:0;background:var(--soft);color:var(--pri);border-radius:6px;width:26px;height:26px;cursor:pointer;flex:none;font-weight:800}
.pop-foot{display:block;text-align:center;padding:var(--s3);font-weight:700;font-size:var(--fs-sm);border-top:1px solid var(--line);background:var(--bg2)}
.pop-loading{padding:var(--s5);text-align:center;color:var(--mut);font-size:var(--fs-sm)}
@media (max-width:600px){.popover{position:fixed;left:12px;right:12px;top:60px;width:auto}}

/* ---------- dialog konfirmasi ---------- */
.modal-back{position:fixed;inset:0;background:rgba(15,27,61,.45);z-index:80;display:flex;align-items:center;justify-content:center;padding:var(--s4)}
.modal-back[hidden]{display:none}
.modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:420px;max-width:100%;padding:var(--s5)}
.modal h3{margin-bottom:var(--s2)}.modal p{color:var(--ink2)}
.modal .actions{justify-content:flex-end;margin-top:var(--s4)}

/* ---------- tata letak mobile (Security & Relawan) ---------- */
body.mobile{font-size:var(--fs-md)}
.mob{max-width:560px;margin:0 auto;padding:var(--s4) var(--s4) 96px}
.mhead{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3) var(--s4);margin-bottom:var(--s4);box-shadow:var(--shadow)}
.mhead .l{display:flex;align-items:center;gap:var(--s3);min-width:0}.mhead img{width:36px;height:36px;object-fit:contain}
.mhead .h1{font-size:var(--fs-lg);font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mhead .r{display:flex;align-items:center;gap:var(--s1);flex:none}
body.mobile .card{padding:var(--s4)}
body.mobile .stat{padding:var(--s3) var(--s4)}
.bnav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(15,27,61,.06);display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:20}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--mut);padding:4px 0;border-radius:10px;text-decoration:none}
.bnav a.on{color:var(--pri);background:var(--soft)}
.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:var(--pri);flex:none}
.idrow{display:flex;gap:var(--s4);align-items:center}
.result{border-width:2px}.result.go{border-color:var(--ok)}.result.stop{border-color:var(--bad)}.result.wait{border-color:var(--accent)}
.status-line{display:flex;gap:var(--s2);flex-wrap:wrap;font-size:var(--fs-xs);font-weight:700}
.status-line .badge{font-size:11px}
#reader{width:100%;border-radius:var(--r);overflow:hidden;background:#0f1b3d;min-height:80px}
.cand{display:block;border:1px solid var(--line2);border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s2);cursor:pointer}
.cand input{margin-right:var(--s2)}.cand:has(input:checked){border-color:var(--pri);background:var(--soft)}
.login{max-width:400px;margin:9vh auto 0;padding:var(--s4)}
.login .card{padding:var(--s6)}.login .lg{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}.login .lg img{width:52px;height:52px;object-fit:contain}

/* ---------- ID card (potret, CR80 54 x 85,6 mm) — digambar oleh js/idcard.js ---------- */
.cards{display:flex;flex-wrap:wrap;gap:var(--s4)}
.idcard-wrap{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s2);position:relative;break-inside:avoid;page-break-inside:avoid}
.idcard-img{display:block;width:216px;aspect-ratio:638/1011;border-radius:12px;background:linear-gradient(180deg,#123456 0 21%,#eef3f8 21%);box-shadow:0 2px 10px rgba(18,52,86,.14);object-fit:contain}
.idcard-wrap:not(.ready) .idcard-img{opacity:.55}
.idcard-img:not([src]){visibility:visible}
.idcard-loading{position:absolute;top:45%;left:0;right:0;text-align:center;font-size:var(--fs-xs);font-weight:700;color:var(--mut)}
.idcard-wrap.ready .idcard-loading{display:none}
.idcard-wrap.failed .idcard-loading{display:block;color:var(--bad)}
.idcard-wrap.failed .idcard-loading::after{content:" Gagal — muat ulang halaman."}
.idcard-wrap figcaption .btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.cards.big .idcard-img{width:min(320px,82vw)}
.cards.big{justify-content:center}
.batik-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s2)}
.batik-opt{position:relative;display:flex;flex-direction:column;gap:4px;margin:0;padding:6px;border:2px solid var(--line);border-radius:var(--r);cursor:pointer;background:#fff;font-size:var(--fs-xs);font-weight:600;color:var(--ink2)}
.batik-opt input{position:absolute;opacity:0;pointer-events:none}
.batik-opt img,.batik-opt .batik-none{width:100%;height:64px;object-fit:cover;border-radius:6px;background:#123456;display:flex;align-items:center;justify-content:center;color:#D6B66B;font-weight:700;text-align:center;padding:0 4px}
.batik-opt span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.batik-opt:has(input:checked){border-color:#008B89;box-shadow:0 0 0 3px rgba(0,139,137,.15)}
.batik-opt:has(input:focus-visible){outline:2px solid var(--pri);outline-offset:2px}
@media (max-width:760px){#desain-kartu>.grid{grid-template-columns:1fr!important}}
/* editor desain ID Card */
.design-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s4);align-items:start}
.design-preview{position:sticky;top:0}
.design-preview .idcard-img{width:300px;touch-action:none;user-select:none;-webkit-user-drag:none}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3)}
.pos-item{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);background:#fff}
.pos-item.on{border-color:#E8590C;box-shadow:0 0 0 3px rgba(232,89,12,.14)}
.pos-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s1)}
.pos-row{display:grid;grid-template-columns:96px 1fr 40px;align-items:center;gap:var(--s2);margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--mut)}
.pos-row output{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)}
.design-actions{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;position:sticky;bottom:0;z-index:5;box-shadow:0 -4px 16px rgba(15,27,61,.08)}
.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.color-field{display:flex;align-items:center;gap:var(--s2);margin:0;font-size:var(--fs-sm);font-weight:600;line-height:1.3}
.color-field input[type=color]{width:44px;height:44px;padding:2px;border-radius:10px;flex:none;cursor:pointer}
.design-controls input[type=range]{width:100%;padding:0;accent-color:#008B89}
.design-controls h3{font-size:var(--fs-md);margin-bottom:var(--s2)}
@media (max-width:1100px){.design-layout{grid-template-columns:1fr}.design-preview{position:static;order:-1}.design-preview .idcard-img{width:240px}}
/* tabel nomor dokumen */
.doc-table td{vertical-align:top}.doc-table input,.doc-table select{min-width:0}
.numbering-help{background:var(--bg2);border-radius:var(--r);padding:var(--s3) var(--s4)}
.numbering-help summary{cursor:pointer}
#pwa-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;background:#fff;border-radius:99px;padding:6px 14px;display:flex;gap:var(--s2);align-items:center;box-shadow:var(--shadow-lg);z-index:30;font-size:var(--fs-sm);font-weight:600}
#pwa-bar[hidden]{display:none}

#print-sheets{display:none}
.back-previews{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center}
@media print{
  @page{size:A4;margin:8mm}
  body.print-sheets-on .cards,body.print-sheets-on .back-previews,body.print-sheets-on .content{display:none!important}
  body.print-sheets-on #print-sheets{display:block}
  .print-sheet{display:grid;grid-template-columns:repeat(3,54mm);grid-auto-rows:85.6mm;gap:4mm;justify-content:center;align-content:start;break-after:page;page-break-after:always}
  .print-sheet:last-child{break-after:auto;page-break-after:auto}
  .ps-cell img{display:block;width:54mm;height:85.6mm;border-radius:3.2mm;outline:.2mm solid #bbb}
  .noprint,.sidebar,.topbar,.bnav,#pwa-bar,.mhead{display:none!important}
  body,body.admin{background:#fff!important;overflow:visible}.layout,.main{display:block;height:auto}.content{overflow:visible;padding:0}
  .card{box-shadow:none;border:0}.cards{gap:3mm;justify-content:flex-start}.idcard-img,.cards.big .idcard-img{width:54mm;height:85.6mm;border-radius:3.2mm;box-shadow:none;outline:.2mm solid #bbb;background:none}.idcard-wrap{gap:0}.idcard-loading{display:none}
}
.col-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px var(--s3)}
.col-pick .check{margin:0}
.prayer-banner{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;background:#0f5132;color:#fff;border-radius:var(--r);padding:var(--s3) var(--s4);margin-bottom:var(--s4)}
.prayer-banner span{opacity:.9;font-size:.9em}
/* kartu lipat (details.card): judul & panah sebaris, panah di kanan */
details.card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px var(--s3);flex-wrap:wrap;padding-right:28px;position:relative}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:'›';position:absolute;right:2px;top:50%;margin-top:-.7rem;font-size:1.4rem;line-height:1;color:var(--mut);transition:transform .15s}
details.card[open]>summary::after{transform:rotate(90deg)}
details.card>summary h2{margin:0}
details.card>summary>.mut,details.card>summary>span{flex:1 1 100%}
details.card>summary>h2+span,details.card>summary>h2+.mut{flex:1 1 auto}
details.card[open]>summary{margin-bottom:var(--s3)}
/* kartu berdampingan tidak dipaksa sama tinggi */
.grid.top{align-items:start}
/* tabel berisi isian: sejajar tengah */
.tbl-mid td,.tbl-mid th{vertical-align:middle}
.tbl-mid input[type=number]{max-width:96px}
/* daftar centang (pilih kolom, isian wajib, opsi) — tanpa bingkai tombol */
.col-pick label.check,.opt-list label.check{border:0;background:none;padding:5px 0;font-weight:500;color:var(--ink)}
.col-pick label.check:has(input:checked),.opt-list label.check:has(input:checked){background:none;color:var(--ink)}
.opt-list{display:flex;flex-direction:column;gap:2px;margin:var(--s2) 0}
.toggle-line{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s2) 0}
.sig-box>summary{cursor:pointer;color:var(--mut);font-size:var(--fs-sm);margin-top:var(--s3)}
.report-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:var(--s2) 0}
.opt-list label.check,.col-pick label.check{display:block;line-height:1.45}
.opt-list label.check input,.col-pick label.check input{margin:0 6px 0 0;vertical-align:-2px}
.card.tw>.kpis{margin:var(--s3) var(--s5) 0}.card.tw>.kpis+p{padding-top:var(--s3)}
.rota-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2)}
.rota-day{border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);display:flex;flex-direction:column;gap:4px;min-width:0}
.rota-day select{width:100%;font-size:var(--fs-sm)}
.rota-day.off{background:var(--bg2);opacity:.7}
.rota-day.empty{border-color:#f0d9a0;background:var(--warnbg)}
@media (max-width:900px){.rota-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rota-tab th,.rota-tab td{text-align:center;padding:6px 8px}
.rota-tab th:first-child,.rota-tab td:first-child{text-align:left}
.rota-tab th b{display:block}
.rota-tab th .xs{display:block;font-weight:500}
.rota-tab .off{background:var(--bg2);color:var(--mut)}
.rota-tab tr:hover td:not(.off){background:var(--bg2)}
.rota-cell{display:flex;justify-content:center;align-items:center;min-height:28px;margin:0;cursor:pointer}
.rota-cell input{width:20px;height:20px;cursor:pointer}
.rota-sum td{border-top:2px solid var(--line)}

/* ---------- Daftar Relawan: tampilan kartu ---------- */
.chips button{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-radius:99px;background:transparent;font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--ink2);cursor:pointer}
.chips button.on{background:#fff;color:var(--pri);box-shadow:var(--shadow)}
.view-pick{align-self:end;margin-bottom:2px}
label.check.pick-all{margin-right:var(--s2);padding:4px 10px}
.vcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4);padding:var(--s4) var(--s5) var(--s5)}
.vcard{position:relative;display:flex;flex-direction:column;gap:var(--s3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);transition:border-color .15s,box-shadow .15s;min-width:0}
.vcard:hover{border-color:var(--line2);box-shadow:0 4px 14px rgba(18,80,204,.08)}
.vcard:has(.pick:checked){border-color:var(--pri);box-shadow:0 0 0 1px var(--pri)}
.vcard-top{display:flex;align-items:center;gap:var(--s2)}
.vcard-top .pick{width:16px;height:16px;min-height:0;margin:0;cursor:pointer}
.vcard-top .badge{margin-left:auto;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px}
.vmenu{position:relative}
.vmenu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;color:var(--mut);cursor:pointer}
.vmenu>summary::-webkit-details-marker{display:none}
.vmenu>summary:hover,.vmenu[open]>summary{background:var(--bg2);color:var(--ink)}
.vmenu-list{position:absolute;right:0;top:32px;z-index:20;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:var(--s1)}
.vmenu-list a{display:flex;align-items:center;gap:var(--s2);padding:8px 10px;border-radius:7px;color:var(--ink2);font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.vmenu-list a:hover{background:var(--soft);color:var(--pri)}
.vcard-who{display:flex;align-items:center;gap:var(--s3);color:inherit;text-decoration:none;min-width:0}
.vcard-who:hover{text-decoration:none}.vcard-who:hover b{color:var(--pri)}
.vavatar{flex:0 0 56px;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 20%;border:2px solid #D6B66B;background:var(--bg2)}
.vavatar.none{display:inline-flex;align-items:center;justify-content:center;border:1.5px dashed var(--line2);color:var(--mut);font-weight:800;font-size:var(--fs-md)}
.vcard-name{display:flex;flex-direction:column;min-width:0}
.vcard-name b{font-size:var(--fs-md);line-height:1.3;overflow-wrap:anywhere}
.vcard-name span{font-size:var(--fs-sm);font-weight:600}
.ok-t{color:var(--ok)}.info-t{color:var(--info)}
.vcard-meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s3);margin:0}
.vcard-meta div{min-width:0}
.vcard-meta dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700}
.vcard-meta dd{margin:2px 0 0;font-size:var(--fs-sm);font-weight:600;color:var(--ink2);overflow-wrap:anywhere}
.vcard-contact{background:var(--bg2);border-radius:var(--r);padding:var(--s2) var(--s3);font-size:var(--fs-sm);color:var(--ink2)}
.vcard-contact div{display:flex;align-items:center;gap:var(--s2);padding:5px 0;min-width:0}
.vcard-contact div+div{border-top:1px solid var(--line)}
.vcard-contact .ico{flex:0 0 auto;color:var(--mut)}
.vcard-contact span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard-act{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:auto}
.vcard-act .btn{border-radius:99px}
@media (max-width:640px){.vcard-grid{padding:var(--s3);grid-template-columns:1fr}}

/* ---------- Poin & Pelanggaran: jenis kejadian & pemilih relawan ---------- */
.type-table{table-layout:fixed;width:100%}
.type-table td{vertical-align:middle;padding-top:8px;padding-bottom:8px}
.type-table td:first-child{position:relative}
.type-table td:first-child input{padding-right:84px}
.type-table .type-tag{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.type-table tr.off input,.type-table tr.off select{color:var(--mut);background:var(--bg2)}
.switch{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:600;font-size:var(--fs-sm);cursor:pointer}
.switch input{width:16px;height:16px;min-height:0;margin:0}
.type-add{display:grid;grid-template-columns:minmax(0,1fr) 190px 110px auto;gap:var(--s3);align-items:end}
.type-add label{margin-top:0}
@media (max-width:760px){.type-table colgroup{display:none}.type-table{table-layout:auto}.type-add{grid-template-columns:1fr 1fr}.type-add>div:first-child{grid-column:1/-1}}

.vpick{border:1px solid var(--line2);border-radius:var(--r);background:#fff;overflow:hidden}
.vpick-bar{display:flex;gap:var(--s2);align-items:center;padding:var(--s2);border-bottom:1px solid var(--line);background:var(--bg2)}
.vpick-bar input{flex:1 1 auto;min-width:0}
.vpick-count{white-space:nowrap;font-size:var(--fs-sm);color:var(--mut)}.vpick-count b{color:var(--pri)}
.vpick-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 var(--s2)}
.vpick-chips:not(:empty){padding:var(--s2);border-bottom:1px solid var(--line)}
.vpick-chip{border:0;background:var(--soft);color:var(--pri);border-radius:99px;padding:3px 10px;font:inherit;font-size:var(--fs-xs);font-weight:700;cursor:pointer}
.vpick-chip:hover{background:#d6e2fb}
.vpick-list{max-height:340px;overflow:auto;padding:var(--s1) var(--s2) var(--s2)}
.vpick-ghead{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:var(--s2) var(--s1) 4px;background:#fff;font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.vpick-ghead .linkbtn{font-size:var(--fs-xs);text-transform:none;letter-spacing:0}
.vpick-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px}
.vpick-item{display:flex;align-items:center;gap:var(--s2);margin:0;padding:6px 8px;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;font-weight:500}
.vpick-item:hover{background:var(--bg2)}
.vpick-item.on{background:var(--soft);border-color:#c7d7f7}
.vpick-item input{width:16px;height:16px;min-height:0;margin:0;flex:0 0 auto}
.vpick-av{flex:0 0 32px;width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:center 20%;background:var(--bg2)}
.vpick-av.none{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--mut);border:1.5px dashed var(--line2)}
.vpick-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.vpick-who b{font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpick-who small{font-size:var(--fs-xs);color:var(--mut)}
.vpick-empty{padding:var(--s3);text-align:center;margin:0}

/* ---------- Pedoman relawan ---------- */
.card.attn-ok{border-color:#bfe5d1;background:var(--okbg)}
textarea.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.5}
.md{line-height:1.65}
.md h1{font-size:var(--fs-xl);margin:0 0 var(--s4)}
.md h2{font-size:var(--fs-lg);margin:var(--s6) 0 var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.md h3{font-size:var(--fs-md);margin:var(--s4) 0 var(--s2)}
.md p{margin:0 0 var(--s3)}
.md ul,.md ol{margin:0 0 var(--s3);padding-left:22px}
.md li{margin:2px 0}.md li ul{margin:2px 0 4px;padding-left:20px;list-style:circle}
.md-table{overflow-x:auto;margin:0 0 var(--s4);border:1px solid var(--line);border-radius:var(--r-sm)}
.md-table table{min-width:420px}
.md-table th,.md-table td{font-size:var(--fs-sm);white-space:normal}
.agree-check{display:flex;gap:var(--s3);align-items:flex-start;margin:0;font-weight:500;cursor:pointer}
.agree-check input{width:20px;height:20px;min-height:0;margin-top:2px;flex:0 0 auto}
/* Analitik Kehadiran */
.an-presets{align-self:flex-end;flex-wrap:wrap}
.an-period{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.an-kpi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.an-kpi .stat{margin-bottom:0}.an-kpi .stat .sf{display:block}
.an-sum ul{margin:0;padding-left:1.2rem;display:grid;gap:6px}.an-sum b{color:var(--ink)}
.trend{position:relative;display:flex;align-items:flex-end;gap:2px;height:160px;padding:0 2px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),var(--mutbg) calc(25% - 1px),var(--mutbg) 25%)}
.trend .tcol{flex:1 1 0;min-width:3px;height:100%;display:flex;align-items:flex-end;cursor:pointer;border-radius:4px 4px 0 0}
.trend .tcol:hover,.trend .tcol.on{background:var(--mutbg)}
.trend .tcol i{display:block;width:100%;border-radius:4px 4px 0 0;min-height:2px}
.trend .tcol i.ok{background:var(--ok)}.trend .tcol i.warn{background:#e2a33b}.trend .tcol i.bad{background:var(--bad)}.trend .tcol i.muted{background:transparent}
.trend .tcol.we i{opacity:.75}
.trend-goal{position:absolute;left:0;right:0;bottom:90%;border-top:2px dashed var(--info);opacity:.6;pointer-events:none}
.trend-axis{display:flex;justify-content:space-between;color:var(--mut);font-size:var(--fs-xs);margin-top:4px}
.trend-tip{min-height:1.4em;margin-top:var(--s2);font-weight:600}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;color:var(--mut);margin-top:var(--s2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legend i.ok{background:var(--ok)}.legend i.warn{background:#e2a33b}.legend i.bad{background:var(--bad)}
.an-div{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);display:grid;gap:var(--s2)}
.an-div.ok{border-left-color:var(--ok)}.an-div.warn{border-left-color:#e2a33b}.an-div.bad{border-left-color:var(--bad)}
.an-div-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.an-div-n{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--mut)}.an-div-n b{color:var(--ink)}
.an-list td,.an-list th{padding-top:6px;padding-bottom:6px}
.an-wd{display:grid;grid-template-columns:2.5rem 1fr 7rem;align-items:center;gap:var(--s3);margin:6px 0}
.an-wd .meter{height:10px}.an-wd .v{text-align:right}.an-wd.worst .d{color:var(--bad);font-weight:800}
.an-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);padding:6px 0;border-bottom:1px solid var(--line)}.an-row:last-of-type{border-bottom:0}
.card h3.small{margin:0 0 var(--s2);text-transform:uppercase;letter-spacing:.04em}
@media (max-width:600px){.an-list th,.an-list td{padding-left:5px;padding-right:5px}.an-wd{grid-template-columns:2.2rem 1fr 6rem}}
/* Rapat & Notulensi */
.meet-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.meet-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.meet-row:last-child{border-bottom:0}
.meet-row{padding:var(--s3);margin:0 calc(-1 * var(--s3));border-radius:var(--r);transition:background .15s,box-shadow .15s}
.meet-row:hover,.meet-row:focus-visible{text-decoration:none;background:var(--bg2);box-shadow:inset 3px 0 0 var(--pri)}
.meet-row:hover *{text-decoration:none}
.meet-row:hover .meet-body b{color:var(--pri)}
.meet-date{width:52px;flex:none;text-align:center;background:var(--soft);color:var(--pri);border-radius:var(--r);padding:6px 0;line-height:1.1}
.meet-date b{display:block;font-size:var(--fs-xl)}.meet-date span{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase}
.meet-body{flex:1;min-width:0;display:grid;gap:2px}.meet-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.meet-head{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}.meet-head h2{margin-bottom:var(--s1)}
.meet-agenda{margin:var(--s2) 0 0;padding-left:1.2rem}
/* Daftar Relawan: baris cari + filter dropdown + urutkan, aksi di baris bawah */
.vol-bar{display:grid;gap:var(--s3)}
.vol-search{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.vol-q{flex:1 1 280px;display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:var(--r);padding:0 12px;background:var(--card);color:var(--mut)}
.vol-q:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--soft)}
.vol-q input{border:0!important;box-shadow:none!important;padding-left:0;flex:1;min-width:0;background:transparent}
.vol-filter{position:relative}.vol-filter>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.vol-filter>summary::-webkit-details-marker{display:none}
.vol-filter-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:300px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 12px 32px rgba(15,27,61,.16);padding:var(--s4);display:grid;gap:4px}
.vol-filter-pop label{margin-top:var(--s2);font-size:var(--fs-sm)}.vol-filter-pop select{width:100%}
.vol-filter-head{display:flex;justify-content:space-between;align-items:center}
.vol-sort{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--mut);font-weight:400}.vol-sort select{min-width:200px}
.vol-actions{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end;border-top:1px solid var(--line);padding-top:var(--s3)}
.vol-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:var(--s3)}
.vol-chip{display:inline-block;padding:4px 10px;border-radius:99px;background:var(--infobg);color:var(--info);font-size:var(--fs-sm);font-weight:700;text-decoration:none}
.vol-chip:hover{background:var(--info);color:#fff}
@media (max-width:640px){.vol-sort,.vol-sort select{width:100%}.vol-actions{justify-content:stretch}.vol-actions .btn{flex:1 1 auto}}
.hyg-divs{display:flex;flex-wrap:wrap;gap:var(--s2)}.hyg-divs a{padding:8px 14px;border:1px solid var(--line);border-radius:99px;font-weight:700;color:var(--ink2);text-decoration:none}
.hyg-divs a.on{background:var(--pri);border-color:var(--pri);color:#fff}
.hyg-head{display:flex;align-items:center;gap:var(--s2);font-weight:400;margin-bottom:var(--s2)}.hyg-head .avatar.sm{width:32px;height:32px;font-size:12px}
.hyg-items{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hyg-item{display:block;position:relative;font-weight:400;margin:0}.hyg-item input{position:absolute;opacity:0}
.hyg-item span{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:var(--fs-sm);color:var(--mut)}
.hyg-item input:checked+span{background:var(--badbg);border-color:var(--bad);color:var(--bad);font-weight:700}
.hyg-item input:focus-visible+span{outline:2px solid var(--pri)}
.early-box{display:grid;gap:4px;border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s3);text-align:center}
.early-box b{font-size:var(--fs-lg)}.early-box.ok{background:var(--okbg);color:var(--ok);border:2px solid var(--ok)}
.early-box.bad{background:var(--badbg);color:var(--bad);border:2px solid var(--bad)}.early-box.bad b{font-size:var(--fs-xl);letter-spacing:.02em}
.early-box span{color:var(--ink2);font-size:var(--fs-sm)}
.early-decide{display:grid;gap:4px;min-width:200px}.early-decide input{width:100%}
.meet-guest{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr auto;gap:var(--s2)}
@media (max-width:760px){.meet-guest{grid-template-columns:1fr}}
.meet-fu select{width:100%;min-width:140px;margin-bottom:4px}
.meet-fu-act{display:flex;gap:var(--s2);justify-content:flex-end;align-items:center}.meet-fu-act input{width:170px}
.meet-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:flex-start;max-width:420px;justify-content:flex-end}
.meet-actions form{margin:0}.meet-cancel summary{list-style:none;cursor:pointer}.meet-cancel[open] form{margin-top:var(--s2)}
.meet-leave{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) 0;border-bottom:1px solid var(--line)}.meet-leave:last-child{border-bottom:0}
.meet-leave-f{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}.meet-leave-f input{width:200px}
.meet-thumb{width:84px;height:84px;object-fit:cover;border-radius:8px}
.meet-table td{vertical-align:top}
.meet-menu{position:relative;display:inline-block}.meet-menu summary{list-style:none;cursor:pointer}
.meet-pop{position:absolute;right:0;z-index:20;width:280px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--s3);text-align:left}
.meet-pop select,.meet-pop input{width:100%;margin-top:4px}
.meet-fu input{width:100%;min-width:120px}
.meet-photos{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s3)}.meet-photos div{display:grid;gap:4px;justify-items:center}
.meet-photos img{width:140px;height:105px;object-fit:cover;border-radius:8px}
.meet-kinds{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:var(--s3)}
.meet-kind{display:flex;gap:var(--s2);align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);cursor:pointer;font-weight:400}
.meet-kind:has(input:checked){border-color:var(--pri);background:var(--soft)}.meet-kind span{display:grid;gap:2px}.meet-kind small{color:var(--mut)}
.meet-mode{border:2px solid var(--info);background:var(--infobg)}
.meet-pick,.meet-card{display:grid;gap:4px;color:inherit;text-decoration:none}.meet-pick{border:2px solid var(--info)}
.bad-t{color:var(--bad)!important}

/* ---------- Hubungan & keterangan relawan ---------- */
.rel-chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px}
.rel-chip{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);font-weight:600;line-height:1.3;padding:2px 8px;border-radius:99px;background:var(--bg2);color:var(--mut);border:1px solid var(--line);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-chip.pos{background:var(--soft);color:var(--pri);border-color:transparent}
.rel-chip.fam{background:#fff4e5;color:#9a5b00;border-color:transparent}
.rel-list{list-style:none;margin:0 0 var(--s3);padding:0}
.rel-list li{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.rel-list li:last-child{border-bottom:0}
.rel-list form{margin-left:auto}
.rel-ico{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px}
.rel-ico.pos{background:var(--soft);color:var(--pri)}.rel-ico.fam{background:#fff4e5}
.rel-body{min-width:0}.rel-body .d-block{display:block}

/* Surat Kepala SPPG */
.letter-paper{background:#fffdf7;border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--s6);margin-bottom:var(--s4);color:var(--ink)}
.letter-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap;border-bottom:1px solid var(--line2);padding-bottom:var(--s2);margin-bottom:var(--s4)}
.letter-from{font-weight:700;font-size:var(--fs-sm);color:var(--pri2)}
.letter-subject{font-size:var(--fs-lg);margin:0 0 var(--s4)}
.letter-body{font-size:var(--fs-md);line-height:1.7}
.letter-body p{margin:0 0 var(--s4)}
.letter-body p:last-child{margin-bottom:0}
.letter-env{display:flex;align-items:center;gap:var(--s3);background:#fffdf7;border-color:var(--accent);color:var(--ink);text-decoration:none}
.letter-msg{background:var(--bg2);border-radius:var(--r-sm);padding:var(--s2) var(--s3);margin-top:var(--s2);font-size:var(--fs-base)}
.letter-msg.me{background:var(--soft)}
.letter-reply-row{padding:var(--s3) 0;border-top:1px solid var(--line)}
.letter-reply-row:first-of-type{border-top:0}