/* app.css — tampilan dasar Elang Bangunan */

:root {
  --lebar-sidebar: 264px;
  --tinggi-topbar: 56px;
  --isi-bg: #f4f6f9;
}

/* ------------------------------------------------------------- tema
   Empat pilihan warna. Semuanya HANYA menggeser variabel di bawah ini —
   tidak ada satu pun aturan tata letak yang digandakan per tema, supaya
   menambah tema kelima nanti tidak menuntut menyisir ulang seluruh berkas.
   Tema disimpan di localStorage dan dipasang di <head> sebelum halaman
   digambar (lihat app.js), jadi tidak ada kedip warna saat pindah halaman. */
:root,
[data-tema="batu"] {
  --sidebar-bg: #1f2937;   /* batu tulis + amber (bawaan) */
  --sidebar-teks: #cbd5e1;
  --sidebar-aktif: #f59e0b;
  --aksen: #b45309;
  --aksen-lembut: rgba(245, 158, 11, .12);
}

[data-tema="baja"] {
  --sidebar-bg: #14263c;   /* biru baja */
  --sidebar-teks: #c7d7e6;
  --sidebar-aktif: #38bdf8;
  --aksen: #0369a1;
  --aksen-lembut: rgba(56, 189, 248, .14);
}

[data-tema="bata"] {
  --sidebar-bg: #34211d;   /* merah bata */
  --sidebar-teks: #e3cdc6;
  --sidebar-aktif: #f97316;
  --aksen: #b91c1c;
  --aksen-lembut: rgba(249, 115, 22, .14);
}

[data-tema="tanah"] {
  --sidebar-bg: #1b2e22;   /* hijau tanah */
  --sidebar-teks: #c6dcce;
  --sidebar-aktif: #4ade80;
  --aksen: #15803d;
  --aksen-lembut: rgba(74, 222, 128, .14);
}

body {
  background: var(--isi-bg);
  font-size: 0.925rem;
}

/* ------------------------------------------------------------ sidebar */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--lebar-sidebar);
  background: var(--sidebar-bg);
  color: var(--sidebar-teks);
  z-index: 1030;
}

