/*
 * Dashboard Manajerial (Surface B) — halaman DESKTOP mandiri, terpisah dari PWA mobile
 * (public/index.html). Login panel-hijau split sesuai design_handoff_ams/AMS Prototipe.dc.html
 * §Dashboard Login; tanpa bottom nav (dashboard murni untuk memantau data).
 *
 * Reuse token & komponen dari tokens.css + app.css (.input, .field-label, .banner, .btn, .appbar,
 * .screen-body, .dash-*) — hanya menambah yang KHUSUS halaman ini di sini.
 */

body.dash-page-body {
  background: var(--color-surface-canvas);
  min-height: 100vh;
}

/* --- Login: panel hijau split, 42% kiri / sisanya kanan ------------------- */
.dash-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space) * 4) calc(var(--space) * 2);
}
/* `display: flex` di atas MENGALAHKAN atribut `hidden` bawaan browser (specificity sama,
   CSS penulis menang atas UA stylesheet) -- tanpa baris ini, dashboard.js men-set
   `hidden = true` setelah login sukses tapi form ini tetap tampil menutupi dashboard.
   Pola sama seperti `.banner[hidden]`/`.bottom-nav[hidden]` di app.css. */
.dash-login-wrap[hidden] { display: none; }
.dash-login-card {
  width: 100%;
  max-width: 960px;
  min-height: 520px;
  display: flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .12);
}

.dash-login-brand {
  width: 42%;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 40px 38px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.dash-login-logo { display: flex; align-items: center; gap: 12px; }
.dash-login-logo img { height: 52px; width: auto; } /* logo Majene BERWARNA — jangan di-invert putih */
.dash-login-logo b { display: block; font-size: 15px; font-weight: 700; }
.dash-login-logo span { font-size: 12px; color: #bfe6d0; }

.dash-login-brand-bottom { margin-top: auto; }
.dash-login-brand-bottom h1 {
  font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
  margin: 0; color: #fff;
}
.dash-login-brand-bottom p {
  font-size: 14px; line-height: 1.6; color: #cfeeda; margin-top: 12px; max-width: 300px;
}
.dash-login-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #bfe6d0; margin-top: 26px;
}
.dash-login-note svg { width: 15px; height: 15px; flex: 0 0 auto; }

.dash-login-form-wrap {
  flex: 1;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.dash-login-form-wrap h2 { font-size: 22px; font-weight: 700; margin: 0; color: var(--color-text); }
.dash-login-sub { font-size: 13px; color: var(--color-neutral); margin: 4px 0 0; }
#dash-login-form { margin-top: 26px; max-width: 420px; }
/* Tombol keluar-sesi (C8) -- muncul HANYA saat ada sesi aktif berperan salah tersimpan, di
   bawah pesan error, sebelum field NIP/kata sandi. */
.btn-link {
  display: block; margin: 0 0 16px; padding: 0; border: none; background: none;
  color: var(--color-primary); font-size: 12px; font-weight: 600; text-decoration: underline;
  cursor: pointer;
}
.btn-link[hidden] { display: none; }
.dash-login-submit {
  margin-top: 6px;
  box-shadow: 0 8px 20px rgba(20, 143, 83, .26);
}
.dash-login-foot { font-size: 12px; color: var(--color-neutral-tertiary); margin-top: 16px; }

@media (max-width: 760px) {
  .dash-login-card { flex-direction: column; min-height: 0; }
  .dash-login-brand { width: 100%; }
  .dash-login-brand-bottom { margin-top: 24px; }
  .dash-login-form-wrap { padding: 32px 28px; }
}

/* --- Aplikasi dashboard (setelah login) — full-height, TANPA bottom nav --- */
.dash-app[hidden] { display: none; }
.dash-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-surface);
}
.dash-app .screen-body { max-width: 1100px; margin: 0 auto; width: 100%; }

/* Grup kanan topbar (status online + identitas akun + tombol keluar) -- logo, judul, dan
   tanggal (.appbar-titles) tetap di kiri sesuai urutan DOM; margin-left:auto mendorong grup
   ini ke tepi kanan .appbar (flex row) tanpa mengubah .appbar/.dash-topbar milik app.css. */
.dash-topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.dash-icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--color-border-strong); background: #fff;
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
  color: var(--color-danger-text);
}
.dash-icon-btn svg { width: 17px; height: 17px; }

/* Bar "Kehadiran per Unit" jadi <button> agar bisa diklik untuk memfilter (C2 SISA_PEKERJAAN.md)
   -- reset properti default <button> supaya tampilan tetap identik dengan bar tren (non-klik). */
