/* ============================================================
   SIKATA — Sistem Informasi Kelas dan Tata Kelola Jabatan
   Palet dari logo Kemenimipas: navy #06213e · emas #dc9113
   ============================================================ */
:root {
  --navy: #06213e;
  --navy-2: #0d2f55;
  --navy-3: #16406f;
  --gold: #dc9113;
  --gold-2: #f2b64a;
  --gold-soft: #fdf3e0;
  --bg: #f3f6fb;
  --ink: #14243a;
  --muted: #64748b;
  --line: #e3e9f2;
  --radius: 16px;

  /* Warna status — palet TERPISAH dari warna identitas (navy/emas), khusus
     menandai keadaan: baik / perhatian / genting. Lolos pemeriksaan
     keterbacaan & buta warna (lightness, chroma, kontras >= 3:1 terhadap
     latar). Selalu dipakai BERSAMA ikon dan label, tidak pernah warna saja. */
  --st-info: #1d5aa0;      --st-info-bg: #e7effa;
  --st-warning: #9a6608;   --st-warning-bg: #fdf1d9;
  /* Kuning tua khusus TULISAN KECIL di atas latar kuning muda: nada --st-warning
     hanya mencapai 4,39:1 di sana (di bawah ambang WCAG AA 4,5:1), sedangkan
     nada ini 6,12:1. Di atas latar putih --st-warning sendiri sudah cukup. */
  --st-warning-ink: #7c5206;
  --st-good: #0f6b46;      --st-good-bg: #e3f3ec;
  --st-critical: #c02a1f;  --st-critical-bg: #fdeae8;
  --st-netral: #4a5b73;    --st-netral-bg: #eef2f8;
  --st-utama: #06213e;     --st-utama-bg: #e3eaf5;
  --shadow: 0 1px 2px rgba(6, 33, 62, .05), 0 8px 24px -12px rgba(6, 33, 62, .18);
  --sidebar-w: 264px;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: .925rem;
  min-height: 100vh;
}
@supports (font-variation-settings: normal) { body { font-optical-sizing: auto; } }

