/* viz.css — grafik SVG berbasis data (absensi, cuti, gaji, org).
   Aturan warna mengikuti disiplin app screen: satu hue data (aksen) di atas
   chrome netral, garis bantu tipis, angka tabular. Tidak ada gradien, tidak
   ada bayangan, tidak ada ikon di dalam kotak berwarna. */

.viz {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-variant-numeric: tabular-nums;
}

/* --- Teks di dalam grafik ------------------------------------------------ */
.viz text { font-family: var(--font-ui); }
.viz-axis {
  font-size: 11px;
  fill: var(--faint);
  letter-spacing: 0.01em;
}
.viz-row {
  font-size: 12px;
  fill: var(--muted);
}
.viz-val {
  font-size: 11px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}
.viz-label {
  font-size: 12px;
  fill: var(--ink);
}
.viz-label-sm {
  font-size: 11px;
  fill: var(--muted);
}

/* --- Penanda & garis bantu ---------------------------------------------- */
.viz-grid { stroke: var(--line); stroke-width: 1; }
.viz-zero { stroke: var(--line-strong); stroke-width: 1; }
.viz-window { fill: var(--surface2); }

/* --- Bentuk data -------------------------------------------------------- */
.viz-bar-late { fill: var(--accent); }
.viz-bar-ontime { fill: var(--line-strong); }
.viz-span { fill: var(--muted); opacity: 0.55; }
.viz-dot { fill: var(--line-strong); }
.viz-dot-late { fill: var(--accent); }
.viz-track { fill: var(--surface2); }
.viz-track-fill { fill: var(--accent); }

/* --- Kepala kartu grafik ------------------------------------------------ */
.viz-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.viz-big {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.viz-unit { font-size: 13px; color: var(--muted); }
.viz-note { font-size: 12px; color: var(--faint); margin-left: auto; }
.viz-caption {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
}
.viz-empty {
  margin: 0;
  padding: 18px 0;
  font-size: 13px;
  color: var(--faint);
}

/* --- Legenda: swatch adalah penanda aslinya, bukan kotak warna ----------- */
.viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.viz-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.viz-legend .sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.viz-legend .sw-late { background: var(--accent); }
.viz-legend .sw-ontime { background: var(--line-strong); }

/* --- Kartu grafik di dalam portal -------------------------------------- */
.viz-card { display: flex; flex-direction: column; }
.viz-card h3 { margin-bottom: 4px; }
.viz-card .viz-sub {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--faint);
}

/* --- Track saldo cuti --------------------------------------------------- */
.viz-leave { margin-top: 4px; }

/* --- Bagan organisasi --------------------------------------------------- */
.viz-org-node { fill: var(--surface2); stroke: var(--line); stroke-width: 1; }
.viz-org-node.is-me { stroke: var(--accent); }
.viz-org-link { stroke: var(--line-strong); stroke-width: 1; fill: none; }
/* Sisa tetap yang paling tenang, tetapi TIDAK transparan: saat seluruh hak
   masih utuh (13 dari 13 hari) segmen ini menutupi seluruh batang, dan bidang
   kosong membuat grafiknya terbaca sebagai "tidak ada data" padahal justru
   penuh. Isian tipis + garis putus-putus menjaga dua hal sekaligus: masih
   terlihat sebagai batang, dan tetap lebih redup dari "menunggu". */
.viz-track-rest {
  fill: var(--surface3); stroke: var(--line-strong); stroke-width: 1;
  stroke-dasharray: 3 3;
}
.viz-bar-net { fill: var(--accent); }
.viz-bar-ded { fill: var(--line-strong); }
.viz-legend .sw-net { background: var(--accent); }
.viz-legend .sw-ded { background: var(--line-strong); }

/* Menunggu = belum final, jadi netral: bukan biru (belum tentu dipakai),
   bukan garis putus-putus (itu milik sisa). Hierarki: terpakai > menunggu > sisa. */
.viz-track-pending { fill: var(--line-strong); }

/* --- Distribusi ---------------------------------------------------------- */
.viz-seg-pending { fill: var(--line-strong); }
.viz-seg-approved { fill: var(--accent); }
.viz-seg-rejected { fill: var(--danger); opacity: 0.75; }
.viz-seg-muted { fill: var(--surface3); }
.viz-bar-data { fill: var(--accent); }
.viz-legend-n { color: var(--ink); font-weight: 600; margin-left: 2px; }