.bar-col-btn {
  border: none; background: none; padding: 0; font: inherit; cursor: pointer;
  border-radius: 8px;
}
.bar-col-btn:hover .bar-name { color: var(--color-primary); }
.bar-col-btn.is-active .bar-name { color: var(--color-primary); font-weight: 700; }
.bar-col-btn.is-active .bar-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* --- Tinjauan bukti lokasi & swafoto (ATT-BR-11 langkah 6) ------------------ */
.dash-verif-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-neutral); white-space: nowrap; cursor: pointer;
}

/* Pemisah Masuk/Pulang. Penyaringan dikerjakan CSS lewat `data-only` pada daftarnya, bukan dengan
   membangun ulang isi daftar: baris yang dibangun ulang kehilangan swafoto yang sudah diambilnya
   dan harus mengunduhnya lagi satu per satu. */
.verif-filter { display: flex; gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }
.verif-filter-btn {
  border: 1px solid var(--color-border); background: none; cursor: pointer;
  border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--color-neutral);
}
.verif-filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.verif-filter-btn.is-active {
  border-color: var(--color-primary); background: var(--color-primary); color: #fff;
}
/* Jumlah baris per kategori. Angkanya bagian dari informasi, bukan hiasan: "Pulang (0)" pada pukul
   16.00 memberi tahu peninjau ada yang salah jauh sebelum ia menekan tabnya. */
.verif-filter-btn span { opacity: .7; font-weight: 500; }
.verif-filter-btn span:empty { display: none; }

#dash-verif-list { overflow-x: auto; }
#dash-verif-list[data-only="CheckIn"] .verif-row[data-kind="CheckOut"],
#dash-verif-list[data-only="CheckOut"] .verif-row[data-kind="CheckIn"] { display: none; }
.verif-head, .verif-row {
  display: grid; grid-template-columns: 64px 1.6fr .7fr .7fr .8fr 1fr; gap: 10px; align-items: center;
  min-width: 620px;
}
.verif-head {
  font-size: 11px; font-weight: 600; color: var(--color-neutral-tertiary);
  text-transform: uppercase; letter-spacing: .03em; padding: 0 4px 8px;
  border-bottom: 1px solid var(--color-border);
}
.verif-row { font-size: 13px; padding: 8px 4px; border-bottom: 1px solid var(--color-surface-dashboard); }
.verif-row small { display: block; font-size: 11px; color: var(--color-neutral-tertiary); }
.verif-name { font-weight: 600; }

/* Kotak foto berukuran tetap: baris tidak boleh melompat-lompat saat swafoto tiba satu per satu. */
.verif-thumb {
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  background: var(--color-surface-dashboard);
  display: grid; place-items: center; font-size: 10px; text-align: center;
}
.verif-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

/* Penampil swafoto ukuran penuh */
.selfie-viewer {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(13, 19, 15, 0.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px;
}
.selfie-viewer[hidden] { display: none; }
.selfie-viewer figure { margin: 0; text-align: center; }
.selfie-viewer img { max-width: min(90vw, 520px); max-height: 70vh; border-radius: 12px; }
.selfie-viewer figcaption { color: #fff; margin-top: 10px; font-size: 14px; }

/* ---------------------------------------------------------------------------
   Kehadiran Perorangan (Reporting UC5, Change Control 2026-07-27)
   Kolomnya berbeda dari .recap-row bawaan: kolom terakhir memuat keterangan
   approval yang bisa beberapa baris, sehingga barisnya diratakan ke ATAS —
   bukan ke tengah seperti rekap harian yang isinya selalu satu baris.
   --------------------------------------------------------------------------- */
.person-toolbar {
  display: grid; grid-template-columns: 1fr; gap: 12px; align-items: end; margin-bottom: 14px;
}
@media (min-width: 760px) {
  .person-toolbar { grid-template-columns: minmax(220px, 1fr) 180px auto; }
}
.person-toolbar .field { margin: 0; }
.person-submit { white-space: nowrap; }

.person-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-neutral-tertiary); margin: 18px 0 10px;
}

.recap-head.person-row, .recap-row.person-row {
  grid-template-columns: 1.3fr .6fr .6fr 1fr 2fr;
  align-items: start;
}
.person-late { display: block; font-size: 11px; color: var(--color-warning-text); margin-top: 3px; }

