/* Gaya khusus halaman kelompok pengaturan (hub /pengaturan dan views/pengaturan/*). Komponen bersama (.grid-atur,
   .kartu-atur, .daftar-atur, .kosong, modal, panel akordeon) ada di dasar.css / app.css; di sini hanya penyesuaian.
   Semua warna lewat token, jadi mode gelap ikut. Nama kelas diberi kata "atur"/"hub" supaya tidak bentrok dengan
   berkas gaya kelompok lain (semua berkas public/gaya/*.css dimuat di setiap halaman). */

/* ---------- Kerangka halaman ---------- */
.halaman-atur{display:flex;flex-direction:column;gap:20px;min-width:0}
.blok{display:block}

/* ---------- Hub /pengaturan ---------- */
.hub-atur{display:flex;flex-direction:column;gap:28px;min-width:0}
.hub-bagian{display:flex;flex-direction:column;gap:12px;min-width:0}
.hub-bagian>h2{margin:0;font-size:16px;font-weight:800;color:var(--fg-heading)}
.hub-saluran{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.hub-saluran .kartu-atur .aksi .btn{width:100%}
.hub-kelompok{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px 16px;align-items:start}
.hub-tanpa-hasil{margin:0;padding:24px 16px;text-align:center;font-size:14px;background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius-lg)}
.cari-atur{display:flex;align-items:center;gap:8px;width:320px;max-width:calc(100vw - 32px);height:44px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--fg-muted);cursor:text;transition:border-color .15s,box-shadow .15s}
.cari-atur:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.cari-atur svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cari-atur input[type=search]{flex:1;min-width:0;width:auto;min-height:0;height:40px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:16px;color:var(--fg)}
.cari-atur input[type=search]:focus{border:0;box-shadow:none;outline:none}
@media (max-width:640px){.cari-atur{width:calc(100vw - 32px)}}

/* ---------- Kartu ringkasan (penyesuaian .kartu-atur) ---------- */
.kartu-atur-kepala>.tombol-info{margin-left:auto}
.kartu-atur .aksi>.pita-serah{flex:1 1 100%;margin:0}
.kartu-atur dl.nilai dd .badge{vertical-align:1px}
.kartu-atur .nilai-ket{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--fg-muted)}
.kartu-atur .help{margin:0}
.kartu-atur .rantai-tahap{font-weight:600;color:var(--fg)}
.kartu-atur-ikon.ikon-logo{background:#fff;border:1px solid var(--border);padding:3px}
.kartu-atur .logo-kartu{width:100%;height:96px}
@media (min-width:1180px){.kartu-lebar{grid-column:span 2}}

/* ---------- Panel datar (section.akordeon.panel-atur tanpa tombol buka/tutup) ---------- */
.panel-atur .akordeon-head{align-items:center}
.panel-atur .akordeon-head .aksi .inline{display:inline-flex}
.panel-atur .akordeon-body>.pita-serah{margin:0 0 14px}
.keterangan-panel{margin:0 0 14px}
.saring-atur{margin:0 0 16px}
.filterbar .field.tombol-saring{flex:0 0 auto;min-width:0}
.kosong.kosong-rapat{padding:20px 16px}
.template-pilihan{margin:0 0 14px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg)}

/* ---------- Isi modal ---------- */
.modal-kepala .kepala-teks{flex:1;min-width:0}
.modal-kepala .kepala-teks h2{margin:0}
.modal .sub-modal{margin:20px 0 8px;font-size:14px;font-weight:800;color:var(--fg-heading)}
.modal .sub-modal:first-child,.modal .modal-kepala+.sub-modal,.modal form>input[type=hidden]+.sub-modal{margin-top:0}
.modal .poin+.sub-modal{margin-top:18px}
.langkah-atur{display:flex;flex-direction:column;gap:12px;margin:0 0 18px;padding-left:22px;font-size:14px}
.langkah-atur li{padding-left:4px}
.langkah-atur li::marker{font-weight:800;color:var(--primary)}
.langkah-atur .salin-baris{margin-top:8px}
.langkah-atur .row .field{margin-bottom:8px}
.isian-ket{margin:-4px 0 14px}
.pilihan-cek{gap:12px 24px;margin:0 0 16px}
.kelompok-isian{border:0;padding:0;margin:0 0 16px;min-width:0}
.kelompok-isian>legend{padding:0;margin:0 0 8px;font-size:14px;font-weight:700;color:var(--fg-heading)}
.kelompok-isian>legend.small{font-size:13px;font-weight:500;color:var(--fg-muted)}
.row>.isian-kode{flex:0 0 140px;min-width:0}
.tindakan-akun{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0 0 8px;padding:0}
.tindakan-akun li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.tindakan-akun .help{flex:1 1 220px;margin:0}
.ket-hapus{margin:12px 0 0}
.modal .sekali{margin:0}