.sidebar-merek {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: var(--tinggi-topbar);
  padding: 0 1rem;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Logo perusahaan menggantikan ikon Bootstrap. Ukurannya dipatok di CSS,
   bukan mengandalkan atribut width/height di HTML: atribut itu tetap ditulis
   supaya peramban memesan ruangnya sebelum gambarnya sampai — tanpa itu
   kepala sidebar melompat sesaat saat halaman dimuat. */
.sidebar-merek .sm-logo,
.offcanvas-title .sm-logo {
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Nama aplikasi dan versinya bertumpuk supaya tinggi kepala sidebar tidak
   berubah — nomor versi tidak boleh sampai menggeser kisi menu di bawahnya. */
.sidebar-merek .sm-teks {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.sidebar-merek .sm-versi {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--sidebar-teks);
  opacity: .75;
}

.sidebar-isi {
  /* `overflow-x: hidden` WAJIB berpasangan dengan `overflow-y: auto`: tanpa
     itu, satu petak yang sedikit melebar (label panjang, ikon flyout) memicu
     bilah gulung mendatar di sidebar — dan bilah itu memakan tinggi sekaligus
     membuat menu bisa digeser ke samping tanpa alasan. */
  overflow-y: auto;
  overflow-x: hidden;
  padding: .75rem 0;
  /* Bilah gulung tipis & sewarna sidebar. Firefox pakai properti standar,
     Chrome/Edge lewat ::-webkit-scrollbar di bawah. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.sidebar-isi::-webkit-scrollbar { width: 6px; }
.sidebar-isi::-webkit-scrollbar-track { background: transparent; }

.sidebar-isi::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
  border-radius: 3px;
}

.sidebar-isi::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }

.sidebar-kaki {
  padding: .6rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .8rem;
  color: #e2e8f0;
}

.menu-grup { list-style: none; margin-bottom: .35rem; }

.menu-grup-judul {
  display: block;
  padding: .5rem 1rem .25rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.menu-utama .nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem;
  color: var(--sidebar-teks);
  border-left: 3px solid transparent;
}

.menu-utama .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.menu-utama .nav-link.aktif {
  background: var(--aksen-lembut);
  border-left-color: var(--sidebar-aktif);
  color: #fff;
  font-weight: 600;
}

/* laci mobile memakai palet yang sama supaya tidak terasa dua aplikasi */
.laci-menu { background: var(--sidebar-bg); color: var(--sidebar-teks); width: 260px; }
.laci-menu .offcanvas-title { color: #fff; }
.laci-menu .btn-close { filter: invert(1) grayscale(1); }

/* -------------------------------------------------------------- isi */
.konten-utama { margin-left: 0; min-height: 100vh; padding-bottom: 4.5rem; }

@media (min-width: 992px) {
  .konten-utama { margin-left: var(--lebar-sidebar); padding-bottom: 1rem; }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: .5rem;
  height: var(--tinggi-topbar);
  padding: 0 1rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.topbar-judul { font-weight: 600; }

.isi-halaman { padding: 1rem; }


/* ------------------------------------------------------------ tabel */
.kartu-tabel .card-header { background: #fff; border-bottom: 1px solid #e5e7eb; }

table.dataTable tbody tr.baris-klik { cursor: pointer; }

/* Kepala tabel memakai warna tema yang sama dengan kepala filter di atasnya,
   supaya keduanya terbaca sebagai satu blok kendali — bukan abu-abu tetap
   yang tampak asing setiap kali temanya diganti. */
table.dataTable thead th {
  background: var(--aksen-lembut);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aksen);
  border-bottom: 2px solid var(--sidebar-aktif);
}

/* pagination simbol saja — tanpa nomor halaman panjang */
.dataTables_wrapper .pagination { margin-bottom: 0; }

/* -------------------------------------------------------- bar bawah */
.menu-bawah {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1035;
  display: flex;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.menu-bawah a {
  flex: 1;
  padding: .4rem 0 .3rem;
  text-align: center;
  font-size: .68rem;
  color: #64748b;
  text-decoration: none;
}

.menu-bawah a .bi { display: block; font-size: 1.15rem; }
.menu-bawah a.aktif { color: var(--aksen); font-weight: 600; }

/* ---------------------------------------------------------- tamu */
.halaman-tamu {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, #1f2937 0%, #374151 55%, #4b5563 100%);
}

.kartu-login { width: 100%; max-width: 400px; }

.kartu-kosong { max-width: 720px; margin: 2rem auto; }

/* ------------------------------------------------ grafik omzet dashboard */
/* Batang digambar dengan CSS murni: menambah pustaka grafik hanya untuk 30
   batang membuat halaman pertama yang dibuka pemilik jadi paling berat. */
.grafik-omzet { height: 140px; }
.grafik-kolom { height: 100%; display: flex; align-items: flex-end; }
.grafik-batang {
  width: 100%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  transition: opacity .15s;
}
.grafik-kolom:hover .grafik-batang { opacity: .75; }

/* ------------------------------------------- sidebar: kisi 4 ikon
   Isi tiap grup ditata sebagai kisi 4 kolom, bukan daftar vertikal. Judul
   grupnya dipertahankan sebagai pemisah, jadi struktur menu tidak berubah —
   hanya jauh lebih pendek sehingga seluruh modul terlihat tanpa menggulung. */
.menu-kisi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .25rem;
  padding: .15rem .6rem .5rem;
  list-style: none;
  margin: 0;
}

.menu-kisi .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .2rem;
  padding: .45rem .15rem;
  border-radius: .5rem;
  border-left: 0;
  color: var(--sidebar-teks);
  text-align: center;
  line-height: 1.1;
}

.menu-kisi .nav-link .bi { font-size: 1.15rem; }

/* Label dipotong dua baris, bukan dipangkas dengan elipsis: "Permintaan
   Beli" dan "Purchase Order" harus tetap bisa dibedakan sekilas. */
.menu-kisi .nav-link span {
  font-size: .62rem;
  display: -webkit-box;
  /* Tiga baris, bukan dua: dengan dua baris "Saldo & Kartu Stok" terpotong
     jadi "Saldo &" — label yang tidak memberi tahu apa pun. */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* `break-word` memotong di tengah kata sehingga "Dashboard" tampil sebagai
     "Dashboar / d". Yang dipakai pemenggalan suku kata; kata yang tetap tidak
     muat baru dipotong sebagai upaya terakhir. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.menu-kisi .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.menu-kisi .nav-link.aktif {
  background: var(--aksen-lembut);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--sidebar-aktif);
}

/* --------------------------------------------- kaki sidebar: satu baris
   Pengguna, bantuan, dan palet warna berbagi SATU baris. Bertumpuk tiga
   baris, ketiganya memakan tinggi yang sama dengan empat petak menu — dan di
   layar laptop pendek itu berarti empat petak yang selalu di luar pandangan. */
.kaki-baris {
  display: flex;
  align-items: stretch;
  gap: .4rem;
}

.kaki-pengguna-bungkus {
  /* `min-width: 0` WAJIB pada anak flex yang isinya dipotong: tanpa itu
     lebar minimum sebuah flex item adalah lebar isinya, dan nama panjang
     mendorong palet warna keluar dari sidebar alih-alih terpotong. */
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar-kaki .kaki-pengguna {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  height: 100%;
  padding: .3rem .45rem;
  border-radius: .5rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  text-align: left;
}

.sidebar-kaki .kaki-pengguna:hover { background: rgba(255, 255, 255, .1); }
.sidebar-kaki .kaki-pengguna .bi-person-circle {
  font-size: 1.15rem;
  color: var(--sidebar-aktif);
  flex: 0 0 auto;
}
.sidebar-kaki .kaki-nama {
  font-weight: 600;
  line-height: 1.15;
  font-size: .82rem;
  min-width: 0;
}
.sidebar-kaki .form-select-sm { font-size: .78rem; }

/* Menunya dibuka dari tombol sempit, jadi lebarnya ditentukan isinya —
   `w-100` warisan susunan lama membuatnya selebar tombol dan teksnya
   terpotong. */
.kaki-pengguna-bungkus .dropdown-menu { min-width: 12rem; }

/* pilihan warna tema */

.pilih-tema {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .18rem;
  align-content: center;
  padding: .18rem;
  border-radius: .4rem;
  background: rgba(255, 255, 255, .05);
  flex: 0 0 auto;
}

.pilih-tema button {
  width: .98rem;
  height: .98rem;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
}

.pilih-tema button.terpilih { border-color: #fff; }

/* ------------------------------------------------------ kepala filter
   Baris penyaring di atas tabel. Nilainya dikirim ke SERVER (kelas
   `dt-filter`), tidak pernah menyaring di sisi klien — aturan yang sama
   dengan pengurutan. */
.filter-tabel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem;
  padding: .75rem 1rem;
  background: var(--aksen-lembut);
  border-bottom: 1px solid #e5e7eb;
}

.filter-tabel .filter-butir { display: flex; flex-direction: column; gap: .15rem; }
.filter-tabel label { font-size: .72rem; font-weight: 600; color: #475569; }
.filter-tabel .form-control, .filter-tabel .form-select { min-width: 11rem; }

.judul-kartu {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: #1f2937;
}

.judul-kartu .bi { color: var(--aksen); font-size: 1.1rem; }

/* Nama aplikasi berfungsi sebagai tautan dashboard — harus terlihat bisa
   diklik tanpa berubah jadi teks biru bergaris. */
a.sidebar-merek, .sidebar-merek-laci {
  text-decoration: none;
  color: #fff;
}

a.sidebar-merek:hover, .sidebar-merek-laci:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.sidebar-merek-laci { color: #fff; }

/* ------------------------------------------- grup menu yang dilipat
   Master & System Setup tampil sebagai SATU petak. Isinya muncul di panel
   samping saat kursor lewat (atau saat difokus lewat papan ketik).
   Panelnya `position: fixed`, bukan absolute: sidebar punya `overflow-y:
   auto`, dan panel absolute di dalamnya akan terpotong oleh batas gulung.
   Konsekuensinya, panel fixed TIDAK ikut bergulir bersama sidebar — karena
   itu posisi tegaknya dipasang app.js tiap kali panel dibuka, bukan lewat
   CSS. Tanpa itu, menu yang dibuka setelah menggulung akan muncul jauh dari
   petaknya. */
/* Petak pemicu TIDAK diberi gaya khusus apa pun: ia mewarisi `.menu-kisi
   .nav-link` yang sama dengan petak menu lainnya, jadi ukuran dan susunannya
   identik. Yang perlu di sini cuma titik acuan untuk panelnya. */
/* -------------------------------------------------- petak grup terlipat
   Petak "Master" dan "System Setup" membuka JENDELA PILIHAN, bukan panel
   melayang. Panel lamanya muncul saat kursor sekadar lewat dan hilang persis
   saat mau diklik; dua tambalan (jembatan tak terlihat, jeda 260 ms) tidak
   menyembuhkannya, karena yang salah pilihan hover-nya sendiri. */
.menu-petak-tombol {
  position: relative;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.menu-petak-tombol .menu-petak-tanda {
  position: absolute;
  top: .3rem;
  right: .35rem;
  font-size: .6rem;
  opacity: .5;
}

/* Jendela pilihan meniru PETAK MENU SIDEBAR, bukan daftar tautan biasa:
   latar bergradasi gelap, warna aksen mengikuti tema yang dipilih pengguna,
   dan petaknya bertumpuk ikon-di-atas-label. Orang mencari butir menu dengan
   mengingat BENTUK dan LETAKNYA, bukan membaca satu per satu — jendela yang
   tampil sebagai daftar putih menghapus ingatan itu dan memaksa membaca
   ulang tiap kali. */
.menu-pilih .modal-content {
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(160deg,
              var(--sidebar-bg) 0%,
              color-mix(in srgb, var(--sidebar-bg) 82%, #ffffff) 100%);
  color: var(--sidebar-teks);
}

.menu-pilih .modal-header,
.menu-pilih .modal-footer {
  border-color: rgba(255, 255, 255, .1);
}

.menu-pilih .modal-title { color: #fff; }
.menu-pilih .modal-title .bi { color: var(--sidebar-aktif); }
.menu-pilih .modal-footer .text-secondary { color: var(--sidebar-teks) !important; }
.menu-pilih .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.menu-pilih kbd {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* Empat kolom seperti kisi sidebar; menyusut mengikuti lebar layar. */
.menu-pilih .menu-pilih-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: .4rem;
}

.menu-pilih .menu-pilih-kisi a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .3rem;
  padding: .7rem .3rem;
  border-radius: .5rem;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .05);
  text-decoration: none;
  color: var(--sidebar-teks);
  text-align: center;
  line-height: 1.15;
  font-size: .7rem;
  transition: background .12s, color .12s, box-shadow .12s;
}

.menu-pilih .menu-pilih-kisi a .bi {
  font-size: 1.35rem;
  color: var(--sidebar-aktif);
}

.menu-pilih .menu-pilih-kisi a span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  hyphens: auto;
  overflow-wrap: break-word;
}

.menu-pilih .menu-pilih-kisi a:hover,
.menu-pilih .menu-pilih-kisi a:focus-visible {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.menu-pilih .menu-pilih-kisi a.aktif {
  background: var(--aksen-lembut);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--sidebar-aktif);
}

/* Kotak tanggal dd/mm/yyyy lebih sempit daripada kotak teks biasa — ia tidak
   akan pernah berisi lebih dari sepuluh karakter. */
.filter-tabel .dt-filter-tanggal { min-width: 8.5rem; max-width: 9.5rem; }


/* =====================================================================
   LAPIS TAMPILAN
   ---------------------------------------------------------------------
   Sebelum ini, isi halaman hampir seluruhnya putih di atas abu-abu muda:
   kartu tanpa bayangan, kepala kartu `bg-white`, dan tabel laporan yang
   kepala kolomnya tidak diwarnai sama sekali (hanya `table.dataTable` yang
   dapat warna, sedangkan 103 tabel laporan bukan DataTables). Akibatnya
   layar tidak punya hierarki — mata tidak tahu harus mulai dari mana.

   Yang dikerjakan lapis ini: memberi kedalaman (bayangan halus), memberi
   kepala tiap blok warna tema, dan menyeragamkan kartu angka. Warnanya
   SELALU diturunkan dari variabel tema yang sudah ada, tidak ada satu pun
   heksadesimal aksen baru — supaya empat pilihan tema tetap berlaku penuh.
   ===================================================================== */
:root {
  --garis: #e4e8ef;
  --garis-tipis: #eef1f6;
  --teks-redup: #64748b;
  --teks-tegas: #1e293b;
  --radius: .7rem;
  --bayang: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
  --bayang-naik: 0 6px 18px rgba(15, 23, 42, .09);
  --isi-bg: #eef1f6;
}

/* Latar isi diberi semburat tema yang SANGAT tipis di puncak halaman. Cukup
   untuk memisahkan bidang kerja dari kartu putih, tidak sampai mewarnai
   teks di atasnya. */
body {
  background: var(--isi-bg);
  background-image: linear-gradient(180deg, var(--aksen-lembut) 0, transparent 320px);
  background-repeat: no-repeat;
  color: var(--teks-tegas);
}

/* ------------------------------------------------------------- kartu */
.card {
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
}

.card-header {
  background: linear-gradient(180deg, var(--aksen-lembut), transparent);
  border-bottom: 1px solid var(--garis);
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: .7rem 1rem;
  font-weight: 600;
}

/* `.bg-white` dari Bootstrap dibuang di template; aturan ini menjaga kepala
   kartu tetap berwarna kalau ada yang tertinggal atau ditambahkan lagi nanti. */
.card > .card-header.bg-white { background: linear-gradient(180deg, var(--aksen-lembut), transparent) !important; }

.card-header h5, .card-header h6 { color: var(--teks-tegas); }
.card-header .bi { color: var(--aksen); }

/* ------------------------------------------------------- kartu bertab
   Tab menempel di kepala kartu dan tab aktif menyatu dengan badan kartu di
   bawahnya. `nav-tabs` Bootstrap yang berdiri sendiri di atas latar krem
   membuat tab aktif tampak seperti tombol putih yang mengambang, dan tab
   lainnya berwarna biru bawaan yang tidak ikut tema. */
.kartu-tab > .card-header { padding-bottom: 0; }
.kartu-tab .card-header-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;            /* ponsel: tab bergeser, tidak turun baris */
  overflow-y: hidden;
  scrollbar-width: none;
}
.kartu-tab .card-header-tabs .nav-link {
  color: var(--bs-secondary-color);
  font-weight: 500;
  white-space: nowrap;
  border-color: transparent;
}
.kartu-tab .card-header-tabs .nav-link .bi { color: inherit; }
.kartu-tab .card-header-tabs .nav-link:hover { color: var(--aksen); border-color: transparent; }
.kartu-tab .card-header-tabs .nav-link.active {
  color: var(--aksen);
  font-weight: 600;
  background: var(--bs-card-bg, #fff);
  border-color: var(--garis) var(--garis) var(--bs-card-bg, #fff);
}
/* Kartu di dalam tab (mis. galeri berkas) tidak perlu bayangan kedua. */
.kartu-tab .tab-pane > .card { box-shadow: none; }

/* Kartu yang isinya alat kendali (filter, form target) dibedakan tipis dari
   kartu yang isinya HASIL. Tanpa itu, layar laporan tampak seperti dua kartu
   setara padahal yang satu tombol dan yang satu jawaban. */
.kartu-alat { background: #fbfcfe; }
.kartu-catatan { background: #fbfcfe; border-style: dashed; box-shadow: none; }
.kartu-catatan .bi { color: var(--aksen); }

/* --------------------------------------------------------- kepala halaman */
.kepala-halaman {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
  padding: .85rem 1.1rem;
  background: #fff;
  border: 1px solid var(--garis);
  border-left: 4px solid var(--aksen);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
}

.kepala-halaman .kh-ikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .6rem;
  background: var(--aksen-lembut);
  color: var(--aksen);
  font-size: 1.3rem;
}

.kepala-halaman .kh-teks { min-width: 0; flex: 1 1 auto; }

.kepala-halaman .kh-judul {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--teks-tegas);
}

.kepala-halaman .kh-ket {
  margin: .15rem 0 0;
  font-size: .8rem;
  color: var(--teks-redup);
}

.kepala-halaman .kh-aksi { flex: 0 0 auto; display: flex; gap: .4rem; }

/* Judul pemisah antar bagian dalam satu halaman panjang. */
.judul-bagian {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.4rem 0 .6rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--aksen);
}

.judul-bagian::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--garis), transparent);
}

/* ------------------------------------------------------- kartu statistik */
.kartu-statistik {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  height: 100%;
  padding: .85rem .95rem;
  background: #fff;
  border: 1px solid var(--garis);
  border-left: 4px solid var(--stat, var(--aksen));
  border-radius: var(--radius);
  box-shadow: var(--bayang);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}

a.kartu-statistik:hover {
  box-shadow: var(--bayang-naik);
  transform: translateY(-1px);
  color: inherit;
}

.kartu-statistik .ks-ikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: .55rem;
  font-size: 1.1rem;
  background: rgba(var(--stat-rgb, 13, 110, 253), .12);
  color: var(--stat, var(--aksen));
}

.kartu-statistik .ks-isi { display: flex; flex-direction: column; min-width: 0; }

.ks-judul {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teks-redup);
}

.kartu-statistik .ks-nilai {
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--teks-tegas);
  overflow-wrap: anywhere;
}

.kartu-statistik .ks-ket {
  font-size: .74rem;
  color: var(--teks-redup);
  line-height: 1.3;
}

/* Peran warna Bootstrap diterjemahkan sekali di sini. Template cukup
   menyebut namanya (`warna="danger"`), tidak pernah heksadesimal. */
.warna-primary   { --stat: #2563eb; --stat-rgb: 37, 99, 235; }
.warna-success   { --stat: #16a34a; --stat-rgb: 22, 163, 74; }
.warna-danger    { --stat: #dc2626; --stat-rgb: 220, 38, 38; }
.warna-warning   { --stat: #d97706; --stat-rgb: 217, 119, 6; }
.warna-info      { --stat: #0891b2; --stat-rgb: 8, 145, 178; }
.warna-secondary { --stat: #64748b; --stat-rgb: 100, 116, 139; }

/* ------------------------------------------------------------- meter */
.meter {
  position: relative;
  background: #eef1f6;
  border-radius: 999px;
  overflow: hidden;
}

.meter-isi { height: 100%; border-radius: 999px; transition: width .35s ease; }
.meter-baik   { background: linear-gradient(90deg, #16a34a, #22c55e); }
.meter-sedang { background: linear-gradient(90deg, #d97706, #f59e0b); }
.meter-buruk  { background: linear-gradient(90deg, #dc2626, #ef4444); }

/* Angkanya di ATAS bilah, bukan di dalamnya: bilah 4 % tidak muat memuat
   tulisan "4%", dan angka yang terpotong lebih buruk daripada tidak ada. */
.meter-teks {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 700;
  color: #0f172a;
  text-shadow: 0 0 3px rgba(255, 255, 255, .85);
}

/* -------------------------------------------------------- pil & lencana */
.lencana {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.lencana-primary   { background: rgba(37, 99, 235, .12);  color: #1d4ed8; }
.lencana-success   { background: rgba(22, 163, 74, .13);  color: #15803d; }
.lencana-danger    { background: rgba(220, 38, 38, .12);  color: #b91c1c; }
.lencana-warning   { background: rgba(217, 119, 6, .14);  color: #b45309; }
.lencana-info      { background: rgba(8, 145, 178, .12);  color: #0e7490; }
.lencana-secondary { background: rgba(100, 116, 139, .13); color: #475569; }

.pil-skor {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
}

.pil-baik   { background: #16a34a; }
.pil-sedang { background: #d97706; }
.pil-buruk  { background: #dc2626; }

/* ------------------------------------------------------ lingkaran skor */
.kartu-skor .skor-lingkar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: .5rem solid;
  line-height: 1;
}

.kartu-skor .skor-angka { font-size: 2rem; font-weight: 800; }

.kartu-skor .skor-satuan {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teks-redup);
}

.skor-baik   { border-color: #16a34a; color: #15803d; background: rgba(22, 163, 74, .07); }
.skor-sedang { border-color: #d97706; color: #b45309; background: rgba(217, 119, 6, .07); }
.skor-buruk  { border-color: #dc2626; color: #b91c1c; background: rgba(220, 38, 38, .07); }
.skor-kosong { border-color: #cbd5e1; color: #94a3b8; background: #f8fafc; }

/* -------------------------------------------------------------- tabel
   Ini perbaikan terbesar untuk layar laporan: sebelumnya HANYA
   `table.dataTable thead th` yang diberi warna, sehingga seluruh tabel
   laporan (yang bukan DataTables) tampil putih polos di atas kartu putih. */
.card table > thead > tr > th {
  background: var(--aksen-lembut);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aksen);
  border-bottom: 2px solid var(--sidebar-aktif);
  white-space: nowrap;
}

.card table > tbody > tr > td { border-color: var(--garis-tipis); }
.card table > tbody > tr:hover > td { background: var(--aksen-lembut); }

.card table > tfoot > tr > th,
.card table > tfoot > tr > td {
  background: #f8fafc;
  border-top: 2px solid var(--garis);
  font-weight: 700;
}

/* Kepala tabel yang menempel HANYA dinyalakan lewat kelas `gulung-tabel`,
   tidak berlaku umum. Percobaan pertama memasang batas tinggi ke semua tabel
   dalam kartu, dan hasilnya laporan panjang tampak seperti kartu yang isinya
   terpotong di tengah baris — orang menyimpulkan datanya hilang, padahal ia
   hanya perlu menggulung di dalam kotak yang tidak terlihat batasnya. */
.card .table-responsive.gulung-tabel { max-height: 34rem; overflow-y: auto; }

.card .table-responsive.gulung-tabel table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Angka dalam tabel dibaca lebih cepat dengan lebar digit yang seragam. */
.card table .text-end { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- keadaan kosong */
.keadaan-kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2.5rem 1rem;
  color: var(--teks-redup);
  text-align: center;
}

.keadaan-kosong .bi { font-size: 2.2rem; color: #cbd5e1; }
.keadaan-kosong p { margin: 0; max-width: 34rem; font-size: .85rem; }

/* ------------------------------------------------------------- alert tipis */
.alert-tipis {
  padding: .55rem .8rem;
  font-size: .82rem;
  border-radius: .5rem;
  border-width: 0 0 0 3px;
}

/* --------------------------------------------------------------- form */
.form-control:focus, .form-select:focus {
  border-color: var(--sidebar-aktif);
  box-shadow: 0 0 0 .2rem var(--aksen-lembut);
}

.form-label { font-weight: 600; color: #475569; }

/* Tombol utama mengikuti aksen tema, bukan biru Bootstrap yang selalu sama
   apa pun tema yang dipilih pengguna. */
.btn-primary {
  --bs-btn-bg: var(--aksen);
  --bs-btn-border-color: var(--aksen);
  --bs-btn-hover-bg: var(--aksen);
  --bs-btn-hover-border-color: var(--aksen);
  --bs-btn-active-bg: var(--aksen);
  --bs-btn-active-border-color: var(--aksen);
  --bs-btn-disabled-bg: var(--aksen);
  --bs-btn-disabled-border-color: var(--aksen);
  filter: none;
}

.btn-primary:hover { filter: brightness(1.12); }

.btn-outline-secondary {
  --bs-btn-color: #475569;
  --bs-btn-border-color: var(--garis);
  --bs-btn-hover-bg: var(--aksen-lembut);
  --bs-btn-hover-border-color: var(--aksen);
  --bs-btn-hover-color: var(--aksen);
}

/* -------------------------------------------------------- grafik dashboard */
.grafik-batang.bg-primary { background: var(--aksen) !important; border-radius: 3px 3px 0 0; }
.grafik-kolom:hover .grafik-batang { opacity: 1; filter: brightness(1.2); }

/* ------------------------------------------------------------- kop cetak
   Logo dan nama perusahaan berdampingan di kepala tiap lembar cetak.
   `align-items: flex-start` supaya logo tinggi tidak menarik nama perusahaan
   turun ke tengah — yang dibaca orang lebih dulu adalah namanya. */
.kop-cetak {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.kop-cetak .kop-logo {
  max-width: 170px;
  object-fit: contain;
}

.kop-cetak .kop-teks { min-width: 0; }

/* ---------------------------------------------------------------- cetak
   Halaman cetak (surat jalan, faktur, bukti setor) harus keluar HITAM-PUTIH
   di kertas: warna tema yang bagus di layar hanya memboroskan tinta dan
   membuat kepala kolom jadi abu-abu pudar di printer dot matrix. */
@media print {
  .sidebar, .menu-bawah, .laci-menu, .kepala-halaman .kh-aksi,
  .kartu-alat, .no-cetak { display: none !important; }
  .konten-utama { margin-left: 0 !important; }
  body { background: #fff !important; }
  .card { border: 1px solid #000; box-shadow: none; }
  .card-header { background: #fff !important; }
  .card table > thead > tr > th {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 1px solid #000;
    position: static;
  }
  .card .table-responsive { max-height: none; overflow: visible; }
  /* Logo TIDAK boleh ikut dipucatkan jadi hitam-putih di sini: yang dibuat
     abu-abu di atas kertas adalah warna tema, bukan merek perusahaan.
     `print-color-adjust` memaksa peramban mencetak warnanya apa adanya
     walau pengaturan "cetak latar belakang" pengguna sedang mati. */
  .kop-cetak .kop-logo {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ------------------------------------------------- petak antrean dashboard */
.petak-antrean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  height: 100%;
  padding: .55rem .8rem;
  border: 1px solid var(--garis);
  border-left: 3px solid var(--pa, #cbd5e1);
  border-radius: .5rem;
  background: #fff;
  color: var(--teks-tegas);
  text-decoration: none;
  font-size: .82rem;
  transition: box-shadow .15s ease, transform .15s ease;
}

.petak-antrean:hover {
  box-shadow: var(--bayang-naik);
  transform: translateY(-1px);
  color: var(--teks-tegas);
}

.petak-antrean .petak-angka {
  display: grid;
  place-items: center;
  min-width: 1.85rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .78rem;
  background: rgba(var(--pa-rgb, 100, 116, 139), .14);
  color: var(--pa, #64748b);
}

.petak-danger    { --pa: #dc2626; --pa-rgb: 220, 38, 38; }
.petak-warning   { --pa: #d97706; --pa-rgb: 217, 119, 6; }
.petak-primary   { --pa: #2563eb; --pa-rgb: 37, 99, 235; }
.petak-secondary { --pa: #64748b; --pa-rgb: 100, 116, 139; }

.petak-sepi { --pa: #e2e8f0; --pa-rgb: 148, 163, 184; color: var(--teks-redup); }
.petak-sepi .petak-angka { background: #f1f5f9; color: #94a3b8; }

/* =============================================== halaman bantuan & panduan */
.text-warna-aksen { color: var(--aksen); }

/* Rantai alur di kepala halaman bantuan. Dibuat dari simpul + panah, bukan
   gambar: teksnya tetap bisa dicari peramban dan dibaca pembaca layar. */
.rantai-alur { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }

.rantai-simpul {
  padding: .2rem .6rem;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--aksen-lembut);
  color: var(--aksen);
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
}

.rantai-panah { color: #cbd5e1; font-size: .7rem; }

/* Satu butir fitur: nama, apa fungsinya, kenapa dirancang begitu. */
.butir-fitur {
  padding: .75rem .9rem;
  border: 1px solid var(--garis);
  border-left: 3px solid var(--aksen-lembut);
  border-radius: .5rem;
  background: #fff;
}

.butir-fitur:hover { border-left-color: var(--aksen); }

.butir-fitur .bf-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: .3rem;
}

.butir-fitur .bf-nama {
  font-weight: 700;
  color: var(--teks-tegas);
  text-decoration: none;
}

a.bf-nama:hover { color: var(--aksen); }
.butir-fitur .bf-nama .bi { font-size: .72rem; opacity: .55; }
.butir-fitur .bf-apa { margin: 0 0 .35rem; font-size: .84rem; }

.butir-fitur .bf-kenapa {
  margin: 0;
  padding-top: .35rem;
  border-top: 1px dashed var(--garis);
  font-size: .78rem;
  color: var(--teks-redup);
}

/* Tangga langkah panduan cepat. Nomornya di luar kartu supaya urutannya
   terbaca sekilas tanpa perlu menghitung kartu. */
.tangga { list-style: none; margin: 0; padding: 0; }

.tangga-anak {
  position: relative;
  display: flex;
  gap: .85rem;
  padding-bottom: .85rem;
}

/* Garis penghubung antar langkah — berhenti di langkah terakhir. */
.tangga-anak:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2.4rem;
  bottom: 0;
  width: 2px;
  background: var(--garis);
}

.tangga-nomor {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  margin-top: .35rem;
  border-radius: 50%;
  background: var(--aksen);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
}

.tangga-kartu { flex: 1 1 auto; }

.tangga-awas {
  display: flex;
  gap: .5rem;
  padding: .5rem .7rem;
  border-radius: .4rem;
  background: rgba(217, 119, 6, .09);
  border-left: 3px solid #d97706;
  font-size: .8rem;
  color: #78350f;
}

.tangga-awas .bi { color: #d97706; flex: 0 0 auto; margin-top: .1rem; }
.tangga-awas code { background: rgba(0, 0, 0, .06); padding: 0 .25rem; border-radius: .2rem; }

/* Tautan bantuan di kaki sidebar — selalu terlihat tanpa menggulung. */
.sidebar-kaki .kaki-bantuan {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .5rem;
  border-radius: .5rem;
  color: var(--sidebar-teks);
  text-decoration: none;
  font-size: .78rem;
}

.sidebar-kaki .kaki-bantuan:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar-kaki .kaki-bantuan .bi { color: var(--sidebar-aktif); font-size: .95rem; }

/* ============================================================ ALUR PER PERAN
   Tangga langkah bernomor untuk halaman "Saya Mulai dari Mana?". Bedanya
   dengan `.tangga` di panduan cepat: yang ini lebih rapat karena satu peran
   bisa punya sepuluh langkah, dan nomornya memakai penghitung CSS supaya
   penomorannya tidak perlu ditulis di template. */
.alur-langkah {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: al;
}

.alur-langkah .al-butir {
  counter-increment: al;
  position: relative;
  padding: 0 0 .8rem 2.1rem;
  border-left: 2px solid var(--garis);
  margin-left: .7rem;
}

.alur-langkah .al-butir:last-child { border-left-color: transparent; padding-bottom: .2rem; }

.alur-langkah .al-butir::before {
  content: counter(al);
  position: absolute;
  left: -.78rem;
  top: -.1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--aksen);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}

.alur-langkah .al-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: .15rem;
}

.alur-langkah .al-judul {
  font-weight: 700;
  color: var(--teks-tegas);
  text-decoration: none;
}

a.al-judul:hover { color: var(--aksen); }
.alur-langkah .al-judul .bi { font-size: .72rem; opacity: .55; }
.alur-langkah .al-isi { margin: 0; font-size: .84rem; color: var(--teks-redup); }

/* Tab bantuan: jangan biarkan judul bab terpotong di layar sempit. */
#tab-bantuan .nav-link { font-size: .82rem; white-space: nowrap; }
#tab-bantuan { flex-wrap: wrap; }
#daftar-peran .nav-link { font-size: .84rem; }

/* ==================================================== TOMBOL BANTUAN SIDEBAR
   Tiga tombol ikon sejajar di kaki sidebar. Namanya sengaja TIDAK ditulis di
   samping ikon: tiga label berdampingan memaksa sidebar melebar atau teksnya
   terpotong, dan label terpotong lebih membingungkan daripada tidak ada label.
   Namanya muncul sebagai gelembung saat disentuh kursor — memakai CSS, bukan
   tooltip Bootstrap, supaya tidak perlu inisialisasi JavaScript di tiap
   halaman (yang kalau terlupa membuat tombolnya diam-diam kehilangan nama). */
.kaki-bantuan-grup {
  display: flex;
  gap: .35rem;
  flex: 0 0 auto;
}

.kaki-bantuan-tombol {
  position: relative;
  flex: 0 0 auto;
  min-width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .28rem 0;
  border-radius: .5rem;
  color: var(--sidebar-teks);
  background: rgba(255, 255, 255, .05);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.kaki-bantuan-tombol:hover,
.kaki-bantuan-tombol:focus-visible {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.kaki-bantuan-tombol .bi {
  font-size: .92rem;
  color: var(--sidebar-aktif);
}

.kaki-bantuan-tombol .kbt-nama {
  position: absolute;
  bottom: calc(100% + .4rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .72rem;
  line-height: 1;
  padding: .35rem .5rem;
  border-radius: .35rem;
  background: #111827;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s;
  z-index: 30;
  pointer-events: none;
}

.kaki-bantuan-tombol:hover .kbt-nama,
.kaki-bantuan-tombol:focus-visible .kbt-nama {
  opacity: 1;
  visibility: visible;
}

/* ========================================================== LAMPIRAN & FOTO */
.lampiran-potret { display: inline-flex; flex-direction: column; align-items: center; }

.lampiran-potret .lp-bingkai {
  width: var(--lp-ukuran, 6rem);
  height: var(--lp-ukuran, 6rem);
  overflow: hidden;
  border: 2px solid var(--garis);
  background: var(--latar-lembut, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .6rem;
}

.lampiran-potret .lp-bingkai.lp-bulat { border-radius: 50%; }
.lampiran-potret .lp-bingkai img { width: 100%; height: 100%; object-fit: cover; }

/* Gambar mini di sel daftar (mis. daftar pelanggan). */
.foto-mini {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .4rem;
  object-fit: cover;
  border: 1px solid var(--garis);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--latar-lembut, #f8fafc);
}
.foto-mini-kosong { color: var(--teks-redup); font-size: 1.1rem; }
td.kolom-foto, th.kolom-foto { width: 3.5rem; }

.lampiran-potret .lp-kosong {
  color: var(--teks-redup);
  font-size: calc(var(--lp-ukuran, 6rem) * .45);
  line-height: 1;
}

/* Area kerja pemotong. Tingginya dipatok supaya modal tidak melompat-lompat
   mengikuti rasio foto yang dipilih — foto potret dan lanskap sama-sama muat. */
.lp-area-potong {
  max-height: 22rem;
  min-height: 12rem;
  background: #0f172a;
  border-radius: .5rem;
  overflow: hidden;
}

.lp-area-potong img { display: block; max-width: 100%; }

.lampiran-galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .75rem;
}

.lampiran-galeri .lg-butir { margin: 0; }

.lampiran-galeri .lg-muka {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7.5rem;
  border: 1px solid var(--garis);
  border-radius: .5rem;
  overflow: hidden;
  background: var(--latar-lembut, #f8fafc);
}

.lampiran-galeri .lg-muka img { width: 100%; height: 100%; object-fit: cover; }
.lampiran-galeri .lg-ikon { font-size: 2.2rem; color: var(--teks-redup); }

.lampiran-galeri figcaption {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-top: .35rem;
  font-size: .74rem;
}

.lampiran-galeri .lg-nama {
  font-weight: 600;
  color: var(--teks-tegas);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lampiran-galeri .lg-meta { color: var(--teks-redup); }

/* Pratinjau layar modul terkunci di halaman Bantuan. Sengaja kecil dan
   berkeliling garis putus: ia BUKAN layar yang sedang dilihat pengguna
   melainkan gambar dari modul yang belum aktif, dan itu harus terbaca dari
   bentuknya sebelum keterangannya dibaca. */
.butir-fitur .bf-pratinjau {
  display: block;
  margin: .5rem 0 .45rem;
  border: 1px dashed var(--garis);
  border-radius: .45rem;
  padding: .3rem;
  text-decoration: none;
  background: var(--latar-lembut, #f8fafc);
}

.butir-fitur .bf-pratinjau img {
  display: block;
  width: 100%;
  border-radius: .3rem;
}

.butir-fitur .bf-pratinjau .bf-cap {
  display: block;
  padding-top: .3rem;
  font-size: .68rem;
  color: var(--teks-redup);
}

.butir-fitur .bf-pratinjau:hover { border-color: var(--aksen); }

/* Uang dan kuantitas rata kanan — di sel tabel maupun di dalam isian.
   Angka yang rata kiri memaksa mata membandingkan panjang teks, bukan
   besaran; satu nol lebih tidak kelihatan sampai terlambat. */
.angka-kanan { text-align: right; }

/* Gambar mini di laporan foto. Ukurannya dikunci supaya baris tabel tidak
   melonjak-lonjak mengikuti bentuk fotonya — daftar yang tinggi barisnya
   berbeda-beda jauh lebih sulit dipindai mata daripada yang seragam. */
.lampiran-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: .4rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}
.lampiran-mini-ikon { font-size: 1.4rem; color: var(--bs-secondary-color); }

/* Jalur menu di dalam satu langkah panduan. Diberi jarak sendiri supaya
   terbaca sebagai URUTAN yang dikerjakan, bukan sebagai daftar sifat. */
.urutan-layar { padding-left: 1.1rem; margin-bottom: .5rem; }
.urutan-layar li { margin-bottom: .25rem; }

/* Langkah di panduan mendalam. Diberi jarak antarbaris supaya terbaca sebagai
   URUTAN yang dikerjakan satu per satu, bukan sebagai daftar sifat. */
.panduan-langkah { padding-left: 1.2rem; margin-bottom: .75rem; }
.panduan-langkah li { margin-bottom: .45rem; }

/* =========================================================== PUSAT BANTUAN
   Bentuknya mengikuti meja informasi operasional: jalur transaksi memberi
   orientasi, sedangkan empat pintu masuk memisahkan tujuan pengguna. */
.help-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--garis);
  border-radius: .9rem;
  color: #f8fafc;
  background: linear-gradient(120deg, #172554 0%, #1e3a5f 58%, #0f766e 135%);
}

.help-hero::after {
  content: "";
  position: absolute;
  width: 15rem;
  height: 15rem;
  right: -6rem;
  top: -8rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 2.5rem rgba(255, 255, 255, .035), 0 0 0 5rem rgba(255, 255, 255, .025);
}

.help-hero-copy { position: relative; z-index: 1; max-width: 52rem; }
.help-hero h2 { max-width: 42rem; margin: .25rem 0 .5rem; font-size: clamp(1.35rem, 3vw, 2.1rem); letter-spacing: -.025em; }
.help-hero p { max-width: 45rem; margin: 0; color: rgba(255, 255, 255, .76); }
.help-eyebrow { display: block; color: var(--aksen, #0f766e); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.help-hero .help-eyebrow { color: #99f6e4; }

.help-rantai { position: relative; z-index: 1; display: flex; align-items: center; gap: .4rem; margin-top: 1.25rem; overflow-x: auto; scrollbar-width: thin; }
.help-rantai span { flex: 0 0 auto; padding: .28rem .55rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 2rem; background: rgba(255, 255, 255, .08); font-size: .7rem; font-weight: 700; }
.help-rantai i { color: #5eead4; font-size: .7rem; }

.help-search-wrap { position: relative; }
.help-search-wrap > .bi { position: absolute; top: 50%; left: 1rem; z-index: 2; transform: translateY(-50%); color: var(--teks-redup); }
.help-search-wrap .form-control { min-height: 3.2rem; padding-left: 2.75rem; padding-right: 3rem; border-radius: .8rem; box-shadow: 0 .3rem 1rem rgba(15, 23, 42, .06); }
.help-search-clear { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); color: var(--teks-redup); }
.help-search-results { max-height: 28rem; overflow: auto; }
.help-result-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.help-result { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border: 1px solid var(--garis); border-radius: .55rem; background: var(--bs-body-bg); color: var(--teks-tegas); text-align: left; }
.help-result:hover, .help-result:focus-visible { border-color: var(--aksen); background: var(--latar-lembut); }
.help-result > i { color: var(--aksen); font-size: 1.1rem; }
.help-result span { display: flex; flex-direction: column; font-weight: 700; }
.help-result small { color: var(--teks-redup); font-size: .68rem; font-weight: 500; }

.help-main-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.help-main-nav button { display: flex; align-items: center; gap: .75rem; min-height: 5rem; padding: .85rem; border: 1px solid var(--garis); border-radius: .7rem; background: var(--bs-body-bg); color: var(--teks-tegas); text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
.help-main-nav button:hover { transform: translateY(-2px); border-color: var(--aksen); }
.help-main-nav button.active { border-color: var(--aksen); box-shadow: inset 0 -3px 0 var(--aksen); background: color-mix(in srgb, var(--aksen) 7%, var(--bs-body-bg)); }
.help-main-nav button > i { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: .55rem; color: var(--aksen); background: color-mix(in srgb, var(--aksen) 12%, transparent); font-size: 1.15rem; }
.help-main-nav span { display: flex; flex-direction: column; line-height: 1.2; }
.help-main-nav small { margin-top: .2rem; color: var(--teks-redup); font-size: .7rem; }

.help-content { min-height: 28rem; }
.help-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--garis); }
.help-section-heading h2 { margin: .15rem 0 0; font-size: 1.35rem; }
.help-section-heading p { max-width: 38rem; margin: 0; color: var(--teks-redup); font-size: .85rem; }
.help-split { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.help-subnav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .3rem; padding: .45rem; border: 1px solid var(--garis); border-radius: .65rem; background: var(--bs-body-bg); }
.help-subnav button, .help-topic-nav button { border: 0; border-radius: .45rem; background: transparent; color: var(--teks-tegas); font-size: .82rem; font-weight: 600; text-align: left; }
.help-subnav button { padding: .55rem .65rem; }
.help-subnav button.active, .help-topic-nav button.active { color: var(--aksen); background: color-mix(in srgb, var(--aksen) 10%, transparent); }
.help-topic-nav { display: flex; flex-wrap: wrap; gap: .35rem; padding: .4rem; margin-bottom: 1rem; border: 1px solid var(--garis); border-radius: .65rem; background: var(--bs-body-bg); }
.help-topic-nav button { padding: .5rem .7rem; }
.help-rules li { padding: .45rem 0; }
.help-sop-accordion .accordion-button { font-weight: 700; }
.help-sop-accordion .accordion-body > :last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
  .help-main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-split { grid-template-columns: 1fr; }
  .help-subnav { position: static; flex-direction: row; overflow-x: auto; }
  .help-subnav button { flex: 0 0 auto; }
}

@media (max-width: 575.98px) {
  .help-result-list, .help-main-nav { grid-template-columns: 1fr; }
  .help-main-nav button { min-height: 4rem; }
  .help-section-heading { display: block; }
  .help-section-heading p { margin-top: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .help-main-nav button { transition: none; }
}


/* ------------------------------------------------------------------ toast
   Warna per peran pesan; kelasnya dipasang window.toast() di app.js. */
.toastify.toast-elang {
  background: #fff;
  color: var(--teks-tegas, #111827);
  border-left: 5px solid var(--bs-info);
  border-radius: var(--radius, .5rem);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  max-width: min(420px, calc(100vw - 2rem));
  font-size: .92rem;
  padding: .75rem 2.25rem .75rem 1rem;
}
.toastify.toast-success { border-left-color: var(--bs-success); }
.toastify.toast-danger  { border-left-color: var(--bs-danger); }
.toastify.toast-warning { border-left-color: var(--bs-warning); }
.toastify.toast-info    { border-left-color: var(--aksen); }
.toastify.toast-elang .toast-close { color: var(--bs-secondary-color); opacity: .8; }


/* ------------------------------------------------------------ tab halaman
   Bar tab untuk butir menu bertab (app/menu.py `_grup_tab`). Tiap tab adalah
   halaman sendiri; bar ini hanya menunjukkan saudara-saudaranya. */
.tab-halaman {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-bottom: 2px solid var(--garis);
}
.tab-halaman .nav-link {
  white-space: nowrap;
  color: var(--bs-secondary-color);
  font-weight: 500;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
  padding: .55rem .9rem;
}
.tab-halaman .nav-link .bi { color: inherit; }
.tab-halaman .nav-link:hover { color: var(--aksen); background: var(--aksen-lembut); }
.tab-halaman .nav-link.active {
  color: var(--aksen);
  font-weight: 600;
  background: transparent;
  border-bottom-color: var(--aksen);
}