/* Komponen bersama desain baru SapaPasien (tahap Fondasi). Tahap Halaman hanya MEMAKAI kelas di sini;
   gaya khusus halaman masuk ke public/gaya/<kelompok>.css. Token warna dari app.css (mode gelap ikut).

   Daftar kelas:
   .tab-halaman ............ baris tab di bawah judul halaman (dibuat partials/page-head dari anak menu aktif)
   .grid-atur + .kartu-atur  kartu ringkasan pengaturan + tombol "Ubah"/"Atur" yang membuka modal
   .daftar-atur ............ daftar baris (a/button) bergaris dengan chevron (pola hub Pengaturan)
   .chip-baris + .chip ..... pil saringan 32px (aria-pressed=true / .on / aria-current = aktif)
   .titik-kanal + .tk-* .... titik warna kanal (wa, ig, tt, web, th)
   .kartu-progres .......... kartu navy berbatang progres koral ("Persiapan klinik" di Beranda)
   .sapaan ................. kepala Beranda: tanggal kecil + h1 "Selamat siang, Nama" + aksi
   .kosong ................. keadaan kosong: ikon, kalimat, satu tombol
   .badge.b-biru ........... lencana biru (sama dengan alias lama .b-teal) */

/* ---------- Tab halaman ----------
   <nav class="tab-halaman" aria-label="…"><a href="/lead" aria-current="page">Daftar</a><a href="/corong">Corong</a></nav>
   Untuk tab di dalam halaman (tanpa pindah alamat) boleh <button role="tab" aria-selected="true">. */
.tab-halaman{display:flex;align-items:center;gap:6px;width:fit-content;max-width:100%;margin:18px 0 0;padding:5px;border:1px solid var(--border);border-radius:14px;background:var(--bg-subtle);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tab-halaman::-webkit-scrollbar{display:none}
/* Tab = tombol yang jelas terlihat: tab lain berbingkai putih, tab yang dibuka biru penuh (permintaan pemilik 26 Okt 2026). */
.tab-halaman a,.tab-halaman button{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:40px;padding:0 16px;margin:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);font:inherit;font-size:14px;font-weight:600;color:var(--fg);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s}
.tab-halaman a:hover,.tab-halaman button:hover{border-color:var(--primary);color:var(--primary)}
.tab-halaman a:focus-visible,.tab-halaman button:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.tab-halaman a[aria-current=page],.tab-halaman [aria-selected=true]{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:700;box-shadow:0 2px 8px rgba(37,99,235,.3)}
.tab-halaman .nav-badge{min-width:18px;height:18px;padding:0 5px;font-size:10.5px}
.tab-halaman [aria-current=page] .nav-badge,.tab-halaman [aria-selected=true] .nav-badge{background:var(--on-primary);color:var(--primary)}
@media (prefers-reduced-motion:reduce){.tab-halaman a,.tab-halaman button{transition:none}}
.page-head .tab-halaman{margin-top:18px}

/* ---------- Kartu pengaturan ----------
   <div class="grid-atur">
     <section class="kartu-atur" id="KODE">
       <div class="kartu-atur-kepala"><span class="kartu-atur-ikon">WA</span>
         <div class="kartu-atur-judul"><h3>WhatsApp</h3><span class="status ok">Tersambung</span></div></div>
       <p class="keterangan">Nomor klinik tersambung lewat WhatsApp Business resmi.</p>
       <dl class="nilai"><dt>Nomor</dt><dd>0811…</dd></dl>            (opsional)
       <div class="aksi"><button type="button" class="btn btn-secondary btn-sm" data-buka-modal="m-wa">Ubah</button></div>
     </section>
   </div> */
.grid-atur{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.kartu-atur{display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--bayang-kartu)}
.kartu-atur-kepala{display:flex;align-items:center;gap:12px;min-width:0}
.kartu-atur-ikon{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary-subtle);color:var(--primary);font-size:12px;font-weight:800;letter-spacing:.02em;overflow:hidden}
.kartu-atur-ikon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kartu-atur-ikon img{width:100%;height:100%;object-fit:contain}
.kartu-atur-ikon.tk-wa,.kartu-atur-ikon.tk-ig,.kartu-atur-ikon.tk-tt,.kartu-atur-ikon.tk-th,.kartu-atur-ikon.tk-web{color:#fff}
.kartu-atur-judul{display:flex;flex-direction:column;min-width:0;gap:1px}
.kartu-atur-judul h3,.kartu-atur-judul b{margin:0;font-size:15px;font-weight:800;line-height:1.3;color:var(--fg-heading);overflow-wrap:anywhere}
.kartu-atur .status{font-size:12px;font-weight:700;color:var(--fg-muted)}
.kartu-atur .status.ok{color:var(--accent)}
.kartu-atur .status.perlu{color:var(--warning)}
.kartu-atur .status.galat{color:var(--danger)}
.kartu-atur .keterangan{flex:1;margin:0;font-size:13px;line-height:1.5;color:var(--fg-muted)}
.kartu-atur dl.nilai{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;padding:10px 12px;border-radius:10px;background:var(--bg);font-size:13px}
.kartu-atur dl.nilai dt{color:var(--fg-muted)}
.kartu-atur dl.nilai dd{margin:0;font-weight:700;color:var(--fg-heading);overflow-wrap:anywhere}
.kartu-atur .aksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.kartu-atur .aksi>.btn,.kartu-atur .aksi>form{flex:1 1 auto}
.kartu-atur .aksi>form .btn{width:100%}

/* ---------- Daftar pengaturan (hub) ----------
   <div class="daftar-atur">
     <button type="button" data-buka-modal="m-profil"><span class="isi"><b class="judul">Profil klinik</b><span class="ket">Nama, alamat, logo</span></span></button>
     <a href="/pengaturan/pengguna"><span class="isi"><b class="judul">Pengguna</b><span class="ket">…</span></span><span class="badge b-grey">3</span></a>
   </div>
   Bisa juga <ul class="daftar-atur"><li><a …>…</a></li></ul>. Chevron kanan dibuat CSS. */
.daftar-atur{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.daftar-atur>li{margin:0;border-bottom:1px solid var(--garis-lembut)}
.daftar-atur>li:last-child{border-bottom:0}
.daftar-atur>a,.daftar-atur>button,.daftar-atur>li>a,.daftar-atur>li>button{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 16px;border:0;border-bottom:1px solid var(--garis-lembut);background:var(--surface);font:inherit;text-align:left;color:inherit;text-decoration:none;cursor:pointer;transition:background-color .15s}
.daftar-atur>li>a,.daftar-atur>li>button,.daftar-atur>a:last-child,.daftar-atur>button:last-child{border-bottom:0}
.daftar-atur>a:hover,.daftar-atur>button:hover,.daftar-atur>li>a:hover,.daftar-atur>li>button:hover{background:var(--bg-kaki);color:inherit}
.daftar-atur>a::after,.daftar-atur>button::after,.daftar-atur>li>a::after,.daftar-atur>li>button::after{content:"";flex:0 0 18px;width:18px;height:18px;background:var(--fg-muted);opacity:.7;-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.daftar-atur .isi{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.daftar-atur .judul{font-size:14px;font-weight:700;color:var(--fg-heading)}
.daftar-atur .ket{font-size:13px;color:var(--fg-muted)}
.daftar-atur .ikon{flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary-subtle);color:var(--primary)}
.daftar-atur .ikon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Chip saringan ----------
   <div class="chip-baris"><a class="chip on" href="?k=semua">Semua kanal</a><button type="button" class="chip" aria-pressed="false"><span class="titik-kanal tk-wa"></span>WhatsApp</button></div> */
.chip-baris{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font:inherit;font-size:12.5px;font-weight:600;line-height:1;color:var(--fg);text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.chip:hover{border-color:var(--border-strong);color:var(--fg-heading)}
.chip[aria-pressed=true],.chip.on,.chip[aria-current]{border-color:var(--primary);background:var(--primary-subtle);color:var(--primary-hover);font-weight:700}
.chip .jumlah{font-weight:800;font-variant-numeric:tabular-nums}
.chip input{position:absolute;opacity:0;width:0;height:0}
label.chip{margin:0}
label.chip:has(input:checked){border-color:var(--primary);background:var(--primary-subtle);color:var(--primary-hover);font-weight:700}
label.chip:has(input:focus-visible){outline:3px solid var(--ring);outline-offset:2px}

/* ---------- Titik kanal ---------- */
.titik-kanal{display:inline-block;flex:0 0 8px;width:8px;height:8px;border-radius:999px;background:var(--fg-muted);vertical-align:middle}
.tk-wa{background:#25D366}
.tk-ig{background:#E1306C}
.tk-tt{background:#111}
.tk-web{background:#2563EB}
.tk-th{background:#111}
/* Ikon kartu kanal WhatsApp: hijau lebih gelap supaya inisial putih terbaca (≥4,5:1); titik kanal tetap #25D366 */
.kartu-atur-ikon.tk-wa{background:#15803D}
@media (prefers-color-scheme:dark){.titik-kanal.tk-tt,.titik-kanal.tk-th{box-shadow:0 0 0 1px var(--border-strong)}}

/* ---------- Kartu progres (navy) ----------
   <section class="kartu-progres" aria-label="Persiapan klinik">
     <div class="kartu-progres-isi"><p class="kartu-progres-label">Persiapan klinik · 5 dari 8 selesai</p>
       <div class="kartu-progres-batang" role="progressbar" aria-valuemin="0" aria-valuemax="8" aria-valuenow="5"><span style="width:62%"></span></div></div>
     <p class="kartu-progres-teks"><b>Berikutnya:</b> isi Pustaka AI …</p>
     <button type="button" class="btn" data-buka-modal="m-persiapan">Lihat langkah</button>
   </section> */
.kartu-progres{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:18px 20px;border-radius:var(--radius-lg);background:var(--nav-bg);color:var(--nav-fg)}
.kartu-progres-isi{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:8px}
.kartu-progres-label{margin:0;font-size:13px;font-weight:700;color:var(--nav-redup)}
.kartu-progres-batang{height:8px;border-radius:999px;background:var(--nav-aktif);overflow:hidden}
.kartu-progres-batang>span,.kartu-progres-batang>i{display:block;height:100%;min-width:4px;border-radius:999px;background:var(--koral)}
.kartu-progres-teks{flex:2 1 300px;margin:0;font-size:15px;color:#fff}
.kartu-progres-teks b{color:#fff}
.kartu-progres .btn{background:#fff;color:var(--nav-bg);border-color:#fff;font-weight:800}
.kartu-progres .btn:hover{background:var(--primary-subtle);border-color:var(--primary-subtle);color:var(--nav-bg)}
.kartu-progres a:not(.btn){color:#fff}
@media (prefers-color-scheme:dark){.kartu-progres{box-shadow:inset 0 0 0 1px var(--border)}}

/* ---------- Sapaan (kepala Beranda) ----------
   <header class="sapaan"><div class="sapaan-isi"><p class="sapaan-tanggal">Jumat, 23 Oktober 2026</p>
     <h1>Selamat siang, Rina <button class="tombol-info" …>…</button></h1></div>
     <div class="aksi"><a class="btn" href="/kotak-masuk">Balas 5 percakapan</a></div></header> */
.sapaan{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin:0 0 20px}
.sapaan-isi{flex:1 1 280px;min-width:0}
.sapaan-tanggal{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--fg-muted)}
.sapaan h1{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:1.75rem;font-weight:800;letter-spacing:-.02em}
.sapaan .aksi{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:560px){.sapaan h1{font-size:1.45rem}.sapaan .aksi,.sapaan .aksi .btn{width:100%}}

/* ---------- Keadaan kosong ----------
   <div class="kosong"><span class="kosong-ikon"><svg …/></span><b>Belum ada calon pasien</b><p>Kalimat singkat.</p><a class="btn" href="…">Tambah</a></div> */
.kosong{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:36px 20px;text-align:center;color:var(--fg-muted)}
.kosong-ikon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:var(--primary-subtle);color:var(--primary)}
.kosong-ikon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kosong>b,.kosong>h3{font-size:16px;font-weight:800;color:var(--fg-heading)}
.kosong>p{margin:0;max-width:46ch;font-size:14px;line-height:1.55}
.kosong>.btn,.kosong>form,.kosong>.btn-row{margin-top:6px}

/* ---------- Lencana biru ---------- */
.badge.b-biru{background:var(--primary-subtle);color:var(--primary-hover)}

/* ---------- Aksi berbahaya pada tombol kedua (Hapus, Cabut, …): tetap merah saat disorot ---------- */
.btn.teks-bahaya,.btn.sl-teks-bahaya{color:var(--danger)}
.btn.teks-bahaya:hover,.btn.sl-teks-bahaya:hover{border-color:var(--danger);background:var(--danger-subtle);color:var(--danger)}