/* Gaya khusus halaman kelompok acara-ai: Acara, Rincian acara, Survei, Hasil survei, Pustaka AI, Pengaturan AI.
   Komponen bersama (kartu-atur, grid-atur, kosong, tab-halaman, modal) ada di dasar.css/app.css; semua kelas di sini
   berawalan aa- supaya tidak bertabrakan dengan gaya kelompok lain (semua berkas gaya/ dimuat di setiap halaman). */

/* ---------- Susunan halaman ---------- */
.aa-tumpuk{display:flex;flex-direction:column;gap:24px}
/* Jangkar #KODE (tujuan redirect) tidak tertutup topbar yang menempel */
.aa-tumpuk [id],.aa-tumpuk .kartu-atur{scroll-margin-top:calc(var(--topbar-h) + 16px)}

/* Bagian: judul + ringkas + aksi di atas tabel/isi (tanpa kartu di dalam kartu) */
.aa-bagian{display:flex;flex-direction:column;gap:12px;min-width:0}
.aa-bagian-kepala{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px}
.aa-bagian-kepala>div:first-child{flex:1 1 240px;min-width:0}
.aa-bagian-kepala h2{margin:0;font-size:17px;font-weight:800;color:var(--fg-heading)}
.aa-bagian-kepala p{margin:2px 0 0;font-size:13.5px;color:var(--fg-muted)}
.aa-bagian-kepala .aksi{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.aa-bagian>.card.kosong{padding:32px 20px}

/* Panel: kartu putih berisi judul + form/tabel (Absensi, Pemakaian AI) */
.card.aa-panel{display:flex;flex-direction:column;gap:14px;padding:20px}
.aa-panel .table-wrap{border-radius:12px}
.aa-panel .meter{margin:0}

.aa-catatan{margin:0;color:var(--fg-muted);font-size:13.5px;line-height:1.55}
.aa-catatan li{margin:3px 0}
.aa-catatan-atas{margin:0 0 16px}
.aa-help{margin:0}
.aa-tanpa-margin{margin:0}

/* Nama di tabel: tautan tebal tanpa garis bawah */
a.aa-nama{text-decoration:none;color:var(--fg-heading)}
a.aa-nama:hover{color:var(--primary)}
td small.aa-sebaris{display:inline}
.stat .n .aa-n-kecil{font-size:14px;font-weight:500;color:var(--fg-muted);letter-spacing:0}
/* Angka ringkasan di HP: dua kolom supaya tidak memanjang ke bawah */
@media (max-width:560px){
  .aa-bagian>.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .aa-bagian>.grid-4 .stat{padding:14px}
  .aa-bagian>.grid-4 .stat .n{font-size:clamp(18px,5.6vw,24px);overflow-wrap:anywhere}
}

/* ---------- Modal ---------- */
/* Kepala modal: judul + keterangan satu baris di bawahnya */
.modal-kepala>.aa-judul-modal{flex:1;min-width:0}
.modal-kepala>.aa-judul-modal h2{margin:0}
.modal-kepala>.aa-judul-modal p{overflow-wrap:anywhere}
/* Subjudul pengelompok isian di dalam modal */
.modal .box h3.aa-sub,h3.aa-sub{margin:22px 0 12px;padding-top:16px;border-top:1px solid var(--garis-lembut);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-muted)}
.modal .box form>h3.aa-sub:first-of-type{margin-top:0;padding-top:0;border-top:0}
.aa-fieldset{margin:0 0 16px;padding:0;border:0;min-width:0}
.aa-fieldset>legend{margin:0 0 8px;padding:0;font-size:13.5px;font-weight:600;color:var(--fg-heading)}
.aa-fieldset>legend .opt{margin-left:6px;font-weight:400;color:var(--fg-muted);font-size:12px}
.aa-pilih-jam{margin:0 0 16px}
.aa-pilih-jam>legend{font-size:13.5px;font-weight:600;color:var(--fg-heading)}
/* Kotak centang dengan teks (dan keterangan kecil) */
.check.aa-check{margin:0 0 16px}
.check.aa-check>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.check.aa-check small{font-size:13px;color:var(--fg-muted)}
/* Sakelar utama (mis. "AI membalas otomatis"): baris bergaris setinggi 44px+ */
.check.aa-saklar{align-items:center;min-height:52px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-kaki);cursor:pointer}
.check.aa-saklar input{margin-top:0}
.check.aa-saklar:has(input:checked){border-color:var(--primary);background:var(--primary-subtle)}
.check.aa-saklar:has(input:disabled){cursor:not-allowed}
.aa-kode-isian{max-width:200px}
.aa-kode-isian input{text-transform:uppercase}
.aa-isian-sempit{max-width:220px}
.aa-isian-sedang{max-width:240px}
.aa-baris-tombol{margin:0 0 16px}
.sv-pertanyaan.aa-fieldset{margin-bottom:8px}

