/* =========================================================
   Transisi antar halaman (Peta <-> Alarm <-> Riwayat <-> menu lain)
   Sebelumnya tiap klik menu terasa seperti "buka tab baru" karena app ini
   multi-page (tiap route = HTML terpisah dari server), bukan SPA. Ini bikin
   perpindahan antar route terasa mulus (fade sebentar, bukan flash putih),
   tanpa perlu menulis ulang seluruh app jadi SPA. Otomatis dipakai browser
   yang mendukung View Transitions untuk navigasi dokumen (Chrome/Edge, dan
   Safari versi baru); di browser lain berperilaku sama seperti biasa
   (navigasi normal, tanpa animasi) — aman, tidak ada efek samping.
   ========================================================= */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: gps-page-out .16s ease-out forwards;
}
::view-transition-new(root) {
  animation: gps-page-in .22s ease-out forwards;
}
@keyframes gps-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes gps-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Rental GPS – Industrial Monochrome System
   ========================================================= */
:root{
  --ink: #0d0d0d;
  --ink-2: #1a1a1a;
  --ink-3: #2b2b2b;
  --line: #d8d8d8;
  --line-strong: #b3b3b3;
  --paper: #f3f3f1;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --text: #141414;
  --text-muted: #63666a;
  --text-soft: #9a9a9a;

  --accent: #141414;
  --accent-contrast: #ffffff;

  /* status tones stay muted/desaturated, not saccharine colors */
  --ok-text: #2f5b3d;      --ok-bg: #e6ede7;
  --info-text: #34424f;    --info-bg: #e7ebee;
  --warn-text: #6b5a24;    --warn-bg: #efe9d8;
  --danger-text: #7a2e2e;  --danger-bg: #f1e2e0;
  --muted-text: #5a5a5a;   --muted-bg: #e8e8e6;

  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  --sidebar-w: 236px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
/* Matikan gesture "double-tap to zoom" browser mobile (Safari/Chrome) di
   SELURUH halaman — sebelumnya ini yang bikin klik 2x cepat di tombol/ikon
   menu (di luar area peta) ikut memicu zoom in/out walau maplibre sendiri
   sudah dimatikan double-click-zoom-nya. "manipulation" tetap membiarkan
   scroll & pinch-zoom manual jalan normal, cuma double-tap-zoom yang hilang. */
html, body { touch-action: manipulation; }
button, a, .fab, .gps-bottomnav button, .gps-bottomnav a { touch-action: manipulation; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: var(--ink); }

::selection { background: var(--ink); color: #fff; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }

/* =========================================================
   Sidebar app-shell
   ========================================================= */
.topbar {
  display: none;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 14px;
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 110;
  border-bottom: 1px solid #000;
}
.topbar-brand {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-toggle {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  cursor: pointer;
  width: 34px; height: 34px;
  border-radius: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.nav-toggle svg { display: block; }
.nav-toggle:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.nav-toggle:active { transform: scale(.92); }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--ink);
  color: #d4d4d4;
  display: flex;
  flex-direction: column;
  z-index: 120;
  border-right: 1px solid #000;
  transition: transform .2s ease;
  /* position:fixed = di luar alur body, jadi padding-top body di atas tidak
     kena; disamakan manual supaya menu tidak ketutup notch saat drawer dibuka. */
  padding-top: env(safe-area-inset-top);
  overflow-y: auto;
}
.sidebar-brand {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  border-bottom: 1px solid #262626;
}
.sidebar-close {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: #9c9c9c;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.sidebar-brand .dot {
  width: 8px; height: 8px;
  background: #fff;
  display: inline-block;
}
.sidebar-links {
  flex: 0 1 auto;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}
.sidebar-links a {
  color: #9c9c9c;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.sidebar-links a .ic {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b6b6b;
  flex-shrink: 0;
  transition: color .12s ease;
}
.sidebar-links a .ic svg { width: 100%; height: 100%; }
.sidebar-links a:hover .ic { color: #ccc; }
.sidebar-links a.active .ic { color: #fff; }
.sidebar-links a:hover { background: #191919; color: #fff; }
.sidebar-links a.active {
  background: #1c1c1c;
  color: #fff;
  border-left-color: #fff;
}
.sidebar-footer {
  margin-top: auto;
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #262626;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-footer .user-card {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-footer .user-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
}
.sidebar-footer .user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.sidebar-footer .user-meta b {
  color: #e2e2e2;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-footer .user-meta span {
  color: #8c8c8c;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: .05em;
}
.sidebar-footer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-footer button.secondary {
  width: 100%;
  margin: 0;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: var(--r-sm);
}
.sidebar-footer button.logout {
  width: 100%;
  background: transparent;
  border: 1px solid #3a3a3a;
  color: #cfcfcf;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .12s ease, border-color .12s ease;
}
.sidebar-footer button.logout:hover { background: #1f1f1f; border-color: #565656; }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,.6);
  z-index: 115;
}

body.with-sidebar { padding-left: var(--sidebar-w); }
body.with-sidebar .page { max-width: 1240px; }

@media (max-width: 860px) {
  body.with-sidebar { padding-left: 0; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.show { display: block; }
  .sidebar-close { display: inline-block; }
}

/* =========================================================
   Layout
   ========================================================= */
.page {
  padding: 30px 28px 52px;
  /* Kontainer ini bagian dari alur normal body (bukan position:fixed kayak
     .gps-shell/.sidebar), jadi cukup nambah ke padding-top yang sudah ada —
     tidak menambah tinggi total halaman lewat body (yang bisa bikin area
     kosong/nge-bounce di bawah), karena box-sizing:border-box menyerap
     tambahan ini di dalam box yang sama. */
  padding-top: calc(30px + env(safe-area-inset-top));
  max-width: 1280px;
  margin: 0 auto;
}
.page h2 {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.page h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 30px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.card {
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color .12s ease, background .12s ease;
}
.grid-fill .card:hover {
  border-color: var(--ink);
  background: var(--surface-2);
}
.grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.grid-fill { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > select,
.row > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  flex: 1 1 160px;
  min-width: 0;
}
.row > button { flex: 0 0 auto; }
.row-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

/* Header halaman (judul + tombol "+ Tambah ..."): kalau judulnya panjang dan meleber
   di layar sempit, jangan dipaksa sejajar — tombol turun ke bawah judul, full width, rapi. */
@media (max-width: 600px) {
  .page > .row-between {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 18px;
  }
  .page > .row-between > h2 { margin-bottom: 4px; }
  .page > .row-between > button.primary { width: 100%; }
}

/* =========================================================
   Tables
   ========================================================= */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  min-width: 560px;
  font-size: 13.5px;
}
th, td { padding: 11px 14px; text-align: left; }
thead tr { border-bottom: 2px solid var(--ink); }
thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  font-weight: 700;
  background: var(--surface-2);
}
tbody tr { border-bottom: 1px solid var(--line); transition: background .1s ease; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

/* Kolom "Aksi" di tabel: tombol kecil rapi sejajar, bukan tombol besar bertumpuk */
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btn-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.3;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.btn-chip:hover { border-color: var(--ink); background: var(--surface-2); }
.btn-chip-danger { color: #ef4444; border-color: #fca5a5; }
.btn-chip-danger:hover { background: #fef2f2; border-color: #ef4444; }
.btn-chip:disabled { opacity: .45; cursor: not-allowed; background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn-chip:disabled:hover { background: var(--surface); border-color: var(--line-strong); }

/* =========================================================
   Forms & Buttons
   ========================================================= */
input, select, textarea, button {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  max-width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* iOS Safari (dan beberapa browser lain) tidak otomatis melebarkan <select>
   mengikuti lebar container flex/grid-nya — select akan sebesar teks
   option terpanjang, jadi bisa tembus keluar layar kalau opsinya panjang
   (mis. "Area diizinkan / hijau (allowed) — mis. kantor, pangkalan").
   input & textarea sebenarnya sudah cenderung stretch di kebanyakan browser,
   tapi disamakan di sini juga supaya konsisten & aman. */
input, select, textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
input[type="date"], input[type="datetime-local"], input[type="time"] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20,20,20,.1);
}
button {
  cursor: pointer;
  background: var(--surface);
  font-weight: 600;
  font-size: 13px;
}
button:hover { border-color: var(--ink); }
button.primary {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  padding: 10px 20px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 12.5px;
  transition: background .12s ease, transform .08s ease;
}
button.primary:hover { background: #2b2b2b; }
button.primary:active { transform: translateY(1px); }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
button.danger { color: #ef4444; border-color: #ef4444; }
button.danger:hover { background: #fef2f2; }

label.field { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; display: block; min-width: 0; }
label.field input, label.field select, label.field textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 6px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text); }

/* "Mulai" & "Selesai" sejajar dalam satu baris supaya tidak jadi dua kotak besar bertumpuk */
.field-pair { display: flex; gap: 12px; }
.field-pair > .field { flex: 1 1 0; min-width: 0; }
@media (max-width: 480px) {
  .field-pair { flex-direction: column; gap: 14px; }
}

form.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  max-width: 640px;
  margin-bottom: 24px;
}
form.panel .full { grid-column: 1 / -1; }
form.panel > * { min-width: 0; }

/* =========================================================
   Misc components
   ========================================================= */
.error-text { color: var(--danger-text); font-size: 13px; font-weight: 600; }
.notice-warning {
  color: var(--warn-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-text);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
}
.muted { color: var(--text-muted); font-size: 13px; }

.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  display: inline-block;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.badge-available { background: var(--ok-bg); color: var(--ok-text); }
.badge-rented { background: var(--info-bg); color: var(--info-text); }
.badge-maintenance { background: var(--warn-bg); color: var(--warn-text); }
.badge-inactive { background: var(--muted-bg); color: var(--muted-text); }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }
.badge-ok { background: var(--ok-bg); color: var(--ok-text); }

#map {
  width: 100%;
  height: 70vh;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
}

.gps-popup { font-family: inherit; min-width: 160px; }
.gps-popup-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.gps-popup-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.gps-popup-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.gps-popup-meta { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.maplibregl-popup-content { padding: 12px 14px; border-radius: var(--r-md); box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.vehicle-card:hover { border-color: var(--ink); background: var(--surface-2); }
.badge-wrap { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }

/* Kartu daftar mobil dibuat lebih ringkas (padding & font lebih kecil, info
   disusun lebih padat) dibanding .card biasa, tapi detail (odometer, trip,
   update terakhir) tetap dipertahankan. */
.vehicle-card {
  padding: 10px 12px;
}
.vehicle-card .vc-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.vehicle-card .vc-plate { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.vehicle-card .vc-model { font-size: 11.5px; color: var(--text-muted); }
.vehicle-card .badge { font-size: 9.5px; padding: 2px 6px; }
.vehicle-card .vc-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

/* checkbox + label sejajar (mis. "Dengan supir", "Support cut-off mesin") */
.checkbox-field {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--text); margin-top: 2px;
}
.checkbox-field input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto; margin: 0 !important; padding: 0; accent-color: var(--ink);
  display: inline-block;
}

/* datetime-local di iOS Safari kadang overflow ke kanan kalau padding terlalu sempit,
   dan tanpa tinggi eksplisit widget native-nya bisa terlihat kosong & terlalu tinggi.
   font-size tetap 16px supaya Safari tidak auto-zoom saat fokus. */
input[type="date"], input[type="datetime-local"], input[type="time"] {
  font-size: 16px;
  padding: 9px 10px;
  text-align: left;
  height: 42px;
  line-height: 1.2;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 480px) {
  input[type="date"], input[type="datetime-local"], input[type="time"] {
    font-size: 16px;
    padding: 9px 8px;
    height: 42px;
  }
}

/* =========================================================
   Login
   ========================================================= */
button.secondary { background: #f3f4f6; color: #111827; border: 1px solid #d1d5db; padding: 6px 12px; font-size: 13px; }
button.secondary:hover { background: #e5e7eb; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(17,24,39,0.5);
  display: none; align-items: center; justify-content: center; z-index: 50;
}
.modal-panel {
  background: #fff; border-radius: 10px; padding: 20px; width: 360px; max-width: 90vw;
}
.modal-panel h3 { margin-top: 0; }
.modal-panel form { display: grid; gap: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.modal-btn { padding: 8px 14px; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; }
.modal-btn.ok { background: #111827; color: #fff; border: none; }
.modal-btn.cancel { background: #f3f4f6; }

/* Halaman login = viewport tunggal yang tetap diam, tidak ada scroll.
   html/body dikunci lewat .login-lock (lihat di bawah), tingginya persis
   100dvh (aman untuk browser mobile dengan address bar yang collapsible). */
html.login-lock, body.login-lock {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.login-wrap {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 600px at 18% 12%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 88%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(circle, rgba(255,255,255,.14) 1.4px, transparent 1.4px),
    linear-gradient(160deg, #0d1117 0%, #0b1420 45%, #0a0f16 100%);
  background-size: auto, auto, 22px 22px, auto;
}
/* Cincin radar yang melebar pelan dari tengah, kesan "mencari sinyal GPS"
   tanpa memakai motif kotak-kotak seperti sebelumnya. */
.login-radar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(122, 200, 255, .35);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  animation: login-radar-sweep 5s ease-out infinite;
}
.login-radar-2 { animation-delay: 1.6s; }
.login-radar-3 { animation-delay: 3.2s; }
@keyframes login-radar-sweep {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: .6; }
  100% { transform: translate(-50%, -50%) scale(22); opacity: 0; }
}
/* Titik-titik "sinyal GPS" mengambang, sekadar dekorasi ringan
   supaya halaman login terasa seperti dashboard pelacakan, bukan form biasa. */
.login-blip {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ac8ff;
  box-shadow: 0 0 10px 2px rgba(122,200,255,.6);
  opacity: .8;
  pointer-events: none;
}
.login-blip::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(122,200,255,.6);
  opacity: .5;
  animation: login-ping 2.4s ease-out infinite;
}
.login-blip-1 { top: 16%; left: 14%; }
.login-blip-2 { bottom: 22%; right: 16%; }
.login-blip-2::after { animation-delay: .8s; }
.login-blip-3 { top: 62%; left: 9%; }
.login-blip-3::after { animation-delay: 1.5s; }
@keyframes login-ping {
  0%   { transform: scale(.4); opacity: .6; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (max-width: 640px) {
  .login-blip, .login-radar { display: none; }
}

.login-box {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 36px 28px 28px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.4) inset;
  text-align: center;
}
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.login-logo img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.login-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 14px;
  padding: 4px 10px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
}
.login-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f8f4e;
  box-shadow: 0 0 0 0 rgba(47,143,78,.5);
  animation: login-dot-pulse 1.8s ease-out infinite;
}
@keyframes login-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,143,78,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(47,143,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,143,78,0); }
}
.login-box h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.login-box .muted { margin-bottom: 20px; }
.login-box .field { text-align: left; }
.login-legal {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,.45);
}
.login-legal strong { color: rgba(255,255,255,.7); }
.login-foot {
  margin: 18px 0 0;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: .02em;
}

/* =========================================================
   GPS mobile-app style map shell (dashboard "Peta" view)
   ========================================================= */
.gps-shell {
  position: fixed;
  inset: 0;
  top: 0;
  background: #0b0b0b;
  z-index: 5;
  display: flex;
  flex-direction: column;
  /* fixed = juga di luar alur body, jadi perlu safe-area sendiri supaya tombol
     "Daftar Unit"/"Cari" & chip online tidak ketutup status bar / notch. */
  padding-top: env(safe-area-inset-top);
}
/* Kunci body-nya juga: tanpa ini, dokumen masih bisa "bounce"/rubber-band
   sedikit (khas iOS) walau tidak ada elemen yang perlu di-scroll, dan pas
   ke-bounce, warna body (bukan gps-shell) sempat kelihatan sekilas sebagai
   celah/jarak di tepi bawah layar. Dikunci total supaya benar-benar fullscreen. */
body.gps-body {
  height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}
body.with-sidebar .gps-shell { left: var(--sidebar-w); }
@media (max-width: 860px) {
  body.with-sidebar .gps-shell { left: 0; top: 0; }
}

.gps-map-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.gps-map-area #map {
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  border-radius: 0;
  border: none;
}

/* ----- Panel "Daftar Unit": dulu tab terpisah "Daftar", sekarang jadi 1 icon di peta
   yang membuka panel sliding dari kiri (menutupi peta), simple & minimalis. ----- */
.unit-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 8;
}
.unit-drawer-overlay.show { opacity: 1; pointer-events: auto; }

.unit-drawer {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 84%;
  max-width: 320px;
  background: var(--paper, #fff);
  z-index: 9;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .25s ease;
  box-shadow: 4px 0 24px rgba(0,0,0,.25);
}
.unit-drawer.show { transform: translateX(0); }

.unit-drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.unit-drawer-title { font-weight: 700; font-size: 15px; color: var(--ink); }

.unit-drawer-search { flex: 0 0 auto; padding: 10px 14px 0; }
.unit-drawer-search input { width: 100%; }

.unit-drawer-meta { flex: 0 0 auto; padding: 8px 14px 0; font-size: 11px; }

.unit-drawer-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Kartu unit dibuat lebih ramping/minimalis di dalam panel (bukan grid card besar seperti
   halaman "Unit Saya"), supaya daftar padat unit tetap gampang di-scan sekilas. */
.unit-drawer-list .vehicle-card { padding: 10px 12px; }
.unit-drawer-list .vc-top { flex-wrap: wrap; gap: 2px 8px; }
.unit-drawer-list .vc-meta { font-size: 10.5px; }

.fab-col {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 6;
  top: 12px;
}
.fab-col.left { left: 10px; }
.fab-col.right { right: 10px; }
.fab-col.bottom-left { left: 10px; bottom: 12px; top: auto; flex-direction: column; }

.fab-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fab {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.fab:active { background: var(--surface-2); }
.fab.small { width: 30px; height: 30px; border-radius: 8px; }
.fab svg { width: 18px; height: 18px; }
.fab.small svg { width: 14px; height: 14px; }
.fab.fab-active { background: #2563eb; color: #fff; }
.fab-caption {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 2px 5px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* Marker unit di peta: ikon mobil (yang berotasi mengikuti arah) + label
   plat nomor/nama unit opsional di bawahnya (diaktifkan lewat tombol "Semua Unit").
   Label posisinya absolute supaya tidak mengubah ukuran/anchor marker itu sendiri. */
.unit-marker { position: relative; }
.unit-marker-icon {
  width: 36px;
  height: 36px;
  transform-origin: 50% 50%;
}
.unit-marker-label {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(13,13,13,.82);
  color: #fff;
  padding: 3px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.unit-marker-plate {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.1;
}
.unit-marker-name {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  line-height: 1.1;
}

.gps-vehicle-sheet {
  position: absolute;
  left: 12px; right: 12px; bottom: 14px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.14);
  padding: 0;
  z-index: 7;
  display: none;
  max-height: 34vh;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  --sheet-accent: 20,20,20;
}
.gps-vehicle-sheet.show { display: flex; flex-direction: column; }
.gps-vehicle-sheet[data-status="available"] { --sheet-accent: 21,140,66; box-shadow: 0 16px 40px rgba(21,140,66,.22), 0 2px 8px rgba(0,0,0,.14); }
.gps-vehicle-sheet[data-status="rented"] { --sheet-accent: 37,99,235; box-shadow: 0 16px 40px rgba(37,99,235,.22), 0 2px 8px rgba(0,0,0,.14); }
.gps-vehicle-sheet[data-status="maintenance"] { --sheet-accent: 196,108,6; box-shadow: 0 16px 40px rgba(196,108,6,.22), 0 2px 8px rgba(0,0,0,.14); }
.gps-vehicle-sheet[data-status="inactive"] { --sheet-accent: 87,87,90; box-shadow: 0 16px 40px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.14); }

/* poin bawah spasi tarik-turun kecil, biar terasa seperti "bottom sheet" */
.sheet-grabber {
  width: 34px; height: 4px;
  border-radius: 3px;
  background: rgba(0,0,0,.12);
  margin: 6px auto 0;
  flex: 0 0 auto;
}

.sheet-header {
  position: relative;
  flex: 0 0 auto;
  color: #fff;
  padding: 10px 14px 11px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
  overflow: hidden;
}
.sheet-header.status-available { background: linear-gradient(135deg, #22b866, #0d7a3a); }
.sheet-header.status-rented { background: linear-gradient(135deg, #4c7cf0, #1d4ed8); }
.sheet-header.status-maintenance { background: linear-gradient(135deg, #f2a53c, #b45309); }
.sheet-header.status-inactive { background: linear-gradient(135deg, #6b6b6e, #37373a); }
/* highlight halus di pojok, kasih kesan "premium" tanpa jadi ramai */
.sheet-header::after {
  content: "";
  position: absolute;
  top: -40px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  filter: blur(2px);
  pointer-events: none;
}
.sheet-header-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 11px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.sheet-header-avatar svg { width: 17px; height: 17px; }
.sheet-header-main { position: relative; min-width: 0; flex: 1; }
.sheet-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sheet-header-plate {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-header-model {
  font-size: 10.5px;
  color: rgba(255,255,255,.55);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-header .badge-wrap { margin-top: 5px; gap: 4px; }
.sheet-header .badge {
  background: rgba(0,0,0,.24);
  color: #fff;
  font-size: 7.5px !important;
  padding: 3px 6px !important;
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  font-weight: 700;
}
.sheet-header .badge-ok { background: rgba(0,0,0,.24); border-color: rgba(255,255,255,.4); }
.sheet-header .badge-danger { background: rgba(0,0,0,.32); border-color: rgba(255,255,255,.2); }

.sheet-close {
  position: relative;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.2);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sheet-close:active { background: rgba(0,0,0,.35); }

.sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 12px;
  min-height: 0;
}

/* ----- baris info ala popup Traccar (ikon + label kiri, nilai kanan) ----- */
.sheet-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 11px;
  border-top: 1px solid var(--line, #eee);
}
.sheet-info-row:first-of-type { border-top: none; }
.sheet-info-ic {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 8px;
  background: rgba(var(--sheet-accent), .1);
  color: rgb(var(--sheet-accent));
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet-info-ic svg { width: 11px; height: 11px; }
.sheet-info-label {
  flex: 0 0 64px;
  color: var(--text-soft);
  font-weight: 600;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.2;
}
.sheet-info-value {
  flex: 1;
  color: var(--text);
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sheet-info-value.dim { color: var(--muted-text, #888); font-style: italic; font-weight: 400; }

/* ----- baris ikon kecil di bawah popup (Lebih lanjut / Riwayat / Kirim / Edit) ----- */
.sheet-icon-row {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 4px 12px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line, #eee);
}
.sheet-icon-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 2px 4px;
  border-radius: 9px;
  border: none;
  background: var(--surface-2, #f4f4f3);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sheet-icon-btn svg { width: 13px; height: 13px; }
.sheet-icon-btn:active { background: var(--line, #eee); }
.sheet-icon-btn.on { color: #fff; background: rgb(var(--sheet-accent)); }
.sheet-icon-btn.danger { color: #fff; background: #c23b3b; }
.sheet-icon-btn:disabled { opacity: .5; pointer-events: none; }

/* Di desktop, kartu ini jadi panel mengambang di pojok kiri-bawah peta,
   bukan melebar penuh selebar layar (dulu left/right:12px membentang
   selebar area peta yang di desktop sudah cukup lebar). */
@media (min-width: 861px) {
  .gps-vehicle-sheet {
    left: 16px;
    right: auto;
    bottom: 16px;
    width: 320px;
    max-height: 60vh;
  }
  .sheet-info-value { -webkit-line-clamp: 3; }
}

/* Chip jumlah online, melayang di atas peta (menggantikan baris toolbar Admin/online) */
.gps-map-status {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--ok-text);
  background: #fff;
  border: 1px solid var(--ok-text);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.gps-bottomnav {
  flex: 0 0 auto;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
  padding: 5px 0 max(5px, env(safe-area-inset-bottom));
  position: relative;
  z-index: 6;
}
.gps-bottomnav a, .gps-bottomnav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
}
.gps-bottomnav a svg, .gps-bottomnav button svg { width: 18px; height: 18px; }
.gps-bottomnav .active { color: #2563eb; }

/* Di desktop, sidebar kiri sudah selalu terbuka permanen (lihat body.with-sidebar),
   jadi tombol "Pengaturan" di bottom nav tidak punya efek apa pun kalau tetap tampil —
   klik-nya cuma menambah class .open yang tidak berpengaruh saat sidebar sudah terlihat.
   Sembunyikan khusus tombol ini di desktop; Memantau/Alarm/Riwayat tetap berguna sebagai
   akses cepat dan tetap ditampilkan. */
@media (min-width: 861px) {
  #nav-pengaturan { display: none; }
}

  .fab.spin svg { animation: fab-spin .6s linear; }
  @keyframes fab-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .gps-map-status.flash { animation: chip-flash .5s ease; }
  @keyframes chip-flash { 0% { background: #dcfce7; } 100% { background: #fff; } }

.gps-open-full { display: none; }
@media (max-width: 860px) {
  .gps-open-full {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    background: var(--ink);
    color: #fff;
    border: none;
    padding: 9px 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 860px) {
  .page { padding: 18px 14px 36px; }
  form.panel { grid-template-columns: 1fr; max-width: 100%; padding: 16px; }
  .login-box { padding: 26px 20px; }
  #map {
    height: 68vh;
    width: calc(100% + 28px);
    margin: 0 -14px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .grid-fill { grid-template-columns: 1fr; }
  th, td { padding: 10px; font-size: 13px; }
}

@media (max-width: 480px) {
  .page h2 { font-size: 17px; }
  .topbar-brand { font-size: 13px; }
  form.panel { padding: 14px; gap: 12px; }
  .card { padding: 14px; }
}

/* ----- quick bottom nav (Peta/Alarm/Riwayat) di halaman selain dashboard, mobile only ----- */
.quick-bottomnav {
  display: none;
}
@media (max-width: 860px) {
  body.with-quicknav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .quick-bottomnav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    padding: 5px 0 max(5px, env(safe-area-inset-bottom));
    z-index: 40;
  }
  .quick-bottomnav a, .quick-bottomnav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 2px 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-soft);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }
  .quick-bottomnav a svg, .quick-bottomnav button svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .quick-bottomnav a.active { color: #2563eb; }
}