/* SapaPasien — dasar tampilan (desain 2026): huruf Plus Jakarta Sans; biru #2563EB untuk aksi, navy #0F1E3D untuk
   menu & judul, koral #FF7A5C untuk penanda penting (teks di atas koral = navy). Semua warna lewat token di :root
   supaya mode gelap (keluarga navy) ikut. Komponen bersama desain baru ada di public/gaya/dasar.css. */
:root{
  color-scheme:light;
  --bg:#F5F7FB;--bg-subtle:#EEF2F8;--surface:#FFFFFF;--surface-raised:#FFFFFF;
  --fg:#1F2A44;--fg-muted:#5B6780;--fg-heading:#0F1E3D;
  --primary:#2563EB;--primary-hover:#1D4ED8;--on-primary:#FFFFFF;--primary-subtle:#EAF1FE;
  --accent:#047857;--accent-subtle:#ecfdf5;
  --danger:#b91c1c;--on-danger:#FFFFFF;--danger-subtle:#fef2f2;--warning:#a16207;--warning-subtle:#fefce8;
  --border:#E3E8F0;--border-strong:#D5DDEA;--ring:#2563EB;
  --nav-bg:#0F1E3D;--nav-aktif:#1E3466;--nav-akun:#172A52;--nav-fg:#D3DBEE;--nav-redup:#A8B6D6;
  --koral:#FF7A5C;--koral-teks:#0F1E3D;--koral-subtle:#FFEDE8;--koral-kuat:#B93A22;
  --bg-kaki:#FAFBFD;--garis-lembut:#EDF1F7;
  --bayang-kartu:0 1px 2px rgba(15,30,61,.04);--bayang-modal:0 24px 60px rgba(15,30,61,.30);
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-heading:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:14px;--radius-sm:10px;--radius-lg:16px;--sidebar-w:248px;--topbar-h:60px;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#0B1426;--bg-subtle:#0F1A30;--surface:#111C33;--surface-raised:#16233F;
  --fg:#E6EBF5;--fg-muted:#9AA6BF;--fg-heading:#FFFFFF;
  --primary:#60A5FA;--primary-hover:#93C5FD;--on-primary:#0B1426;--primary-subtle:#172A4F;
  --accent:#34d399;--accent-subtle:#0f2a24;
  --danger:#f87171;--on-danger:#2a1414;--danger-subtle:#2a1414;--warning:#fbbf24;--warning-subtle:#2a2410;
  --border:#22304D;--border-strong:#2E3E5E;--ring:#60A5FA;
  --nav-bg:#0A1222;--nav-aktif:#1E3466;--nav-akun:#13213F;--nav-fg:#D3DBEE;--nav-redup:#A8B6D6;
  --koral-subtle:#3A211C;--koral-kuat:#FFB4A3;
  --bg-kaki:#0F1A30;--garis-lembut:#1B2742;
  --bayang-kartu:none;--bayang-modal:0 24px 60px rgba(0,0,0,.55);
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--primary)}
a:hover{color:var(--primary-hover)}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--font-heading);color:var(--fg-heading);margin:0;font-weight:800;line-height:1.25;letter-spacing:-.01em}
h1{font-size:1.625rem;letter-spacing:-.02em}h2{font-size:1.125rem}h3{font-size:.9375rem;font-weight:700;letter-spacing:0}
p{margin:0 0 .75rem}
.tabular{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:absolute;left:-999px;top:12px;z-index:100;background:var(--primary);color:var(--on-primary);padding:8px 16px;border-radius:8px}
.skip:focus{left:12px}

/* ---------- Kerangka: menu kiri navy + topbar ramping ---------- */
/* Tampilan ringkas di layar komputer (pemilik, 25 Okt 2026: "font besar2 … coba 80% zoom out, jadi pas"): seluruh
   aplikasi (.shell) diperkecil 80%. CSS zoom ikut mengecilkan satuan vh, jadi tinggi selayar ditulis
   calc(100vh / var(--skala)). HP & tablet (< 1100px) dan halaman publik tidak berubah. */
:root{--skala:1}
@media (min-width:1100px){:root{--skala:.8}}
.shell{display:flex;min-height:100vh;min-height:calc(100vh / var(--skala));zoom:var(--skala)}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:calc(100vh / var(--skala));overflow-y:auto;overflow-x:hidden;z-index:40;
  padding:14px 12px 12px;background:var(--nav-bg);color:var(--nav-fg);transition:transform .2s ease,width .2s ease,flex-basis .2s ease;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.sidebar :focus-visible{outline-color:#93C5FD}
/* Isi menu tidak menyusut saat lebih tinggi dari layar (menu ciut): menu yang menggulir, bukan logo yang tertindih */
.sidebar>*{flex-shrink:0}
.brand{display:flex;align-items:center;gap:10px;padding:4px 4px 16px;min-height:58px}
.brand-logo{flex:0 0 38px;display:inline-flex;border-radius:11px}
.brand img{display:block;width:38px;height:38px;border-radius:11px}
.brand img.brand-logo-pt{object-fit:contain;background:#fff;padding:3px}
.brand-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.brand-name a{font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-name a:hover{color:#fff}
.brand-name small{font-size:12px;color:var(--nav-redup);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tombol-ciut{display:none;flex:0 0 auto;width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:var(--nav-redup);cursor:pointer;align-items:center;justify-content:center;transition:background-color .15s,color .15s}
.tombol-ciut:hover{background:rgba(255,255,255,.08);color:#fff}
.tombol-ciut svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tombol-ciut .panah{transform-box:fill-box;transform-origin:center;transition:transform .2s}
.menu-nav{display:flex;flex-direction:column;flex:1 0 auto}
.nav-daftar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav-link{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--nav-fg);text-decoration:none;font-size:14px;font-weight:500;line-height:1.3;transition:background-color .15s,color .15s}
.nav-link svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-link>span:not(.nav-badge){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-link.on{background:var(--nav-aktif);color:#fff;font-weight:700}
/* Lencana jumlah (menu, tombol Laporkan masalah, daftar): koral dengan teks navy (kontras ≥ 5:1) */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--koral);color:var(--koral-teks);font-size:11.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.nav-link .nav-badge{min-width:22px;height:22px;padding:0 7px;font-size:12px}
.nav-sep{height:1px;background:var(--nav-aktif);margin:12px 8px}
/* Segmen khusus pengelola platform: terpisah dari menu klinik, berbingkai & berjudul koral */
.nav-segmen{margin:14px 0 2px;padding:6px;border-radius:12px;background:rgba(255,122,92,.07);border:1px solid rgba(255,122,92,.24)}
.nav-segmen-judul{margin:4px 8px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#FFB4A3}
.nav-segmen+.nav-sep{margin-top:10px}
body.menu-ciut .nav-segmen{padding:4px 2px}
body.menu-ciut .nav-segmen-judul{display:none}
.akun-menu{display:flex;align-items:center;gap:4px;margin-top:14px;padding:6px;border-radius:12px;background:var(--nav-akun)}
.userchip{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:4px;border-radius:9px;color:inherit;text-decoration:none;transition:background-color .15s}
.userchip:hover,.userchip:focus-visible{background:rgba(255,255,255,.07);color:inherit}
.avatar{flex:0 0 34px;width:34px;height:34px;border-radius:999px;background:var(--koral-subtle);color:var(--koral-kuat);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.akun-teks{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.uname{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.akun-peran{font-size:12px;color:var(--nav-redup);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.akun-keluar{display:flex;margin:0}
.tombol-keluar{flex:0 0 40px;width:40px;height:40px;border:0;border-radius:9px;background:transparent;color:var(--nav-redup);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s,color .15s}
.tombol-keluar:hover{background:rgba(255,255,255,.08);color:#fff}
.tombol-keluar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 32px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:30}
.topbar .spacer{flex:1}
.hamburger{display:none;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;color:var(--fg);align-items:center;justify-content:center}
.content{padding:28px 32px 40px;width:100%}
.content>.space{display:flex;flex-direction:column;gap:20px}
.site-foot{margin-top:auto;padding:14px 28px;font-size:12.5px;color:var(--fg-muted);text-align:center}
.backdrop{display:none;position:fixed;inset:0;background:rgba(15,30,61,.5);z-index:35}
/* Menu ciut (layar lebar, cookie sapa_menu=ciut): sidebar 72px berisi ikon saja; label tetap terbaca pembaca layar */
@media (min-width:1025px){
  .tombol-ciut{display:inline-flex}
  body.menu-ciut{--sidebar-w:72px}
  body.menu-ciut .sidebar{padding:14px 10px 12px}
  body.menu-ciut .brand{flex-direction:column;gap:8px;padding:2px 0 12px;min-height:0}
  body.menu-ciut .brand-name{display:none}
  body.menu-ciut .tombol-ciut .panah{transform:scaleX(-1)}
  body.menu-ciut .nav-link{justify-content:center;padding:0;gap:0}
  body.menu-ciut .nav-link>span:not(.nav-badge){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  body.menu-ciut .nav-link .nav-badge{position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 5px;font-size:10.5px;box-shadow:0 0 0 2px var(--nav-bg)}
  body.menu-ciut .nav-sep{margin:10px 6px}
  body.menu-ciut .akun-menu{flex-direction:column;gap:2px;padding:6px 2px}
  body.menu-ciut .userchip{flex:0 0 auto;justify-content:center;padding:4px}
  body.menu-ciut .akun-teks{display:none}
}
@media (max-width:1024px){
  /* Tertutup = juga tak terlihat (visibility) supaya tautan menu tidak ikut urutan Tab / pembaca layar */
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:100%;width:min(288px,86vw);transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility 0s linear .2s}
  body.sidebar-open .sidebar{transform:none;visibility:visible;transition:transform .2s;box-shadow:0 20px 50px rgba(0,0,0,.35)}
  body.sidebar-open .backdrop{display:block}
  .hamburger{display:inline-flex}
  .content{padding:20px 16px 32px}
  .topbar{padding:0 16px;gap:10px}
}
@media (prefers-reduced-motion:reduce){.sidebar,.tombol-ciut .panah{transition:none}}

/* ---------- Halaman polos (login, setup, legal) ---------- */
body.plain{display:flex;flex-direction:column;min-height:100vh}
body.plain main{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 16px}
.auth-box{width:100%;max-width:440px}
.auth-box.wide{max-width:640px}
.auth-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:28px}
.auth-head img{width:56px;height:56px}
.auth-head h1{margin-top:16px}
.auth-head p{margin-top:6px;color:var(--fg-muted);font-size:14px}
.or{display:flex;align-items:center;gap:12px;color:var(--fg-muted);font-size:12px}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--border)}
body.halaman-masuk main{display:block;padding:0}
body.halaman-masuk>.site-foot{display:none}
@media (max-width:960px){body.halaman-masuk>.site-foot{display:block}}
/* Isian sandi + tombol lihat (login) */
.masuk-sandi{position:relative}
.masuk-sandi input{padding-right:52px}
.masuk-lihat{position:absolute;right:2px;top:2px;bottom:2px;width:46px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--fg-muted);border-radius:var(--radius-sm);cursor:pointer}
.masuk-lihat:hover{color:var(--primary)}
.masuk-lihat .mata-tutup,.masuk-lihat[aria-pressed=true] .mata-buka{display:none}
.masuk-lihat[aria-pressed=true] .mata-tutup{display:block}

/* ---------- Kepala halaman: judul + tombol i + aksi kanan (+ tab, lihat gaya/dasar.css) ---------- */
.page-head{margin-bottom:22px}
.crumbs{font-size:13px;margin-bottom:6px;color:var(--fg-muted)}
.crumbs a{color:var(--fg-muted);text-decoration:none}
.crumbs a:hover{color:var(--fg-heading);text-decoration:underline;text-underline-offset:3px}
.crumbs span.sep{margin:0 6px;color:var(--border-strong)}
.page-title{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px}
.page-title>div:first-child{flex:1 1 280px;min-width:0}
.page-title h1{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.page-title .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.page-title .sub{color:var(--fg-muted);margin:4px 0 0;font-size:14px}

/* ---------- Kartu & akordeon (panel terang; id KODE tetap untuk jangkar & lapor.js) ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--bayang-kartu)}
.card.tight{padding:16px 20px}
.card h2{margin-bottom:12px}
.card-desc{color:var(--fg-muted);font-size:14px;margin:-4px 0 16px;max-width:60ch}
.akordeon{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--bayang-kartu)}
.akordeon-head{display:flex;align-items:flex-start;gap:10px;padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--garis-lembut)}
.akordeon-head .toggle{width:32px;height:32px;border:0;background:transparent;cursor:pointer;color:var(--fg-muted);display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex:0 0 32px;margin:-3px 0 0 -8px;transition:background-color .15s,color .15s}
.akordeon-head .toggle:hover{background:var(--bg-subtle);color:var(--fg-heading)}
.akordeon-head .toggle svg{transition:transform .15s}
.akordeon.closed .akordeon-head .toggle svg{transform:rotate(-90deg)}
.akordeon.closed .akordeon-head{border-bottom:0}
.akordeon.closed .akordeon-body{display:none}
.akordeon-head .judul{flex:1;min-width:0}
.akordeon-head h2{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;font-size:17px;font-weight:800;color:var(--fg-heading)}
.akordeon-head h2>.kode{display:none}
.akordeon-head .ringkas{margin:3px 0 0;color:var(--fg-muted);font-size:13.5px}
.akordeon-head .aksi{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.akordeon-body{padding:20px}
/* Kode data (ref lead, kode kampanye, prefiks token) */
.kode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:600;padding:2px 6px;border-radius:5px;background:var(--bg-subtle);border:1px solid var(--border);color:var(--fg-muted);letter-spacing:.02em}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px}
.stat .l{font-size:13px;font-weight:700;color:var(--fg-muted)}
.stat .n{font-size:30px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--fg-heading);margin-top:4px;font-variant-numeric:tabular-nums}
.stat .d{font-size:13px;color:var(--fg-muted);margin-top:4px}

/* ---------- Tombol: utama (biru), kedua (putih bergaris), bahaya ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--radius-sm);font:inherit;font-weight:700;font-size:14px;line-height:1.2;cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s;border:1px solid transparent;background:var(--primary);color:var(--on-primary);white-space:nowrap}
.btn:hover{background:var(--primary-hover);color:var(--on-primary)}
.btn-secondary{border-color:var(--border-strong);background:var(--surface);color:var(--fg)}
.btn-secondary:hover{background:var(--bg-subtle);color:var(--fg-heading)}
.btn-danger{background:var(--danger);color:var(--on-danger)}
.btn-danger:hover{opacity:.9;background:var(--danger);color:var(--on-danger)}
.btn-sm{min-height:36px;padding:0 12px;font-size:13px;border-radius:9px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn svg{width:18px;height:18px;flex:0 0 18px}
.btn-sm svg{width:16px;height:16px;flex-basis:16px}
.inline{display:inline}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Formulir: isian 44px, huruf 16px (iOS tidak memperbesar), cincin fokus biru ---------- */
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--fg-heading)}
label .opt{margin-left:6px;font-weight:400;color:var(--fg-muted);font-size:12px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=number],input[type=url],input[type=tel],input[type=search],select,textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font:inherit;font-size:16px;font-weight:500;background:var(--surface);color:var(--fg);transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=time]:focus,input[type=month]:focus,input[type=number]:focus,input[type=url]:focus,input[type=tel]:focus,input[type=search]:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
input::placeholder,textarea::placeholder{color:var(--fg-muted);opacity:1;font-weight:400}
/* Kolom tanggal/jam disamakan tingginya dengan kolom teks: Chrome menambah padding di pembungkus segmen tanggal. */
input[type=date]::-webkit-datetime-edit-fields-wrapper,input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper,input[type=time]::-webkit-datetime-edit-fields-wrapper,input[type=month]::-webkit-datetime-edit-fields-wrapper{padding:0}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input[type=file]{font:inherit;font-size:14px;padding:8px 0}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--primary);vertical-align:-3px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14.5px;color:var(--fg)}
.check input{margin-top:3px;flex:0 0 18px}
.field{margin-bottom:16px}
.field .help{margin-top:6px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.row>*{flex:1;min-width:180px}
.row>.fix{flex:0 0 auto;min-width:0}
.help{font-size:13px;color:var(--fg-muted)}
.filterbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filterbar .field{margin:0;flex:1;min-width:160px}
.filterbar .field.narrow{flex:0 0 200px}
pre.code{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;white-space:pre-wrap;word-break:break-all;margin:0 0 12px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--bg-subtle);padding:1px 5px;border-radius:4px}
.copybox{display:flex;gap:8px;align-items:center}
.copybox input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}

