/* Sistem Absensi Karyawan — satu stylesheet, tanpa build step.
   Mobile-first untuk PWA karyawan; konsol admin memakai layout lebar
   di atas breakpoint 900px (PRD §5.4). */

/* Tipografi korporat. Berkasnya di-hosting sendiri, bukan ditarik dari Google
   Fonts, karena aplikasi ini PWA: permintaan ke domain pihak ketiga gagal saat
   offline dan teks akan melompat ke huruf cadangan justru pada kondisi yang
   paling sering dialami pengguna lapangan. Dua subset, satu berkas variabel
   (400-900) masing-masing, total ~68 KB. Lisensi: SIL OFL 1.1 -- lihat
   assets/fonts/LISENSI.md. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Warna dan ukuran korporat Aksarupa Group, disalin apa adanya dari "Aksarupa
   Design System" §01 dan §06 -- bukan hasil kira-kira dari berkas logo.

   Aturan rasio dari §01 yang dipegang di seluruh berkas ini: "navy dan putih
   mendominasi, kuning maksimal 10% sebagai penanda aksi (tombol, highlight,
   garis). Kuning tidak pernah dipakai untuk teks panjang." Karena itu kuning di
   sini hanya muncul sebagai BIDANG (dengan teks navy di atasnya) atau GARIS
   penanda -- tidak pernah sebagai warna teks di atas latar terang: kontrasnya
   terhadap putih cuma 1,4:1, sedangkan navy di atas kuning 9,8:1. */