/* Keterangan approval — beberapa potongan bertumpuk dalam satu sel. */
.person-appr { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.person-appr-reason { font-size: 12px; font-style: italic; color: var(--color-neutral); }
.person-appr-trail { font-size: 11px; color: var(--color-neutral-tertiary); line-height: 1.4; }

/* Layar sempit: tabel lima kolom mustahil dibaca — jadikan kartu bertumpuk. */
@media (max-width: 720px) {
  .recap-head.person-row { display: none; }
  .recap-row.person-row {
    grid-template-columns: 1fr; gap: 4px;
    padding: 12px 4px; border-bottom: 1px solid var(--color-border);
  }
}

/* ---------------------------------------------------------------------------
   Kelola Pegawai (khusus Superadmin) — onboarding manual + koreksi data pilot
   yang terpisah dari impor SIMRS.
   --------------------------------------------------------------------------- */
.employee-mode-toggle { display: flex; gap: 4px; flex: 0 0 auto; }
.employee-mode-btn {
  margin: 0; padding: 6px 12px; border-radius: 999px; text-decoration: none;
  background: var(--color-surface-dashboard); color: var(--color-neutral);
}
.employee-mode-btn.is-active { background: var(--color-success-bg); color: var(--color-primary-dark); font-weight: 700; }

.employee-form-grid { display: grid; grid-template-columns: 1fr; gap: 4px 16px; margin-bottom: 14px; }
@media (min-width: 640px) { .employee-form-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .employee-form-grid { grid-template-columns: repeat(3, 1fr); } }
.employee-form-grid .field { margin: 0 0 10px; }

.employee-current-unit {
  min-height: 38px; display: flex; align-items: center;
  padding: 0 12px; border-radius: var(--radius-input); background: var(--color-surface-dashboard);
  font-size: 13px; color: var(--color-text);
}

.employee-edit-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Akun kembar (orang yang sama) — dipisah dengan garis atas agar jelas ini bagian TERPISAH dari
   tombol simpan utama, dan tautannya hanya berubah lewat tombolnya sendiri. */
.employee-link-section {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--color-border);
}
.employee-link-section .input { max-width: 420px; }
.employee-link-hint { margin: 2px 0 10px; font-size: 12px; max-width: 560px; }
.employee-link-section .employee-edit-actions { margin-top: 10px; }
/* Tombol simpan tautan: hijau padat & ringkas. TIDAK memakai .btn-ghost — kelas itu berteks putih
   (dibuat untuk overlay gelap) sehingga tak terlihat di form putih ini. */
.emp-link-btn { width: auto; min-height: 40px; padding: 0 22px; font-size: 14px; }

/* --- Kelola Unit (khusus Superadmin) -- daftar unit di bawah form Tambah Unit --- */
.department-row {
  font-size: 13px; padding: 7px 4px; border-bottom: 1px solid var(--color-surface-dashboard);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.department-row:last-child { border-bottom: none; }
.dept-row-main { min-width: 0; }
.dept-head-btn { flex: none; white-space: nowrap; }
/* Editor inline tetapkan kepala unit */
.dept-head-editor {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 4px 12px; border-bottom: 1px solid var(--color-surface-dashboard);
}
.dept-head-editor .dept-head-search { flex: 1 1 240px; min-width: 180px; min-height: 38px; }
.dept-head-editor .btn { width: auto; min-height: 38px; padding: 0 18px; font-size: 13px; }

/* --- Sakelar Pemantauan / Administrasi (khusus Superadmin) --- */
.dash-view-switch {
  display: flex; gap: 4px; margin-bottom: 18px;
  background: var(--color-surface-dashboard); padding: 4px; border-radius: 999px; width: fit-content;
}
.dash-view-btn {
  margin: 0; padding: 7px 16px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--color-neutral); font-size: 13px; font-weight: 600;
}
.dash-view-btn.is-active { background: #fff; color: var(--color-primary-dark); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#dash-view-admin[hidden], #dash-view-monitor[hidden] { display: none; }

/* --- Sub-menu di dalam Administrasi --------------------------------------- */
.dash-admin-subnav {
  display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 16px;
  border-bottom: 1px solid var(--color-border);
}
.dash-admin-subnav-btn {
  margin: 0; padding: 10px 14px; border: none; background: transparent; cursor: pointer;
  color: var(--color-neutral); font-size: 13px; font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dash-admin-subnav-btn:hover { color: var(--color-primary-dark); }
.dash-admin-subnav-btn.is-active { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); }
#dash-account-panel[hidden], #dash-department-panel[hidden], #dash-employee-panel[hidden] { display: none; }

/* --- Sub-menu di dalam Pemantauan (Ringkasan / Persetujuan / Bukti / Unit / Rekap / Perorangan).
       Bergaya tab garis bawah, BUKAN pil seperti sakelar di atasnya, supaya hierarki dua tingkat
       itu terbaca sekilas: pil = permukaan besar, tab = isi di dalam permukaan tersebut. --- */
.dash-subnav {
  display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 16px;
  border-bottom: 1px solid var(--color-border);
}
.dash-subnav-btn {
  margin: 0; padding: 10px 14px; border: none; background: transparent; cursor: pointer;
  color: var(--color-neutral); font-size: 13px; font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
}
.dash-subnav-btn:hover { color: var(--color-primary-dark); }
.dash-subnav-btn.is-active { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); }
.dash-subnav-btn[hidden] { display: none; }
.dash-subnav-badge {
  min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--color-warning); color: #fff; font-size: 11px; font-weight: 700; text-align: center;
}
.dash-subnav-badge[hidden] { display: none; }
.dash-subview[hidden] { display: none; }