/* --- Timeline fase proyek ------------------------------------------------ */
/* Selesai = garis penuh netral (sudah tidak perlu perhatian).
   Berjalan = satu-satunya isian aksen, karena inilah yang butuh perhatian.
   Belum mulai = garis tepi saja, karena belum ada kerja di dalamnya. */
.viz-phase-done { fill: var(--line-strong); }
.viz-phase-active { fill: var(--accent); }
.viz-phase-next { fill: transparent; stroke: var(--line-strong); stroke-width: 1; }
.viz-now { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 3; }
.viz-legend .sw-done { background: var(--line-strong); }
.viz-legend .sw-active { background: var(--accent); }
.viz-legend .sw-next { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* --- Rantai tahap persetujuan ------------------------------------------- */
.viz-stage { fill: var(--surface2); stroke: var(--line); stroke-width: 1; }
.viz-stage.is-done { fill: transparent; stroke: var(--line-strong); }
.viz-stage.is-now { fill: transparent; stroke: var(--accent); }
.viz-stage-txt { font-size: 11px; fill: var(--muted); }
.viz-stage-txt-now { font-size: 11px; fill: var(--accent-text); font-weight: 600; }

/* --- Pita jam kerja ------------------------------------------------------ */
/* Pita jam kerja adalah data, bukan chrome: ia memakai tingkat kecerahan
   teks sekunder. Takik istirahat turun ke warna permukaan supaya terbaca
   sebagai lubang di dalam pita yang sama. */
.viz-hours-block { fill: var(--muted); opacity: 0.7; }
.viz-hours-break { fill: var(--surface); }

/* Nama fase berjalan: satu tingkat di atas teks isi, tetap di bawah judul
   kartu. Angka 26px milik KPI, bukan milik label. */
.viz-head-lead { margin: 8px 0 2px; }
.viz-note-lead { margin-left: 0; font-size: 12px; color: var(--faint); }
.viz-label-now { font-size: 12px; fill: var(--ink); font-weight: 600; }

/* Ramp netral berurut untuk strip proporsional. Tujuh kategori tidak mungkin
   dibedakan dengan satu hue, jadi tingkatannya dibedakan kecerahan — dan
   urutannya menurun, sehingga posisi sudah cukup menjadi penanda. */
/* Tujuh tingkat dengan langkah yang benar-benar terbaca. Opacity bertingkat
   di atas satu warna gagal di ujung gelap (0.30 di atas #222325 praktis
   hilang), jadi tiap tingkat adalah nilai hex sendiri: dari aksen, ke abu
   terang, lalu turun sampai abu garis. Tingkat terakhir masih ~1.4:1 di atas
   permukaan kartu — cukup untuk bentuk, tidak untuk teks. */
.viz-share-1 { fill: #2589E8; }
.viz-share-2 { fill: #7FA8CC; }
.viz-share-3 { fill: #A4A6AA; }
.viz-share-4 { fill: #8C8F95; }
.viz-share-5 { fill: #74777C; }
.viz-share-6 { fill: #5E6166; }
.viz-share-7 { fill: #4A4D52; }

/* Swatch legenda memakai nilai yang sama, jadi warna legenda selalu cocok
   dengan strip tanpa daftar kedua yang bisa melenceng. */
.viz-legend .sw.viz-share-1 { background: #2589E8; }
.viz-legend .sw.viz-share-2 { background: #7FA8CC; }
.viz-legend .sw.viz-share-3 { background: #A4A6AA; }
.viz-legend .sw.viz-share-4 { background: #8C8F95; }
.viz-legend .sw.viz-share-5 { background: #74777C; }
.viz-legend .sw.viz-share-6 { background: #5E6166; }
.viz-legend .sw.viz-share-7 { background: #4A4D52; }

/* Strip sebaran di halaman perpustakaan: pengantar tiga baris, bukan kartu
   setinggi 240px yang mendorong daftar dokumen keluar layar. */
.ref-dist { margin: 0 0 14px; }
.ref-dist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ref-dist-head b { font-size: 13px; font-weight: 600; color: var(--ink); }
.ref-dist-head span { font-size: 12px; color: var(--faint); }
.ref-dist-legend { margin-top: 8px; }

/* --- Siklus gaji --------------------------------------------------------- */
/* Penanda tanggal bayar memakai aksen: satu-satunya titik yang perlu dicari
   mata pada pita. Porsi bulan yang sudah berjalan memakai pita netral supaya
   penanda tetap menjadi hal paling terang di baris itu. */
.viz-pay-mark { fill: var(--accent); }
.viz-note-soon { color: var(--accent-text); }

/* --- Direktori karyawan -------------------------------------------------- */
/* Tint identitas: pucat, dan hanya untuk lingkaran huruf awal. Enam hue
   dipisah minimal 60 derajat, semuanya diturunkan ke kecerahan yang sama
   supaya tidak ada orang yang tampak lebih penting dari yang lain. */
.who-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 650;
  flex: none;
}
.who-t1 { background: rgba(94, 169, 244, 0.16); color: #8FC4F8; }
.who-t2 { background: rgba(122, 196, 160, 0.16); color: #93CDB0; }
.who-t3 { background: rgba(206, 168, 108, 0.16); color: #D8BB8A; }
.who-t4 { background: rgba(200, 130, 160, 0.16); color: #DCA2BC; }
.who-t5 { background: rgba(150, 150, 210, 0.16); color: #B4B4DE; }
.who-t6 { background: rgba(160, 180, 200, 0.16); color: #B7C4D2; }

/* Dua kolom di layar lebar: 12 orang dalam satu kolom membuat halaman
   menggantung jauh di bawah fold, dan separuh lebar panel menganggur. Kolom
   mengikuti lebar wadah (.page-view adalah container), bukan lebar layar,
   supaya panel kanan yang terbuka tidak memaksa dua kolom sempit. */
.who-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px 28px;
  align-items: start;
}
@container (min-width: 760px) {
  .who-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.who-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 620;
  color: var(--ink);
}
.who-group-n {
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.who-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.who-list > .who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.who-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.who-name { font-size: 13px; font-weight: 560; color: var(--ink); }
.who-sub {
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who-role {
  font-size: 11px;
  color: var(--muted);
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface2);
}
@media (max-width: 640px) {
  .who-role { display: none; }
}

/* --- Atasan berantai (halaman Tim Saya) --------------------------------- */
/* Rantai ke atas adalah urutan, bukan himpunan: nomor menunjukkan jarak dari
   pembaca (1 = atasan langsung). Garis tegak menyambung langkah-langkahnya
   supaya terbaca sebagai satu jalur, bukan tiga kartu terpisah. */
.chain-list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: decimal;
  border-left: 1px solid var(--line);
  margin-left: 4px;
}
.chain-step {
  padding: 7px 0 7px 4px;
  font-size: 13px;
  color: var(--ink);
}
.chain-step::marker { color: var(--faint); font-size: 11.5px; }
.chain-step span {
  display: block;
  font-size: 11.5px;
  color: var(--faint);
  font-weight: 400;
  margin-top: 1px;
}

/* --- Kalender pembayaran ------------------------------------------------- */
/* Hari libur akhir pekan diredupkan, bukan diwarnai: yang perlu ditemukan
   mata hanya satu sel, yaitu tanggal bayar. Sel hari ini memakai garis tepi
   tipis supaya tetap terbaca walau berimpit dengan tanggal bayar. */
.viz-cal-day { fill: var(--surface2); }
.viz-cal-day.is-off { fill: var(--bg); }
.viz-cal-day.is-today { stroke: var(--line-strong); stroke-width: 1; }
.viz-cal-day.is-pay { fill: var(--accent); }
.viz-cal-txt { font-size: 10.5px; fill: var(--muted); }
.viz-cal-txt-off { font-size: 10.5px; fill: var(--faint); opacity: 0.72; }
.viz-cal-txt-pay { font-size: 10.5px; fill: #FFFFFF; font-weight: 650; }

/* --- Pita hari kerja mingguan ------------------------------------------- */
/* Hari kerja memakai satu tingkat di atas permukaan; hari libur turun ke latar
   halaman. Tidak ada warna di sini: warna hanya milik tanggal bayar dan
   penanda data lain, bukan milik jadwal yang tetap. */
.viz-hours-day { fill: var(--bg); }
.viz-hours-day.is-on { fill: var(--surface3); }
.viz-hours-day-txt { font-size: 10.5px; fill: var(--faint); opacity: 0.8; }
.viz-hours-day-txt-on { font-size: 10.5px; fill: var(--ink); font-weight: 600; }
.viz-hours-wfh { fill: var(--accent); }

/* --- Tautan kebijakan terkait ------------------------------------------- */
/* Tautan kebijakan terkait duduk mendatar dan kartunya melebar penuh: tiga
   tautan pendek di dalam kolom 1/3 menyisakan dua kolom kosong di sebelahnya,
   dan halaman terlihat belum selesai. */
.rel-card { grid-column: 1 / -1; }
.rel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.rel-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  padding: 3px 0;
  cursor: pointer;
}
.rel-link:hover { color: var(--ink); }
.rel-link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
.rel-date { flex: none; font-size: 11px; color: var(--faint); }
.kv-note { margin: 0; font-size: 12px; color: var(--faint); }

/* --- Audit log ----------------------------------------------------------- */
/* Panggilan di atas p95: warna bahaya, tetapi tanpa opasitas penuh — ini
   ekor distribusi, bukan kegagalan. */
.viz-bar-slow { fill: var(--danger); opacity: 0.7; }
.audit-chip { font-variant-numeric: tabular-nums; }
.audit-sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.audit-sum .portal-card { padding: 16px 18px; }
.audit-sum h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; }
.audit-sum .viz-sub { margin: 0 0 10px; font-size: 12px; color: var(--faint); }
.audit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.audit-dec {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.audit-dec-label { font-size: 12px; color: var(--faint); }
@media (max-width: 860px) { .audit-sum { grid-template-columns: minmax(0, 1fr); } }

/* --- Digest HR ----------------------------------------------------------- */
/* Kartu cakupan KB: grafik batang sudah membawa label, jadi legenda di sini
   hanya mengulang. Yang disimpan hanyalah warna ramp agar dua gambar
   (batang + legenda kategori) memakai penanda yang sama. */
.digest-cover { margin-top: 16px; padding: 18px 20px; }
.digest-cover h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.digest-cover .viz-sub { margin: 0 0 12px; font-size: 12px; color: var(--faint); }

/* --- Tonggak perusahaan -------------------------------------------------- */
/* Titik netral, titik terakhir beraksen: yang terbaru adalah keadaan sekarang,
   sisanya sejarah. Ukuran titik berbeda 1px, bukan warna berbeda-beda. */
.viz-mile-dot { fill: var(--line-strong); }
.viz-mile-now { fill: var(--accent); }
.viz-mile-year {
  font-size: 11px;
  fill: var(--faint);
  font-variant-numeric: tabular-nums;
}
.viz-mile-year-now { font-size: 11px; fill: var(--accent-text); font-weight: 600; }
.viz-mile-label { font-size: 11.5px; fill: var(--muted); }
.mile-card { margin-bottom: 16px; }
.mile-card h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.mile-card .viz-sub { margin: 0 0 6px; font-size: 12px; color: var(--faint); }

/* --- Matriks akses (admin) ---------------------------------------------- */
/* Empat tingkat, bukan gradasi kontinu. Tingkat 0 sengaja tetap terlihat
   sebagai kotak kosong bergaris tipis: sel yang tidak punya data harus bisa
   dibedakan dari sel yang tidak digambar sama sekali. */
.viz-heat-0 { fill: transparent; stroke: var(--line); stroke-width: 1; }
/* Empat tingkat yang naik monoton terhadap permukaan kartu dan tetap lolos
   4.5:1 untuk angka putih di atasnya. Tingkat teratas memakai --accent-fill,
   bukan --accent: #2589E8 hanya 3.6:1 dengan putih, jadi angka 11px di
   atasnya tidak terbaca — dan warna data tidak boleh lebih lemah dari teks. */
.viz-heat-1 { fill: #2F4F6B; }
.viz-heat-2 { fill: #245C8C; }
.viz-heat-3 { fill: #1F6BAE; }
.viz-heat-4 { fill: var(--accent-fill); }

/* Light theme: tingkat intensitas harus tetap naik ke arah yang sama, jadi
   ramp-nya dibalik arah kecerahan — tingkat 1 paling pucat, tingkat 4 paling
   pekat. Memakai ramp gelap yang sama akan membuat "sedikit" tampil paling
   menonjol dan "banyak" paling samar, yaitu kebalikan dari datanya. Angka
   putih di atasnya tetap lolos 4.5:1 karena keempat nilai lebih gelap dari
   --accent-fill terang. */
html[data-theme="light"] .viz-heat-1 { fill: #BBD3EC; }
html[data-theme="light"] .viz-heat-2 { fill: #8FB6DC; }
html[data-theme="light"] .viz-heat-3 { fill: #4179AE; }
html[data-theme="light"] .viz-heat-4 { fill: #2F6A9E; }
/* Angka di tingkat paling pucat butuh tinta gelap: putih di atas #BBD3EC
   hanya 1.6:1. */
html[data-theme="light"] .viz-heat-1 + .viz-cell-n,
html[data-theme="light"] .viz-heat-2 + .viz-cell-n { fill: #16202B; }
html[data-theme="light"] .viz-heat-legend .sw.viz-heat-1 { background: #BBD3EC; }
html[data-theme="light"] .viz-heat-legend .sw.viz-heat-4 { background: #2F6A9E; }
.viz-cell-n {
  font-size: 11px;
  fill: #FFFFFF;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.viz-cell-n.is-zero { fill: var(--faint); font-weight: 400; }
.viz-heat-legend { margin-top: 10px; }
.viz-heat-legend .sw.viz-heat-0 {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.viz-heat-legend .sw.viz-heat-1 { background: #2F4F6B; }
.viz-heat-legend .sw.viz-heat-4 { background: var(--accent-fill); }
.viz-heat-total { color: var(--faint); }

.viz-presence-on { fill: var(--accent); }
.viz-presence-off { fill: transparent; stroke: var(--line-strong); stroke-width: 1; }
.viz-legend .sw.viz-presence-on { background: var(--accent); border-radius: 999px; }
.viz-legend .sw.viz-presence-off {
  background: transparent;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* --- Garis waktu pengumuman --------------------------------------------- */
/* Titik belum dibaca naik di atas sumbu dan memakai aksen; yang sudah dibaca
   duduk di sumbu dengan warna netral. Posisi + warna menyampaikan hal yang
   sama, jadi tetap terbaca tanpa membedakan warna. */
.viz-feed-unread { fill: var(--accent); }
.viz-feed-read { fill: var(--line-strong); }
.viz-feed-stem { stroke: var(--accent); stroke-width: 1; opacity: 0.45; }
.viz-legend .sw.viz-feed-unread { background: var(--accent); border-radius: 999px; }
.viz-legend .sw.viz-feed-read { background: var(--line-strong); border-radius: 999px; }
.viz-feed-note { color: var(--faint); }

/* Kartu ringkas pengumuman di atas daftar: satu baris pengantar + garis
   waktu, bukan kartu setinggi 200px yang mendorong daftar ke bawah fold. */
.ann-sum {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px 12px;
  margin-bottom: 14px;
}
.ann-sum h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ann-sum .viz-sub { margin: 0 0 6px; font-size: 12px; color: var(--faint); }

/* --- Admin: panel ringkas di atas tabel --------------------------------- */
.adm-sum {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.adm-sum .portal-card { padding: 16px 18px; }
.adm-sum h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; }
.adm-sum .viz-sub { margin: 0 0 10px; font-size: 12px; color: var(--faint); }
@media (max-width: 900px) { .adm-sum { grid-template-columns: minmax(0, 1fr); } }

/* Dua fakta pendek di bawah matriks: jumlah dokumen terbatas dan yang sudah
   digantikan. Angka ini tidak muncul di tabel tanpa menghitung manual. */
.adm-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.adm-fact { font-size: 12px; color: var(--faint); }
.adm-fact b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Kehadiran tim (Ringkasan team lead) -------------------------------- */
/* Warna mengikuti makna, bukan urutan kolom: hanya "terlambat" yang beraksen,
   karena itulah satu-satunya keadaan yang perlu ditindaklanjuti team lead.
   Hadir tetap netral-terang supaya aksen tidak kehilangan artinya. */
/* Kontras isian terhadap panel #222325: hadir 4.09, cuti 4.85, terlambat 4.36,
   WFH 2.51 (pola, bukan warna, yang membedakannya). */
.viz-tm-present { fill: #66869C; }
.viz-tm-late { fill: var(--accent); }
.viz-tm-wfh-bg { fill: #3F6480; }
.viz-tm-wfh-line { stroke: #7E9CB2; stroke-width: 2; opacity: 0.85; }
.viz-tm-leave { fill: #8C8F95; }
.viz-tm-empty { fill: transparent; stroke: var(--line); stroke-width: 1; }
.viz-legend .sw.viz-tm-present { background: #66869C; }
.viz-legend .sw.viz-tm-late { background: var(--accent); }
.viz-legend .sw.viz-tm-leave { background: #8C8F95; }
.viz-legend .sw.viz-tm-empty {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Petak legenda WFH: garis miring CSS, bukan SVG, karena legenda bukan SVG. */
.viz-legend .sw.viz-tm-wfh {
  background:
    repeating-linear-gradient(45deg, #7E9CB2 0 1.5px, #3F6480 1.5px 4px);
}

/* --- Sumbu nominal reimbursement ---------------------------------------- */
.viz-money-under { fill: var(--muted); }
.viz-money-over { fill: var(--accent); }
.viz-money-stem { stroke: var(--line-strong); stroke-width: 1; opacity: 0.6; }
.viz-money-thr { stroke: var(--danger); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; }
.viz-money-thr-txt { font-size: 11px; fill: var(--danger); font-weight: 600; }
.viz-money-val { font-size: 11px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.viz-legend .sw.viz-money-under { background: var(--muted); border-radius: 999px; }
.viz-legend .sw.viz-money-over { background: var(--accent); border-radius: 999px; }

/* Ringkasan tim: satu kartu lebar, bukan dua kolom sempit — strip kehadiran
   kehilangan polanya kalau kolom tanggal dipersempit di bawah 26px. */
.team-sum { margin-bottom: 0; }
.team-sum h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.team-sum .viz-sub { margin: 0 0 8px; font-size: 12px; color: var(--faint); }
.team-sum .viz-legend { margin-top: 8px; }
.team-members { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.team-member { font-size: 12px; color: var(--faint); }
.team-member b { color: var(--ink); font-weight: 600; }
.team-hint { margin: 8px 0 0; font-size: 12px; color: var(--faint); line-height: 1.5; }

/* Antrean bertahap: dua daftar berbeda tindakan — yang bisa diputuskan
   sekarang dan yang masih menunggu pejabat lain. Dibedakan dengan label,
   bukan warna, karena keduanya bukan keadaan gagal. */
.queue-split { display: flex; flex-direction: column; gap: 12px; }
.queue-group h4 {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.queue-group .kv { padding: 6px 0; align-items: baseline; }
.queue-group .kv > span:first-of-type { min-width: 0; }
/* "menunggu Team Lead" menempel di ujung kanan baris yang sama. `margin-left:
   auto` memakai ruang sisa flex, jadi tidak perlu lebar tetap dan tetap rapi
   saat judul pengajuan panjang (teks judul yang membungkus, bukan label ini). */
.queue-wait {
  flex: 0 0 auto; margin-left: auto; padding-left: 10px;
  font-size: 11px; color: var(--faint); white-space: nowrap;
}

/* Kartu finance: angka rupiah lebih panjang dari angka biasa, jadi butuh
   lebar minimum sendiri agar tidak membungkus di tengah nominal. */
.dash .stat-value.is-money { font-size: 20px; }

/* Terang: kartu putih, jadi isian harus cukup gelap untuk terlihat. Nilai di
   bawah menjaga urutan makna yang sama dengan tema gelap — terlambat paling
   menonjol (4.79), lalu hadir (3.70), lalu cuti (3.09) — tanpa memakai tiga
   hue berbeda; hanya "terlambat" yang beraksen. */
html[data-theme="light"] .viz-tm-present { fill: #5E8AA8; }
html[data-theme="light"] .viz-tm-wfh-bg { fill: #DCE8F1; }
html[data-theme="light"] .viz-tm-wfh-line { stroke: #4E7694; }
html[data-theme="light"] .viz-tm-leave { fill: #8E939B; }
html[data-theme="light"] .viz-tm-late { fill: #1E74C8; }
html[data-theme="light"] .viz-legend .sw.viz-tm-present { background: #5E8AA8; }
html[data-theme="light"] .viz-legend .sw.viz-tm-wfh {
  background: repeating-linear-gradient(45deg, #4E7694 0 1.5px, #DCE8F1 1.5px 4px);
}
html[data-theme="light"] .viz-legend .sw.viz-tm-leave { background: #8E939B; }
html[data-theme="light"] .viz-legend .sw.viz-tm-late { background: #1E74C8; }
html[data-theme="light"] .viz-money-thr-txt { fill: #B4342F; }

/* Grafik di dalam kartu yang juga memuat stat-grid: beri jarak, karena
   .viz-legend sudah menempel ke bawah dan statistik akan terlihat menyatu
   dengan legenda. */
.viz-card .stat-grid { margin-top: 12px; }

/* Kartu tim: strip di kiri, sinyal yang perlu ditindaklanjuti di kanan.
   Strip dibatasi 620px supaya lima sel tidak melebar jadi batang panjang, dan
   kolom kanan mengisi ruang yang tersisa dengan data, bukan kekosongan. */
.team-sum-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 290px);
  gap: 20px;
  align-items: start;
}
.team-sum-viz { max-width: 620px; }
.team-attn h4 {
  margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.team-attn .kv { padding: 5px 0; font-size: 12.5px; }
.team-attn .kv:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .team-sum-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}