/* css-frag/today.css — khusus #/today (layar hari-H) dan #/gate (security).
   Tidak menyentuh app.css: `.gate .gt .gt-j .gt-v .gt-e .gt-g .gt-b .gt-ok
   .gate-h .ck .ck-l .ck-b` sudah ada di sana. File ini hanya menambah kelas
   BARU yang belum punya rupa. Ikut token warna & jarak app.css yang sama
   (var(--*)) supaya menyatu, bukan terlihat seperti layar tempelan. */

/* ------------------------------------------------------- navigasi tanggal
   Dipisah dari `.row` biasa supaya bisa dipaksa nowrap + mengecil di HP
   tanpa mengubah `.row` global (dipakai di banyak layar lain). */
.tday-nav, .gate-nav{
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
  margin-bottom:10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tday-nav input[type="date"], .gate-nav input[type="date"]{
  border:1px solid var(--line); border-radius:8px; padding:5px 8px;
  font-size:13px; background:var(--card); color:var(--ink); min-width:0;
}
@media(max-width:700px){
  .tday-nav .btn-sm, .gate-nav .btn-sm{ padding:5px 8px; font-size:12px }
  .tday-nav input[type="date"], .gate-nav input[type="date"]{ flex:1 1 auto; max-width:150px }
}

/* ------------------------------------------------------------- blok acara
   Satu kartu besar per acara di #/today: header + 5 angka operasional +
   display + cek pra-acara + insiden, semua di satu tempat supaya staff
   tidak berpindah layar saat berdiri di lapangan. */
.tday-ev{
  border:1px solid var(--line); border-radius:12px; padding:14px;
  margin-bottom:16px; background:var(--card);
}
.tday-ev-h h3{ margin:0 0 2px; font-size:16px; font-weight:800; letter-spacing:-.2px }
.tday-ev-h h3 a{ color:inherit; text-decoration:none }
.tday-ev-h h3 a:hover{ text-decoration:underline }

/* kisi angka operasional — pakai .st yang sudah ada, cuma dikisikan di sini */
.tday-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:8px; margin:11px 0;
}
@media(max-width:700px){
  .tday-stats{ grid-template-columns:repeat(2,1fr); gap:6px }
  .tday-stats .st{ padding:8px 10px }
  .tday-stats .st-v{ font-size:19px }
}

/* status layar display, disederhanakan jadi LIVE/TERJADWAL/MENUNGGU saja */
.tday-disp{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px }

/* -------------------------------------------------------------- insiden -- */
.tday-inc{
  border:1px solid var(--line); border-radius:9px; padding:9px 11px;
  margin-bottom:8px; background:var(--card2);
}
.tday-inc:last-child{ margin-bottom:0 }
.tday-inc-h{ display:flex; align-items:center; gap:7px; font-size:13.5px }
.tday-inc-b{ font-size:13px; margin-top:4px; color:var(--ink2) }

/* ------------------------------------------------------- kartu gerbang --
   Isi .gt-g (dipakai gate.js): tiap sel = <div><span>Label</span>Nilai</div>,
   sesuai bentuk yang sudah ditulis app.css (.gt-g span = label kecil). */
.gt-g > div{ min-width:0; overflow-wrap:anywhere }

/* barang disetujui masuk / boleh keluar / wajib tinggal — satu bentuk baris
   label-di-atas-nilai yang sama supaya konsisten dengan .gt-g */
.gt-items, .gt-exit{
  margin-top:9px; padding-top:9px; border-top:1px dashed var(--line2);
  font-size:13px;
}
.gt-items span, .gt-exit span{
  display:block; font-size:10.5px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:1px;
}
.gt-exit > div + div{ margin-top:7px }

/* sasaran sentuh besar untuk satpam yang berdiri — .gt-b sudah lebar penuh
   di app.css, di sini cuma dipertegas ukuran hurufnya di HP kecil */
@media(max-width:400px){
  .gt-b{ font-size:14px; padding:12px }
}