/* ---------- Sidebar ---------- */
.sk-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 1045;
  display: flex; flex-direction: column;
  background: linear-gradient(178deg, var(--navy) 0%, var(--navy-2) 62%, #123a63 100%);
  color: #dbe4f0;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.sk-sidebar .brand {
  display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sk-sidebar .brand img {
  width: 46px; height: 46px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(220, 145, 19, .35), 0 4px 14px rgba(0, 0, 0, .4);
  background: #fff;
}
.sk-sidebar .brand .t1 { font-weight: 800; letter-spacing: .16em; font-size: 1.05rem; color: #fff; }
.sk-sidebar .brand .t2 { font-size: .68rem; line-height: 1.25; color: #97a9c4; }
.sk-nav { flex: 1; overflow-y: auto; padding: 12px 12px 16px; scrollbar-width: thin; }
.sk-nav .lbl {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold-2); margin: 16px 10px 6px; font-weight: 700;
}
.sk-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin: 2px 0; border-radius: 11px;
  color: #c3d0e2; text-decoration: none; font-weight: 500; font-size: .875rem;
  transition: background .15s, color .15s, transform .12s;
}
.sk-nav a i { font-size: 1.05rem; width: 22px; text-align: center; color: #8fa3c0; transition: color .15s; }
.sk-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; transform: translateX(2px); }
.sk-nav a:hover i { color: var(--gold-2); }
.sk-nav a.active {
  background: linear-gradient(90deg, rgba(220, 145, 19, .22), rgba(220, 145, 19, .06));
  color: #fff; box-shadow: inset 3px 0 0 var(--gold);
}
.sk-nav a.active i { color: var(--gold-2); }

/* Backdrop mobile (dibuat oleh JS) */
.sk-backdrop {
  position: fixed; inset: 0; background: rgba(6, 33, 62, .5); backdrop-filter: blur(2px);
  z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .25s;
}
body.sidebar-open .sk-backdrop { opacity: 1; pointer-events: auto; }

/* ---------- Konten & Topbar ---------- */
.sk-content { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.sk-topbar {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  /* Ruang aman perangkat (poni layar / bilah status pada PWA terpasang)
     ditambahkan ke jarak dalam. Tanpa ini tombol menu, lonceng, dan nama
     pengguna tertimpa jam & baterai sehingga tidak bisa diketuk sama sekali.
     Pada perangkat tanpa ruang aman, env() bernilai 0 -> tampilan tak berubah. */
  padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
           10px calc(16px + env(safe-area-inset-left));
}
.sk-topbar .btn-light {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.sk-search { position: relative; flex: 1; max-width: 460px; }
.sk-search > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.sk-search .form-control {
  padding-left: 38px; border-radius: 12px; border-color: var(--line); background: #fff;
  font-size: .875rem; height: 42px;
}
.sk-search .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(220, 145, 19, .12); }
.sk-search-result {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1050;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden; max-height: 380px; overflow-y: auto;
}
.sk-search-result a { display: flex; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid #f1f4f9; }
.sk-search-result a:hover { background: var(--gold-soft); }

/* ---------- Kartu & tabel ----------
   Judul kartu di aplikasi ditulis beragam (card-header, card-header bg-white,
   ditambah fw-semibold, dsb). Aturan di bawah menyamakan tampilannya dari CSS
   sehingga seluruh halaman serasi tanpa perlu menyunting satu per satu. */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.card-header {
  border-radius: var(--radius) var(--radius) 0 0 !important;
  border-bottom-color: var(--line);
  background: #fff;
  padding: .8rem 1rem;
  font-weight: 700; font-size: .875rem; color: var(--navy);
}
/* Ikon judul kartu berwarna emas, KECUALI bila view sudah menentukan
   warnanya sendiri (mis. text-danger) — pilihan view tetap dihormati. */
.card-header i:not([class*="text-"]) { color: var(--gold); }
.card-header .badge { font-weight: 600; }

.table > :not(caption) > * > * { padding: .62rem .75rem; vertical-align: middle; }
/* Kepala tabel seragam di semua tabel, tidak hanya yang memakai .table-light. */
.table > thead > tr > th, .table-light th {
  background: #f6f8fc; color: #40506a; font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--line) !important; white-space: nowrap;
}
.table-hover tbody tr:hover { background: #f8fafd; }
.table tbody td a { color: var(--navy-3); text-decoration: none; font-weight: 600; }
.table tbody td a:hover { color: var(--gold); text-decoration: underline; }
/* Baris "belum ada data" — nada tenang, bukan seperti data biasa. */
.table td.text-center.text-muted { color: var(--muted) !important; font-size: .85rem; background: #fcfdff; }
/* Tabel yang mengisi penuh badan kartu ikut membulat di sudut bawah. */
.card > .card-body.p-0 > .table-responsive > .table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--radius); }
.card > .card-body.p-0 > .table-responsive > .table > tbody > tr:last-child > td:last-child { border-bottom-right-radius: var(--radius); }

/* ---------- Stat card dashboard ---------- */
.stat-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: flex; align-items: center; gap: 13px;
  box-shadow: var(--shadow); height: 100%;
  transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(6,33,62,.06), 0 14px 30px -12px rgba(6,33,62,.24); }
.stat-card .v { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; }
.stat-card .l { font-size: .74rem; color: var(--muted); line-height: 1.25; }
.stat-teks { min-width: 0; }

.stat-ic {
  inline-size: 44px; block-size: 44px; flex: 0 0 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
  background: linear-gradient(135deg, var(--gold-soft), #fbe6bd); color: var(--gold);
}
.stat-card.alt .stat-ic { background: linear-gradient(135deg, #e8effa, #d7e4f6); color: var(--navy-3); }

/* Varian status. Pita tipis di tepi kiri + rona ikon senada, sehingga
   keadaan genting terbaca sekilas tanpa mengandalkan warna semata:
   tiap kartu tetap membawa ikon khas dan labelnya sendiri. */
.stat-card[class*="st-"]::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px;
  background: var(--st-warna, var(--navy-3));
}
.stat-card[class*="st-"] { padding-inline-start: 20px; }
.stat-card[class*="st-"] .stat-ic { background: var(--st-latar); color: var(--st-warna); }
.stat-card[class*="st-"] .v { color: var(--st-warna); }

.stat-card.st-netral   { --st-warna: var(--navy-3);    --st-latar: #e8effa; }
.stat-card.st-info     { --st-warna: var(--st-info);   --st-latar: var(--st-info-bg); }
.stat-card.st-warning  { --st-warna: var(--st-warning);--st-latar: var(--st-warning-bg); }
.stat-card.st-good     { --st-warna: var(--st-good);   --st-latar: var(--st-good-bg); }
.stat-card.st-critical { --st-warna: var(--st-critical);--st-latar: var(--st-critical-bg); }
/* Angka nol pada keadaan genting bukan kabar buruk — jangan ditonjolkan. */
.stat-card[class*="st-"].kosong .v { color: var(--navy); }
.stat-card[class*="st-"].kosong::before { background: var(--line); }
.stat-card[class*="st-"].kosong .stat-ic { background: #eef2f8; color: var(--muted); }

/* ---------- Grafik batang CSS ---------- */
/* ---------- Baris grafik mendatar (dashboard) ----------
   Sebelumnya kelas .sk-bar dipakai bersama oleh dua bentuk grafik: batang
   TEGAK (.b .stick) dan baris MENDATAR (.k + .track + .fill). Yang dipakai
   di aplikasi hanya bentuk mendatar, sedangkan aturan tinggi 150px milik
   bentuk tegak ikut mengenainya — akibatnya SETIAP baris setinggi 150px dan
   dashboard memanjang tak wajar, sementara .k/.track/.fill sendiri tidak
   punya gaya sama sekali. Aturan bentuk tegak yang tak terpakai dihapus. */
.sk-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sk-bar:last-child { margin-bottom: 0; }

.sk-bar .k {
  flex: 0 0 clamp(6.5rem, 30%, 15rem);
  font-size: .78rem; color: var(--muted); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sk-bar .track {
  flex: 1 1 auto; min-width: 0; display: flex;
  block-size: 1.35rem; border-radius: 999px;
  background: var(--line); overflow: hidden;
}

.sk-bar .fill {
  display: flex; align-items: center; justify-content: flex-end;
  min-inline-size: 1.9rem; padding-inline: .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, var(--navy-3), var(--navy));
}
.sk-bar .fill.gold {
  color: var(--navy);
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
}

@media (max-width: 575.98px) {
  .sk-bar .k { flex-basis: 6.5rem; font-size: .72rem; }

  /* Label panjang (nama unit kerja) pindah ke ATAS batangnya di layar sempit.
     Berdampingan, label hanya kebagian ±6,5rem sehingga "Rupbasan Denpasar"
     terpotong jadi "Rupbasan Denp…"; ditumpuk, label memakai selebar kartu
     dan boleh turun baris — tidak ada lagi yang terpotong. Baris grafik
     berlabel pendek (bulan, golongan) tetap berdampingan agar ringkas. */
  .sk-bar-panjang { display: block; margin-bottom: 11px; }
  .sk-bar-panjang .k {
    flex-basis: auto; white-space: normal; overflow: visible;
    margin-bottom: 3px; font-weight: 600; color: #4a5b73;
  }
  .sk-bar-panjang .track { display: flex; }
}

/* ---------- Timeline ---------- */
.sk-timeline {
  position: relative; padding-left: 4px;
  max-height: 372px; overflow-y: auto; scrollbar-width: thin;
}
.sk-tl-item { position: relative; display: flex; gap: 10px; padding: 0 6px 12px 0; min-width: 0; }
.sk-tl-item:last-child { padding-bottom: 2px; }
.sk-tl-item:not(:last-child):before {
  content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--line), transparent);
}
.sk-tl-dot {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: .7rem;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line);
}
.sk-tl-isi { flex: 1; min-width: 0; }
.sk-tl-isi .badge { font-size: .66rem; }

/* ---------- Tombol & badge ---------- */
.btn { border-radius: 11px; font-weight: 600; }
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover, .btn-navy:focus { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.btn-outline-navy { border: 1px solid var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-gold:hover { background: #c07f0e; border-color: #c07f0e; color: #fff; }
.bg-navy { background: var(--navy) !important; }
.bg-gold { background: var(--gold-2) !important; }
.text-navy { color: var(--navy) !important; }
.btn-outline-secondary {
  border-color: #d3dcea; color: #45566f; background: #fff;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

/* ---------- Lencana (badge) ----------
   Warna bawaan Bootstrap terlalu mencolok dan tidak seirama dengan palet
   Kemenimipas. Lencana disamakan memakai palet status yang sama dengan kartu
   dashboard: latar lembut + tulisan pekat, kontras >= 4.5:1. Aman diubah dari
   CSS karena setiap lencana SELALU membawa teksnya sendiri, sehingga maknanya
   tidak pernah bergantung pada warna saja. */
.badge { font-weight: 600; border-radius: 8px; padding: .38em .6em; }
.badge.text-bg-secondary, .badge.text-bg-light,
.badge.bg-secondary, .badge.bg-light {
  background-color: var(--st-netral-bg) !important; color: var(--st-netral) !important;
  border-color: var(--line) !important;
}
.badge.text-bg-primary, .badge.bg-primary {
  background-color: var(--st-utama-bg) !important; color: var(--st-utama) !important; }
.badge.text-bg-info, .badge.bg-info, .badge.bg-info-subtle {
  background-color: var(--st-info-bg) !important; color: var(--st-info) !important; }
.badge.text-bg-warning, .badge.bg-warning, .badge.bg-warning-subtle {
  background-color: var(--st-warning-bg) !important; color: var(--st-warning-ink) !important;
  border-color: #f2e0b6 !important; }
.badge.text-bg-danger, .badge.bg-danger, .badge.bg-danger-subtle {
  background-color: var(--st-critical-bg) !important; color: var(--st-critical) !important;
  border-color: #f6cdc8 !important; }
.badge.text-bg-success, .badge.bg-success, .badge.bg-success-subtle {
  background-color: var(--st-good-bg) !important; color: var(--st-good) !important;
  border-color: #c3e2d3 !important; }
.badge.text-bg-dark { background-color: var(--gold-soft) !important; color: #8a5b06 !important; }
/* Lencana warna identitas (peran pengguna) tetap pekat — itu memang penanda
   jabatan, bukan penanda keadaan. */
.badge.bg-navy { color: #fff !important; }
.badge.bg-gold { color: var(--navy) !important; }
/* Lencana angka pada lonceng tetap merah pekat agar terlihat dari jauh. */
#bellBadge.badge { background-color: #c02a1f !important; color: #fff !important; }

.badge-conf-hijau { background: var(--st-good-bg); color: var(--st-good); }
.badge-conf-biru { background: var(--st-info-bg); color: var(--st-info); }
.badge-conf-kuning { background: var(--st-warning-bg); color: var(--st-warning-ink); }
.badge-conf-merah { background: var(--st-critical-bg); color: var(--st-critical); }

/* ---------- Form ---------- */
.form-control, .form-select { border-radius: 11px; border-color: #d8e0ec; }

/* ---------- Lantai 16px untuk kolom isian (anti auto-zoom iOS) ----------
   iOS memperbesar seluruh halaman begitu kolom berfont < 16px disentuh —
   sangat mengganggu pada PWA. Ambang ini diperlakukan sebagai LANTAI yang
   berlaku di semua perangkat lebih dahulu, baru diperkecil pada penunjuk
   halus (tetikus/trackpad = desktop) di blok berikutnya.

   '!important' dipakai sengaja: aturan Bootstrap seperti
   '.input-group-sm > .form-control' dan aturan internal '.sk-search
   .form-control' berkekhususan lebih tinggi, sehingga tanpa ini mereka
   diam-diam menurunkan ukuran font kembali ke bawah ambang. Keduanya
   pernah lolos dan membuat zoom tetap terjadi. */
.form-control, .form-select, .form-control-sm, .form-select-sm,
.input-group-sm > .form-control, .input-group-sm > .form-select,
.sk-search .form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select, textarea {
  font-size: max(1rem, 16px) !important;
}

/* CATATAN PENTING — jangan mengecilkan kembali lewat media query.
   Sebelumnya ukuran ini diperkecil pada '@media (pointer: fine)' dengan
   anggapan hanya desktop yang cocok. Ternyata sebagian peramban/perangkat
   ponsel dan webview melaporkan diri sebagai penunjuk halus, sehingga kolom
   isian turun ke 14px dan halaman kembali membesar sendiri saat diketik.
   Ukuran 16px kini berlaku TANPA SYARAT di semua perangkat: satu-satunya
   cara yang benar-benar menutup celah ini. Di desktop pun ukuran tersebut
   masih wajar dan justru lebih terbaca. */
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(220, 145, 19, .12); }
.form-label { font-weight: 600; font-size: .82rem; color: #33455f; margin-bottom: .3rem; }
.dropzone {
  border: 2px dashed #cdd8e6; border-radius: var(--radius); padding: 26px; text-align: center;
  color: var(--muted); background: #fafcff; transition: all .2s; cursor: pointer;
}
.dropzone:hover, .dropzone.drag { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }

/* ---------- Modal & dropdown ---------- */
.modal-content { border-radius: var(--radius); border: none; box-shadow: 0 24px 60px -12px rgba(6, 33, 62, .35); }
.modal-header { border-bottom-color: var(--line); }
.modal-footer { border-top-color: var(--line); }
.dropdown-menu { border-radius: 14px; border: 1px solid var(--line); }

/* ---------- Nav tabs ---------- */
.nav-tabs { border-bottom: 1px solid var(--line); gap: 2px; }
.nav-tabs .nav-link {
  border: none; border-radius: 10px 10px 0 0; color: var(--muted);
  font-weight: 600; font-size: .85rem; transition: color .15s, background .15s;
}
.nav-tabs .nav-link:hover { color: var(--navy); background: #f4f7fc; }
.nav-tabs .nav-link.active { color: var(--navy); box-shadow: inset 0 -3px 0 var(--gold); background: transparent; }
.nav-tabs .nav-link .badge { font-size: .66rem; padding: .3em .5em; }
.nav-pills .nav-link { border-radius: 10px; font-weight: 600; font-size: .85rem; color: var(--muted); }
.nav-pills .nav-link.active { background: var(--navy); color: #fff; }

/* ---------- Judul halaman ----------
   Ditulis beragam di tiap view (h4.mb-0, h4.mb-0.fw-bold, h4.mb-3 …).
   Disamakan dari CSS agar seluruh halaman punya kepala yang sama beratnya.
   Judul modal memakai h5 sehingga tidak ikut terpengaruh. */
main h4 { font-weight: 800; color: var(--navy); font-size: 1.25rem; letter-spacing: -.01em; }
main h5:not(.modal-title) { font-weight: 700; color: var(--navy); font-size: 1rem; }
main h6 { font-weight: 700; color: #33455f; font-size: .85rem; }

/* ---------- Pesan sistem (alert) ----------
   Nada lembut senada palet status + pita tepi kiri, bukan blok warna penuh. */
.alert {
  border: 1px solid var(--line); border-inline-start-width: 4px;
  border-radius: 13px; padding: .8rem 1rem; font-size: .88rem; font-weight: 500;
  box-shadow: var(--shadow);
}
.alert-success { background: var(--st-good-bg); border-color: var(--line); border-inline-start-color: var(--st-good); color: #0c5537; }
.alert-info    { background: var(--st-info-bg); border-color: var(--line); border-inline-start-color: var(--st-info); color: #17497f; }
.alert-warning { background: var(--st-warning-bg); border-color: var(--line); border-inline-start-color: var(--st-warning); color: var(--st-warning-ink); }
.alert-danger  { background: var(--st-critical-bg); border-color: var(--line); border-inline-start-color: var(--st-critical); color: #9a2119; }
.alert-light, .alert-secondary { background: #f8fafd; border-color: var(--line); border-inline-start-color: var(--navy-3); color: #33455f; }

/* ---------- Daftar (list-group) ---------- */
.list-group-item { border-color: var(--line); font-size: .88rem; }
.list-group-item:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.list-group-item:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }

/* ---------- Panel bertab yang mengisi tinggi kartu ----------
   Sebelumnya tinggi daftar dipatok 330px lewat gaya sebaris. Karena kartunya
   diregangkan menyamai kolom sebelah (h-100), sisa ruang di bawah daftar
   menganggur cukup lebar dan terlihat seperti kartu kosong. Dengan rantai
   flex di bawah, daftar mengisi persis sisa tinggi kartu di layar lebar,
   sementara di ponsel dibatasi 60% tinggi layar agar halaman tidak memanjang. */
.sk-panel-isi { display: flex; flex-direction: column; min-height: 0; }
.sk-panel-isi > .tab-content { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Ponsel: kartu tidak berdampingan, jadi daftar setinggi isinya saja dan
   dibatasi 60% layar supaya halaman tidak memanjang. */
@media (max-width: 991.98px) { .sk-panel-isi > .tab-content { max-block-size: 60vh; } }
/* Layar lebar: 'flex-basis: 0' membuat daftar TIDAK ikut mendorong tinggi
   kartu, melainkan mengisi persis sisa tinggi kartu yang sudah disamakan
   dengan kolom di sebelahnya — tidak ada lagi ruang menganggur di bawahnya. */
@media (min-width: 992px) { .sk-panel-isi > .tab-content { flex: 1 1 0; min-block-size: 17rem; } }

/* ---------- Keadaan kosong ---------- */
.sk-kosong { padding: 26px 16px; text-align: center; color: var(--muted); font-size: .85rem; }
.sk-kosong i { display: block; font-size: 1.6rem; color: #b9c6da; margin-bottom: 6px; }

/* ---------- Warna teks & tombol kontekstual ----------
   Nada bawaan Bootstrap terlalu muda untuk tulisan: text-warning (#ffc107)
   hanya 1,6:1 terhadap latar putih, text-danger 3,9:1, text-success 4,1:1 —
   ketiganya di bawah ambang WCAG AA. Disamakan ke palet status yang sudah
   lolos pemeriksaan sekaligus membuat seluruh halaman senada. */
.text-danger { color: var(--st-critical) !important; }
.text-success { color: var(--st-good) !important; }
.text-warning { color: var(--st-warning) !important; }
.text-info { color: var(--st-info) !important; }

.btn-outline-danger {
  --bs-btn-color: var(--st-critical); --bs-btn-border-color: #edbeb9;
  --bs-btn-hover-bg: var(--st-critical); --bs-btn-hover-border-color: var(--st-critical);
  --bs-btn-active-bg: #a3231a; --bs-btn-active-border-color: #a3231a;
}
.btn-outline-success {
  --bs-btn-color: var(--st-good); --bs-btn-border-color: #b7dccb;
  --bs-btn-hover-bg: var(--st-good); --bs-btn-hover-border-color: var(--st-good);
  --bs-btn-active-bg: #0b573a; --bs-btn-active-border-color: #0b573a;
}
.btn-outline-warning {
  --bs-btn-color: var(--st-warning-ink); --bs-btn-border-color: #ebd3a2;
  --bs-btn-hover-bg: var(--st-warning); --bs-btn-hover-border-color: var(--st-warning);
  --bs-btn-hover-color: #fff; --bs-btn-active-bg: #7c5206; --bs-btn-active-border-color: #7c5206;
  --bs-btn-active-color: #fff;
}

/* ---------- Cincin fokus seragam (aksesibilitas papan ketik) ---------- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Kolom isian sudah punya penanda fokusnya sendiri (garis + rona emas);
   tanpa pengecualian ini cincinnya jadi dobel dan terlihat berantakan. */
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible { outline: none; }
.btn:focus-visible, .nav-link:focus-visible, .page-link:focus-visible { box-shadow: 0 0 0 .2rem rgba(220, 145, 19, .25); }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(220, 145, 19, .16), transparent 60%),
    radial-gradient(700px 450px at -10% 110%, rgba(22, 64, 111, .5), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, #123a63 100%);
}
.login-shell {
  width: 100%; max-width: 900px; min-height: 520px; display: flex;
  background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 34px 80px -20px rgba(0, 0, 0, .55);
}
.login-brand {
  position: relative; width: 46%; padding: 42px 36px; color: #e8eef7;
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 55%, #143c66 100%);
  display: flex; flex-direction: column; overflow: hidden;
}
.login-brand .orn { position: absolute; border-radius: 50%; border: 2px solid rgba(242, 182, 74, .22); }
.login-brand .orn1 { width: 300px; height: 300px; right: -110px; top: -110px; }
.login-brand .orn2 { width: 190px; height: 190px; right: -40px; top: -20px; border-color: rgba(242, 182, 74, .14); }
.login-brand .orn3 { width: 260px; height: 260px; left: -120px; bottom: -130px; border-style: dashed; }
.login-brand .lg {
  width: 92px; height: 92px; border-radius: 50%; background: #fff; padding: 4px;
  box-shadow: 0 0 0 4px rgba(220, 145, 19, .4), 0 14px 30px rgba(0, 0, 0, .45); margin-bottom: 18px;
}
.login-brand .nm { font-weight: 800; letter-spacing: .24em; font-size: 1.7rem; color: #fff; }
.login-brand .ds { color: var(--gold-2); font-weight: 600; font-size: .92rem; margin-top: 2px; }
.login-brand .in { font-size: .78rem; color: #9db0ca; margin-top: 6px; }
.login-brand .ft { list-style: none; margin: 26px 0 0; padding: 0; }
.login-brand .ft li { display: flex; gap: 10px; align-items: center; font-size: .82rem; color: #c6d3e5; margin-bottom: 12px; }
.login-brand .ft i { color: var(--gold-2); font-size: 1rem; width: 22px; }
.login-brand .cp { margin-top: auto; font-size: .7rem; color: #7e91ad; }
.login-form { flex: 1; padding: 46px 44px; display: flex; flex-direction: column; justify-content: center; }
.login-form .logo-sm { width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(220, 145, 19, .35), 0 8px 20px rgba(6, 33, 62, .25); }
.login-form .hi { font-size: 1.35rem; font-weight: 800; color: var(--navy); margin-bottom: 2px; }
.login-form .sub { font-size: .85rem; color: var(--muted); margin-bottom: 22px; }
.login-form .ig .input-group-text { background: #f6f8fc; border-color: #d8e0ec; color: var(--muted); border-radius: 11px 0 0 11px; }
.login-form .ig .form-control { border-left: 0; }
.login-form .ig .btn { border-color: #d8e0ec; color: var(--muted); }
.btn-masuk {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #fff; font-weight: 700; padding: 11px; border-radius: 12px; border: 0;
  box-shadow: 0 10px 22px -8px rgba(6, 33, 62, .55);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-masuk:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 14px 26px -8px rgba(6, 33, 62, .6); }
@media (max-width: 991.98px) {
  .login-shell { max-width: 430px; min-height: 0; }
  .login-form { padding: 32px 26px; }
}

/* ---------- Pagination ---------- */
.pagination { --bs-pagination-border-radius: 10px; }
.page-link { color: var(--navy); border-color: var(--line); }
.page-item.active .page-link { background: var(--navy); border-color: var(--navy); }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  .sk-sidebar {
    transform: translateX(-104%); box-shadow: 0 0 60px rgba(0, 0, 0, .35); width: min(84vw, 300px);
    padding-top: env(safe-area-inset-top);
  }
  .sk-sidebar.show { transform: none; }
  .sk-content { margin-left: 0; }
  .sk-topbar {
    padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right))
             8px calc(10px + env(safe-area-inset-left));
  }
  .sk-search { max-width: none; }
  main.p-3 { padding: 12px !important; }
  h4 { font-size: 1.15rem; }
  .stat-card { padding: 12px; gap: 10px; }
  .stat-card .v { font-size: 1.2rem; }
  .stat-ic { width: 38px; height: 38px; flex-basis: 38px; font-size: 1.05rem; border-radius: 11px; }
  .table { font-size: .82rem; }
  .modal-dialog { margin: 10px; }
  .btn-group-sm > .btn { padding: .32rem .5rem; }
  .card { border-radius: 14px; }
  footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* Ukuran font kolom isian ditangani di aturan dasar (lihat .form-control
     di atas) agar berlaku pada perangkat sentuh apa pun. Di sini cukup
     merapikan jarak dalamnya saja. */
  .form-control-sm, .form-select-sm { padding: .35rem .6rem; }

  /* Tabel lebar harus digeser DI DALAM pembungkusnya, bukan menggeser
     seluruh halaman. .sk-content & main adalah item flex — tanpa min-width:0
     keduanya menolak menyusut, sehingga overflow-x pada .table-responsive
     tidak pernah aktif (jebakan flexbox yang umum).
     Ini tetap dipertahankan sebagai jaring pengaman untuk tabel yang belum
     sempat diubah menjadi kartu (lihat blok berikutnya). */
  .sk-content, .sk-content > main { min-width: 0; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card > .table-responsive { border-radius: inherit; }

  /* Baris tombol/filter yang panjang tidak memaksa halaman melebar. */
  .sk-topbar { flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  .sk-topbar .dropdown-toggle span, .sk-topbar .dropdown-toggle { font-size: .8rem; }
  /* Nama panjang tidak boleh mendesak tombol lain sampai keluar layar. */
  .sk-nama-user {
    display: inline-block; max-width: 8.5rem; vertical-align: bottom;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .modal-footer .btn { flex: 1; }
}

/* ---------- Tabel lebar menjadi kartu di ponsel ----------
   Tabel Pegawai (8 kolom), Usulan (7), dan Audit (7) mustahil dibaca pada
   layar 390px: hanya 3 kolom pertama yang terlihat dan sisanya harus digeser
   mendatar tanpa penanda apa pun. Di bawah 992px tiap BARIS berubah menjadi
   satu kartu — sel pertama jadi judulnya, sel lain berpasangan "LABEL : isi" —
   sehingga tidak ada lagi yang perlu digeser ke samping.

   Kelas .sk-tabel-kartu dipasang oleh sikata.js SETELAH label kolom berhasil
   disalin dari <thead>. Jadi bila JS mati, aturan di bawah tidak pernah aktif
   dan tabel kembali ke bentuk geser mendatar — bukan tampilan berantakan.
   'screen' penting: hasil cetak harus tetap berbentuk tabel. */
@media screen and (max-width: 991.98px) {
  .sk-bungkus-kartu { overflow-x: visible; padding: 10px; }

  table.sk-tabel-kartu { display: block; inline-size: 100%; font-size: 1rem; }
  table.sk-tabel-kartu > thead { display: none; }
  table.sk-tabel-kartu > tbody { display: block; }

  /* Petak dua kolom: baris pertama diisi judul (kiri) dan tombol aksi (kanan),
     baris berikutnya diisi pasangan label-isi selebar kartu. Tanpa ini tombol
     aksi memakan satu baris penuh sendirian di bawah kartu. */
  table.sk-tabel-kartu > tbody > tr {
    /* column-gap sengaja 0: garis pemisah di bawah judul dan di bawah tombol
       aksi harus bersambung menjadi SATU garis, bukan dua potong bercelah.
       Jaraknya diberikan lewat padding sel tombol. */
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 13px;
    padding: 11px 13px; margin-bottom: 9px;
  }
  table.sk-tabel-kartu > tbody > tr:last-child { margin-bottom: 0; }
  table.sk-tabel-kartu > tbody > tr > td:not(:first-child):not(.sk-sel-aksi) {
    grid-column: 1 / -1;
  }
  /* Sorot baris tidak berguna di layar sentuh — sisa sorotnya justru menempel
     setelah diketuk dan membuat satu kartu terlihat "terpilih". Bootstrap
     memasang sorotnya pada SEL (--bs-table-bg-state), jadi selnya juga harus
     dinetralkan, bukan hanya barisnya. */
  .table-hover.sk-tabel-kartu > tbody > tr:hover { background: #fff; }
  .table-hover.sk-tabel-kartu > tbody > tr:hover > * {
    --bs-table-bg-state: transparent; background-color: transparent;
  }

  table.sk-tabel-kartu > tbody > tr > td {
    display: flex; align-items: baseline; gap: 10px;
    inline-size: auto; padding: 4px 0; border: 0; font-size: .85rem;
    /* Perataan tengah/kanan warisan tabel (mis. th kolom "Pegawai") tidak
       berlaku lagi dalam bentuk kartu — semua isi rata kiri agar sejajar. */
    text-align: start;
    /* Trik penghemat lebar khas tabel harus dilepas di dalam kartu: teks
       dibiarkan turun baris, tidak dipotong "…", dan batas lebar sebaris
       (mis. style="max-width:340px" pada kolom Perangkat) diabaikan.
       '!important' diperlukan karena .text-nowrap memakai !important dan
       max-width ditulis sebagai gaya sebaris. */
    white-space: normal !important;
    overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    max-width: none !important;
  }
  table.sk-tabel-kartu > tbody > tr > td::before {
    content: attr(data-label);
    /* Dibatasi 9,5rem: tanpa batas atas, pada tablet 768px kolom label
       melebar sampai ±270px sehingga label dan isinya berjauhan dan sulit
       dipasangkan mata. */
    flex: 0 0 min(37%, 9.5rem); min-inline-size: 0; text-align: start;
    color: var(--muted); font-size: .69rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em; line-height: 1.6;
  }

  /* Sel pertama = judul kartu, ditulis penuh tanpa label. */
  table.sk-tabel-kartu > tbody > tr > td:first-child {
    grid-column: 1; grid-row: 1;
    display: block; padding: 0 0 9px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line); font-size: .93rem;
  }
  table.sk-tabel-kartu > tbody > tr > td:first-child::before { display: none; }

  /* Kolom tombol (kepalanya kosong atau bertuliskan "Aksi" — lihat sikata.js).
     Ditempatkan di pojok kanan atas, sebaris dengan judul, dan ikut memakai
     garis pemisah yang sama; tingginya otomatis sama karena berada pada baris
     petak yang sama. Tanpa ini tombol memakan satu baris penuh sendirian. */
  table.sk-tabel-kartu > tbody > tr > td.sk-sel-aksi {
    grid-column: 2; grid-row: 1;
    justify-content: flex-end; align-items: center; gap: 6px;
    padding: 0 0 9px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  table.sk-tabel-kartu > tbody > tr > td.sk-sel-aksi::before,
  table.sk-tabel-kartu > tbody > tr > td[data-label=""]::before { display: none; }
  table.sk-tabel-kartu > tbody > tr > td.sk-sel-kosong:not(:first-child) { display: none; }

  /* Baris "belum ada data" bukan kartu — cukup pesan polos di tengah. */
  table.sk-tabel-kartu > tbody > tr.sk-baris-pesan {
    border: 0; padding: 0; margin: 0; background: transparent;
  }
  table.sk-tabel-kartu > tbody > tr.sk-baris-pesan > td {
    display: block; padding: 22px 8px; background: transparent !important;
  }

  /* Tabel di dalam badan kartu sudah punya jarak dalamnya sendiri. */
  .card-body:not(.p-0) > .sk-bungkus-kartu { padding: 0; }
}

/* ---------- Perilaku sentuh di ponsel ----------
   Ketukan ganda yang tidak disengaja (mis. mengetuk tombol dua kali cepat,
   atau memilih baris tabel) membuat halaman ikut membesar-mengecil sendiri —
   terasa mengganggu, terutama pada PWA yang seharusnya berlaku seperti
   aplikasi. 'manipulation' mematikan HANYA ketukan-ganda-untuk-memperbesar;
   menggulir dan cubit-perbesar (penting untuk aksesibilitas) tetap jalan. */
a, button, label, summary, select, input, textarea,
.btn, .nav-link, .page-link, .dropdown-item, .form-check-input, .form-check-label,
.sk-nav a, .accordion-button, [role="button"], [data-bs-toggle] {
  touch-action: manipulation;
}

/* Target sentuh cukup lega pada perangkat sentuh (WCAG 2.5.8). */
@media (pointer: coarse) {
  .btn, .page-link, .dropdown-item, .nav-link, .form-check-input {
    min-block-size: 2.25rem;
  }
  .form-check-input { min-inline-size: 1.15rem; min-block-size: 1.15rem; }
  .btn-sm { padding-block: .4rem; }
}

/* Pengaman: apa pun isinya, halaman tidak boleh bisa digeser ke samping.
   Tabel & elemen lebar tetap dapat digeser di dalam pembungkusnya sendiri. */
html, body { overflow-x: hidden; }
.sk-content, .sk-content > main { min-width: 0; max-width: 100%; }

/* ---------- Print ---------- */
@media print {
  .sk-sidebar, .sk-topbar, footer, .noprint { display: none !important; }
  .sk-content { margin: 0; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #bbb; }
}

/* ---------- Prefill hasil OCR (menunggu verifikasi operator) ---------- */
.ocr-fill { background: #fff8e1 !important; border-color: var(--gold) !important; }