:root {
  --merek-navy: #1a2277;
  --merek-navy-dalam: #0f1655;
  --merek-kuning: #ffd800;
  --merek-kuning-dalam: #f0cb00;
  --merek-tinta: #111436;

  --bg: #f4f5f9;
  --surface: #ffffff;
  --surface-2: #edeff9;
  --border: #e2e4ee;
  --text: #111436;
  --muted: #5c6180;
  /* "Caption" §01/§02. Rasionya di atas putih 3,9:1 -- di bawah 4,5:1, jadi
     hanya untuk label dekoratif (eyebrow section), tidak untuk teks yang
     membawa informasi. Yang memikul seluruh teks sekunder adalah --muted. */
  --muted-2: #7a7f99;
  --accent: #1a2277;
  --accent-ink: #ffffff;
  --accent-soft: #edeff9;
  --accent-hover: #0f1655;
  --sorot: #ffd800;
  --sorot-ink: #1a2277;
  --sorot-hover: #f0cb00;
  --sorot-soft: #fff6c2;
  --ok: #0f7a3d;
  --ok-soft: #d9f2e3;
  /* Cokelat-jingga, bukan kuning: nada peringatan wajib tetap terbedakan dari
     kuning korporat yang kini muncul sebagai penanda aksi di banyak tempat. */
  --warn: #9a5b00;
  --warn-soft: #ffeacc;
  --danger: #c02626;
  --danger-ink: #ffffff;
  --danger-soft: #fce4e4;
  --info: #0e7490;
  --info-soft: #d3f0f6;
  /* Blok navy penuh: sidebar konsol admin dan kepala formulir lamaran. Pola
     "kartu navy"/hero §04-§05 -- teks putih, teks sekunder #C6CAE8, aksen
     kuning hanya pada eyebrow atau penanda. */
  --navy-blok: #1a2277;
  --navy-blok-ink: #ffffff;
  --navy-blok-muted: #c6cae8;
  --navy-blok-border: #2b3492;
  --navy-blok-hover: #29328f;
  /* §06: radius 12px (kecil), 20px (kartu), 999px (tombol & chip). */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-isian: 14px;
  --radius-pil: 999px;
  /* §04: "Tanpa bayangan pada latar putih." Bayangan disisakan sangat tipis
     hanya untuk lapisan yang benar-benar melayang (modal, toast, tooltip). */
  --shadow: 0 1px 2px rgba(17, 20, 54, .05), 0 10px 26px -14px rgba(17, 20, 54, .28);
  /* Warna seri grafik. Pasangan ini divalidasi untuk keterbedaan pada
     penglihatan warna normal maupun buta warna (protan/deutan/tritan), dan
     dipakai sama di tema terang maupun gelap. Sengaja TIDAK diganti menjadi
     navy+kuning korporat: kuning di atas latar putih nyaris tak terlihat untuk
     batang tipis maupun garis, dan pasangan ini sudah teruji. */
  --seri-1: #0e7490;
  --seri-2: #c2410c;
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Design system korporat tidak mendefinisikan tema gelap; aplikasi ini sudah
   punya sejak awal dan pengguna lapangan memakainya. Netral gelapnya karena itu
   diturunkan dari #111436 (tinta logo), bukan dari abu-abu netral, supaya tetap
   terasa satu keluarga dengan tema terang. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e24;
    --surface: #151a3a;
    --surface-2: #1e2450;
    --border: #2e3668;
    --text: #eceefb;
    --muted: #a3a9d0;
    --muted-2: #868cb4;
    /* Navy korporat terlalu gelap untuk menjadi bidang aksi di atas latar
       gelap; dicerahkan pada rona yang sama agar tetap terbaca sebagai navy
       merek, dengan tinta gelap di atasnya. */
    --accent: #8f99f2;
    --accent-ink: #0b0e24;
    --accent-soft: #1a227766;
    --accent-hover: #adb5f8;
    --sorot: #ffd800;
    --sorot-ink: #111436;
    --sorot-hover: #f0cb00;
    --sorot-soft: #4a3c0055;
    --ok: #4ade80;      --ok-soft: #0d4a2a55;
    --warn: #e5a53a;    --warn-soft: #5c380055;
    --danger: #f87171;  --danger-soft: #6d1c1c55;  --danger-ink: #0b0e24;
    --info: #22d3ee;    --info-soft: #10495a55;
    --navy-blok: #151a3a;
    --navy-blok-ink: #eceefb;
    --navy-blok-muted: #a3a9d0;
    --navy-blok-border: #2e3668;
    --navy-blok-hover: #262d5e;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Bobot dan letter-spacing mengikuti §02 (judul 700, rapat -2%/-1%). Yang
   TIDAK diikuti adalah ukurannya: §02 menetapkan 64/36/22/17 px untuk landing
   page company profile, sementara berkas ini melayani konsol data yang padat --
   tabel absensi, slip gaji, daftar pelamar. Skala sebesar itu akan memaksa
   scroll berlipat pada layar ponsel tanpa menambah kejelasan apa pun. Yang
   dipertahankan karena itu adalah karakternya (huruf, bobot, kerapatan),
   bukan angkanya. */
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
/* "Eyebrow" §02: label kecil di atas judul section. */
.eyebrow {
  font-size: .72rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
}
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- boot ---------- */
.boot { display: grid; place-content: center; gap: 14px; justify-items: center; min-height: 100dvh; color: var(--muted); }
.boot__spinner, .spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- layout: aplikasi karyawan (mobile) ---------- */
.app { min-height: 100dvh; }
.shell { display: flex; flex-direction: column; min-height: 100dvh; }

/* Mengikuti pola navbar design system §05: latar putih, garis bawah 1px
   #E2E4EE, monogram di kiri. Bukan navy penuh -- §01 meminta putih ikut
   mendominasi, dan bilah atas adalah bidang yang paling sering terlihat. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border);
}
.topbar__title { font-weight: 700; font-size: 1rem; flex: 1; min-width: 0; letter-spacing: -.01em; }
.topbar__sub { font-size: .75rem; color: var(--muted); font-weight: 400; display: block; letter-spacing: 0; }
.topbar__logo { height: 26px; width: auto; flex: none; }
.topbar__btn {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--accent);
  width: 34px; height: 34px; border-radius: var(--radius-pil); cursor: pointer;
  display: grid; place-content: center;
}
.topbar__btn:hover { background: var(--border); }
.topbar__avatar-link { display: block; text-decoration: none; }
.topbar__avatar { width: 34px; height: 34px; border: 1px solid var(--border); }

.main { flex: 1; padding: 16px; padding-bottom: 92px; max-width: 640px; width: 100%; margin: 0 auto; }
.view { display: grid; gap: 14px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: grid; justify-items: center; gap: 3px; padding: 9px 4px 10px;
  font-size: .68rem; color: var(--muted); text-decoration: none;
  border-top: 3px solid transparent; margin-top: -1px;
}
/* Kuning sebagai "garis penanda" (§01). Ini satu-satunya tempat kuning muncul
   di aplikasi karyawan sehari-hari, dan porsinya jauh di bawah batas 10%. */
.tabbar a.is-active { border-top-color: var(--merek-kuning); font-weight: 600; }
.tabbar a.is-active { color: var(--accent); }
.tabbar svg { width: 21px; height: 21px; }

/* ---------- layout: konsol admin ---------- */
.console { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
.sidebar { display: none; }
.console .main { max-width: 1280px; padding-bottom: 92px; }

@media (min-width: 900px) {
  .console { grid-template-columns: 248px 1fr; }
  .sidebar {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--navy-blok); color: var(--navy-blok-ink); border-right: 1px solid var(--navy-blok-border);
    padding: 16px 12px; position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  }
  .sidebar__brand { display: grid; gap: 3px; padding: 4px 8px 16px; }
  /* Lihat catatan lebar minimum pada .lamaran__logo. */
  .sidebar__brand img { height: 32px; width: auto; justify-self: start; }
  .sidebar__group { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--navy-blok-muted); padding: 14px 10px 6px; }
  .sidebar a {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: var(--radius-sm); color: var(--navy-blok-muted); text-decoration: none; font-size: .875rem;
  }
  .sidebar a:hover { background: var(--navy-blok-hover); color: var(--navy-blok-ink); }
  /* Menu aktif memakai kuning korporat sebagai bidang penuh dengan teks biru
     tua -- kebalikan dari sekitarnya, sehingga posisi pengguna terbaca sekali
     lihat, dan kuningnya muncul di tempat yang kontrasnya aman (11,6:1). */
  .sidebar a.is-active { background: var(--merek-kuning); color: var(--merek-tinta); font-weight: 650; }
  .sidebar svg { width: 17px; height: 17px; flex: none; }
  .sidebar__foot { margin-top: auto; padding: 12px 10px 0; font-size: .75rem; color: var(--navy-blok-muted); border-top: 1px solid var(--navy-blok-border); }
  /* Tombol di dalam blok navy tidak boleh memakai warna netral tema terang:
     --muted (#5C6180) di atas navy hanya 1,5:1 dan praktis tak terbaca. */
  .sidebar .btn--ghost { color: var(--navy-blok-muted); }
  .sidebar .btn--ghost:hover:not(:disabled) { background: var(--navy-blok-hover); color: var(--navy-blok-ink); }
  /* Monogram di bilah atas jadi mubazir begitu sidebar (yang sudah memuat
     lockup penuh) terlihat. */
  .console .topbar__logo { display: none; }
  .console .tabbar { display: none; }
  .console .main { padding: 24px 28px 40px; }
}

