/*****************************************
 * Base & Utilities
 *****************************************/
body{ -webkit-font-smoothing:antialiased; }
.badge-soft{ background:#eef6ff; color:#0d6efd; }

#notifBar .alert{ box-shadow:0 6px 20px rgba(0,0,0,.12); }

.navbar .nav-link.active{ font-weight:600; }
@media (max-width:991.98px){
  .navbar .nav-link{ padding:.5rem .75rem; }
}

/* Gate nav (ditampilkan setelah auth.gate() jalan) */
#navMenu .nav-item{ display:none; }
body.gated #navMenu .nav-item{ display:list-item; }

/*****************************************
 * Global Blocker (overlay)
 *****************************************/
.blocker{
  position:fixed; inset:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:rgba(255,255,255,.6); z-index:1090;
}
#blocker.d-none{ display:none !important; pointer-events:none !important; }

/*****************************************
 * Stat cards & Vehicle cards
 *****************************************/
.stat{ border-left:4px solid #0d6efd; }
.stat-label{ font-size:.85rem; color:#6c757d; }
.stat-value{ font-size:1.6rem; font-weight:700; }

.card-veh{ transition:transform .05s ease-in; }
.card-veh:hover{ transform:translateY(-2px); }
.card-veh.yellow{ background:#fff8e1; }
.card-veh.pink{ background:#ffe8ef; }
.card-veh.blue{ background:#e8f1ff; }
.card-veh.gray{ background:#f1f3f5; }

/* (opsional) warna badge status mengikuti status */
.badge-status.bg-available   { background-color:#28a745 !important; }
.badge-status.bg-allocated   { background-color:#f0ad4e !important; color:#212529 !important; }
.badge-status.bg-ontrip      { background-color:#dc3545 !important; }
.badge-status.bg-maintenance { background-color:#6c757d !important; }
.badge-status.bg-inactive    { background-color:#6c757d !important; }

/* ===== Kartu Kendaraan: warna per-status ===== */
.card-veh { transition: transform .05s ease-in; }
.card-veh:hover { transform: translateY(-2px); }

/* Tersedia = Hijau */
.card-veh.green { 
  background: #e9f7ef;             /* hijau sangat lembut */
  border-left: 4px solid #28a745;  /* aksen hijau */
}

/* Teralokasi = Kuning */
.card-veh.yellow { 
  background: #fff8e1; 
  border-left: 4px solid #f0ad4e;  /* aksen oranye/kuning */
}

/* Dalam Perjalanan = Merah */
.card-veh.red { 
  background: #ffeaea; 
  border-left: 4px solid #dc3545;  /* aksen merah */
}

/* Perbaikan & Non-Aktif = Abu-abu */
.card-veh.gray { 
  background: #f1f3f5; 
  border-left: 4px solid #adb5bd;  /* aksen abu */
}

/*****************************************
 * Auto-suggest wilayah
 *****************************************/
.suggest-host{ position:relative; }
.suggest-list{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border:1px solid #e9ecef; border-radius:.375rem;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  max-height:220px; overflow:auto; z-index:2000; pointer-events:auto;
}
.suggest-list.d-none{ display:none !important; }
.suggest-item{ padding:.45rem .75rem; cursor:pointer; }
.suggest-item:hover{ background:#e9f2ff; }

/* Tombol swap versi mobile di field "Dari" */
@media (max-width:767.98px){
  #fromWrap{ position:relative; }
  #ordFrom{ padding-right:3rem; }
  #btnSwapMobile{
    position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%; border:0;
    background:#e9f2ff; color:#0d6efd; box-shadow:0 6px 14px rgba(13,110,253,.25);
  }
  #btnSwapMobile:active{ transform:translateY(-50%) scale(.97); }
}

/*****************************************
 * Scrollable Tables (Desktop full, Mobile scroll)
 *****************************************/
.nowrap table, .nowrap .table{ white-space:nowrap; }

.table-wrap{
  display:block; width:100%; max-width:100%;
  overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-inline:contain;
}

/* Desktop (>=992px): tabel isi penuh card */
.table-wrap > table{
  width:100%; min-width:100%;
  border-collapse:separate; border-spacing:0;
}

/* Mobile & tablet (<992px): tabel boleh lebih lebar agar bisa di-geser */
@media (max-width:991.98px){
  .table-wrap > table{ width:max-content; min-width:720px; }
  .table-wrap--veh > table{ min-width:1180px; } /* tabel banyak kolom (vehicles/users/drivers) */
}

/* Jangan patah baris saat perlu */
.nowrap th, .nowrap td{ white-space:nowrap; }

/* Sticky kolom pertama & terakhir */
.table-sticky-first th:first-child,
.table-sticky-first td:first-child{
  position:sticky; left:0; z-index:1;
  background:var(--bs-body-bg,#fff); box-shadow:1px 0 0 rgba(0,0,0,.05);
}
.table-sticky-last th:last-child,
.table-sticky-last td:last-child{
  position:sticky; right:0; z-index:1;
  background:var(--bs-body-bg,#fff); box-shadow:-1px 0 0 rgba(0,0,0,.05);
}

/* Scroll hint (muncul hanya di layar kecil) */
.table-wrap[data-hint="1"]{ position:relative; }
.table-wrap[data-hint="1"]::after{
  display:none;
  content:"↔ geser"; position:absolute; right:.5rem; bottom:.35rem;
  font-size:.75rem; color:#6c757d; background:rgba(255,255,255,.85);
  padding:.1rem .35rem; border-radius:.25rem;
}
@media (max-width:991.98px){
  .table-wrap[data-hint="1"]::after{ display:block; }
}

/*****************************************
 * Penataan tabel per-halaman
 *****************************************/
/* Kolom No (tengah) di approvals & cashier */
section[data-page="approvals"] table th:first-child,
section[data-page="approvals"] table td:first-child,
section[data-page="cashier"]   table th:first-child,
section[data-page="cashier"]   table td:first-child{
  width:56px; text-align:center;
}

/* Sel tegak tengah di Driver & Kasir */
section[data-page="driver"]  table td,
section[data-page="cashier"] table td{ vertical-align:middle; }

/* Lebar kolom untuk manajemen kendaraan/driver/user */
.table-wrap--veh th:nth-child(1), .table-wrap--veh td:nth-child(1){ min-width:140px; } /* Nama/Username */
.table-wrap--veh th:nth-child(2), .table-wrap--veh td:nth-child(2){ min-width:110px; } /* Merk / No WA / Role */
.table-wrap--veh th:nth-child(3), .table-wrap--veh td:nth-child(3){ min-width:120px; } /* NoPol / Status / Telegram ID */
.table-wrap--veh th:nth-child(4), .table-wrap--veh td:nth-child(4){ min-width:90px;  text-align:center; } /* Kap / userId / Change Pass */
.table-wrap--veh th:nth-child(5), .table-wrap--veh td:nth-child(5){ min-width:160px; } /* Driver */
.table-wrap--veh th:nth-child(6), .table-wrap--veh td:nth-child(6){ min-width:150px; } /* Status */
.table-wrap--veh th:nth-child(7), .table-wrap--veh td:nth-child(7){ min-width:180px; } /* Keterangan */
.table-wrap--veh th:nth-child(8), .table-wrap--veh td:nth-child(8){ min-width:140px; text-align:center; } /* Aksi */

/* Input/select di tabel kendaraan agar tidak terlalu sempit */
.table-wrap--veh input.form-control{ min-width:120px; }
.table-wrap--veh td:nth-child(3) input.form-control{ min-width:110px; } /* NoPol */
.table-wrap--veh td:nth-child(4) input.form-control{ min-width:70px;  text-align:center; } /* Kapasitas */
.table-wrap--veh select.form-select{ min-width:140px; }
.table-wrap--veh td:nth-child(5) select.form-select{ min-width:160px; } /* Driver */
.table-wrap--veh td:nth-child(6) select.form-select{ min-width:150px; } /* Status */

/* ===== Dashboard vehicle cards (modern) ===== */
.veh-card{
  cursor:pointer;
  border:0;
  border-radius: .75rem;
  padding: .9rem 1rem;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.veh-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

.veh-card .veh-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.25rem;
}
.veh-card .veh-title{
  font-weight:600; display:flex; align-items:center; flex-wrap:wrap;
}
.veh-card .veh-plate{
  display:inline-block; font-size:.85rem; padding:.1rem .45rem; margin-left:.5rem;
  background:#f6f7f9; border-radius:.35rem; color:#555; border:1px solid #eceff3;
}
.veh-card .veh-badge{
  font-size:.75rem; padding:.15rem .5rem; border-radius:.35rem;
  background:#eef2ff; color:#3450d3; border:1px solid #e3e8ff;
}
.veh-card .veh-sub{ margin-bottom:.25rem; }
.veh-card .veh-meta{ margin-top:.25rem; }
.veh-card .veh-foot{
  margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}

.veh-card.veh-yellow{ background: #fffdf4; }
.veh-card.veh-pink{   background: #fff5f7; }
.veh-card.veh-blue{   background: #f4f8ff; }
.veh-card.veh-gray{   background: #f7f8fa; }

/* Kartu kendaraan dashboard */
.veh-card{
  cursor:pointer; background:#fff; border:1px solid #e9ecef; border-radius:.75rem;
  padding:.9rem 1rem; box-shadow:0 4px 14px rgba(0,0,0,.06); transition:.12s;
}
.veh-card:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.10); }
.veh-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.35rem; }
.veh-title{ font-weight:600; }
.veh-badge{ font-size:.75rem; background:#f1f3f5; padding:.2rem .5rem; border-radius:.25rem; }
.veh-sub{ min-height:1rem; }
.veh-meta{ margin-top:.35rem; }
.veh-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; }
.veh-plate{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.85em; margin-left:.25rem; }
.veh-yellow{ background:#fff8e1; }
.veh-pink{ background:#ffe8ef; }
.veh-blue{ background:#e8f1ff; }
.veh-gray{ background:#f1f3f5; }


/* =========================================================
   MODERN TIMELESS UI MAKEOVER - Armada KMP_1
   Fokus: tampilan bersih, elegan, lembut, dan tetap ringan.
   ========================================================= */
:root{
  --armada-ink:#0f172a;
  --armada-muted:#64748b;
  --armada-line:#e2e8f0;
  --armada-soft:#f8fafc;
  --armada-card:rgba(255,255,255,.92);
  --armada-primary:#1e40af;
  --armada-primary-2:#2563eb;
  --armada-primary-soft:#dbeafe;
  --armada-accent:#0f766e;
  --armada-warning:#f59e0b;
  --armada-danger:#dc2626;
  --armada-radius:20px;
  --armada-shadow:0 18px 50px rgba(15,23,42,.10);
  --armada-shadow-soft:0 10px 30px rgba(15,23,42,.08);
}

html{ scroll-behavior:smooth; }
body.app-modern{
  min-height:100vh;
  color:var(--armada-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(37,99,235,.14), transparent 32rem),
    radial-gradient(circle at 88% 12%, rgba(15,118,110,.12), transparent 30rem),
    linear-gradient(180deg, #f8fafc 0%, #eef4fb 48%, #f8fafc 100%) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:.005em;
}
body.app-modern::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.72), transparent 80%);
}

/* Navbar */
.app-navbar{
  background:rgba(255,255,255,.78) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-color:rgba(226,232,240,.8) !important;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.navbar-brand{ font-weight:800; color:var(--armada-ink) !important; letter-spacing:-.02em; }
.brand-mark{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px; color:#fff;
  background:linear-gradient(135deg, var(--armada-primary), var(--armada-accent));
  box-shadow:0 10px 22px rgba(37,99,235,.24);
}
.brand-text{ line-height:1; }
.navbar-toggler{ border:0; border-radius:14px; background:#f1f5f9; padding:.55rem .75rem; }
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(37,99,235,.14); }
.navbar .nav-link{
  border-radius:999px;
  color:#475569;
  padding:.48rem .78rem !important;
  margin:.08rem .1rem;
  font-weight:650;
  font-size:.92rem;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.navbar .nav-link:hover{ background:#f1f5f9; color:var(--armada-primary); }
.navbar .nav-link.active{
  color:#fff !important;
  background:linear-gradient(135deg, var(--armada-primary), var(--armada-primary-2));
  box-shadow:0 9px 20px rgba(37,99,235,.22);
}
#whoAmI{
  padding:.45rem .7rem;
  border:1px solid var(--armada-line);
  border-radius:999px;
  background:#fff;
  color:#334155 !important;
  box-shadow:0 6px 16px rgba(15,23,42,.05);
}
body:not(.gated) #whoAmI,
body:not(.gated) #btnLogout{ display:none !important; }

/* Layout */
.app-main{ max-width:1220px; }
section[data-page]{ animation:armadaFade .24s ease both; }
@keyframes armadaFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Login/Register */
body[data-page="login"] .app-main,
body[data-page="register"] .app-main{ min-height:calc(100vh - 84px); display:grid; align-items:center; }
body[data-page="login"] section[data-page="login"] .row,
body[data-page="register"] section[data-page="register"] .row{ width:100%; }
.login-icon{
  width:74px; height:74px; display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:1rem; border-radius:24px; color:#fff; font-size:2rem;
  background:linear-gradient(135deg, var(--armada-primary), var(--armada-accent));
  box-shadow:0 18px 35px rgba(37,99,235,.25);
}
.login-brand h4{ font-weight:850; letter-spacing:-.035em; }
section[data-page="login"] .card,
section[data-page="register"] .card{
  border:1px solid rgba(226,232,240,.8);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(15,23,42,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
}
section[data-page="login"] .card-body,
section[data-page="register"] .card-body{ padding:2rem; }

/* Cards */
.card,
.stab.card{
  border:1px solid rgba(226,232,240,.82);
  border-radius:var(--armada-radius);
  background:var(--armada-card);
  box-shadow:var(--armada-shadow-soft);
  overflow:hidden;
}
.card-body{ padding:1.35rem; }
.card-title{ font-weight:800; letter-spacing:-.025em; color:var(--armada-ink); }
.eyebrow{
  margin:0 0 .2rem;
  color:var(--armada-primary);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  font-size:.72rem;
}
.page-heading{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.heading-icon{
  width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:16px; color:var(--armada-primary);
  background:var(--armada-primary-soft);
}

/* Statistik Dashboard */
.stat{
  border:0;
  background:linear-gradient(135deg, #ffffff, #eff6ff);
  position:relative;
}
.stat::after{
  content:""; position:absolute; right:-28px; top:-32px; width:96px; height:96px;
  border-radius:999px; background:rgba(37,99,235,.10);
}
.stat-label{ color:var(--armada-muted); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.stat-value{ color:var(--armada-ink); font-size:2.1rem; font-weight:900; letter-spacing:-.04em; }

/* Form */
.form-label{ color:#334155; font-weight:750; font-size:.88rem; margin-bottom:.42rem; }
.form-control,
.form-select,
.input-group-text{
  border-radius:14px;
  border-color:#dbe3ee;
  background-color:#fff;
  color:var(--armada-ink);
  min-height:44px;
}
.form-control:focus,
.form-select:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 .23rem rgba(37,99,235,.13);
}
.form-text{ color:var(--armada-muted); }
.input-group .form-control{ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group .btn{ border-top-left-radius:0; border-bottom-left-radius:0; }
textarea.form-control{ min-height:96px; }
.form-check-input:checked{ background-color:var(--armada-primary); border-color:var(--armada-primary); }
.form-switch .form-check-input{ width:2.7em; height:1.35em; }
hr{ border-color:#dbe3ee; opacity:1; margin:1.35rem 0; }

/* Buttons */
.btn{
  border-radius:14px;
  font-weight:750;
  letter-spacing:.005em;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  box-shadow:none !important;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-sm{ min-height:34px; border-radius:11px; font-weight:750; }
.btn-primary,
.btn-success{
  border:0;
  background:linear-gradient(135deg, var(--armada-primary), var(--armada-primary-2));
  color:#fff;
}
.btn-primary:hover,
.btn-success:hover{ filter:brightness(.98); }
.btn-warning{ border:0; background:linear-gradient(135deg, #f59e0b, #f97316); color:#fff; }
.btn-danger{ border:0; background:linear-gradient(135deg, #dc2626, #ef4444); color:#fff; }
.btn-outline-secondary,
.btn-light{
  color:#334155;
  background:#fff;
  border-color:#dbe3ee;
}
.btn-outline-secondary:hover,
.btn-light:hover{ background:#f8fafc; border-color:#cbd5e1; color:#0f172a; }
.btn-outline-primary{ color:var(--armada-primary); border-color:#bfdbfe; background:#eff6ff; }
.btn-outline-primary:hover{ background:#dbeafe; color:#1e3a8a; border-color:#93c5fd; }
.btn-outline-success{ color:#047857; border-color:#bbf7d0; background:#f0fdf4; }
.btn-outline-success:hover{ background:#dcfce7; color:#065f46; border-color:#86efac; }
.btn-outline-danger{ color:#b91c1c; border-color:#fecaca; background:#fff5f5; }
.btn-outline-danger:hover{ background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
.btn-link{ color:var(--armada-primary); font-weight:800; text-decoration:none; }

/* Tables */
.table-wrap{
  border:1px solid var(--armada-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.045);
}
.table{ margin-bottom:0; }
.table > :not(caption) > * > *{
  padding:.78rem .82rem;
  border-bottom-color:#eef2f7;
}
.table thead th,
.table-light th{
  background:#f8fafc !important;
  color:#334155;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.075em;
  font-weight:850;
}
.table tbody tr{ transition:background .12s ease; }
.table tbody tr:hover{ background:#f8fbff; }
.table-sticky-first th:first-child,
.table-sticky-first td:first-child,
.table-sticky-last th:last-child,
.table-sticky-last td:last-child{ background:#fff; }
.table-sticky-first thead th:first-child,
.table-sticky-last thead th:last-child{ background:#f8fafc !important; }
.text-monospace{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* Badges and alerts */
.badge,
.badge-soft{ border-radius:999px; font-weight:800; padding:.42em .7em; }
.badge-soft{ background:var(--armada-primary-soft); color:var(--armada-primary); }
.alert{ border:0; border-radius:18px; box-shadow:0 12px 30px rgba(15,23,42,.08); }
#notifBar .alert{ border:1px solid rgba(226,232,240,.7); backdrop-filter:blur(12px); }

/* Vehicle Cards */
.veh-card,
.card-veh{
  border:1px solid rgba(226,232,240,.85) !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:var(--armada-shadow-soft) !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
  position:relative;
  overflow:hidden;
}
.veh-card::before,
.card-veh::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--armada-primary), var(--armada-accent));
}
.veh-card:hover,
.card-veh:hover{ transform:translateY(-3px); box-shadow:var(--armada-shadow) !important; border-color:#bfdbfe !important; }
.veh-title,
.card-veh h6{ font-weight:850; color:var(--armada-ink); }
.veh-plate{
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#334155;
  border-radius:999px;
  padding:.18rem .55rem;
}
.veh-badge{ border-radius:999px; font-weight:850; }
.veh-yellow::before,
.card-veh.yellow::before{ background:linear-gradient(90deg, #f59e0b, #facc15); }
.veh-pink::before,
.card-veh.pink::before,
.card-veh.red::before{ background:linear-gradient(90deg, #ef4444, #fb7185); }
.veh-blue::before{ background:linear-gradient(90deg, #2563eb, #38bdf8); }
.veh-gray::before,
.card-veh.gray::before{ background:linear-gradient(90deg, #64748b, #cbd5e1); }
.card-veh.green::before{ background:linear-gradient(90deg, #059669, #34d399); }

/* Suggestion dropdown */
.suggest-list{
  border:1px solid #dbe3ee;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(15,23,42,.13);
  overflow:hidden;
  margin-top:.35rem;
}
.suggest-item{ padding:.68rem .9rem; }
.suggest-item:hover{ background:#eff6ff; color:var(--armada-primary); }
#btnSwapMobile{ background:linear-gradient(135deg, var(--armada-primary), var(--armada-primary-2)) !important; color:#fff !important; }

/* Modals */
.modal-content{
  border:1px solid rgba(226,232,240,.9);
  border-radius:24px;
  box-shadow:0 30px 80px rgba(15,23,42,.22);
  overflow:hidden;
}
.modal-header,
.modal-footer{ border-color:#eef2f7; background:#fbfdff; }
.modal-title{ font-weight:850; letter-spacing:-.02em; }
.btn-close{ border-radius:999px; background-color:#f1f5f9; padding:.75rem; }

/* Settings tabs */
#pills{
  gap:.45rem;
  padding:.35rem;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(226,232,240,.8);
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}
#pills .nav-link{
  border-radius:14px;
  color:#475569;
  font-weight:800;
}
#pills .nav-link.active{
  color:#fff;
  background:linear-gradient(135deg, var(--armada-primary), var(--armada-primary-2));
}

/* Blocker */
.blocker{ background:rgba(248,250,252,.72); backdrop-filter:blur(8px); }
.blocker .spinner-border{ color:var(--armada-primary); }

@media (max-width:767.98px){
  .app-main{ padding-left:.85rem; padding-right:.85rem; }
  .card-body{ padding:1.05rem; }
  section[data-page="login"] .card-body,
  section[data-page="register"] .card-body{ padding:1.35rem; }
  .navbar .nav-link{ border-radius:14px; margin:.15rem 0; }
  #whoAmI{ width:100%; text-align:center; }
  #btnLogout{ width:100%; }
  .d-flex.gap-2.mt-4,
  .mt-3.d-flex.gap-2,
  .col-md-6.d-flex.align-items-end.gap-2{ flex-wrap:wrap; }
  .d-flex.gap-2.mt-4 .btn,
  .mt-3.d-flex.gap-2 .btn{ flex:1 1 auto; }
  .page-heading{ align-items:flex-start; }
  .heading-icon{ width:42px; height:42px; }
}

/* Patch Persetujuan V3: pakai select native agar tidak memicu request data:image SVG bootstrap yang membingungkan di console */
.app-native-select{
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: auto !important;
  background-image: none !important;
  padding-right: .75rem !important;
}
#tblAllocGuests select.app-native-select{ min-width: 180px; }


/* Patch V4 NO-SW: hilangkan background SVG Bootstrap pada tombol close/select agar tidak muncul request data:image di console. */
.btn-close{
  background-image:none !important;
  width:2rem;
  height:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:1;
}
.btn-close::before{
  content:"\00d7";
  font-size:1.35rem;
  line-height:1;
  font-weight:700;
  color:#334155;
}
.form-select{
  background-image:none !important;
  appearance:auto !important;
  -webkit-appearance:menulist !important;
}


/* Patch V5 Persetujuan: modal manual tanpa Bootstrap JS untuk mencegah macet di View */
#mdlAlloc.show, #mdlReason.show { display: block !important; }
#manualModalBackdropArmada { z-index: 1040; }
#mdlAlloc, #mdlReason { z-index: 1055; }
.app-close{
  border:0; background:transparent; color:#334155; font-size:1.65rem; line-height:1;
  width:2.25rem; height:2.25rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
}
.app-close:hover{ background:rgba(15,23,42,.08); color:#0f172a; }
#mdlAlloc .modal-content, #mdlReason .modal-content{ animation: armadaModalIn .16s ease-out; }
@keyframes armadaModalIn{ from{ transform:translateY(8px); opacity:.85; } to{ transform:translateY(0); opacity:1; } }

/* Patch V6 Persetujuan: panel inline tanpa modal dan tanpa overlay blocker */
.approval-panel{
  margin-top:1rem;
  border:1px solid rgba(15,23,42,.10);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:0 18px 48px rgba(15,23,42,.10);
  overflow:hidden;
}
.approval-panel__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding:1.15rem 1.25rem;
  border-bottom:1px solid rgba(226,232,240,.9);
  background:rgba(255,255,255,.84);
}
.approval-eyebrow{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:.25rem;
}
.approval-panel__actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.approval-alert{
  margin:1rem 1.25rem 0;
  border-radius:16px;
  padding:.8rem 1rem;
  font-weight:700;
  border:1px solid transparent;
}
.approval-alert--info{ background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.approval-alert--warn{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
.approval-alert--danger{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.approval-table-shell{
  padding:1rem 1.25rem 1.25rem;
  overflow:auto;
}
.approval-table{
  min-width:980px;
  margin-bottom:0;
  border-collapse:separate;
  border-spacing:0 .45rem;
}
.approval-table thead th{
  border:0;
  color:#64748b;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:transparent;
}
.approval-table tbody tr{
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.approval-table tbody td{
  border-top:1px solid rgba(226,232,240,.8);
  border-bottom:1px solid rgba(226,232,240,.8);
  padding:.75rem .75rem;
  vertical-align:middle;
}
.approval-table tbody td:first-child{
  border-left:1px solid rgba(226,232,240,.8);
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
}
.approval-table tbody td:last-child{
  border-right:1px solid rgba(226,232,240,.8);
  border-top-right-radius:16px;
  border-bottom-right-radius:16px;
}
section[data-page="approvals"] .form-select,
section[data-page="approvals"] .form-control{
  border-radius:14px;
}
section[data-page="approvals"] .btn{
  border-radius:999px;
  font-weight:750;
}
@media (max-width:767.98px){
  .approval-panel__head{ flex-direction:column; }
  .approval-panel__actions{ width:100%; justify-content:stretch; }
  .approval-panel__actions .btn{ flex:1 1 auto; }
  .approval-table-shell{ padding:.75rem; }
}

/* Patch V7: Tugas Saya & Tugas Kasir memakai panel inline modern tanpa Bootstrap modal/overlay */
.task-inline-panel{
  margin-top:1rem;
  border:1px solid rgba(15,23,42,.10);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.98));
  box-shadow:0 22px 60px rgba(15,23,42,.12);
  overflow:hidden;
}
.task-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding:1.15rem 1.25rem;
  border-bottom:1px solid rgba(226,232,240,.95);
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.72));
}
.task-eyebrow{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:.25rem;
}
.task-close{
  width:2.4rem;
  height:2.4rem;
  border-radius:999px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.65rem;
  line-height:1;
  box-shadow:0 8px 22px rgba(15,23,42,.08);
}
.task-panel-body{ padding:1.25rem; }
.task-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.75rem;
}
.task-summary-grid > div{
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  background:#fff;
  padding:.82rem .9rem;
  box-shadow:0 10px 26px rgba(15,23,42,.055);
  min-width:0;
}
.task-summary-grid span{
  display:block;
  font-size:.72rem;
  color:#64748b;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.18rem;
}
.task-summary-grid b{
  display:block;
  font-size:.95rem;
  color:#0f172a;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.task-alert{
  border-radius:18px;
  padding:.85rem 1rem;
  font-weight:650;
  border:1px solid transparent;
}
.task-alert-info{ background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.task-alert-danger{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.task-table-wrap{
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(226,232,240,.9);
  background:#fff;
}
.task-table{ min-width:980px; margin-bottom:0; }
.task-table thead th{
  background:#f8fafc;
  color:#64748b;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-bottom:1px solid rgba(226,232,240,.95);
}
.task-table tbody td{ vertical-align:middle; }
.task-panel-actions{
  margin-top:1rem;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:.65rem;
}
.task-panel-actions .small{ margin-right:auto; }
.task-chip-row{ display:flex; flex-wrap:wrap; gap:.45rem; }
.task-chip{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(59,130,246,.18);
  background:#eff6ff;
  color:#1d4ed8;
  border-radius:999px;
  padding:.3rem .65rem;
  font-weight:750;
  font-size:.82rem;
}
.task-diff-box{
  min-height:48px;
  display:flex;
  align-items:center;
  border-radius:16px;
  border:1px solid rgba(226,232,240,.95);
  background:#fff;
  padding:.6rem .85rem;
  font-weight:850;
}
.task-diff-box.diff-plus{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.task-diff-box.diff-minus{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.task-diff-box.diff-zero{ background:#ecfdf5; border-color:#bbf7d0; color:#166534; }
.task-skeleton{
  height:58px;
  border-radius:18px;
  background:linear-gradient(90deg, #eef2f7, #f8fafc, #eef2f7);
  background-size:240% 100%;
  animation:taskSkeleton 1.2s ease-in-out infinite;
  margin-bottom:.8rem;
}
.task-skeleton.short{ width:58%; height:24px; }
@keyframes taskSkeleton{ 0%{background-position:0 0;} 100%{background-position:240% 0;} }

@media (max-width:768px){
  .task-panel-head{ padding:1rem; }
  .task-panel-body{ padding:1rem; }
  .task-summary-grid{ grid-template-columns:1fr; }
  .task-panel-actions{ justify-content:stretch; }
  .task-panel-actions .btn{ width:100%; }
  .task-panel-actions .small{ width:100%; margin-right:0; }
}

/* Patch V9 - Order form validation & modern guest cards */
#btnSubmitOrder:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.15);
}
.order-guest-card {
  border-color: rgba(15, 23, 42, .10) !important;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.order-guest-card:focus-within {
  border-color: rgba(37, 99, 235, .35) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .10) !important;
  transform: translateY(-1px);
}
.order-invalid-feedback {
  font-size: .78rem;
  margin-top: .35rem;
}
#orderSubmitHint {
  border-radius: 999px;
  padding: .55rem .85rem;
  background: rgba(15, 23, 42, .04);
  display: inline-flex;
  align-items: center;
}
#orderSubmitHint.text-success {
  background: rgba(25, 135, 84, .10);
}


/* Patch V10 - Driver checklist lock & My Order driver phone */
.checklist-locked-row {
  background: linear-gradient(90deg, rgba(236, 253, 245, .70), rgba(248, 250, 252, .65));
}
.checklist-locked-row input:disabled {
  opacity: .75;
  cursor: not-allowed;
}
#tblMyOrder td .fw-semibold + .small {
  margin-top: .1rem;
  font-weight: 700;
  color: #64748b !important;
}

/* ================= Kalender Armada V12 ================= */
.calendar-hero{background:linear-gradient(135deg,#ffffff 0%,#f4f8fb 58%,#eef7f1 100%);border-radius:22px;overflow:hidden;}
.calendar-page .card{border-radius:22px;}
.calendar-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 8px 14px;}
.calendar-month-title{font-weight:800;font-size:1.15rem;color:#0f172a;}
.calendar-readonly-badge{font-size:.8rem;border:1px solid #e2e8f0;border-radius:999px;padding:6px 10px;background:#fff;color:#64748b;}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px;}
.calendar-weekdays>div{text-align:center;font-size:.76rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.calendar-cell{position:relative;min-height:118px;border:1px solid #e5e7eb;border-radius:18px;background:#fff;text-align:left;padding:10px;overflow:hidden;transition:.18s ease;box-shadow:0 8px 18px rgba(15,23,42,.045);}
.calendar-cell:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,.10);border-color:#cbd5e1;}
.calendar-cell.is-other-month{opacity:.45;}
.calendar-cell.is-past-empty{background:#f1f5f9;color:#94a3b8;}
.calendar-cell.has-plan{background:#fff7d6;border-color:#facc15;}
.calendar-cell.is-today{background:#dcfce7;border-color:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.13),0 12px 28px rgba(34,197,94,.16);}
.calendar-cell.is-holiday::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(239,68,68,.11) 0,rgba(239,68,68,.11) 7px,transparent 7px,transparent 14px);pointer-events:none;}
.cal-day-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1;}
.cal-day-top b{font-size:1.15rem;color:#0f172a;}
.cal-day-top small{font-weight:700;color:#94a3b8;}
.cal-summary{position:absolute;left:10px;right:10px;bottom:10px;z-index:1;display:flex;flex-wrap:wrap;gap:6px;}
.cal-summary span{display:inline-flex;align-items:center;gap:4px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(148,163,184,.3);padding:4px 7px;font-size:.76rem;font-weight:700;color:#334155;}
.cal-empty{position:absolute;left:10px;right:10px;bottom:12px;font-size:.72rem;color:#94a3b8;z-index:1;}
.cal-holiday-label{position:relative;z-index:1;margin-top:6px;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:999px;background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;padding:3px 7px;font-size:.68rem;font-weight:700;}
.cal-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px;border:1px solid rgba(15,23,42,.12);}
.cal-dot-today{background:#22c55e;}.cal-dot-plan{background:#facc15;}.cal-dot-past{background:#cbd5e1;}.cal-dot-holiday{background:#ef4444;}
.cal-detail-stats{display:flex;gap:10px;flex-wrap:wrap;}
.cal-detail-stats span{min-width:90px;text-align:center;border:1px solid #e2e8f0;border-radius:16px;padding:8px 12px;background:#fff;box-shadow:0 8px 18px rgba(15,23,42,.045);}
.cal-detail-stats b{display:block;font-size:1.2rem;color:#0f172a;line-height:1;}.cal-detail-stats small{color:#64748b;font-size:.72rem;}
.cal-trip-card{border:1px solid #e2e8f0;border-radius:18px;padding:14px;margin-bottom:12px;background:linear-gradient(180deg,#fff,#fbfdff);}
.cal-trip-title{font-weight:800;color:#0f172a;}
@media (max-width: 768px){
  .calendar-weekdays{gap:4px}.calendar-grid{gap:4px}.calendar-cell{min-height:92px;border-radius:14px;padding:7px}.cal-day-top b{font-size:1rem}.cal-day-top small{display:none}.cal-summary{left:7px;right:7px;bottom:7px;gap:3px}.cal-summary span{font-size:.66rem;padding:3px 5px}.cal-holiday-label{display:none}.calendar-title-row{padding:4px 4px 10px}.calendar-month-title{font-size:1rem}
}

/* ================= PATCH V13 - Surat Tugas & PTJB ================= */
.taskdocs-card { border-radius: 24px; overflow: hidden; }
.taskdocs-toolbar { border-radius: 20px; }
.taskdocs-table th,
.taskdocs-table td { white-space: nowrap; vertical-align: middle; }
.taskdocs-table td:nth-child(8) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.taskdocs-table .btn { border-radius: 999px; }
.mini-stat {
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
.mini-stat span { display:block; color:#64748b; font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.mini-stat b { display:block; font-size: 1.4rem; line-height: 1.15; color:#0f172a; }
.mini-stat.warning { background: linear-gradient(180deg,#fff7ed,#ffffff); }
.mini-stat.success { background: linear-gradient(180deg,#ecfdf5,#ffffff); }
.doc-info {
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 14px 16px;
  background: #fff;
  min-height: 86px;
}
.doc-info span { display:block; color:#64748b; font-size:.78rem; font-weight:700; text-transform:uppercase; margin-bottom:6px; }
.doc-info b { color:#0f172a; font-size:1rem; }
#tdPager .page-link { border-radius: 999px; margin: 0 2px; }
#tdDetailPanel .table th { color:#64748b; font-weight:700; width: 150px; }
@media (max-width: 768px){
  .taskdocs-table td:nth-child(8){ max-width: 180px; }
  .taskdocs-summary .mini-stat { padding: 10px; }
  .taskdocs-summary .mini-stat b { font-size: 1.05rem; }
}

/* === PATCH V15: Checklist Kondisi Kendaraan === */
.vehicle-check-grid{
  display:grid;
  gap:1rem;
}
.vehicle-check-card{
  border:1px solid rgba(15,23,42,.09);
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  border-radius:1.25rem;
  padding:1rem;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.vehicle-check-card.is-saved{
  background:linear-gradient(180deg,#f8fffb 0%,#ffffff 100%);
  border-color:rgba(22,163,74,.22);
}
.vehicle-check-item{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.6rem .75rem;
  border:1px solid rgba(15,23,42,.10);
  border-radius:.9rem;
  background:#fff;
  font-weight:600;
  font-size:.92rem;
}
.vehicle-check-item input{ flex:0 0 auto; }
.vehicle-check-item.is-disabled{ opacity:.72; background:#f8fafc; }
.vehicle-check-card .form-control:disabled,
.vehicle-check-card .form-select:disabled,
.vehicle-check-card textarea:disabled{
  background:#f8fafc;
  color:#475569;
  opacity:1;
}
@media (min-width: 992px){
  .vehicle-check-grid{ grid-template-columns:1fr 1fr; }
}

/* === PATCH V16: Dashboard Infografis Armada === */
.dash-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.15rem;
  border:1px solid rgba(15,23,42,.08);
  border-radius:1.35rem;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,246,255,.92));
  box-shadow:0 16px 40px rgba(15,23,42,.07);
}
.dash-kpi{
  width:100%;
  border:1px solid rgba(15,23,42,.08);
  border-radius:1.2rem;
  padding:.9rem .95rem;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  text-align:left;
  box-shadow:0 14px 32px rgba(15,23,42,.06);
  transition:.18s ease;
}
.dash-kpi:hover,.dash-bar-row:hover,.dash-live-item:hover,.dash-legend-item:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(15,23,42,.10);
}
.dash-kpi span{display:block;color:#64748b;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
.dash-kpi b{display:block;color:#0f172a;font-size:1.55rem;line-height:1.15;margin-top:.18rem;}
.dash-kpi-main{background:linear-gradient(135deg,#eff6ff,#ffffff);border-color:rgba(37,99,235,.20);}
.dash-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius:1.35rem;
  padding:1rem;
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 40px rgba(15,23,42,.065);
}
.dash-card-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.75rem;}
.dash-card-head span{font-weight:800;color:#0f172a;letter-spacing:.01em;}
.dash-donut-wrap{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:center;}
.dash-donut{
  width:150px;height:150px;border-radius:999px;border:0;
  background:conic-gradient(var(--donut));
  display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 1px rgba(15,23,42,.04),0 14px 32px rgba(15,23,42,.08);
}
.dash-donut:before{content:"";position:absolute;inset:30px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);}
.dash-donut span,.dash-donut small{position:relative;z-index:1;grid-area:1/1;}
.dash-donut span{font-size:2rem;font-weight:900;color:#0f172a;transform:translateY(-7px);}
.dash-donut small{font-weight:800;color:#64748b;font-size:.72rem;text-transform:uppercase;transform:translateY(22px);}
.dash-legend{display:grid;gap:.45rem;}
.dash-legend-item{
  border:1px solid rgba(15,23,42,.08);background:#fff;border-radius:.9rem;padding:.5rem .6rem;display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:.55rem;text-align:left;
}
.dash-legend-item i{width:10px;height:10px;border-radius:999px;display:block;}
.dash-legend-item span{font-weight:700;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-legend-item b{font-size:.95rem;color:#0f172a;}
.dash-bars{display:grid;gap:.55rem;}
.dash-bar-row{
  border:1px solid rgba(15,23,42,.08);background:#fff;border-radius:1rem;padding:.55rem .65rem;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:.6rem;text-align:left;
}
.dash-bar-rank{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:#eff6ff;color:#1d4ed8;font-weight:900;font-size:.8rem;}
.dash-bar-main{display:grid;gap:.32rem;min-width:0;}
.dash-bar-label{font-weight:800;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-bar-main i{height:8px;border-radius:999px;background:linear-gradient(90deg,#2563eb,#38bdf8);display:block;min-width:12px;}
.dash-bar-row b{font-size:.95rem;color:#0f172a;}
.dash-live-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;}
.dash-live-item{border:1px solid rgba(15,23,42,.08);border-radius:1.1rem;background:linear-gradient(180deg,#ffffff,#f8fafc);padding:.9rem;text-align:left;}
.dash-live-item span{display:block;font-weight:800;color:#64748b;font-size:.77rem;text-transform:uppercase;}
.dash-live-item b{font-size:1.55rem;color:#0f172a;line-height:1.1;}
.dash-detail-panel{border:1px solid rgba(37,99,235,.18);border-radius:1.35rem;background:linear-gradient(180deg,#f8fbff,#ffffff);padding:1rem;box-shadow:0 18px 44px rgba(37,99,235,.08);}
.dash-detail-table{white-space:nowrap;}
.dash-detail-table th{color:#64748b;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;}
.dash-detail-table td{vertical-align:middle;}
#dashVehicleCardsBox{animation:dashSlide .18s ease;}
@keyframes dashSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width: 992px){
  .dash-donut-wrap{grid-template-columns:1fr;justify-items:center;}
  .dash-legend{width:100%;}
}
@media (max-width: 576px){
  .dash-hero{align-items:flex-start;flex-direction:column;}
  .dash-kpi{padding:.78rem;}
  .dash-kpi b{font-size:1.28rem;}
  .dash-live-grid{grid-template-columns:1fr 1fr;}
  .dash-card{padding:.85rem;border-radius:1.1rem;}
}

/* PATCH Report Alokasi Kendaraan */
.allocation-report-table th{white-space:nowrap; vertical-align:middle; font-size:.82rem;}
.allocation-report-table td{white-space:nowrap; vertical-align:middle; font-size:.82rem;}
.allocation-report-table td:nth-child(2),
.allocation-report-table td:nth-child(3),
.allocation-report-table td:nth-child(5),
.allocation-report-table td:nth-child(7){min-width:120px;}
@media print{ .allocation-report-table th,.allocation-report-table td{font-size:10px;} }

/* Report Armada */
.report-pills .nav-link { border-radius: 999px; }
[data-page="allocationReport"] .clickable { cursor: pointer; }
[data-page="allocationReport"] .clickable:hover td { background: rgba(13,110,253,.06); }
[data-page="allocationReport"] .table-responsive.nowrap table { white-space: nowrap; }

/* My Order tracking lintas order: tabel tetap rapi di mobile */
.myorder-track-table th,
.myorder-track-table td{
  white-space: nowrap;
  vertical-align: middle;
}
.myorder-track-table td .fw-semibold,
.myorder-track-table td .small{
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 576px){
  .myorder-track-table{ min-width: 760px; }
  #modalMyOrderDetail .modal-dialog{ margin: .5rem; }
}