/* Rutinitas (views/rutinitas.js) — gaya khusus halaman ini. Komponen bersama ada di app.css (.hist-wrap, .hist, .sq, .legend, .br-sel).
   Semua aturan di sini memakai kelas milik halaman ini (.rut-*, .hist-*), karena berkas ini dimuat untuk semua halaman. */

/* "Cara kerja": daftar aturan tepat waktu / terlambat / terlewat */
.rut-how ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }

/* Kepala kolom hari: singkatan kecil di atas, tanggal tebal di bawah; hari ini memakai warna modul */
.rut-hist .h b { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: 800; color: var(--muted); letter-spacing: 0; }
.rut-hist .h.is-today, .rut-hist .h.is-today b { color: var(--accent-ink); }

/* Sel tanpa tugas: lebih samar dari "belum waktunya" */
.rut-hist .sq.is-none { background: transparent; border-style: dashed; opacity: .75; }
.rut-hist .sq[role="button"]:active { transform: scale(.94); }

/* Legenda: kotak sedikit lebih besar dengan tepi warna tinta, agar warna lembutnya tetap terbaca di kedua tema */
.rut-legend i.sq { width: 14px; height: 14px; box-shadow: inset 0 0 0 1.5px currentColor; }
.rut-legend b { color: var(--text); font-weight: 800; }

/* Hari tanpa Manager (mode PJ): cincin biru di dalam sel, di atas warna statusnya. Bukti belum dikirim: sel biru lembut
   berikon orang. Kepala kolom hari itu diberi titik biru di bawah tanggal (posisi absolut, jadi baris kepala tetap rata). */
.rut-hist .sq.is-pj { box-shadow: inset 0 0 0 2px var(--blue); }
.rut-hist .sq.is-pj:not(.ok):not(.late):not(.miss) { background: var(--blue-soft); border-color: transparent; color: var(--blue-ink); }
.rut-legend i.sq.is-pj { color: var(--blue); box-shadow: inset 0 0 0 2px currentColor; }
.rut-hist .h.is-pj { position: relative; }
.rut-hist .h.is-pj::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--blue); }

/* HP: nama rutinitas jadi baris sendiri di atas tujuh sel, jadi tidak perlu geser ke samping */
@media (max-width: 559.98px) {
  .rut-br { flex: 1 1 100%; }
  .rut-br .br-sel { display: flex; width: 100%; }
  .rut-br .br-sel select { flex: 1 1 auto; min-width: 0; width: 100%; }

  .rut-hist { grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; row-gap: 6px; }
  .rut-hist > .hist-corner { display: none; }
  .rut-hist > .hist-name { grid-column: 1 / -1; margin-top: 8px; }
  .rut-hist .sq { height: 34px; }
}

/* Layar lebar: sel tidak melebar jadi pita panjang; nama mengisi sisa lebar */
@media (min-width: 720px) {
  .rut-hist { grid-template-columns: minmax(160px, 1fr) repeat(7, minmax(40px, 64px)); gap: 8px; }
  .rut-hist .sq { height: 36px; }
}