/* ARMADA WMH custom components */
body { overflow-x: clip; }
.lbl { display:block; font-size:.78rem; font-weight:600; color:#475569; margin-bottom:.3rem; }
.inp { width:100%; border:1px solid #cbd5e1; border-radius:.65rem; padding:.55rem .8rem; font-size:.9rem; background:#fff; }
.inp:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.inp-file { width:100%; font-size:.85rem; border:1px dashed #cbd5e1; border-radius:.65rem; padding:.5rem .8rem; background:#f8fafc; }
.inp-file::file-selector-button { background:#2563eb; color:#fff; border:none; border-radius:.5rem; padding:.35rem .8rem; margin-right:.6rem; font-size:.8rem; cursor:pointer; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; background:#2563eb; color:#fff; font-weight:600; font-size:.9rem; border-radius:.65rem; padding:.6rem 1.1rem; transition:.15s; }
.btn-primary:hover { background:#1d4ed8; }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; background:#f1f5f9; color:#334155; font-weight:600; font-size:.9rem; border-radius:.65rem; padding:.6rem 1.1rem; border:1px solid #e2e8f0; transition:.15s; }
.btn-ghost:hover { background:#e2e8f0; }
.btn-danger { display:inline-flex; align-items:center; justify-content:center; background:#dc2626; color:#fff; font-weight:600; font-size:.9rem; border-radius:.65rem; padding:.6rem 1.1rem; }
.btn-danger:hover { background:#b91c1c; }
.page-title { font-size:1.25rem; font-weight:800; color:#0f172a; }
.metric { background:#fff; border-radius:1rem; padding:1rem; display:flex; align-items:center; gap:.9rem; box-shadow:0 1px 3px rgba(15,23,42,.08); border:1px solid #f1f5f9; }
.metric-ic { width:3rem; height:3rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.metric-num { font-size:1.5rem; font-weight:800; color:#0f172a; line-height:1.1; }
.metric-lbl { font-size:.72rem; color:#64748b; }
.card { background:#fff; border-radius:1rem; padding:1.1rem 1.25rem; box-shadow:0 1px 3px rgba(15,23,42,.08); border:1px solid #f1f5f9; }
.card-title { font-weight:700; margin-bottom:.75rem; color:#0f172a; }
.nav-link { display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; padding:.7rem .9rem; border-radius:.7rem; font-size:.92rem; font-weight:500; color:#475569; }
.nav-link i { width:1.4rem; text-align:center; color:#94a3b8; }
.nav-link:hover { background:#f1f5f9; }
.nav-link.active { background:#eff6ff; color:#2563eb; font-weight:700; }
.nav-link.active i { color:#2563eb; }
.modal { position:fixed; inset:0; z-index:60; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-box { background:#fff; border-radius:1.1rem; width:100%; margin:auto; box-shadow:0 25px 50px rgba(0,0,0,.25); animation:pop .18s ease-out; max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem); display:flex; flex-direction:column; }
@keyframes pop { from { transform:scale(.96); opacity:0; } to { transform:scale(1); opacity:1; } }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid #f1f5f9; flex-shrink:0; }
.modal-head h3 { font-weight:800; color:#0f172a; font-size:1.05rem; }
.modal-x { width:2.2rem; height:2.2rem; border-radius:.6rem; color:#64748b; }
.modal-x:hover { background:#f1f5f9; }
.modal-body { padding:1.25rem; overflow-y:auto; }
@media (max-width:640px) {
  .modal { padding:.6rem; }
  .modal-box { max-height:calc(100vh - 1.2rem); max-height:calc(100dvh - 1.2rem); }
  .modal-body { padding:1rem; }
  .modal-head { padding:.85rem 1rem; }
  .page-title { font-size:1.1rem; }
}
.chk { display:flex; align-items:center; gap:.5rem; font-size:.85rem; background:#f8fafc; border:1px solid #e2e8f0; border-radius:.6rem; padding:.5rem .7rem; cursor:pointer; }
.badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; }
.badge-blue { background:#dbeafe; color:#1d4ed8; }
.badge-green { background:#dcfce7; color:#15803d; }
.badge-amber { background:#fef3c7; color:#b45309; }
.badge-red { background:#fee2e2; color:#b91c1c; }
.badge-slate { background:#f1f5f9; color:#475569; }
.photo-thumb { position:relative; cursor:zoom-in; border-radius:.8rem; overflow:hidden; border:1px solid #e2e8f0; aspect-ratio:4/3; background:#f1f5f9; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; transition:.2s; }
.photo-thumb:hover img { transform:scale(1.04); }
.photo-thumb .tag { position:absolute; left:.5rem; bottom:.5rem; }
.photo-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#94a3b8; font-size:.75rem; gap:.3rem; }
.pf-lbl { font-size:.72rem; font-weight:600; color:#64748b; margin-bottom:.25rem; }
.pf-val { font-size:.92rem; font-weight:600; color:#0f172a; word-break:break-word; }
.toast-item { background:#0f172a; color:#fff; border-radius:.8rem; padding:.75rem 1rem; font-size:.88rem; box-shadow:0 10px 25px rgba(0,0,0,.25); display:flex; align-items:center; gap:.6rem; pointer-events:none; position:relative; overflow:hidden; border-left:4px solid transparent; animation:toastIn .28s cubic-bezier(.21,1.02,.73,1); }
.toast-ok { border-left-color:#10b981; }
.toast-err { border-left-color:#ef4444; }
.toast-item.toast-hide { animation:toastOut .25s ease-in forwards; }
.toast-bar { position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:left; animation:toastBar 3s linear forwards; }
.toast-ok .toast-bar { background:#10b981; }
.toast-err .toast-bar { background:#ef4444; }
@keyframes toastIn { from { opacity:0; transform:translateY(14px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes toastOut { to { opacity:0; transform:translateY(10px) scale(.95); } }
@keyframes toastBar { from { transform:scaleX(1); } to { transform:scaleX(0); } }
/* validasi form */
.inp-invalid { border-color:#ef4444 !important; background-color:#fef2f2 !important; animation:shake .32s ease; }
.inp-invalid:focus { outline:2px solid #fecaca; outline-offset:0; }
.field-err { color:#dc2626; font-size:.75rem; margin-top:.3rem; display:flex; align-items:center; gap:.3rem; animation:fadeSlideIn .2s ease-out; }
.shake { animation:shake .32s ease; }
@keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(4px); } }
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
#sidebar { transition:transform .2s ease; }
/* Backdrop drawer mobile: styling eksplisit (tidak tergantung JIT Tailwind) */
#sidebar-backdrop { position:fixed; inset:0; z-index:45; background:rgba(15,23,42,.55); }
@media (min-width:1024px) {
  #sidebar { transform:translateX(0) !important; }
  #sidebar-backdrop { display:none !important; }
  #main { margin-left:16rem; }
}
.xs\:inline { display:none; }
@media (min-width:400px) { .xs\:inline { display:inline; } }
/* Filter kendaraan di navbar: option dropdown harus terbaca (bg putih) */
#global-vehicle-filter { color:#fff; }
#global-vehicle-filter option { color:#0f172a; background:#fff; }
/* Toggle switch (pengaturan) */
.toggle { width:3rem; height:1.65rem; border-radius:999px; background:#cbd5e1; position:relative; transition:background .2s; flex-shrink:0; }
.toggle .toggle-dot { position:absolute; top:.2rem; left:.2rem; width:1.25rem; height:1.25rem; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s; }
.toggle.on { background:#2563eb; }
.toggle.on .toggle-dot { left:1.55rem; }
/* Overlay loading global: tampil saat request API berjalan (diatur via JS Loader).
   Pakai display none/flex sendiri agar tidak tergantung urutan class Tailwind. */
#global-loader { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.45); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
#global-loader.show { display:flex; }
#global-loader .loader-card { background:#fff; border-radius:1rem; padding:1.5rem 2rem; box-shadow:0 25px 50px rgba(0,0,0,.25); display:flex; flex-direction:column; align-items:center; gap:.75rem; animation:loaderPop .25s ease-out; }
.loader-spinner { width:3rem; height:3rem; border-radius:9999px; border:4px solid #dbeafe; border-top-color:#2563eb; animation:loaderSpin .8s linear infinite; }
.loader-text { font-size:.875rem; font-weight:600; color:#475569; margin:0; }
@keyframes loaderSpin { to { transform:rotate(360deg); } }
@keyframes loaderPop { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }