/* wa-inti-a.css — Pesanan, Kontak & QR chat, Kirim massal, Laporan tim dalam bahasa desain halaman chat
   baru (WhatsApp desktop macOS, contoh Putra 27 Sep 2026): kartu bulat besar berbayang lembut tanpa garis
   tepi, chip saring pil bergaris, kotak cari pil yang menyala saat fokus, tanpa ikon hiasan di tombol teks.
   Semua selektor diawali id layar/dialog miliknya supaya tidak bocor ke layar lain. Halaman ini berlatar
   polos, jadi efek kaca sengaja tidak dipakai (tak ada isi di belakangnya yang bisa tembus). */

/* ---------- kepala halaman ---------- */
:is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .halaman-kepala h1{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
:is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .halaman-kepala p{font-size:14.5px;line-height:1.5}
/* Penanda "Khusus kitasapa": teks kecil abu, bukan pil hijau berikon (hiasan yang tak ada di WhatsApp). */
:is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .khusus-tag{padding:0;background:none;border-radius:0;color:var(--tx3);font-size:12px;font-weight:600;letter-spacing:.01em;margin-bottom:4px}
:is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .khusus-tag svg.i{display:none}
/* Tombol berteks tanpa ikon (Kelola label, Unduh); tombol ikon saja (.tbl-ikon) tetap berikon. */
:is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .tbl svg.i{display:none}

/* ---------- kartu ---------- */
:is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .kartu{border-radius:18px;padding:18px 20px;
  box-shadow:0 1px 3px rgba(11,20,26,.08),0 6px 20px rgba(11,20,26,.07)}
:is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .kartu h3{font-size:16px;font-weight:700;margin:0 0 10px}
:is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .dua-kolom{gap:16px;margin-top:16px}
@media (prefers-color-scheme:dark){
  :is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .kartu{box-shadow:0 0 0 1px rgba(255,255,255,.05),0 6px 20px rgba(0,0,0,.25)}
}

/* Angka ringkas: label kecil abu, angka besar tebal, tanpa ikon hijau di pojok. */
:is(#layar-pesanan,#layar-laporan) .kpi{gap:14px}
:is(#layar-pesanan,#layar-laporan) .kpi-kotak{border-radius:16px;padding:16px 18px}
:is(#layar-pesanan,#layar-laporan) .kpi-kotak>svg.i{display:none}
:is(#layar-pesanan,#layar-laporan) .kpi-kotak span{font-size:13px;color:var(--tx3)}
:is(#layar-pesanan,#layar-laporan) .kpi-kotak b{display:block;margin-top:2px;font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:is(#layar-pesanan,#layar-laporan) .kpi-kotak small{font-size:12.5px;margin-top:4px}

/* ---------- chip saring: pil bergaris, aktif hijau muda (sama dengan daftar chat) ---------- */
:is(#layar-pesanan,#layar-kontak) .saring{gap:6px}
:is(#layar-pesanan,#layar-kontak) .saring-item{padding:3px 10px;border:1px solid var(--garis2);border-radius:18px;background:transparent;
  font-size:13px;line-height:18px;font-weight:500;color:var(--tx2);white-space:nowrap}
:is(#layar-pesanan,#layar-kontak) .saring-item:hover{background:var(--hover);filter:none}
:is(#layar-pesanan,#layar-kontak) .saring-item.aktif{background:#d9fdd3;border-color:#b8e6b2;color:#0b5a38}
:is(#layar-pesanan,#layar-kontak) .saring-item em{font-weight:600;opacity:.8}
#layar-kontak .saring-label[aria-expanded="true"]{box-shadow:none;border-color:var(--tx3)}
/* Ikon tag di tombol Label disembunyikan; panah (tanda buka-tutup) dan titik warna label terpilih tetap. */
#saringLabelKontak > svg.i:not(.sl-panah){display:none}
@media (prefers-color-scheme:dark){
  :is(#layar-pesanan,#layar-kontak) .saring-item.aktif{background:#103529;border-color:#1c5a43;color:#25d366}
}

/* ---------- kotak cari: pil redup, menyala + cincin hijau saat fokus ---------- */
#cariPesanan,#cariKontak{-webkit-appearance:none;appearance:none;height:38px;padding:0 14px 0 40px;border:1px solid transparent;border-radius:19px;
  background:color-mix(in srgb,var(--panel) 55%,var(--kepala)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667781' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50%/17px;
  color:var(--tx);font-size:14.5px;transition:background-color .15s,box-shadow .15s,border-color .15s}
/* Di dalam kartu putih, keadaan redupnya abu seperti kotak cari di atas latar putih. */
#cariKontak{background-color:var(--kepala)}
#cariPesanan:hover{background-color:color-mix(in srgb,var(--panel) 80%,var(--kepala))}
#cariPesanan:focus,#cariKontak:focus{outline:none;background-color:var(--panel);border-color:color-mix(in srgb,var(--aksen) 40%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--aksen) 14%,transparent),0 4px 14px rgba(11,20,26,.08)}
#cariPesanan::placeholder,#cariKontak::placeholder{color:var(--tx3)}
@media (prefers-color-scheme:dark){
  #cariPesanan,#cariKontak{background-color:#1b262d;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238696a0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
  #cariKontak{background-color:var(--kepala)}
  #cariPesanan:hover{background-color:#202c33}
  #cariPesanan:focus,#cariKontak:focus{background-color:var(--kepala);box-shadow:0 0 0 3px color-mix(in srgb,var(--aksen) 18%,transparent)}
}

/* ---------- tabel: tanpa garis tepi kartu, pemisah baris tipis, baris terakhir tanpa garis ---------- */
:is(#layar-pesanan,#layar-kontak,#layar-laporan) :is(.tabel-pesanan,.tabel-tim){border-collapse:separate;border-spacing:0;font-size:14px}
:is(#layar-pesanan,#layar-kontak,#layar-laporan) :is(.tabel-pesanan,.tabel-tim) th{font-size:12.5px;font-weight:600;color:var(--tx3);padding:8px 10px;border-bottom:1px solid var(--garis)}
:is(#layar-pesanan,#layar-kontak,#layar-laporan) :is(.tabel-pesanan,.tabel-tim) td{padding:12px 10px;border-bottom:1px solid var(--garis)}
:is(#layar-pesanan,#layar-kontak,#layar-laporan) :is(.tabel-pesanan,.tabel-tim) tbody tr:last-child td{border-bottom:0}
:is(#layar-pesanan,#layar-kontak,#layar-laporan) :is(.tabel-pesanan,.tabel-tim) :is(th,td):first-child{padding-left:4px}
#layar-pesanan .tabel-bungkus{margin-top:14px;padding:8px 14px}
#layar-pesanan .pesanan-alat{margin-top:4px;gap:10px}
#layar-pesanan .tabel-pesanan .tbl-kecil-2{padding:5px 14px}

/* Status pesanan dan promo: pil lembut; varian gelap supaya tidak menyilaukan. */
:is(#layar-pesanan,#infoPelanggan) .st-pesanan{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;line-height:18px}
@media (prefers-color-scheme:dark){
  :is(#layar-pesanan,#infoPelanggan) .st-pesanan[data-s="Baru"]{background:rgba(83,166,253,.14);color:#8fc3ff}
  :is(#layar-pesanan,#infoPelanggan) .st-pesanan[data-s="Diproses"]{background:rgba(245,184,61,.14);color:#f1d58c}
  :is(#layar-pesanan,#infoPelanggan) .st-pesanan[data-s="Siap"]{background:rgba(160,120,255,.16);color:#c4a7ff}
  :is(#layar-pesanan,#infoPelanggan) .st-pesanan[data-s="Selesai"]{background:#103529;color:#25d366}
  #layar-pesanan .tabel-pesanan td.lewat{color:#f3aaa3}
}

/* ---------- Kontak ---------- */
/* Nama berfoto profil seperti baris daftar chat (fitur-lanjut.js isiTabelKontak). */
#layar-kontak .kt-orang{display:flex;align-items:center;gap:12px;min-width:0}
#layar-kontak .kt-orang > div{min-width:0}
#layar-kontak .kt-orang .avatar{width:40px;height:40px}
#layar-kontak .tabel-kontak .ke-chat{font-size:15px;font-weight:600;padding:0;text-align:left}
#layar-kontak .tabel-kontak small{font-size:12.5px;margin-top:1px}
#layar-kontak .pilih-promo{padding:3px 8px;border-radius:12px;font-size:12.5px}
@media (prefers-color-scheme:dark){
  #layar-kontak .pilih-promo[data-p="Berhenti"]{background:rgba(234,0,56,.15);color:#f3aaa3}
}
#layar-kontak .saring-kontak{margin:4px 0 8px}
#layar-kontak .baris-alat{gap:10px;margin-bottom:10px}
#layar-kontak .unggah{padding:8px 16px}
/* QR chat */
#layar-kontak .qr-kartu{gap:10px}
#layar-kontak .qr-bingkai{width:232px;height:232px;padding:12px;border:0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(11,20,26,.07),0 4px 14px rgba(11,20,26,.07)}
#layar-kontak .qr-kartu textarea{border-radius:12px;padding:10px 12px}
#layar-kontak .qr-kartu textarea:focus{outline:none;border-color:var(--aksen);box-shadow:0 0 0 3px color-mix(in srgb,var(--aksen) 14%,transparent)}
#layar-kontak .qr-tautan{border-radius:14px;padding:4px 4px 4px 14px}
#layar-kontak .qr-lain{padding:10px 2px;font-size:14px}
#layar-kontak .qr-lain svg.i{width:18px;height:18px;color:var(--tx3)}

/* ---------- Kirim massal ---------- */
#layar-siaran .form-siaran{gap:6px}
#layar-siaran .form-siaran label{font-size:13px;margin-top:6px}
#layar-siaran .form-siaran :is(input:not([type=radio]):not([type=checkbox]),select){height:40px;padding:0 12px;border-radius:12px}
#layar-siaran .form-siaran :is(input:not([type=radio]):not([type=checkbox]),select):focus{outline:none;border-color:var(--aksen);box-shadow:0 0 0 3px color-mix(in srgb,var(--aksen) 14%,transparent)}
/* Pilihan waktu kirim: pil bergaris, terpilih hijau muda seperti chip saring. */
#layar-siaran .opsi{align-items:center;padding:9px 14px;border-radius:14px}
#layar-siaran .opsi:has(input:checked){background:#d9fdd3;border-color:#b8e6b2;color:#0b5a38!important}
#layar-siaran .opsi input{margin-top:0}
/* Pratinjau di atas latar doodle chat yang sama (wa-bg.jpg), gelembung bulat penuh seperti aliran pesan. */
#layar-siaran .pratinjau-latar{margin-top:8px;padding:16px;border-radius:16px;background:var(--obrolan) url(wa-bg.jpg) repeat;background-size:360px auto}
#layar-siaran .pratinjau-gel{border-radius:18px;border-top-left-radius:18px;border-bottom-left-radius:6px;box-shadow:var(--bayang-gel);font-size:14.5px;line-height:20px}
#layar-siaran .konfirmasi{border-radius:14px;padding:14px 16px}
#layar-siaran .riwayat{padding:12px 0}
#layar-siaran .rw-atas b{font-weight:600;font-size:14.5px}
#layar-siaran .rw-status{padding:2px 9px;border-radius:12px;font-size:11.5px;font-weight:600}
#layar-siaran .rw-status svg.i{display:none}
#layar-siaran .rw-bar{height:5px;margin-top:8px}
@media (prefers-color-scheme:dark){
  #layar-siaran .opsi:has(input:checked){background:#103529;border-color:#1c5a43;color:#25d366!important}
  #layar-siaran .pratinjau-latar{background:linear-gradient(rgba(11,20,26,.93),rgba(11,20,26,.93)),#0b141a url(wa-bg.jpg) repeat;background-size:auto,360px auto}
  #layar-siaran .rw-status.jadwal{background:rgba(245,184,61,.14);color:#f1d58c}
}

/* ---------- Laporan tim ---------- */
#layar-laporan .grafik .bt{fill:#b8e6b2}
#layar-laporan .grafik .bt.kini{fill:var(--aksen)}
#layar-laporan .subjudul{margin:22px 0 8px!important;font-size:15px!important;font-weight:700}
#layar-laporan .subjudul .bantu{font-weight:400}
#layar-laporan .tbl-teks{margin-top:10px}
#layar-laporan .sb-bar{height:6px;border-radius:3px}
@media (prefers-color-scheme:dark){
  #layar-laporan .grafik .bt{fill:#1c5a43}
  #layar-laporan .angka-tunggu{background:#3a1715;color:#f3aaa3}
}

/* ---------- panel info pelanggan di halaman chat (bagian yang diisi modul pesanan) ---------- */
#infoPelanggan .ip-angka{gap:10px}
#infoPelanggan .ip-angka div{border-radius:14px;padding:10px 12px;text-align:left}
#infoPelanggan .ip-angka b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
/* Kotak "Chat gratis bulan ini" (kuota.js) ikut sudut yang sama supaya tetap senada dengan kotak angka. */
#infoPelanggan .ip-kuota{border-radius:14px;padding:10px 12px}
#infoPelanggan .ip-riwayat{margin-top:14px;text-align:left}
#infoPelanggan .ip-riwayat h4{font-size:12.5px;margin:0 0 6px}
#infoPelanggan .ipr{padding:9px 0;font-size:13.5px}
#infoPelanggan .ipr b{font-weight:600}

/* ---------- dialog Catat pesanan ---------- */
#dialogPesanan{border-radius:20px}
#dialogPesanan .dialog-isi{padding:22px 24px 20px}
#dialogPesanan h2{font-size:19px;font-weight:700}
#dialogPesanan .dialog-isi input:not([type=checkbox]){height:40px;padding:0 12px;border-radius:12px}
#dialogPesanan .dialog-isi input:not([type=checkbox]):focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--aksen) 14%,transparent)}
#dialogPesanan .baris-item{gap:8px;margin-bottom:8px}
#dialogPesanan .it-hapus{width:40px;height:40px}
#dialogPesanan #tambahItem{align-self:flex-start}
#dialogPesanan .sakelar{font-weight:500;color:var(--tx)}
#dialogPesanan .total-pesanan{margin-top:10px;padding:12px 16px;border-radius:14px;font-size:14.5px}
#dialogPesanan .total-pesanan b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- layar sempit ---------- */
@media (max-width:760px){
  :is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .halaman-kepala h1{font-size:21px}
  /* Chip saring pesanan satu baris, geser ke samping seperti chip daftar chat. */
  #layar-pesanan .pesanan-alat .saring{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  #layar-pesanan .pesanan-alat .saring::-webkit-scrollbar{display:none}
  #layar-pesanan .saring-item{flex:none}
}
@media (max-width:640px){
  :is(#layar-pesanan,#layar-kontak,#layar-siaran,#layar-laporan) .kartu{border-radius:16px;padding:14px}
  :is(#layar-pesanan,#layar-laporan) .kpi{gap:10px}
  :is(#layar-pesanan,#layar-laporan) .kpi-kotak{padding:12px 14px}
  :is(#layar-pesanan,#layar-laporan) .kpi-kotak b{font-size:23px}
  #layar-pesanan .tabel-bungkus{padding:4px 10px}
  #layar-kontak .kt-orang{gap:10px}
  #layar-kontak .kt-orang .avatar{width:36px;height:36px}
  #layar-kontak .qr-bingkai{width:208px;height:208px}
  #dialogPesanan .dialog-isi{padding:18px 16px}
}

/* Label "Khusus kitasapa" di kepala SEMUA layar: teks kecil abu tanpa pil/ikon (diseragamkan koordinator). */
.halaman-kepala .khusus-tag,.halaman .khusus-tag{padding:0;background:none;border-radius:0;color:var(--tx3);font-size:12px;font-weight:600;letter-spacing:.01em;margin-bottom:4px}
.halaman-kepala .khusus-tag svg.i,.halaman .khusus-tag svg.i{display:none}