/* ---------- Pengguna ---------- */
.orang-sel{display:flex;align-items:center;gap:10px;min-width:0}
.orang-sel small{display:block}
.orang-sel .inisial{flex:0 0 32px;width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--koral-subtle);color:var(--koral-kuat);font-size:12px;font-weight:800}

/* ---------- Modul ---------- */
.geser-modul{display:inline-flex;gap:4px}
.geser-modul .btn{width:36px;padding:0}

/* ---------- Peran: daftar peran di kiri, matriks di kanan (layar lebar) ---------- */
.peran-tata .peran-kartu b{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.peran-tata .peran-kartu[aria-current]{background:var(--primary-subtle)}
.simpan-matriks{position:sticky;bottom:0;z-index:2;margin-top:16px;padding:12px 0;background:var(--surface);border-top:1px solid var(--garis-lembut)}
.simpan-matriks .help{margin:0}
@supports (overflow:clip){.peran-tata #RL02{overflow:clip}}
@media (min-width:1180px){
  .peran-tata{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);align-items:start}
  .peran-tata .peran-pilih{grid-template-columns:1fr}
}

/* Nilai di kartu sempit: kolom label dibatasi supaya nilai tidak terjepit. */
.halaman-atur .kartu-atur dl.nilai{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.halaman-atur .kartu-atur dl.nilai dd .muted{font-weight:500}
/* Teks .sr-only (position:absolute) di kepala tabel tidak boleh lolos dari area gulir tabel (melebarkan halaman HP). */
.halaman-atur .table-wrap,.modal .table-wrap{position:relative}
/* Satu kartu saja (mis. TikTok): jangan melebar penuh. */
.halaman-atur>.grid-atur>.kartu-atur:only-child{max-width:720px}

/* ---------- WhatsApp: banyak nomor (kartu nomor, wizard Tambah nomor) ---------- */
.wa-nomor-bagian{display:flex;flex-direction:column;gap:12px;min-width:0}
.wa-bagian-kepala{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.wa-bagian-kepala h2{display:flex;align-items:center;gap:6px;margin:0;font-size:16px;font-weight:800;color:var(--fg-heading)}
.kuota-wa{margin:0;color:var(--fg-muted)}
.grid-nomor{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.kartu-nomor .nomor-wa{margin:-4px 0 0;font-size:18px;font-weight:800;letter-spacing:.01em;color:var(--fg-heading)}
.kartu-nomor .keterangan{flex:0 0 auto}
.kartu-nomor .lencana-baris{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.kartu-nomor .lencana-baris .tombol-info{width:30px;height:30px}
.kartu-nomor .pita-serah{margin:0}
.kartu-nomor.nonaktif{background:var(--bg-kaki)}
.kartu-nomor.nonaktif .nomor-wa{color:var(--fg-muted)}
.daftar-template-nomor{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 16px;padding:0}
.daftar-template-nomor li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.daftar-template-nomor li>div:first-child{flex:1 1 280px;min-width:0}
.tabel-banding th[scope=row]{font-weight:700;color:var(--fg-heading);white-space:nowrap}
.tabel-banding td{font-size:13px}

/* Wizard: penanda langkah, kartu pilihan cara, pita risiko, kode QR */
.langkah-wizard{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 18px;padding:0;list-style:none;counter-reset:wz}
.langkah-wizard li{counter-increment:wz;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--bg-subtle);font-size:13px;font-weight:600;color:var(--fg-muted)}
.langkah-wizard li::before{content:counter(wz);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--surface);border:1px solid var(--border-strong);font-weight:800;color:var(--fg-muted)}
.langkah-wizard li.selesai::before{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent)}
.langkah-wizard li[aria-current=step]{background:var(--primary-subtle);color:var(--primary-hover);font-weight:800}
.langkah-wizard li[aria-current=step]::before{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pil-kartu-grup{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:0 0 12px}
.pil-kartu{position:relative;display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:border-color .15s,background-color .15s}
.pil-kartu:hover{border-color:var(--primary)}
.pil-kartu input{margin-top:4px;flex:0 0 18px}
.pil-kartu:has(input:checked){border-color:var(--primary);background:var(--primary-subtle);box-shadow:0 0 0 1px var(--primary)}
.pil-kartu:has(input:focus-visible){outline:3px solid var(--ring);outline-offset:2px}
.pil-kartu.habis{cursor:not-allowed;background:var(--bg-kaki)}
.pil-kartu .pil-isi{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13.5px;line-height:1.5;color:var(--fg)}
.pil-kartu .pil-isi b{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px;color:var(--fg-heading)}
.pil-kartu .pil-isi small{color:var(--fg-muted);font-size:12.5px}
.pil-kartu .kuota-ket{font-weight:700}
.blok-cara{margin:0 0 14px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.blok-cara>summary{cursor:pointer;font-weight:800;color:var(--fg-heading);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.blok-cara[open]>summary{margin-bottom:12px}
.blok-cara h4{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;font-size:14.5px;font-weight:800;color:var(--fg-heading)}
.blok-cara .btn-row{margin-top:12px}
.pita-risiko{margin:0 0 14px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--warning-subtle);border-left:3px solid var(--warning);color:var(--fg)}
.pita-risiko p{margin:0 0 8px;font-size:13.5px}
.qr-wa{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 14px;padding:16px;border:1px dashed var(--border-strong);border-radius:var(--radius);text-align:center}
.qr-wa img{width:260px;max-width:100%;height:auto;background:#fff;border-radius:8px;padding:8px}
.tautan-tombol{padding:0;border:0;background:none;font:inherit;color:var(--primary);text-decoration:underline;cursor:pointer}
.teks-ok{color:var(--accent);font-weight:700}
.wizard-wa .modal-foot a.btn{text-decoration:none}
.qr-wa:has(img[hidden]):has([role=status]:empty){display:none}
/* Perjanjian Pemrosesan Data (pengaturan/perjanjian-data.ejs, partials/perjanjian-isi.ejs, verifikasi-perjanjian.ejs) */
.pj-status{margin-bottom:14px}
.pj-dokumen{max-width:880px}
.pj-kepala h1{font-size:22px;margin:0 0 4px}
.pj-isi h2{font-size:16px;margin:22px 0 8px}
.pj-isi p,.pj-isi li{line-height:1.6}
.pj-isi ol,.pj-isi ul{padding-left:22px;margin:0 0 10px}
.pj-isi li{margin:0 0 4px}
.pj-tabel{width:100%;border-collapse:collapse;margin:6px 0 10px;font-size:14px}
.pj-tabel th,.pj-tabel td{border:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top}
.pj-tabel th{background:var(--bg-subtle);font-weight:700}
.pj-ttd-judul{font-size:16px;margin:26px 0 10px}
.pj-ttd{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.pj-ttd section{border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.pj-ttd h3{font-size:13px;margin:0 0 6px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.02em}
.pj-ttd p{margin:0 0 6px}
.pj-verifikasi{display:flex;gap:16px;align-items:center;margin-top:16px;padding:12px 14px;border:1px dashed var(--border);border-radius:10px}
.pj-verifikasi p{margin:0 0 6px}
.pj-qr{flex:0 0 120px;width:120px;background:#fff;padding:4px;border-radius:6px}
.pj-qr svg{display:block;width:100%;height:auto}
.pj-sidik{word-break:break-all;font-size:12px}
.pj-bukti{margin:14px 0}
@media (max-width:560px){.pj-verifikasi{flex-direction:column;align-items:flex-start}}
@media print{.pj-status{display:none}.pj-dokumen{border:0;box-shadow:none;padding:0;max-width:none}.pj-tabel th{background:none}.pj-verifikasi,.pj-ttd section{break-inside:avoid}}
/* Pengaturan › Pengingat janji temu: contoh pesan. */
.pjt-contoh{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin:2px 0 12px}
.pjt-contoh p{margin:0}
.pjt-contoh p+p{margin-top:4px;white-space:pre-wrap}