:root { --brand: #1f3864; --brand-2: #2e5aa8; }
body { background: #f4f6fa; font-size: .93rem; }
.app-nav { background: var(--brand); }
.app-nav .nav-link.active { font-weight: 600; background: rgba(255,255,255,.12); border-radius: .4rem; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: linear-gradient(135deg,#1f3864,#2e5aa8); }
.auth-card { width: 100%; max-width: 420px; }
.card { border: 0; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.kpi { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; border-left: 4px solid var(--brand-2); }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16,24,40,.12); }
.kpi .kpi-val { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.kpi .kpi-lbl { font-size: .78rem; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }
.kpi.k-green { border-left-color: #198754; } .kpi.k-red { border-left-color: #dc3545; }
.kpi.k-amber { border-left-color: #fd7e14; } .kpi.k-gray { border-left-color: #6c757d; }
.chart-box { position: relative; height: 250px; }
.chart-box.tall { height: 380px; }
.chart-title { font-size: .9rem; font-weight: 600; color: var(--brand); }
.chart-hint { font-size: .72rem; color: #8a94a6; }
.filter-bar .form-select, .filter-bar .form-control { font-size: .85rem; }
table.dataTable td, table.dataTable th { vertical-align: middle; }
.badge-status-Aktif { background: #198754; } .badge-status-Tidak\ Digunakan { background: #fd7e14; }
.badge-status-Dihibahkan { background: #0dcaf0; color: #000; } .badge-status-Diganti { background: #6f42c1; }
.badge-status-Bekas { background: #6c757d; } .badge-status-Hilang { background: #dc3545; }
.kode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; white-space: nowrap; }
.btn-icon { padding: .15rem .4rem; }
.riwayat-diff { font-size: .82rem; }
.riwayat-diff .old { color: #b02a37; text-decoration: line-through; }
.riwayat-diff .new { color: #146c43; font-weight: 600; }
.review-dot { color: #fd7e14; }
@media (max-width: 575px) { body { font-size: .9rem; } .kpi .kpi-val { font-size: 1.3rem; } }

.foto-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.foto-item { position: relative; width: 96px; height: 96px; border-radius: .5rem; overflow: hidden; border: 1px solid #dee2e6; background: #f1f3f5; }
.foto-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.foto-del { position: absolute; top: 2px; right: 2px; border: 0; border-radius: 50%; width: 22px; height: 22px; line-height: 1; padding: 0; background: rgba(0,0,0,.65); color: #fff; font-size: .7rem; }
.scan-card .kode { font-size: .85rem; }
.scan-label { color: #6c757d; width: 38%; font-weight: 400; }

/* Bootstrap bawaan hanya punya row-cols 1-6; kartu ringkasan dashboard memakai 7 kolom di layar lebar */
@media (min-width: 1200px) { .row-cols-xl-7 > * { flex: 0 0 auto; width: 14.2857%; } }

/* Modal tambah/edit: header & tombol tetap terlihat, hanya isi formulir yang menggulir.
   Elemen <form> membungkus header/body/footer, jadi perlu ikut menjadi kolom flex agar gulir Bootstrap bekerja. */
#modalForm .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 100%; }
#modalForm .modal-header, #modalForm .modal-footer { flex: none; }
#modalForm .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }