/* =========================================================
   Sistem Pengecekan & Pemesanan Barang - PT. Prambanan Dwipaka
   Stylesheet utama (tanpa dependency CDN - jalan offline)
   ========================================================= */

:root {
  --brand-tua: #7A1029;
  --brand: #C81E3F;
  --brand-muda: #FBE7EA;
  --emas: #C9A227;
  --hijau: #15803d;
  --hijau-muda: #e7f7ec;
  --merah: #b91c1c;
  --merah-muda: #fdecec;
  --kuning: #b45309;
  --kuning-muda: #fef6e7;
  --abu: #6b7280;
  --abu-tua: #374151;
  --abu-muda: #f3f4f6;
  --border: #eaecf0;
  --border-kuat: #ccd2dc;
  --radius: 10px;
  --radius-lg: 14px;
  --bayangan: 0 1px 3px rgba(31,36,48,.06), 0 1px 2px rgba(31,36,48,.05);
  --bayangan-hover: 0 6px 16px rgba(31,36,48,.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f5f4f3;
  color: #1f2430;
  font-size: 14px;
  line-height: 1.45;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */
.topbar {
  height: 56px;
  background: var(--brand-tua);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .brand { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.topbar .brand-logo { height: 32px; width: auto; border-radius: 5px; }
.topbar .brand small { font-weight: 400; opacity: .75; font-size: 12px; }
.topbar .brand .slogan {
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  color: var(--emas);
  letter-spacing: .05em;
  margin-left: 2px;
  white-space: nowrap;
}
.topbar .user-info { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.topbar .user-info .role-tag {
  background: rgba(255,255,255,.15);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.topbar .user-info a { color: #fff; opacity: .85; }

.app-shell { display: flex; min-height: calc(100vh - 56px); }

.sidebar {
  width: 230px;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 16px 0;
  flex-shrink: 0;
}
.sidebar .menu-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--abu);
  padding: 12px 20px 6px;
  letter-spacing: .04em;
}
.sidebar a.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: var(--abu-tua);
  font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background .1s ease, color .1s ease;
}
.sidebar a.menu-item:hover { background: var(--abu-muda); text-decoration: none; }
.sidebar a.menu-item.active {
  background: var(--brand-muda);
  border-left-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
}
.badge-menu {
  margin-left: auto;
  background: var(--merah);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  min-width: 10px;
  text-align: center;
}

.content { flex: 1; padding: 24px 28px; max-width: 1180px; }

/* ---------- Mode Layar Lebar (tombol di topbar - sembunyikan menu supaya konten/tabel
   lebar punya lebih banyak ruang baca) - lihat assets/js/layar-lebar.js ---------- */
body.layar-lebar .sidebar { display: none; }
body.layar-lebar .content { max-width: none; }

.breadcrumb { font-size: 12.5px; color: var(--abu); margin-bottom: 10px; }
.breadcrumb a { color: var(--abu); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .pemisah { margin: 0 6px; color: #c7cbd4; }
.breadcrumb .aktif { color: #333; font-weight: 600; }

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 10px; }
.page-header h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; line-height: 1.3; }
.page-header p.subtitle { margin: 0; color: var(--abu); font-size: 13px; line-height: 1.5; }
.role-pill { display: inline-block; vertical-align: middle; font-size: 11.5px; font-weight: 600; color: var(--brand); background: var(--brand-muda); padding: 3px 10px; border-radius: 999px; margin-left: 4px; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid rgba(31,36,48,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--bayangan);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.card h2, .card h3 { margin-top: 0; font-size: 15px; font-weight: 600; color: #1f2430; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
  background: #fff;
  border: 1px solid rgba(31,36,48,.05);
  border-radius: var(--radius);
  box-shadow: var(--bayangan);
  padding: 16px 18px;
  border-left: 3px solid var(--brand);
}
.stat-card .stat-number { font-size: 25px; font-weight: 600; color: var(--brand-tua); }
.stat-card .stat-label { font-size: 12.5px; color: var(--abu); margin-top: 2px; }
.stat-card.warna-kuning { border-left-color: var(--kuning); }
.stat-card.warna-hijau { border-left-color: var(--hijau); }
.stat-card.warna-merah { border-left-color: var(--merah); }

/* ---------- Grid Kotak (kartu ringkas persegi - pengganti tabel panjang di Dashboard) ---------- */
.grid-kotak { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kotak {
  background: #fff;
  border: 1px solid rgba(31,36,48,.05);
  border-left: 3px solid var(--border-kuat);
  border-radius: var(--radius);
  box-shadow: var(--bayangan);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: transform .12s ease, box-shadow .12s ease;
}
a.kotak:hover { text-decoration: none; box-shadow: var(--bayangan-hover); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .kotak { transition: none; } }
.kotak.warna-kuning { border-left-color: var(--kuning); }
.kotak.warna-merah { border-left-color: var(--merah); }
.kotak.warna-hijau { border-left-color: var(--hijau); }
.kotak .kotak-tag { font-size: 10.5px; color: var(--abu); background: var(--abu-muda); padding: 2px 7px; border-radius: 6px; align-self: flex-start; margin-bottom: 2px; }
.kotak .kotak-judul { font-size: 13.5px; font-weight: 700; }
.kotak .kotak-sub { font-size: 12px; color: var(--abu); }
.kotak .badge {
  align-self: flex-start;
  margin-top: 4px;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
  border-radius: 8px;
}
.kotak .btn { width: 100%; margin-top: 8px; }
.kotak .kotak-head { display: flex; align-items: flex-start; gap: 8px; }
.kotak .kotak-head .kotak-ikon { color: var(--abu); margin-top: 1px; flex-shrink: 0; }
.kotak.warna-kuning .kotak-head .kotak-ikon { color: var(--kuning); }
.kotak.warna-hijau .kotak-head .kotak-ikon { color: var(--hijau); }
.kotak.warna-merah .kotak-head .kotak-ikon { color: var(--merah); }

/* ---------- Ringkasan status (pengganti 4 stat-card jadi 1 baris ringkas) ---------- */
.ringkas-status {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(31,36,48,.05);
  border-radius: var(--radius);
  box-shadow: var(--bayangan);
  padding: 14px 20px;
  margin-bottom: 20px;
  font-size: 12.5px;
  color: var(--abu);
}
.ringkas-status .item { display: flex; align-items: baseline; gap: 7px; }
.ringkas-status .item strong { font-size: 18px; font-weight: 600; color: #1f2430; }
.ringkas-status .item.warna-kuning strong { color: var(--kuning); }
.ringkas-status .item.warna-hijau strong { color: var(--hijau); }
.ringkas-status .item.warna-merah strong { color: var(--merah); }

/* ---------- Daftar Kartu (pengganti tabel di Pemesanan Material & Riwayat) ---------- */
.daftar-kartu { display: flex; flex-direction: column; gap: 8px; }
.baris-kartu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid rgba(31,36,48,.05);
  border-radius: var(--radius);
  box-shadow: var(--bayangan);
  padding: 13px 18px;
  transition: transform .12s ease, box-shadow .12s ease;
  animation: kartu-masuk .25s ease backwards;
}
/* Warna berselang (zebra) antar baris - sama seperti table.tabel-data - supaya baris yang
   banyak/berjajar tetap mudah dibedakan satu sama lain hanya dengan sekilas lihat. */
.baris-kartu:nth-child(even) { background: var(--abu-muda); }
.baris-kartu:hover { box-shadow: var(--bayangan-hover); transform: translateY(-1px); }
.baris-kartu:nth-child(1) { animation-delay: 0ms; }
.baris-kartu:nth-child(2) { animation-delay: 30ms; }
.baris-kartu:nth-child(3) { animation-delay: 60ms; }
.baris-kartu:nth-child(4) { animation-delay: 90ms; }
.baris-kartu:nth-child(5) { animation-delay: 120ms; }
.baris-kartu:nth-child(6) { animation-delay: 150ms; }
.baris-kartu:nth-child(7) { animation-delay: 180ms; }
.baris-kartu:nth-child(8) { animation-delay: 210ms; }
.baris-kartu.tersembunyi { display: none; }
.baris-kartu .baris-info { min-width: 0; }
.baris-kartu .baris-judul { font-size: 14px; font-weight: 700; }
.baris-kartu .baris-item { font-size: 12.5px; color: var(--abu-tua); margin-top: 3px; }
.baris-kartu .baris-sub { font-size: 11.5px; color: var(--abu); margin-top: 3px; }
.baris-kartu .baris-aksi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.baris-kartu .baris-detail { color: var(--brand); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; transition: gap .12s ease; }
.baris-kartu .baris-detail:hover { text-decoration: none; opacity: .8; gap: 6px; }
@keyframes kartu-masuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .baris-kartu, .baris-kartu .baris-detail { animation: none; transition: none; }
}

/* ---------- Info alur (disclosure buka/tutup, pengganti teks panjang di bawah judul halaman) ---------- */
.alur-info { margin-bottom: 14px; }
.alur-info summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-muda);
  padding: 5px 12px;
  border-radius: 999px;
  user-select: none;
}
.alur-info summary::-webkit-details-marker { display: none; }
.alur-info summary .panah { transition: transform .15s ease; display: inline-flex; }
.alur-info[open] summary .panah { transform: rotate(90deg); }
.alur-info .isi { font-size: 12.5px; color: var(--abu); margin: 8px 2px 0; line-height: 1.6; }
.alur-info .isi strong { color: #1f2430; }

/* ---------- Kartu lipat (disclosure per-baris, mis. Bank Harga) - supaya daftar yang bisa
   berjumlah ratusan/ribuan (banyak jenis barang) tetap ringan & mudah discan: tertutup dulu,
   detailnya (tabel riwayat harga) baru dirender saat dibuka. `open` di elemen <details> tetap
   membuat kontennya ada di HTML (bukan lazy-load), tapi visualnya ringkas sampai user klik. ---------- */
.kartu-lipat { padding: 0; overflow: hidden; }
.kartu-lipat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 16px 20px;
}
.kartu-lipat-head::-webkit-details-marker { display: none; }
.kartu-lipat-head .panah { transition: transform .15s ease; display: inline-flex; flex-shrink: 0; color: var(--abu); }
.kartu-lipat[open] .kartu-lipat-head .panah { transform: rotate(90deg); }
.kartu-lipat-judul { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.kartu-lipat-isi { padding: 0 20px 18px; }
.daftar-kartu-kosong { color: var(--abu); font-size: 13px; padding: 24px; text-align: center; background: #fff; border: 1px solid rgba(31,36,48,.05); box-shadow: var(--bayangan); border-radius: var(--radius); }

/* ---------- Stepper (alur persetujuan di Detail Pemesanan) ---------- */
.stepper { display: flex; align-items: flex-start; margin-bottom: 4px; }
.stepper .tahap { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.stepper .titik {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--abu-muda);
  border: 2px solid var(--border-kuat);
  color: var(--abu);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stepper .tahap.selesai .titik { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.stepper .tahap.aktif .titik { width: 24px; height: 24px; background: var(--kuning); border-color: var(--kuning); color: #fff; animation: denyut-aktif 2s ease-in-out infinite; }
@keyframes denyut-aktif {
  0%, 100% { box-shadow: 0 0 0 3px var(--kuning-muda); }
  50% { box-shadow: 0 0 0 6px var(--kuning-muda); }
}
@media (prefers-reduced-motion: reduce) { .stepper .tahap.aktif .titik { animation: none; box-shadow: 0 0 0 3px var(--kuning-muda); } }
.stepper .tahap.ditolak .titik { background: var(--merah); border-color: var(--merah); color: #fff; }
.stepper .label { font-size: 10px; color: var(--abu); margin-top: 5px; text-align: center; line-height: 1.25; }
.stepper .tahap.aktif .label, .stepper .tahap.ditolak .label { font-weight: 700; color: #1f2430; }
.stepper .garis { flex: 1; height: 2px; background: var(--border-kuat); margin: 10px -2px 0; }
.stepper .garis.selesai { background: var(--hijau); }
.stepper-catatan { font-size: 12px; color: var(--abu); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ---------- Langkah bernomor (form Tambah Pemesanan) ---------- */
.form-langkah-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.form-langkah-head .nomor {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.form-langkah-head .judul { font-size: 14px; font-weight: 700; }
.form-langkah-head .keterangan { font-size: 12px; color: var(--abu); font-weight: 400; margin-left: 4px; }

/* ---------- Table ---------- */
table.tabel-data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabel-data th, table.tabel-data td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
table.tabel-data th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--abu); border-bottom: 1px solid var(--border-kuat); }
/* Warna berselang (zebra) antar baris - supaya baris yang panjang/berjajar banyak tetap mudah
   dibedakan satu sama lain hanya dengan sekilas lihat, tidak cuma mengandalkan garis tipis
   pemisah. Warna hover dibuat sedikit lebih gelap dari warna baris genap supaya tetap kelihatan
   bedanya saat mengarahkan mouse ke baris genap. */
table.tabel-data tbody tr:nth-child(even) { background: var(--abu-muda); }
table.tabel-data tbody tr:hover { background: #e9eaee; }
.table-wrap { overflow-x: auto; }
/* Kolom Aksi tetap terlihat (lengket) saat tabel di-scroll ke samping - dipakai tabel dengan
   banyak kolom (mis. Perangkat Login) supaya tombol aksi di ujung kanan tidak "hilang" tergeser
   keluar layar begitu tabel lebih lebar dari layar. Latar belakangnya mengikuti warna baris
   genap/hover di atas supaya tidak "belang" putih sendiri saat baris di sekitarnya berwarna. */
.kolom-aksi-lengket { position: sticky; right: 0; background: #fff; box-shadow: -6px 0 6px -6px rgba(31,36,48,.12); }
table.tabel-data tbody tr:nth-child(even) .kolom-aksi-lengket { background: var(--abu-muda); }
table.tabel-data tbody tr:hover .kolom-aksi-lengket { background: #e9eaee; }

/* ---------- Dropdown "Cetak Lampiran" (pilihan format PDF/Excel/Word) ---------- */
.dropdown-cetak { position: relative; display: inline-block; }
.dropdown-cetak > summary { list-style: none; cursor: pointer; }
.dropdown-cetak > summary::-webkit-details-marker { display: none; }
.dropdown-cetak > summary::after { content: ' \25BE'; }
.dropdown-cetak .dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--border-kuat);
  border-radius: var(--radius);
  box-shadow: var(--bayangan);
  min-width: 200px;
  padding: 6px;
  z-index: 20;
  text-align: left;
}
.dropdown-cetak .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #1f2430;
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
}
.dropdown-cetak .dropdown-menu a:hover { background: var(--abu-muda); text-decoration: none; }
/* Tabel input (baris barang di form tambah) punya kolom persentase yang kalau dibiarkan
   menyusut bebas jadi terlalu sempit untuk diketik di layar sempit - kasih lebar minimum
   supaya .table-wrap yang menampungnya scroll ke samping, bukan meremas kolomnya. */
.table-wrap table.tabel-input { min-width: 560px; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.badge-kuning { background: var(--kuning-muda); color: var(--kuning); }
.badge-hijau { background: var(--hijau-muda); color: var(--hijau); }
.badge-merah { background: var(--merah-muda); color: var(--merah); }
.badge-abu { background: var(--abu-muda); color: var(--abu); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform .1s ease, box-shadow .1s ease, opacity .1s ease;
}
.btn:hover { text-decoration: none; opacity: .92; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 6px rgba(200,30,63,.22); }
.btn-success { background: var(--hijau); color: #fff; box-shadow: 0 2px 6px rgba(21,128,61,.2); }
.btn-danger { background: var(--merah); color: #fff; box-shadow: 0 2px 6px rgba(185,28,28,.2); }
.btn-warning { background: var(--kuning); color: #fff; box-shadow: 0 2px 6px rgba(180,83,9,.2); }
.btn-secondary { background: #fff; color: var(--abu-tua); border-color: var(--border-kuat); }
.btn-secondary:hover { border-color: var(--brand); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn + .btn { margin-left: 6px; }

/* ---------- Forms ---------- */
label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--abu-tua); }
.form-group { margin-bottom: 16px; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time],
select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-kuat);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-muda); }
/* Checkbox & radio browser bawaan warnanya biru - samakan ke warna brand supaya
   konsisten di semua tempat (popup konfirmasi, form tambah, akses proyek, dst). */
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
.help-text { font-size: 12px; color: var(--abu); margin-top: 5px; line-height: 1.5; }

table.tabel-input th { background: var(--abu-muda); padding: 8px; font-size: 12.5px; border: 1px solid var(--border-kuat); }
table.tabel-input td { padding: 6px; border: 1px solid var(--border); }
table.tabel-input input, table.tabel-input select { padding: 6px 8px; font-size: 13px; }
/* Warna berselang (zebra) antar baris - sama seperti table.tabel-data & .baris-kartu -
   supaya baris demi baris di tabel input yang panjang tetap mudah dibedakan sekilas lihat. */
table.tabel-input tbody tr:nth-child(even) { background: var(--abu-muda); }
table.tabel-input tbody tr:nth-child(even) input, table.tabel-input tbody tr:nth-child(even) select { background: #fff; }

/* ---------- Alerts / flash ---------- */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.5; border-left: 3px solid transparent; }
.alert-success { background: var(--hijau-muda); color: var(--hijau); border-left-color: var(--hijau); }
.alert-error { background: var(--merah-muda); color: var(--merah); border-left-color: var(--merah); }
.alert-info { background: var(--abu-muda); color: #1f2430; border-left-color: var(--border-kuat); }
.alert-warning { background: var(--kuning-muda); color: var(--kuning); border-left-color: var(--kuning); }

/* ---------- Login page ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-tua), #2b0a12);
  padding: 20px;
}
.login-box {
  background: #fff;
  width: 100%;
  max-width: 360px;
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.login-logo { display: block; height: 56px; width: auto; margin: 0 auto 14px; border-radius: 8px; }
.login-box h1 { font-size: 18px; font-weight: 600; margin: 0 0 2px; text-align: center; color: var(--brand-tua); }
.login-box .sub { text-align: center; color: var(--abu); font-size: 12.5px; margin-bottom: 4px; }
.login-box .slogan {
  display: block;
  text-align: center;
  color: var(--emas);
  font-style: italic;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.login-box .btn { width: 100%; }
.demo-akun { margin-top: 18px; font-size: 11.5px; color: var(--abu); background: var(--abu-muda); padding: 10px 12px; border-radius: 6px; line-height: 1.6; }

/* ---------- Animasi pembuka (splash) saat pertama kali membuka halaman Login ----------
   Logo muncul & membesar sebentar sebelum form login terlihat - murni animasi tampilan,
   TIDAK menunda proses apa pun (form login sudah ada di HTML dari awal, splash cuma
   menutupinya sebentar lalu memudar). Dihilangkan otomatis lewat JS kecil di login.php
   setelah animasi selesai, dan langsung dilewati kalau pengguna mengaktifkan
   "reduce motion" di sistem operasinya. */
.splash-masuk {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-tua), #2b0a12);
  transition: opacity .5s ease, visibility .5s ease;
}
.splash-masuk.splash-keluar { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-masuk .splash-isi { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.splash-masuk .splash-logo {
  height: 84px;
  width: auto;
  border-radius: 10px;
  animation: splashMunculBesar 1s cubic-bezier(.2,.9,.3,1.3) both;
}
.splash-masuk .splash-nama {
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 14.5px;
  color: #fff;
  text-align: center;
}
.splash-masuk .splash-nama small { display: block; font-weight: 400; color: rgba(255,255,255,.65); font-size: 11px; margin-top: 3px; }
.splash-masuk .splash-titik { display: flex; gap: 6px; justify-content: center; }
.splash-masuk .splash-titik span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--emas);
  animation: splashNaikTurun 1s ease-in-out infinite;
}
.splash-masuk .splash-titik span:nth-child(2) { animation-delay: .15s; }
.splash-masuk .splash-titik span:nth-child(3) { animation-delay: .3s; }
@keyframes splashMunculBesar {
  0% { opacity: 0; transform: scale(.4); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes splashNaikTurun {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-masuk { display: none; }
  .splash-masuk .splash-logo, .splash-masuk .splash-titik span { animation: none; }
}

/* ---------- Detail / timeline ---------- */
/* Ditampilkan seperti tabel: tiap .row punya garis pemisah sendiri + warna selang-seling,
   supaya jelas mana batas satu baris dengan baris berikutnya (mudah dibaca). */
.detail-grid { font-size: 14px; margin-bottom: 6px; border-top: 1px solid var(--border); }
.detail-grid .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 30px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
}
.detail-grid .row:nth-child(even) { background: var(--abu-muda); }
.detail-grid .k { color: var(--abu); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 4px 0 14px 26px;
  border-left: 2px solid var(--border);
  margin-left: 6px;
  font-size: 13px;
}
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  /* Hijau (bukan var(--brand)) supaya tetap kontras jelas dari titik merah .tolak di bawah -
     brand sekarang merah juga, jadi dua titik itu akan sama warna kalau dipaksa var(--brand). */
  background: var(--hijau);
  border: 2px solid #fff;
}
.timeline li.tolak::before { background: var(--merah); }
.timeline li .waktu { color: var(--abu); font-size: 11.5px; }

.wrap-akses-ditolak { max-width: 420px; margin: 80px auto; text-align: center; font-family: sans-serif; }

/* ---------- Galeri foto ---------- */
.galeri-foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.galeri-foto-item {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.galeri-foto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Tanda tangan ---------- */
.ttd-preview { max-width: 220px; max-height: 110px; border: 1px solid var(--border); border-radius: 6px; padding: 8px; background: #fff; }

.print-actions { margin-bottom: 14px; }

/* ---------- Popup konfirmasi (pengganti window.confirm bawaan browser) ---------- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.popup-overlay.tampil { display: flex; }
.popup-box {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 100%;
  padding: 22px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: popup-muncul .15s ease;
}
@keyframes popup-muncul {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.popup-box h3 { margin: 0 0 10px; font-size: 16px; color: var(--brand-tua); }
.popup-box p.popup-pesan { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: #333; white-space: pre-line; }
.popup-box .popup-ttd-box {
  background: var(--brand-muda);
  border: 1px solid #f3c9d1;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}
.popup-box .popup-ttd-box label { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; margin: 0; cursor: pointer; color: var(--brand-tua); }
.popup-box .popup-ttd-box input[type=checkbox] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.popup-box .popup-aksi { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.popup-box .popup-aksi .btn:disabled { opacity: .45; cursor: not-allowed; }

/* Pilihan tanda tangan tersimpan vs gambar live di dalam popup-ttd-box (lihat
   assets/js/popup-konfirmasi.js) - dipisah dari style checkbox "bersedia ttd" di atas
   supaya kedua bagian ini kelihatan beda fungsi walau sama-sama di dalam popup-ttd-box. */
.popup-ttd-mode { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.popup-ttd-mode label { font-weight: 600; }
.popup-box .popup-ttd-box input[type=radio] { margin-top: 3px; width: 15px; height: 15px; flex-shrink: 0; }
.popup-ttd-kosong { margin: -2px 0 10px; font-size: 11.5px; font-style: italic; color: #5b6b85; }
.popup-ttd-kanvas-wrap { margin-bottom: 12px; }
.popup-ttd-kanvas-wrap canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  height: 140px;
  background: #fff;
  border: 1px dashed var(--border-kuat);
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}
.popup-ttd-kanvas-aksi { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.popup-ttd-kanvas-aksi .help-text { margin: 0; font-size: 11px; }
.popup-ttd-setuju { border-top: 1px solid #f3c9d1; padding-top: 10px; margin-top: 4px; }

/* ---------- Mode Teks Besar (aksesibilitas) ----------
   Diaktifkan lewat tombol "Teks Besar" di topbar (assets/js/teks-besar.js), disimpan di
   localStorage supaya tetap aktif di halaman/kunjungan berikutnya. CSS di sini didaftar
   spesifik per elemen (bukan cuma menaikkan body{font-size}) karena stylesheet ini memakai
   ukuran piksel tetap di banyak tempat, bukan satuan relatif - jadi menaikkan ukuran body
   saja tidak akan otomatis membesarkan tabel/tombol/label di dalamnya. */
body.teks-besar { font-size: 17px; }
body.teks-besar .topbar .user-info { font-size: 15px; }
body.teks-besar .topbar .user-info .role-tag { font-size: 13px; }
body.teks-besar .sidebar .menu-label { font-size: 12px; }
body.teks-besar .sidebar a.menu-item { font-size: 16px; padding: 12px 20px; }
body.teks-besar .breadcrumb { font-size: 14px; }
body.teks-besar .page-header h1 { font-size: 24px; }
body.teks-besar .page-header p.subtitle { font-size: 15px; }
body.teks-besar table.tabel-data { font-size: 16.5px; }
body.teks-besar table.tabel-data th, body.teks-besar table.tabel-data td { padding: 13px 16px; }
body.teks-besar .badge { font-size: 13px; padding: 4px 12px; }
body.teks-besar .btn { font-size: 16px; padding: 10px 18px; }
body.teks-besar .btn-sm { font-size: 14px; padding: 7px 13px; }
body.teks-besar label { font-size: 15px; }
body.teks-besar input[type=text], body.teks-besar input[type=password], body.teks-besar input[type=number],
body.teks-besar input[type=date], body.teks-besar input[type=time], body.teks-besar select, body.teks-besar textarea {
  font-size: 16px;
  padding: 11px 13px;
}
body.teks-besar .help-text { font-size: 13.5px; }
body.teks-besar .alert { font-size: 16px; }
body.teks-besar .detail-grid { font-size: 16.5px; }
body.teks-besar .detail-grid .k { font-size: 14px; }
body.teks-besar .timeline li { font-size: 15px; }
body.teks-besar .timeline li .waktu { font-size: 13px; }
body.teks-besar .stat-card .stat-number { font-size: 29px; }
body.teks-besar .stat-card .stat-label { font-size: 14px; }
body.teks-besar .popup-box h3 { font-size: 18px; }
body.teks-besar .popup-box p.popup-pesan { font-size: 16px; }
body.teks-besar .login-box .sub { font-size: 14px; }
body.teks-besar .demo-akun { font-size: 13px; }

@media (max-width: 820px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; display: flex; overflow-x: auto; padding: 8px 0; }
  .sidebar .menu-label { display: none; }
  .content { padding: 16px; }

  /* Topbar: brand + role/nama/tombol tidak lagi muat sejajar di layar sempit -
     biarkan turun ke baris kedua, bukan terpotong/meluber ke luar layar. */
  .topbar {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 14px;
  }
  .topbar .brand small, .topbar .brand .slogan { display: none; }
  .topbar .user-info { flex-wrap: wrap; row-gap: 6px; }
  .app-shell { min-height: auto; }
}

@media (max-width: 560px) {
  /* Baris detail (label di kiri, nilai di kanan) jadi satu kolom supaya nilai yang
     panjang (alamat, catatan, dsb) tidak terjepit sempit di sebelah label. */
  .detail-grid .row { grid-template-columns: 1fr; gap: 2px 0; }
  .login-box { padding: 26px 20px; }
}