/* KirimMobil demo - shared design tokens and components.
   Direction: industrial logistics console. Asphalt neutrals, one signal-orange accent,
   status shown with small dots only. Archivo (UI, tabular numbers) + JetBrains Mono (codes, plates). */

:root {
  --aspal-900: #15181c;
  --aspal-800: #1e2329;
  --aspal-700: #2b313a;
  --aspal-500: #5b6470;
  --aspal-400: #7d8692;
  --aspal-300: #aab1ba;
  --garis: #e2ded6;
  --garis-kuat: #cfc9be;
  --kertas: #f5f3ee;
  --permukaan: #ffffff;
  --teks: #1b1f24;
  --teks-2: #555d68;
  --teks-3: #7a828d;
  --aksen: #e8590c;
  --aksen-tua: #c4470a;
  --aksen-muda: #fdebe0;
  --hijau: #2f9e44;
  --kuning: #e6a100;
  --merah: #d6336c;
  --biru: #1c7ed6;
  --radius: 10px;
  --radius-k: 6px;
  --bayang: 0 1px 2px rgba(21, 24, 28, .06), 0 4px 14px rgba(21, 24, 28, .06);
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--teks);
  background: var(--kertas); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.muted { color: var(--teks-2); }
.kecil { font-size: 12.5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.ikon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ikon.k { width: 16px; height: 16px; }
.ikon.b { width: 22px; height: 22px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: var(--radius-k); border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks);
  font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .1s;
}
.btn:hover { border-color: var(--aspal-400); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.utama { background: var(--aksen); border-color: var(--aksen); color: #fff; }
.btn.utama:hover { background: var(--aksen-tua); border-color: var(--aksen-tua); }
.btn.gelap { background: var(--aspal-900); border-color: var(--aspal-900); color: #fff; }
.btn.gelap:hover { background: var(--aspal-700); }
.btn.bahaya { color: var(--merah); }
.btn.bahaya.isi { background: var(--merah); border-color: var(--merah); color: #fff; }
.btn.polos { border-color: transparent; background: transparent; }
.btn.polos:hover { background: rgba(21, 24, 28, .05); }
.btn.lebar { width: 100%; }
.btn.besar { min-height: 48px; font-size: 15px; }
.btn .putar { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: putar .7s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--teks-2); }
.field label .wajib { color: var(--aksen); margin-left: 2px; }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--garis-kuat); border-radius: var(--radius-k);
  background: var(--permukaan); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 76px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--aspal-700); box-shadow: 0 0 0 3px rgba(43, 49, 58, .12); }
.field.galat input, .field.galat select, .field.galat textarea { border-color: var(--merah); }
.field .pesan-galat { font-size: 12.5px; color: var(--merah); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- status ---------- */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--teks); white-space: nowrap; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--aspal-300); flex: none; }
.status.menunggu::before { background: var(--kuning); }
.status.ditugaskan::before { background: var(--aspal-400); box-shadow: 0 0 0 2px rgba(125, 134, 146, .25); }
.status.diterima::before { background: var(--biru); }
.status.dalam_perjalanan::before { background: var(--aksen); box-shadow: 0 0 0 3px rgba(232, 89, 12, .2); }
.status.terkirim::before { background: var(--hijau); }
.status.dibatalkan::before { background: var(--merah); }

/* ---------- panels ---------- */
.panel { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); }
.panel-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--garis); }
.panel-kepala h2, .panel-kepala h3 { font-size: 15px; }
.panel-isi { padding: 16px; }

/* ---------- table ---------- */
.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--garis); white-space: nowrap; vertical-align: middle; }
.tabel th { font-size: 12px; font-weight: 600; color: var(--teks-3); text-transform: uppercase; letter-spacing: .04em; background: #faf9f6; }
.tabel tbody tr { cursor: pointer; transition: background-color .12s; }
.tabel tbody tr:hover { background: #faf8f4; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel .kanan { text-align: right; }
.tabel .sub { display: block; font-size: 12.5px; color: var(--teks-3); }
.tabel.statis tbody tr { cursor: default; }
.tabel.statis tbody tr:hover { background: none; }

/* ---------- toast & modal ---------- */
.toast-wadah { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 24px)); pointer-events: none; }
.toast { background: var(--aspal-900); color: #fff; padding: 12px 16px; border-radius: var(--radius-k); box-shadow: var(--bayang); font-weight: 500; display: flex; gap: 10px; align-items: center; animation: muncul .2s ease-out; pointer-events: auto; }
.toast.galat { background: #8f1d3f; }
@keyframes muncul { from { opacity: 0; transform: translateY(8px); } }

.modal-latar { position: fixed; inset: 0; background: rgba(21, 24, 28, .5); z-index: 2000; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.modal { background: var(--permukaan); width: 100%; max-height: 92dvh; overflow: auto; border-radius: 14px 14px 0 0; padding: 20px 18px max(18px, env(safe-area-inset-bottom)); animation: naik .2s ease-out; }
.modal h3 { font-size: 17px; margin-bottom: 6px; }
.modal .aksi { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
@keyframes naik { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 640px) {
  .modal-latar { align-items: center; padding: 20px; }
  .modal { width: 440px; border-radius: 14px; padding: 22px; }
}

/* ---------- skeleton ---------- */
.kerangka { background: linear-gradient(90deg, #ece9e3 0%, #f4f2ee 50%, #ece9e3 100%); background-size: 200% 100%; animation: kilau 1.3s ease-in-out infinite; border-radius: 6px; }
@keyframes kilau { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- empty / error ---------- */
.kosong { padding: 36px 20px; text-align: center; color: var(--teks-2); }
.kosong .ikon { width: 30px; height: 30px; color: var(--aspal-300); margin-bottom: 8px; }
.kosong h4 { font-size: 15px; color: var(--teks); margin-bottom: 4px; }
.kosong .btn { margin-top: 14px; }

/* ---------- map markers ---------- */
.leaflet-container { font-family: var(--font); background: #e9e6df; }
/* Calm the busy OSM palette so routes and markers stay the loudest thing on the map */
.leaflet-tile-pane { filter: saturate(.55) contrast(.92) brightness(1.03); }
.mk-truk { width: 34px; height: 34px; border-radius: 50%; background: var(--aspal-900); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); display: grid; place-items: center; }
.mk-truk.aksen { background: var(--aksen); }
.mk-truk svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s; }
.mk-pin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .35); }
.mk-pin.jemput { background: var(--aspal-700); }
.mk-pin.tujuan { background: var(--aksen); }
.leaflet-tooltip.label-peta { background: var(--aspal-900); color: #fff; border: 0; border-radius: 5px; padding: 3px 7px; font-size: 12px; font-weight: 600; box-shadow: none; }
.leaflet-tooltip.label-peta::before { display: none; }
.leaflet-control-attribution { font-size: 10px; }

/* ---------- brand ---------- */
.merek { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; line-height: 1; }
.merek img { display: block; flex: none; }