/* tiket.css — layar Tiket & antrean CS (public/kotak/tiket.js). Warna dan tombol dasar dari dasbor.css. */
/* Menu yang bisa dimatikan baru tampil setelah pengaturan menu klien tiba, supaya tidak berkedip. */
body:not([data-menu-siap]) .rel-item[data-layar="tiket"]{visibility:hidden}

/* Tab Antrean / Laporan = chip pil tipis, seperti chip daftar chat. */
.tkt-tab{display:flex;gap:6px;margin:14px 0 0}
.tkt-tab[hidden]{display:none}
.tkt-tab-item{font:inherit;font-size:13px;line-height:18px;font-weight:500;padding:3px 12px;border:1px solid var(--garis2);border-radius:16px;background:transparent;color:var(--tx2);cursor:pointer}
.tkt-tab-item:hover{background:var(--hover)}
.tkt-tab-item.aktif{background:#d9fdd3;border-color:#b8e6b2;color:#0b5a38}
#tktAntrean>.kpi,#tktLaporan>.kpi{margin-top:14px}
.tkt-kpi-merah b{color:var(--merah)}
.tkt-kpi-merah>svg.i{color:var(--merah)!important}

.tkt-alat{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 10px}
.tkt-alat select,.tkt-alat input[type=search]{padding:7px 14px;border:1px solid var(--garis2);border-radius:20px;background:var(--panel);color:var(--tx);font:inherit;font-size:13.5px;min-width:0}
.tkt-alat input[type=search]{flex:1;min-width:160px}
.tkt-cek{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--tx2);cursor:pointer;margin:0!important}
.tkt-cek input{width:16px;height:16px;accent-color:var(--aksen)}

/* Antrean */
.tkt-daftar{padding:0;overflow:hidden}
.tkt-kosong{margin:0;padding:18px 16px;font-size:13.5px;color:var(--tx3)}
.tkt-baris{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) auto;gap:12px;align-items:center;padding:12px 18px;border-top:1px solid var(--garis)}
.tkt-baris:first-child{border-top:0}
.tkt-baris.lewat{background:color-mix(in srgb,var(--merah) 6%,transparent)}
.tkt-baris.selesai{opacity:.7}
.tkt-buka{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:var(--tx);min-width:0;font:inherit}
.tkt-no{flex:none;font-size:12.5px;font-weight:700;color:var(--tx2);min-width:36px}
.tkt-utama{display:flex;flex-direction:column;min-width:0}
.tkt-utama b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkt-utama small{font-size:12.5px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkt-meta{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--tx2);min-width:0}
.tkt-meta svg.i{width:13px;height:13px;margin-right:3px;vertical-align:-2px}
.tkt-pil{font-size:11px;font-weight:650;padding:2px 8px;border-radius:10px;background:var(--kepala);color:var(--tx2);white-space:nowrap}
.tkt-pil.p-tinggi{background:color-mix(in srgb,var(--merah) 14%,transparent);color:var(--merah)}
.tkt-pil.p-rendah{color:var(--tx3)}
.tkt-pil.s-baru{background:color-mix(in srgb,#5b7fd6 16%,transparent);color:#3b5bb0}
.tkt-pil.s-ditangani{background:color-mix(in srgb,var(--aksen) 15%,transparent);color:var(--aksen-tua)}
.tkt-pil.s-menunggu{background:#fff4d6;color:#8a5a00}
.tkt-pil.s-selesai{background:var(--kepala);color:var(--tx3)}
@media (prefers-color-scheme:dark){.tkt-pil.s-baru{color:#9fb6f0}.tkt-pil.s-ditangani{color:#00a884}.tkt-pil.s-menunggu{background:#2b240f;color:#f1d58c}}
.tkt-agen{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.tkt-agen.kosong{color:var(--merah)}
.tkt-sla{white-space:nowrap}
.tkt-sla.lewat{color:var(--merah);font-weight:600}
.tkt-nilai{white-space:nowrap;color:#a4541f}
.tkt-aksi{display:flex;gap:6px;justify-content:flex-end}
.tkt-aksi svg.i{width:15px;height:15px;margin-right:4px;vertical-align:-3px}
.tkt-catat{margin-top:10px}

/* Dialog tiket */
.tkt-dua{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}
.tkt-dua>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.tkt-dua input,.tkt-dua select{width:100%;min-width:0}
.tkt-agen-baris{display:flex;gap:6px}
.tkt-agen-baris select{flex:1;min-width:0}
.tkt-form footer{align-items:center;flex-wrap:wrap}
.tkt-isi-kaki{flex:1}
.tkt-pegang{margin:0;padding:10px 14px;border-radius:14px;background:#fff4d6;color:#8a5a00;font-size:13px}
@media (prefers-color-scheme:dark){.tkt-pegang{background:#2b240f;color:#f1d58c}}
.tkt-waktu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;margin:0 0 4px;padding:12px 14px;border-radius:14px;background:var(--kepala)}
.tkt-waktu-grid div{min-width:0}
.tkt-waktu-grid dt{font-size:11.5px;color:var(--tx3)}
.tkt-waktu-grid dd{margin:0;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.tkt-waktu-grid .lewat dd{color:var(--merah)}
.tkt-sla-kini{grid-column:1/-1}
.tkt-riwayat summary{cursor:pointer;font-size:13px;color:var(--tx2)}
.tkt-riwayat ol{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;max-height:200px;overflow:auto}
.tkt-riwayat li small{display:block;color:var(--tx3);font-size:12px}
.tkt-riwayat li.lewat b{color:var(--merah)}

/* Pengaturan */
.tkt-atur h3{margin:14px 0 0;font-size:14.5px}
.tkt-atur h3:first-of-type{margin-top:0}
.tkt-cek-daftar{display:flex;flex-wrap:wrap;gap:6px 14px;padding:6px 0}
.tkt-sla-tabel{display:flex;flex-direction:column;gap:6px}
.tkt-sla-kepala,.tkt-sla-baris{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
.tkt-sla-kepala span{font-size:12px;color:var(--tx3)}
.tkt-sla-baris b{font-size:13.5px;font-weight:600}
.tkt-menit{display:flex;gap:4px;min-width:0}
.tkt-menit input{width:0;flex:1;min-width:48px}
.tkt-menit select{flex:none}
.tkt-topik-daftar{display:flex;flex-direction:column}
.tkt-topik-baris{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--garis)}
.tkt-topik-baris:first-child{border-top:0}
.tkt-topik-baris summary{cursor:pointer;font-size:13px;color:var(--tx2)}
.tkt-topik-hapus{justify-content:flex-end;padding-bottom:6px}
.tkt-topik-hapus .tbl-teks{color:var(--merah);align-self:flex-start}
.tkt-atur .tbl-teks svg.i,.tkt-topik-hapus svg.i{width:15px;height:15px;margin-right:4px;vertical-align:-3px}

/* Laporan */
.tkt-lap-alat{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13.5px;color:var(--tx2)}
.tkt-lap-alat select{padding:6px 14px;border:1px solid var(--garis2);border-radius:20px;background:var(--panel);color:var(--tx);font:inherit}
.tkt-lap-kisi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;align-items:start}
.tkt-lap-kisi h3{margin:0 0 8px}
.tkt-batang{display:grid;grid-template-columns:48px minmax(0,1fr) 40px;gap:8px;align-items:center;font-size:13px;margin:6px 0}
.tkt-batang.lebar{grid-template-columns:minmax(0,120px) minmax(0,1fr) auto}
.tkt-batang span{color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkt-batang span svg.i{width:12px;height:12px;vertical-align:-1px;color:#e0a100}
.tkt-batang i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--aksen) var(--p),var(--kepala) var(--p))}
.tkt-batang i.merah{background:linear-gradient(90deg,var(--merah) var(--p),var(--kepala) var(--p))}
.tkt-batang b{text-align:right;font-weight:600;white-space:nowrap}

/* Kepala chat kaca: tanda tiket = pil kaca kecil; status dibaca dari warna teks, lewat batas = teks merah. */
.obrolan-kepala .tkt-chip{display:inline-flex;align-items:center;gap:2px;height:30px;padding:3px 12px;border-radius:15px;cursor:pointer;font:inherit;font-size:12.5px;white-space:nowrap;color:var(--tx2);
  background:rgba(255,253,249,.62);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(11,20,26,.08)}
.obrolan-kepala .tkt-chip[hidden]{display:none}
.obrolan-kepala .tkt-chip b{font-weight:600;color:var(--tx)}
.obrolan-kepala .tkt-chip.s-baru{color:#3b5bb0}
.obrolan-kepala .tkt-chip.s-ditangani{color:var(--aksen-tua)}
.obrolan-kepala .tkt-chip.s-menunggu{color:#8a5a00}
.obrolan-kepala .tkt-chip.lewat,.obrolan-kepala .tkt-chip.lewat b{color:var(--merah)}
@media (prefers-color-scheme:dark){
  .obrolan-kepala .tkt-chip{background:rgba(32,44,51,.72);border-color:rgba(255,255,255,.08);box-shadow:none}
  .obrolan-kepala .tkt-chip.s-baru{color:#9fb6f0}.obrolan-kepala .tkt-chip.s-ditangani{color:#00a884}.obrolan-kepala .tkt-chip.s-menunggu{color:#f1d58c}
  .obrolan-kepala .tkt-chip.lewat,.obrolan-kepala .tkt-chip.lewat b{color:#ff6b81}
}
/* Panel info chat: tombol teks polos tanpa ikon, senada "Catat pesanan". */
.tkt-tbl-chat{margin-top:6px}
.spanduk-tiket .tbl-teks{color:inherit;text-decoration:underline}

/* Satu bahasa dengan halaman chat baru (Putra 27 Sep 2026): kartu bulat berbayang lembut, dialog bersudut bulat. */
#layar-tiket .kartu{border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(11,20,26,.05),0 6px 20px rgba(11,20,26,.06)}
#layar-tiket .kartu.tkt-daftar{padding:0}
#dialogTiket,#dialogTiketBaru,#dialogTiketAtur{border-radius:18px}
@media (prefers-color-scheme:dark){
  #layar-tiket .kartu{box-shadow:0 1px 2px rgba(0,0,0,.35)}
  .tkt-tab-item.aktif{background:#103529;border-color:#1c5a43;color:#25d366}
}
@media (max-width:1100px){.tkt-lap-kisi{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.tkt-baris{grid-template-columns:minmax(0,1fr) auto}.tkt-meta{grid-column:1/-1;grid-row:2}}
@media (max-width:640px){
  .tkt-dua{grid-template-columns:minmax(0,1fr)}
  .tkt-waktu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tkt-alat select{flex:1 1 45%}
  .tkt-sla-kepala,.tkt-sla-baris{grid-template-columns:60px minmax(0,1fr) minmax(0,1fr)}
  .tkt-menit{flex-direction:column}
  .tkt-menit input{width:100%}
  .obrolan-kepala .tkt-chip span{display:none}
}
@media (max-width:640px){#layar-tiket .kartu{padding:16px;border-radius:16px}}