/* ---------- Rincian acara ---------- */
/* Absensi di lokasi: nomor + nama + tombol dalam satu baris (bertumpuk di layar sempit) */
.aa-absen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px 16px;align-items:end}
.aa-absen .field{margin:0}
.aa-absen-tombol .btn{width:100%}
@media (max-width:720px){.aa-absen{grid-template-columns:1fr}}

/* Nilai panjang (alamat tautan): label di atas nilai, bukan berdampingan */
.kartu-atur dl.nilai.aa-nilai-tumpuk{grid-template-columns:minmax(0,1fr);gap:0}
.kartu-atur dl.nilai.aa-nilai-tumpuk dt{font-size:12px}
.kartu-atur dl.nilai.aa-nilai-tumpuk dd+dt{margin-top:6px}

/* Modal Tautan & QR */
.aa-tautan{display:flex;flex-direction:column;gap:14px}
.aa-tautan-item{display:flex;gap:16px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.aa-qr{flex:0 0 112px;width:112px;height:112px;padding:6px;border:1px solid var(--border);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
.aa-qr svg{display:block;width:100%;height:100%}
.aa-qr.aa-qr-kosong{border-style:dashed;background:var(--bg-kaki)}
.aa-qr.aa-qr-kosong .kartu-atur-ikon svg{width:20px;height:20px}
.aa-tautan-isi{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.aa-tautan-isi label{margin:0}
.aa-tautan-isi .copybox{width:100%}
.aa-tautan-isi .copybox input{min-width:0}
.aa-tautan-isi .help{margin:0}
@media (max-width:560px){.aa-tautan-item{flex-direction:column}.aa-qr{flex-basis:auto;width:132px;height:132px}}

/* ---------- Survei ---------- */
.aa-saring{align-items:flex-end}
.aa-saring .field.aa-saring-tombol{flex:0 0 auto;min-width:0}
.sv-hasil.aa-hasil-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}
.aa-hasil-grid .sv-hasil-item{padding:16px 18px;border-radius:var(--radius);box-shadow:var(--bayang-kartu)}
.aa-hasil-grid .sv-hasil-item h3{font-size:15px;font-weight:700;line-height:1.4}
.modal .box.besar .sv-baris{grid-template-columns:minmax(0,1fr) 190px 130px 44px}
@media (max-width:720px){.modal .box.besar .sv-baris{grid-template-columns:1fr 1fr}}

/* ---------- Pustaka AI ---------- */
/* Kelengkapan bahan: empat ubin (FAQ, Harga, Jadwal, SPO) dengan tanda centang */
.aa-lengkap{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.aa-lengkap li{display:flex;gap:12px;align-items:flex-start;min-width:0;padding:14px 16px;border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--bg-kaki);color:var(--fg-muted)}
.aa-lengkap li.ada{border-style:solid;border-color:var(--border);background:var(--surface);color:var(--fg)}
.aa-lengkap-ikon{flex:0 0 28px;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-subtle);color:var(--fg-muted)}
.aa-lengkap-ikon svg{width:16px;height:16px}
.aa-lengkap li.ada .aa-lengkap-ikon{background:var(--accent-subtle);color:var(--accent)}
.aa-lengkap-isi{display:flex;flex-direction:column;gap:2px;min-width:0}
.aa-lengkap-isi b{font-size:14px;font-weight:800;color:var(--fg-heading)}
.aa-lengkap-isi small{font-size:12.5px;line-height:1.45;color:var(--fg-muted)}
.aa-hasil-kosong{margin:0 0 4px}
#m-ps-uji ol.potongan{margin:0 0 4px}

/* ---------- Pengaturan AI ---------- */
/* Empat kartu (Kunci, Balas otomatis, Serah ke CS, Uji) tersusun 2 × 2 */
.grid-atur.aa-grid-ai{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.grid-atur.aa-grid-ai{grid-template-columns:minmax(0,1fr)}}
.aa-grid-ai .kartu-atur-judul h3{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px}
.aa-grid-ai .kartu-atur-judul .tombol-info{width:26px;height:26px;margin:-3px 0}
.aa-grid-ai .kartu-atur .status{line-height:1.4}
.aa-grid-ai .kartu-atur .keterangan a{font-weight:700}
#m-ai-uji .hasil-uji{margin:0 0 4px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-kaki)}
#m-ai-uji .hasil-uji p{margin:0}

/* Broadcast (views/broadcast): saringan lain dilipat, contoh pesan menjaga baris baru. */
.bc-saring-lain{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin:0 0 12px}
.bc-saring-lain>summary{cursor:pointer;font-weight:600;min-height:28px;display:flex;align-items:center}
.bc-saring-lain[open]>summary{margin-bottom:10px}
.bc-galat-tpl{color:var(--danger)}
.bc-kategori{border:0;padding:0;margin:0 0 14px;min-width:0}
.bc-kategori>legend{padding:0;margin-bottom:6px;font-weight:600}
.bc-kategori .check{margin-bottom:8px}
#m-bc-tpl input[type=file],[data-bc-lampiran] input[type=file]{max-width:100%;font-size:13.5px}
#m-bc-tpl input[type=file]::file-selector-button,[data-bc-lampiran] input[type=file]::file-selector-button{margin-right:10px;padding:6px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.bc-lampiran-rinci{margin:0 0 12px}
.bc-lampiran-rinci img{display:block;max-width:240px;max-height:240px;border-radius:var(--radius);border:1px solid var(--border)}
.bc-tpl-teks{display:block;margin-top:2px;color:var(--fg-muted);white-space:pre-wrap;max-width:60ch}
.bc-pratinjau-tpl{margin:6px 0 0;padding:8px 10px;border-radius:var(--radius);background:var(--bg-subtle);color:var(--fg);white-space:pre-wrap}
.bc-contoh{white-space:pre-wrap}
/* Broadcast: panduan boleh / tidak boleh, disclaimer, kartu sebelum broadcast. */
.bc-sebelum{margin:0 0 16px}
.bc-sebelum h2{font-size:16px;margin:0 0 6px}
.bc-sebelum .poin{margin:0 0 10px}
.bc-boleh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:4px 0 8px}
.bc-boleh,.bc-tidak{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.bc-boleh .aa-sub,.bc-tidak .aa-sub{display:flex;align-items:center;gap:6px;margin-top:0}
.bc-boleh .aa-sub svg,.bc-tidak .aa-sub svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bc-boleh .aa-sub{color:var(--hijau)}
.bc-tidak .aa-sub{color:var(--danger)}
.bc-disclaimer{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin:0 0 12px}
.bc-panduan-gulir{max-height:300px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius);padding:4px 12px;margin:0 0 12px}
.bc-sebelum .aksi{display:flex;flex-wrap:wrap;gap:8px}
.pita-serah .btn{margin-left:6px;vertical-align:middle}