/* Tindak Lanjut (views/tl.js) — gaya khusus halaman ini: isi lembar detail (.tl-detail), riwayat, kaki lembar, lembar "Aksi lain".
   Komponen bersama ada di app.css: .ph, .chips/.chip[data-alert], .row.has-ic, .kv, .log li.has-dot + .log-dot,
   .sheet-actions, .action-list/.action-item, .empty, .photo-btn, .banner. Kelas tl-* hanya dipakai halaman ini. */

/* ---------- Baris daftar (tlRow): permintaan tunda yang menunggu, satu baris penuh di bawah meta, paling banyak 2 baris ---------- */
.tl-row-req { flex: 1 1 100%; min-width: 0; display: flex; align-items: flex-start; gap: 6px; color: var(--amber-ink); font-weight: 650; }
.tl-row-req .ico { flex: none; margin-top: 2px; }
.tl-row-req > span { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* ---------- Isi lembar detail ---------- */
.tl-detail { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding-top: 2px; }
.tl-detail > .empty { padding: var(--space-6) 0; }

/* Status, sumber, masalah sistem, forum: satu baris pil di atas */
.tl-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Permintaan tunda yang menunggu (.banner.warn): isi, peminta & tenggat bila disetujui, lalu Setujui/Tolak atau alasannya */
.tl-req > p + p, .tl-req > p + .btns { margin-top: 4px; }
.tl-req-h { overflow-wrap: anywhere; }
.tl-req-h b { font-weight: 800; }
.tl-req-by { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.tl-req-why { color: var(--amber-ink); font-weight: 700; }
.tl-req > .tl-req-btns { margin-top: 10px; }

/* Data butir: sumur lembut, dua kolom di HP (tiga di layar lebar); "Hasil yang bisa dicek" selebar kotak karena biasanya kalimat. */
.tl-detail .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-4); border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--stroke); }
.tl-detail .kv > .kv-wide { grid-column: 1 / -1; }
.tl-detail .kv > .kv-wide dd { font-weight: 700; line-height: 1.45; }

/* ---------- Riwayat (garis waktu berikon) ---------- */
.tl-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.tl-h .count { letter-spacing: 0; text-transform: none; }
.tl-detail .log li.has-dot { min-height: 28px; }
.tl-log { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.tl-log-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; line-height: 1.35; }
.tl-log-h b { font-weight: 750; }
.tl-log-t { font-size: var(--fs-xs); font-weight: 650; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-log-by { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.tl-log-note { margin-top: 2px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.tl-log .thumb { margin-top: 8px; }

/* ---------- Kaki lembar: satu aksi utama + tombol "Aksi lain" (⋮ diberi latar agar terbaca sebagai tombol) ---------- */
.tl-foot .btn.icon { background: var(--surface-3); border-color: var(--stroke); color: var(--text); }
.tl-foot .btn.icon:hover { background: var(--surface-2); border-color: var(--stroke-strong); }

/* ---------- Lembar "Aksi lain" ---------- */
.tl-more { margin-top: 0; }
/* Aksi yang tidak berlaku untuk user ini tetap tampil dengan alasannya (aria-disabled: masih bisa difokus & dibacakan). */
.tl-more .action-item[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.tl-more .action-item[aria-disabled="true"]:hover, .tl-more .action-item[aria-disabled="true"]:active { background: none; }

/* ---------- Lembar "Kirim bukti selesai" ---------- */
/* Input file tak terlihat di dalam tombol kamera: cincin fokus pindah ke tombolnya (lembar memfokuskan input ini saat dibuka,
   agar papan ketik HP tidak langsung muncul menutupi tombol kamera). */
.tl-ev .photo-btn:has(> input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (min-width: 720px) {
  .tl-detail .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-5); }
}