/* ---------- Pemberitahuan & toast ---------- */
.alert{padding:12px 16px;border-radius:12px;border:1px solid;margin-bottom:16px;font-size:14.5px}
.alert-success{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent)}
.alert-error,.alert-danger{background:var(--danger-subtle);border-color:var(--danger);color:var(--danger)}
.alert-info{background:var(--primary-subtle);border-color:color-mix(in srgb,var(--primary) 40%,transparent);color:var(--fg-heading)}
.alert-warning{background:var(--warning-subtle);border-color:var(--warning);color:var(--warning)}
.alert b{font-weight:700}
.toast-area{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 32px))}
.toast{padding:14px 16px;border-radius:12px;border:1px solid;border-left-width:4px;background:var(--surface);box-shadow:0 16px 40px rgba(15,30,61,.18);font-size:14.5px;font-weight:600;display:flex;gap:12px;align-items:flex-start}
.toast-success{border-color:var(--accent);color:var(--accent)}
.toast-error{border-color:var(--danger);color:var(--danger)}
.toast-info{border-color:var(--primary);color:var(--fg-heading)}
.toast button{margin:-8px -8px -8px auto;flex:0 0 36px;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-size:20px;line-height:1;padding:0;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:560px){.toast-area{left:16px;right:16px;bottom:16px;max-width:none}}

/* ---------- Tabel ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:12px 14px;border-bottom:1px solid var(--garis-lembut);text-align:left;vertical-align:middle}
th{background:var(--bg-kaki);color:var(--fg-muted);font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
th a.sort{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none;white-space:nowrap}
th a.sort:hover{color:var(--fg-heading)}
th a.sort.on{color:var(--primary)}
th a.sort svg.dim{opacity:.45}
th a.sort:hover svg.dim{opacity:1}
tbody tr:hover td{background:var(--bg-kaki)}
td .sub,td small,.muted{color:var(--fg-muted)}
td small{font-size:12.5px;display:block}
.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}.small{font-size:13px}
/* Lencana status. .b-teal = alias biru lama (dipakai banyak view & src/helpdesk.js); .b-biru (gaya/dasar.css) sama */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.4;border:1px solid transparent;white-space:nowrap}
.b-grey{background:var(--bg-subtle);color:var(--fg-muted);border-color:var(--border)}
.b-green{background:var(--accent-subtle);color:var(--accent)}
.b-yellow{background:var(--warning-subtle);color:var(--warning)}
.b-red{background:var(--danger-subtle);color:var(--danger)}
.b-teal{background:var(--primary-subtle);color:var(--primary-hover)}
.b-navy{background:var(--nav-bg);color:#fff}
.b-koral{background:var(--koral-subtle);color:var(--koral-kuat)}
.meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px;color:var(--fg-muted)}
.kv{display:grid;grid-template-columns:170px 1fr;gap:8px 14px;font-size:14.5px;margin:0}
.kv dt{color:var(--fg-muted)}.kv dd{margin:0}
/* Riwayat versi (Tentang aplikasi) */
.riwayat-list{list-style:none;margin:0;padding:0 0 0 20px;border-left:2px solid var(--border)}
.riwayat-list>li{position:relative;padding:0 0 16px}
.riwayat-list>li:last-child{padding-bottom:0}
.riwayat-list>li::before{content:"";position:absolute;left:-27px;top:5px;width:12px;height:12px;border-radius:999px;background:var(--surface);border:2px solid var(--border-strong)}
.riwayat-list>li:first-child::before{background:var(--primary);border-color:var(--primary)}

