/*
 * 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; }