/* Batang "Kehadiran per Unit" kini selebar layar penuh, tapi jumlah unit bisa puluhan: beri lebar
   minimum per batang lalu geser mendatar -- lebih baik digulung daripada nama unit saling
   bertindihan sampai keluar kartu. */
.bars-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.bars-scroll .bar-col { flex: 0 0 64px; }

/* Penanda unit yang sedang memfilter rekap -- dibutuhkan karena tombol unitnya kini ada di tab
   sebelah, sehingga tanpa ini tabel bisa tampak "kehilangan" baris tanpa sebab yang terlihat. */
.dash-rekap-unit {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 12px; color: var(--color-neutral);
}
.dash-rekap-unit[hidden] { display: none; }
.dash-rekap-unit b { color: var(--color-primary-dark); }
.dash-rekap-unit .btn-link { margin: 0; }

/* --- Rekap Presensi: cari nama + paginasi (1.099 pegawai tidak muat satu layar) --- */
.dash-table-search { margin-bottom: 12px; }
.dash-table-pager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 14px; font-size: 12px; color: var(--color-neutral);
}
.dash-table-pager[hidden] { display: none; }
.dash-table-pager .btn-link { margin: 0; }
.dash-table-pager .btn-link:disabled { color: var(--color-neutral-tertiary); cursor: not-allowed; text-decoration: none; }

/* --- Kelola Akun (Authentication UC13) ------------------------------------
   Kolom terakhir memuat tombol aksi, sehingga barisnya diratakan ke TENGAH
   (bukan ke atas seperti .person-row): tiap sel di sini selalu satu baris.
   -------------------------------------------------------------------------- */
.account-toolbar {
  display: grid; grid-template-columns: 1fr; gap: 12px; align-items: end; margin-bottom: 14px;
}
@media (min-width: 760px) {
  .account-toolbar { grid-template-columns: minmax(220px, 1fr) 170px 200px; }
}
.account-field-grow { min-width: 0; }

.acc-head, .acc-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr .8fr 1.2fr .9fr auto;
  gap: 10px; align-items: center;
}
.acc-head {
  font-size: 11px; font-weight: 600; color: var(--color-neutral-tertiary);
  text-transform: uppercase; letter-spacing: .03em;
  padding: 0 4px 8px; border-bottom: 1px solid var(--color-border);
}
.acc-row {
  font-size: 13px; padding: 10px 4px;
  border-bottom: 1px solid var(--color-surface-dashboard);
}
.acc-nip { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
.acc-action { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.acc-action .btn, .acc-action .btn-danger-outline { padding: 6px 12px; font-size: 12px; width: auto; }
/* .btn-ghost berteks putih (dibuat untuk overlay gelap) -> tak terlihat di baris akun yang putih;
   beri warna & border gelap khusus di sini (mis. tombol "Buka Kunci"). */
.acc-action .btn-ghost {
  color: var(--color-primary-dark); border-color: var(--color-border);
  padding: 6px 12px; font-size: 12px; min-height: 34px;
}
.acc-action .btn-link { padding: 6px 4px; font-size: 12px; }
/* Mode ubah-peran: <select> ringkas di kolom Peran + baris disorot agar jelas sedang diedit. */
.acc-row-editing { background: var(--color-surface-dashboard); border-radius: 8px; }
.acc-role-select { padding: 6px 8px; min-height: 34px; font-size: 12px; width: 100%; }

/* Di layar sempit label kolom hilang, jadi tiap sel berdiri sendiri sebagai baris —
   pola sama .recap-row.person-row. Dashboard memang untuk desktop, tetapi Superadmin
   sesekali membukanya dari tablet saat sedang tidak di meja. */
@media (max-width: 900px) {
  .acc-head { display: none; }
  .acc-row {
    grid-template-columns: 1fr; gap: 4px;
    padding: 12px 4px; border-bottom: 1px solid var(--color-border);
  }
  .acc-action { text-align: left; margin-top: 6px; }
}