/* ---------- kartu & grid ---------- */
/* §04: kartu = radius 20px, garis 1px #E2E4EE, TANPA bayangan di atas latar
   putih. Padding 30px pada design system dikecilkan di sini karena kartu di
   aplikasi ini kerap berisi tabel dan grid statistik, bukan satu paragraf. */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.card--flat { box-shadow: none; }
/* "Kartu navy" §04 -- satu kartu penekanan per layar. */
.card--navy {
  background: var(--navy-blok); border-color: var(--navy-blok); color: var(--navy-blok-ink);
}
.card--navy .muted, .card--navy .small.muted { color: var(--navy-blok-muted); }
.card--navy .eyebrow { color: var(--merek-kuning); }
.card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.card__head h2, .card__head h3 { flex: 1; min-width: 0; }
.grid { display: grid; gap: 12px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }
.stack { display: grid; gap: 10px; }

/* ---------- statistik ---------- */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.stat__label { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat__value { font-size: 1.65rem; font-weight: 680; margin-top: 4px; letter-spacing: -.02em; }
.stat__hint { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.stat--ok .stat__value { color: var(--ok); }
.stat--warn .stat__value { color: var(--warn); }
.stat--danger .stat__value { color: var(--danger); }
.stat--info .stat__value { color: var(--info); }

/* ---------- tombol ---------- */
/* §03: tombol berbentuk pil (radius 999px), bobot 700. Varian yang ada di
   design system: navy isi (utama), kuning isi dengan teks navy (aksi
   penekanan), garis navy, dan teks polos. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-pil); border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
  font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Tombol kuning §03. Teksnya navy, tidak pernah putih (kontras putih di atas
   kuning hanya 1,4:1). Dipakai hemat -- satu aksi penekanan per layar. */
.btn--sorot { background: var(--sorot); border-color: var(--sorot); color: var(--sorot-ink); }
.btn--sorot:hover:not(:disabled) { background: var(--sorot-hover); border-color: var(--sorot-hover); }
.btn--garis { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn--garis:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.btn--danger:hover:not(:disabled) { filter: brightness(1.08); background: var(--danger); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn--sm { padding: 5px 13px; font-size: .8rem; }
.btn--block { width: 100%; }
.btn--lg { padding: 14px 24px; font-size: 1rem; }
.btn svg { width: 16px; height: 16px; }

/* ---------- formulir ---------- */
.field { display: grid; gap: 5px; }
.field > label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.field small { font-size: .74rem; color: var(--muted); }
/* §03: isian berlatar #F4F5F9 dengan garis 1,5px, radius 14px; saat fokus
   garisnya menjadi navy dan latarnya memutih. */
.input, .select, .textarea {
  width: 100%; padding: 10px 13px; border-radius: var(--radius-isian);
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text);
  transition: border-color .12s ease, background .12s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.textarea { min-height: 82px; resize: vertical; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: .76rem; }
.checkbox { display: flex; align-items: center; gap: 9px; font-size: .875rem; cursor: pointer; }
.checkbox input { width: 17px; height: 17px; accent-color: var(--accent); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }

.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__rel {
  position: relative;
  width: 38px; height: 22px; flex: none;
  background: var(--border); border-radius: var(--radius-pil);
  transition: background .15s ease;
}
.switch__rel::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .15s ease;
}
.switch input:checked + .switch__rel { background: var(--ok); }
.switch input:checked + .switch__rel::before { transform: translateX(16px); }
.switch input:focus-visible + .switch__rel { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- tabel ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
thead th {
  text-align: left; padding: 10px 12px; background: var(--surface-2);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  font-weight: 620; white-space: nowrap; border-bottom: 1px solid var(--border);
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table__empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: .875rem; }

/* ---------- lencana ---------- */
/* §03: chip/badge berbentuk pil, bobot 600, latar #EDEFF9 dengan teks navy;
   varian aksen berlatar #FFF6C2. */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px;
  border-radius: var(--radius-pil); font-size: .74rem; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.badge--ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge--info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.badge--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge--sorot { background: var(--sorot-soft); color: var(--accent); border-color: transparent; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.muted { color: var(--muted); }
.small { font-size: .8rem; }
.tiny { font-size: .72rem; }
.mono { font-family: var(--mono); font-size: .8rem; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 620; }
.num { font-variant-numeric: tabular-nums; }
.center { text-align: center; }

/* ---------- absensi ---------- */
.clock { text-align: center; padding: 6px 0 2px; }
.clock__time { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.clock__date { color: var(--muted); font-size: .875rem; }

.camera {
  position: relative; aspect-ratio: 3 / 4; max-height: 46vh; margin: 0 auto;
  background: #000; border-radius: var(--radius); overflow: hidden;
  display: grid; place-items: center; width: 100%;
}
.camera video, .camera img, .camera canvas { width: 100%; height: 100%; object-fit: cover; }
.camera video { transform: scaleX(-1); }
.camera__hint { position: absolute; inset: auto 0 0 0; padding: 8px 12px; background: rgba(0,0,0,.55); color: #fff; font-size: .76rem; text-align: center; }
.camera__off { color: #c6cae8; font-size: .85rem; padding: 20px; text-align: center; display: grid; gap: 10px; justify-items: center; }

.geo-status { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--radius-sm); font-size: .85rem; }
.geo-status--ok { background: var(--ok-soft); color: var(--ok); }
.geo-status--warn { background: var(--warn-soft); color: var(--warn); }
.geo-status--danger { background: var(--danger-soft); color: var(--danger); }
.geo-status--idle { background: var(--surface-2); color: var(--muted); }
.geo-status > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }

.timeline { display: grid; gap: 0; }
.timeline__item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.timeline__rail { display: grid; justify-items: center; }
.timeline__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border); margin-top: 5px; }
.timeline__dot--done { background: var(--ok); }
.timeline__line { width: 2px; flex: 1; background: var(--border); min-height: 22px; }
.timeline__body { padding-bottom: 14px; }

/* ---------- kalender riwayat ---------- */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar__dow { text-align: center; font-size: .68rem; color: var(--muted); padding-bottom: 4px; text-transform: uppercase; }
.calendar__day {
  aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--border);
  display: grid; place-content: center; gap: 2px; font-size: .8rem; background: var(--surface);
  cursor: pointer; position: relative;
}
.calendar__day--empty { border: 0; background: transparent; cursor: default; }
.calendar__day--tepat { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.calendar__day--telat { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.calendar__day--cuti { background: var(--info-soft); color: var(--info); border-color: transparent; }
.calendar__day--alpa { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.calendar__day--libur { background: var(--surface-2); color: var(--muted); }
.calendar__day--today { outline: 2px solid var(--accent); outline-offset: 1px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .74rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- peta ---------- */
.map { position: relative; width: 100%; height: 440px; border-radius: var(--radius); overflow: hidden; background: #e2e4ee; border: 1px solid var(--border); touch-action: none; cursor: grab; }
.map:active { cursor: grabbing; }
.map__tiles, .map__overlay { position: absolute; inset: 0; }
.map__overlay { pointer-events: none; }
.map__tile { position: absolute; width: 256px; height: 256px; }
.map__ctrl { position: absolute; right: 10px; top: 10px; display: grid; gap: 5px; z-index: 5; }
.map__ctrl button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.map__attr { position: absolute; right: 0; bottom: 0; background: rgba(255,255,255,.82); color: #111436; font-size: .62rem; padding: 1px 5px; z-index: 5; }
.map__pin { position: absolute; transform: translate(-50%, -100%); z-index: 4; pointer-events: auto; cursor: pointer; }
.map__fallback { position: absolute; inset: 0; display: grid; place-content: center; color: var(--muted); font-size: .8rem; text-align: center; padding: 20px; }

/* ---------- grafik ---------- */
.chart { width: 100%; overflow: visible; }
.chart text { font-size: 10px; fill: var(--muted); font-family: var(--sans); }
.chart .chart__grid { stroke: var(--border); stroke-width: 1; }
.chart .chart__bar { fill: var(--seri-1); }
.chart .chart__bar--seri2 { fill: var(--seri-2); }
.chart .chart__bar--ok { fill: var(--ok); }
.chart .chart__bar--warn { fill: var(--warn); }
.chart .chart__bar--danger { fill: var(--danger); }
.chart .chart__bar--info { fill: var(--info); }
.chart .chart__bar--netral { fill: var(--muted); }
.chart .chart__nilai { fill: var(--text); font-weight: 620; font-size: 11px; }
.chart .chart__sumbu { stroke: var(--border); stroke-width: 1; }
.chart__wrap { position: relative; }
.chart__tip {
  position: absolute; pointer-events: none; z-index: 10; opacity: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 6px 9px; font-size: .76rem; white-space: nowrap;
  transform: translate(-50%, -100%); transition: opacity .1s;
}
.chart__tip.is-on { opacity: 1; }
.chart__hit { fill: transparent; cursor: pointer; }
.seri-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .76rem; color: var(--muted); margin-top: 8px; }
.seri-legend span { display: inline-flex; align-items: center; gap: 6px; }
.seri-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.bar-tumpuk { display: flex; height: 26px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.bar-tumpuk > i { display: block; height: 100%; }

/* ---------- toast & modal ---------- */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 104px; z-index: 200; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.toast {
  padding: 11px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow);
  background: var(--surface); border: 1px solid var(--border); font-size: .85rem;
  animation: toast-in .18s ease-out;
}
.toast--ok { border-left: 4px solid var(--ok); }
.toast--error { border-left: 4px solid var(--danger); }
.toast--warn { border-left: 4px solid var(--warn); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(17, 20, 54, .55);
  display: grid; place-items: center; padding: 16px; overflow-y: auto;
}
.modal {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  width: min(560px, 100%); max-height: 90dvh; overflow-y: auto; border: 1px solid var(--border);
}
.modal--wide { width: min(880px, 100%); }
.modal__head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.modal__head h2 { flex: 1; font-size: 1rem; }
.modal__body { padding: 18px; display: grid; gap: 13px; }
.modal__foot { display: flex; gap: 9px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface); }

/* ---------- lain-lain ---------- */
.empty { display: grid; gap: 8px; justify-items: center; padding: 36px 18px; text-align: center; color: var(--muted); }
.empty svg { width: 34px; height: 34px; opacity: .45; }
.filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { min-width: 150px; }
.pill-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.pill-tabs button {
  padding: 6px 14px; border-radius: var(--radius-pil); font-weight: 600; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-size: .82rem; white-space: nowrap;
}
.pill-tabs button.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 7px 14px; font-size: .875rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-content: center; font-weight: 650; font-size: .8rem; flex: none; overflow: hidden; }
.avatar > img { width: 100%; height: 100%; object-fit: cover; }
.progress { height: 7px; border-radius: var(--radius-pil); background: var(--border); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); }
hr.sep { border: 0; border-top: 1px solid var(--border); margin: 2px 0; }

/* Logo berlatar terang vs gelap. Logonya berkas raster, jadi tidak bisa
   mengikuti warna teks -- versi biru tua hilang di tema gelap dan versi putih
   hilang di tema terang. Keduanya dipasang, satu disembunyikan. Cara ini
   dipilih daripada properti `content:` karena bekerja di semua peramban
   sasaran, dan daripada filter CSS karena logonya dua warna. */
.tema-gelap-saja { display: none; }
@media (prefers-color-scheme: dark) {
  .tema-terang-saja { display: none; }
  .tema-gelap-saja { display: block; }
}

/* ---------- login ---------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 20px; background: var(--bg); }
.auth__card { width: min(400px, 100%); display: grid; gap: 16px; }
.auth__brand { display: grid; justify-items: center; gap: 12px; text-align: center; }
.auth__brand img { width: auto; height: 42px; }

/* ---------- formulir lamaran publik (rekrutmen) ---------- */
.lamaran { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
/* Kepala formulir memakai blok navy pola hero §05: ini halaman publik, wajah
   perusahaan bagi orang yang belum tentu pernah melihat mereknya. Teks
   sekunder #C6CAE8 dan penanda langkah kuning -- persis komposisi hero. */
.lamaran__head {
  position: sticky; top: 0; z-index: 10;
  background: var(--navy-blok); color: var(--navy-blok-ink);
  border-bottom: 1px solid var(--navy-blok-border);
  padding: 14px 18px 14px; padding-top: max(14px, env(safe-area-inset-top));
}
.lamaran__head h1 { font-size: 1.15rem; margin-top: 4px; }
.lamaran__head .muted, .lamaran__head .small.muted, .lamaran__head .tiny { color: var(--navy-blok-muted); }
.lamaran__logo {
  /* §06: lebar minimum lockup 120px -- di bawah itu harus memakai ikon saja.
     Rasio berkasnya 600x160, jadi tinggi 32px = lebar tepat 120px. */
  height: 32px; width: auto; margin-bottom: 10px;
}
.lamaran__steps { display: flex; gap: 4px; margin-top: 12px; }
.lamaran__steps i { flex: 1; height: 5px; border-radius: var(--radius-pil); background: rgba(255, 255, 255, .22); }
.lamaran__steps i.is-done { background: var(--navy-blok-muted); }
.lamaran__steps i.is-current { background: var(--merek-kuning); }
.lamaran__body { flex: 1; max-width: 560px; width: 100%; margin: 0 auto; padding: 20px 18px 24px; }
.lamaran__foot {
  position: sticky; bottom: 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--border);
  padding: 12px 18px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; gap: 10px; justify-content: space-between; max-width: 560px; width: 100%; margin: 0 auto;
}
.lamaran__foot .btn { flex: 1; }
.lamaran__sukses { min-height: 100dvh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; padding: 24px; }
@keyframes lamaran-shake {
  10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); }
}
.lamaran__shake { animation: lamaran-shake .4s; }

/* ---------- cetak (slip gaji & laporan PDF) ---------- */
@media print {
  body { background: #fff; }
  .topbar, .tabbar, .sidebar, .toasts, .no-print, .modal__foot, .modal__head { display: none !important; }
  .main { padding: 0; max-width: none; }
  .card, .modal, .table-wrap { box-shadow: none; border-color: var(--border); break-inside: avoid; }
  .modal-backdrop { position: static; background: none; padding: 0; display: block; }
  .modal { width: 100%; max-height: none; border: 0; }
  .print-only { display: block !important; }
}
.print-only { display: none; }