/* ---------- Modal: latar navy transparan, kotak radius 18, kepala & kaki menempel ----------
   Markup: .modal[hidden][data-modal-umum] > .box[.kecil|.sedang|.besar] > .modal-kepala (h2 + [data-tutup-modal]) + isi + .modal-foot.
   Ukuran: .kecil 480 · .sedang 600 · bawaan 760 · .besar 960. Layar ≤560px: layar penuh.
   Sticky menghormati padding .box, jadi top/bottom = -padding agar kepala & kaki menempel di tepi kotak. */
.modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(15,30,61,.5)}
.modal .box{position:relative;width:100%;max-width:760px;max-height:calc(100vh / var(--skala) - 32px);max-height:calc(100dvh / var(--skala) - 32px);overflow:auto;overscroll-behavior:contain;padding:22px;background:var(--surface);border:1px solid transparent;border-radius:18px;box-shadow:var(--bayang-modal)}
.modal .box.kecil{max-width:480px}
.modal .box.sedang{max-width:600px}
.modal .box.besar{max-width:960px}
.modal .box h2{margin-bottom:16px}
.modal-kepala{position:sticky;top:-22px;z-index:3;display:flex;align-items:center;gap:12px;margin:-22px -22px 18px;padding:16px 22px;background:var(--surface);border-bottom:1px solid var(--garis-lembut)}
.modal .box .modal-kepala h2,.modal-kepala h2{flex:1;min-width:0;margin:0;font-size:18px;font-weight:800;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.modal-kepala p{margin:2px 0 0;font-size:13px;color:var(--fg-muted)}
/* Tombol tutup di kepala modal tampil ringkas (ikon ×); teks "Tutup" tetap menjadi nama aksesibelnya */
.modal-kepala>[data-tutup-modal],.tombol-tutup{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:var(--bg-subtle);color:var(--fg);font-size:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.modal-kepala>[data-tutup-modal]::before,.tombol-tutup::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat}
.modal-kepala>[data-tutup-modal]:hover,.tombol-tutup:hover{background:var(--border);color:var(--fg-heading)}
.modal-foot{position:sticky;bottom:-22px;z-index:3;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center;margin:20px -22px -22px;padding:14px 22px;background:var(--bg-kaki);border-top:1px solid var(--garis-lembut)}
/* Panduan (tombol i): kode bagian tidak ditampilkan di judul (DOM tetap) */
.info-analisa .modal-kepala .kode{display:none}
body.modal-terbuka{overflow:hidden}
@media (max-width:560px){
  .modal{padding:0;align-items:stretch}
  .modal .box,.modal .box.kecil,.modal .box.sedang,.modal .box.besar{max-width:none;width:100%;height:100%;max-height:none;border-radius:0;padding:18px 16px}
  .modal-kepala{top:-18px;margin:-18px -16px 16px;padding:12px 16px}
  .modal-foot{bottom:-18px;margin:18px -16px -18px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
}
/* Tombol "i" (panduan) — di samping judul halaman tampil sebagai lingkaran terang bergaris */
.tombol-info{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;padding:0;margin:0;vertical-align:middle;border:0;border-radius:999px;background:transparent;color:var(--primary);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
/* Tombol i: ikon saja tanpa lingkaran di sekelilingnya (permintaan pemilik 26 Okt 2026); area sentuh tetap lewat ::after. */
.tombol-info:hover,.tombol-info:focus-visible{color:var(--primary-hover)}
.tombol-info:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Area sentuh tombol i kecil (26–30px) diperluas tanpa mengubah ukuran tampilnya */
.tombol-info::after{content:"";position:absolute;inset:-7px;border-radius:inherit}
.page-title h1 .tombol-info,.sapaan h1 .tombol-info{width:32px;height:32px}
.page-title h1 .tombol-info::after,.sapaan h1 .tombol-info::after{inset:-6px}
.page-title h1 .tombol-info svg,.sapaan h1 .tombol-info svg{width:20px;height:20px}
.page-title h1 .tombol-info:hover,.sapaan h1 .tombol-info:hover{color:var(--primary-hover)}

/* ---------- Ubin (ikon + judul; keterangan di modal tombol i, partials/ubin.ejs) ---------- */
.ubin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.ubin{position:relative;height:136px;min-width:0}
.ubin-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;padding:18px 14px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:var(--fg);text-align:center;transition:border-color .15s,background-color .15s,box-shadow .15s;box-shadow:var(--bayang-kartu)}
.ubin-link:hover,.ubin-link:focus-visible{border-color:var(--primary);background:var(--primary-subtle);color:var(--fg-heading)}
.ubin-ikon{width:48px;height:48px;border-radius:12px;background:var(--primary-subtle);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px}
.ubin-link:hover .ubin-ikon,.ubin-link:focus-visible .ubin-ikon{background:var(--surface)}
.ubin-link b{font-weight:700;font-size:14px;line-height:1.3;color:var(--fg-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ubin .ubin-info{position:absolute;top:8px;right:8px;margin:0;width:28px;height:28px}
.ubin-label{position:absolute;top:10px;left:10px;font-size:10px;padding:1px 7px;text-transform:uppercase;letter-spacing:.04em;pointer-events:none}
.ubin.redup .ubin-ikon{background:var(--bg-subtle);color:var(--fg-muted)}
.ubin-ket{margin:0 0 10px}
@media (max-width:380px){.ubin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ---------- Beranda (views/dashboard.ejs): kartu sapaan navy ---------- */
.br-hero{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:24px 26px;margin:0 0 20px;color:#fff;background:var(--nav-bg)}
.br-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,92,.22),transparent 65%);pointer-events:none}
.br-hero>*{position:relative;z-index:1}
.br-hero-atas{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.br-tanggal{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--nav-redup)}
.br-hero h1{color:#fff;font-size:1.75rem;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.br-peran{margin:6px 0 0;font-size:14px;color:var(--nav-fg)}
.br-hero-aksi{display:flex;align-items:center;gap:10px}
.br-cta{background:#fff;color:var(--nav-bg);border-color:#fff}
.br-cta:hover,.br-cta:focus-visible{background:var(--primary-subtle);color:var(--nav-bg);border-color:var(--primary-subtle)}
.br-hero .tombol-info{color:var(--nav-fg)}
.br-hero .tombol-info:hover,.br-hero .tombol-info:focus-visible{color:#fff}
@media (prefers-color-scheme:dark){.br-hero{box-shadow:inset 0 0 0 1px var(--border)}.sidebar{box-shadow:inset -1px 0 0 var(--border)}}
@media (max-width:560px){.br-hero{padding:20px 18px}.br-hero h1{font-size:1.4rem}.br-hero-aksi{width:100%}.br-cta{flex:1}}

/* ---------- Cetak ---------- */
@media print{
  .sidebar,.topbar,.site-foot,.no-print,.toast-area,.backdrop,.tab-halaman,.skip{display:none!important}
  body{background:#fff;color:#111}
  .content{padding:0;max-width:none}
  .card,.akordeon,.stat{box-shadow:none}
  .badge{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (max-width:640px){.kv{grid-template-columns:1fr}.card{padding:18px}.akordeon-head{padding:14px 16px}.akordeon-body{padding:16px}.page-title h1{font-size:1.4rem}}