:root {
  --bg: #f6f7fb;
  --app-bg: #f6f7fb;
  --ink: #0c1424;
  --text: #172033;
  --muted: #6b7280;
  --soft: #eef2f7;
  --line: #e5e7eb;
  --card: #ffffff;
  --glass: rgba(255,255,255,.84);
  --navy: #0b1020;
  --navy2: #111827;
  --primary: #0a84ff;
  --primary-dark: #006edb;
  --danger: #ff3b30;
  --success: #34c759;
  --warning: #ff9f0a;
  --radius: 22px;
  --radius-sm: 16px;
  --shadow: 0 12px 28px rgba(16, 24, 40, .08);
  --shadow-soft: 0 6px 18px rgba(16, 24, 40, .06);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { height: 100%; background: var(--app-bg); }
body {
  min-height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 260px;
  pointer-events: none;
  background: radial-gradient(circle at 18% 0%, rgba(10,132,255,.22), transparent 34%), linear-gradient(180deg, #eef6ff 0%, rgba(246,247,251,0) 100%);
  z-index: -1;
}
button, input, select, textarea { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; touch-action: manipulation; }
a { color: var(--primary); text-decoration: none; font-weight: 800; }
.hidden { display: none !important; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; color: var(--ink); }
p { margin: 6px 0 0; color: var(--muted); line-height: 1.35; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

.auth-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(20px, var(--safe-top)) 18px max(22px, var(--safe-bottom));
  background: radial-gradient(circle at top, rgba(10,132,255,.38), transparent 32%), linear-gradient(165deg, #0b1020, #111827 52%, #172033);
}
.auth-card {
  width: min(500px, 100%);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 30px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.brand-box, .logo-row { display: flex; gap: 13px; align-items: center; }
.brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 950;
  color: #fff;
  background: linear-gradient(145deg, #0a84ff, #0b1020);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(10,132,255,.24);
}
.brand-mark.small { width: 42px; height: 42px; border-radius: 15px; font-size: 21px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 22px 0; padding: 5px; border-radius: 16px; background: #e9edf4; }
.auth-tabs button { min-height: 44px; border-radius: 13px; background: transparent; color: var(--muted); font-weight: 900; }
.auth-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 4px 14px rgba(16,24,40,.11); }
.form-grid { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: #334155; font-weight: 850; font-size: 13px; }
input, select, textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #dfe5ed;
  border-radius: 15px;
  padding: 13px 14px;
  background: #fff;
  color: var(--ink);
  outline: none;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(10,132,255,.14); }
.primary, .secondary, .ghost, .danger, .success, .mini-btn, .icon-btn {
  border-radius: 15px;
  min-height: 46px;
  padding: 12px 15px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.primary:active, .secondary:active, .ghost:active, .danger:active, .success:active, .mini-btn:active { transform: scale(.98); }
.primary { background: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(10,132,255,.24); }
.primary:hover { background: var(--primary-dark); }
.secondary { background: #e8f3ff; color: #0756a3; }
.ghost { background: rgba(255,255,255,.08); color: #e5e7eb; border: 1px solid rgba(255,255,255,.12); }
.danger { background: #ffe8e6; color: #b42318; }
.success { background: #e7f8ed; color: #167c3d; }
.mini-btn { min-height: 36px; padding: 8px 11px; border-radius: 12px; background: #f1f5f9; color: #243244; font-size: 12px; }
.icon-btn { width: 42px; min-height: 42px; padding: 0; border-radius: 50%; background: #f1f5f9; color: var(--ink); font-size: 24px; }
.full { width: 100%; }
.small-note { font-size: 12px; }

.app { display: grid; grid-template-columns: 278px 1fr; min-height: 100dvh; }
.sidebar {
  background: linear-gradient(180deg, #0b1020, #111827);
  color: #fff;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: 20;
}
.sidebar span { display: block; color: #94a3b8; font-size: 12px; margin-top: 2px; }
nav { display: grid; gap: 8px; }
.nav-btn {
  text-align: left;
  padding: 13px 14px;
  border-radius: 16px;
  background: transparent;
  color: #cbd5e1;
  font-weight: 850;
  display: flex;
  align-items: center;
  gap: 11px;
}
.nav-icon { width: 23px; text-align: center; color: inherit !important; font-size: 20px !important; line-height: 1; }
.nav-btn.active, .nav-btn:hover { background: rgba(255,255,255,.10); color: #fff; }
.logout-btn { margin-top: auto; }
.main {
  min-width: 0;
  padding: 24px;
  padding-bottom: max(24px, var(--safe-bottom));
  overflow: auto;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.topbar h2 { font-size: 32px; line-height: 1.05; }
.top-actions { display: flex; gap: 10px; align-items: center; }
#globalSearch { min-width: 300px; background: rgba(255,255,255,.92); }
.page { animation: fade .14s ease-out; }
@keyframes fade { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.cards { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card, .panel, .job-card, .column, .table-wrap, .form-section {
  background: var(--card);
  border: 1px solid rgba(226,232,240,.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.stat-card { padding: 18px; }
.stat-card b { display: block; font-size: 31px; margin-top: 7px; color: var(--ink); letter-spacing: -.03em; }
.stat-card span { color: var(--muted); font-weight: 850; font-size: 13px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.panel, .form-section { padding: 17px; }
.panel h3, .form-section h3 { margin-bottom: 13px; font-size: 18px; }
.form-section { margin-bottom: 16px; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.help-box {
  background: #edf7ff;
  color: #075985;
  border: 1px solid #cfeaff;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 750;
  line-height: 1.35;
  margin: 12px 0;
}
.dispatch-board { display: grid; grid-template-columns: repeat(6, minmax(250px, 1fr)); gap: 14px; overflow-x: auto; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; }
.column { min-height: 360px; padding: 12px; background: rgba(255,255,255,.78); content-visibility: auto; contain-intrinsic-size: 360px; }
.column h3 { font-size: 14px; display: flex; justify-content: space-between; align-items: center; margin: 2px 2px 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.count-pill, .status-pill, .role-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: #eef2f7;
  color: #344054;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-new_request { background: #eef2ff; color: #3730a3; }
.status-scheduled { background: #fff7ed; color: #9a3412; }
.status-en_route { background: #e0f2fe; color: #075985; }
.status-picked_up { background: #ecfdf3; color: #047857; }
.status-dropped_off { background: #dcfce7; color: #166534; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.job-card {
  padding: 15px;
  margin-bottom: 11px;
  display: grid;
  gap: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
  content-visibility: auto;
  contain-intrinsic-size: 180px;
}
.job-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.job-card .job-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.job-card strong { font-size: 14px; color: var(--ink); }
.job-card .vehicle { font-weight: 950; font-size: 17px; color: var(--ink); }
.job-card .meta { color: var(--muted); font-size: 13px; line-height: 1.45; }
.job-card .actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.job-card .actions button { min-height: 40px; border-radius: 13px; background: #f1f5f9; color: #1f2937; font-weight: 900; }
.job-card .actions button:first-child { background: #0b1020; color: #fff; }

.money-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px;
  border-radius: 15px;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}
.money-strip span { display: flex; justify-content: space-between; gap: 8px; }
.money-panel { background: linear-gradient(180deg, #ffffff, #f7fbff); }
.money-total-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #edf0f4;
  color: var(--muted);
  font-weight: 900;
}
.money-total-row strong { color: var(--ink); font-size: 18px; text-align: right; }
.profit-row strong { font-size: 23px; }
.profit-positive { color: #167c3d !important; }
.profit-negative { color: #b42318 !important; }
.profit-zero { color: #64748b !important; }
.warn-box { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.ok-box { background: #ecfdf3; border-color: #bbf7d0; color: #166534; }
.amount-received-card { border-color: rgba(52,199,89,.45); box-shadow: 0 9px 26px rgba(52,199,89,.10); }
.amount-received-card h3::after { content: ' required before Delivered'; color: #167c3d; font-size: 12px; font-weight: 900; margin-left: 6px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid #edf0f4; font-size: 13px; vertical-align: top; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.photo-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.timeline { display: grid; gap: 10px; }
.timeline-item { border-left: 3px solid var(--primary); padding: 6px 0 8px 12px; }
.timeline-item small { color: var(--muted); }
.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, calc(var(--safe-bottom) + 16px));
  transform: translateX(-50%);
  z-index: 100;
  background: #0b1020;
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  max-width: min(92vw, 520px);
  text-align: center;
  font-weight: 850;
}
.dialog {
  border: 0;
  border-radius: 26px;
  width: min(1040px, 94vw);
  max-height: 88dvh;
  padding: 0;
  background: #f6f7fb;
  box-shadow: 0 26px 90px rgba(0,0,0,.32);
}
.dialog::backdrop { background: rgba(7, 12, 24, .45); }
.dialog-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
}
#jobDialogBody { padding: 16px; }

@media (max-width: 1180px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky;
    height: auto;
    top: 0;
    padding: max(12px, var(--safe-top)) 14px 12px;
    border-radius: 0 0 24px 24px;
  }
  .sidebar nav { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 2px; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-btn { white-space: nowrap; min-width: max-content; }
  .logout-btn { position: absolute; top: max(12px, var(--safe-top)); right: 14px; width: auto; min-height: 38px; padding: 8px 12px; }
  .topbar { flex-direction: column; gap: 12px; }
  .top-actions { width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
  #globalSearch { width: 100%; min-width: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --radius: 22px; }
  body { background: var(--app-bg); }
  body::before { height: 190px; }
  .auth-card { border-radius: 28px; padding: 20px; }
  .brand-box h1 { font-size: 23px; }
  .app { display: block; min-height: 100dvh; }
  .sidebar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(10px, var(--safe-bottom));
    top: auto;
    height: 72px;
    padding: 8px;
    border-radius: 26px;
    background: rgba(11,16,32,.88);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 16px 44px rgba(0,0,0,.28);
    display: block;
    z-index: 60;
  }
  .logo-row, .logout-btn { display: none; }
  .sidebar nav {
    height: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-btn {
    flex: 0 0 72px;
    min-width: 72px;
    height: 56px;
    scroll-snap-align: start;
    padding: 6px 4px;
    border-radius: 19px;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 3px;
    color: #a8b3c7;
    font-size: 10px;
    letter-spacing: -.01em;
  }
  .nav-icon { width: auto; font-size: 20px !important; color: inherit !important; }
  .nav-btn.active { background: #fff; color: #0b1020; }
  .main {
    min-height: 100dvh;
    padding: max(16px, var(--safe-top)) 14px calc(104px + var(--safe-bottom));
    overflow: visible;
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: calc(-1 * max(16px, var(--safe-top))) -14px 14px;
    padding: max(16px, var(--safe-top)) 14px 12px;
    background: rgba(246,247,251,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(229,231,235,.72);
  }
  .topbar h2 { font-size: 28px; }
  .topbar p { font-size: 13px; margin-top: 4px; }
  .top-actions { grid-template-columns: 1fr 82px 82px; align-items: stretch; gap: 7px; }
  #globalSearch { border-radius: 999px; background: #fff; padding-left: 16px; min-height: 44px; }
  .top-actions button { border-radius: 999px; min-height: 44px; padding-left: 8px; padding-right: 8px; }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
  .stat-card { padding: 14px; border-radius: 20px; box-shadow: 0 3px 14px rgba(16,24,40,.05); }
  .stat-card b { font-size: 27px; }
  .panel, .form-section, .table-wrap, .column, .job-card { border-radius: 21px; box-shadow: 0 3px 14px rgba(16,24,40,.05); }
  .panel, .form-section { padding: 15px; }
  .dispatch-board { grid-template-columns: 1fr; overflow: visible; gap: 12px; padding: 0; }
  .column { min-height: auto; padding: 10px; background: rgba(255,255,255,.72); }
  .column h3 { position: sticky; top: 108px; z-index: 18; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 8px; border-radius: 16px; }
  .job-card { padding: 15px; margin-bottom: 10px; }
  .job-card .vehicle { font-size: 18px; }
  .job-card .actions { grid-template-columns: 1fr 1fr; }
  .job-card .actions button:first-child { grid-column: 1 / -1; }
  .form-actions { display: grid; grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  table { min-width: 650px; }
  .dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
  }
  .dialog-head { padding: max(14px, var(--safe-top)) 14px 12px; }
  .dialog-head h3 { font-size: 18px; }
  #jobDialogBody { padding: 14px 14px calc(28px + var(--safe-bottom)); }
  .toast { bottom: calc(96px + var(--safe-bottom)); width: max-content; max-width: 90vw; }
}

@media (max-width: 430px) {
  .auth-page { padding-left: 12px; padding-right: 12px; }
  .auth-card { padding: 18px; }
  .brand-mark { width: 52px; height: 52px; border-radius: 18px; }
  .top-actions { grid-template-columns: 1fr; }
  .top-actions button { width: 100%; }
  .cards { grid-template-columns: 1fr 1fr; }
  .stat-card b { font-size: 24px; }
  .nav-btn { flex-basis: 66px; min-width: 66px; }
}

@media (display-mode: standalone) {
  body::before { height: 220px; }
  .topbar { padding-top: max(16px, var(--safe-top)); }
}
@media (hover: none) {
  .job-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* V6 delivered lock + role management */
.job-locked {
  border-color: rgba(22, 101, 52, .30);
  background: linear-gradient(180deg, #ffffff, #f6fff9);
}
.lock-note {
  border-radius: 14px;
  padding: 10px 12px;
  background: #ecfdf3;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-weight: 900;
  font-size: 12px;
}
.locked-panel {
  border-color: rgba(22, 101, 52, .28);
  background: linear-gradient(180deg, #ffffff, #f7fff9);
}
.locked-btn,
button:disabled {
  opacity: .62;
  cursor: not-allowed;
  transform: none !important;
}
.settings-wide {
  grid-column: 1 / -1;
}
.muted {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 12px;
}
.roleChangeForm {
  display: contents;
}
@media (max-width: 760px) {
  .settings-wide table { min-width: 720px; }
}

/* V7 admin editing + new assigned workflow */
.status-assigned { background: #fff7ed; color: #9a3412; }
.admin-edit-panel {
  border-color: rgba(10,132,255,.22);
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}
.admin-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
.admin-edit-grid textarea { min-height: 80px; }
.admin-edit-grid button { grid-column: 1 / -1; }
.driver-edit-row {
  display: grid;
  grid-template-columns: minmax(120px,1fr) minmax(92px,1fr) minmax(120px,1fr) 96px 70px;
  gap: 7px;
  min-width: 620px;
}
.driver-edit-row input,
.driver-edit-row select { min-height: 38px; padding: 8px 10px; border-radius: 11px; font-size: 13px; }
@media (max-width: 760px) {
  .admin-edit-grid { grid-template-columns: 1fr; }
  .driver-edit-row { grid-template-columns: 1fr; min-width: 220px; }
}

/* V9 mobile fit polish - keeps the same app design but removes sideways overflow */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.app,
.main,
.page,
.panel,
.form-section,
.table-wrap,
.dispatch-board,
.column,
.job-card,
.dialog,
#jobDialogBody,
.cards,
.grid-2,
.grid-3,
.admin-edit-grid,
.form-grid,
.form-actions,
.topbar,
.top-actions {
  max-width: 100%;
  min-width: 0;
}
.panel,
.form-section,
.table-wrap,
.column,
.job-card,
.stat-card,
.help-box,
.lock-note,
.money-strip,
.money-total-row,
.dialog-head,
label,
input,
select,
textarea,
button {
  min-width: 0;
}
.job-card,
.panel,
.form-section,
.stat-card,
.table-wrap,
.money-strip,
.help-box,
.lock-note,
td,
th,
p,
strong,
small,
span,
label,
input,
select,
textarea,
button {
  overflow-wrap: anywhere;
  word-break: normal;
}
img,
video,
canvas,
svg {
  max-width: 100%;
}

@media (max-width: 760px) {
  html,
  body,
  #appView,
  .app,
  .main,
  .page {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
  }

  .main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .topbar {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .top-actions {
    width: 100%;
  }

  .top-actions input,
  .top-actions button,
  .form-actions button,
  .form-actions a,
  .job-card .actions button,
  .primary,
  .secondary,
  .danger,
  .success,
  .mini-btn {
    max-width: 100%;
    white-space: normal;
    line-height: 1.12;
  }

  .sidebar {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: calc(100vw - 16px);
  }

  .sidebar nav {
    justify-content: space-between;
    overflow-x: hidden;
    gap: 2px;
  }

  .nav-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 9px;
  }

  .nav-icon {
    font-size: 18px !important;
  }

  .cards,
  .grid-2,
  .grid-3,
  .admin-edit-grid,
  .form-grid {
    width: 100%;
  }

  .dispatch-board {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .column,
  .job-card {
    width: 100%;
    max-width: 100%;
  }

  .job-card .job-top {
    min-width: 0;
  }

  .job-card strong,
  .job-card .vehicle,
  .job-card .meta {
    min-width: 0;
  }

  .money-strip span,
  .money-total-row {
    align-items: flex-start;
  }

  .money-strip span b,
  .money-total-row strong {
    min-width: 0;
    max-width: 48%;
    text-align: right;
  }

  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    padding: 0;
  }

  table,
  .settings-wide table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }

  th,
  td {
    padding: 9px 6px;
    font-size: 11px;
    line-height: 1.25;
    max-width: 0;
    overflow-wrap: anywhere;
  }

  th {
    font-size: 9px;
    letter-spacing: .02em;
  }

  td input,
  td select,
  td button,
  td .mini-btn,
  .roleChangeForm input,
  .roleChangeForm select,
  .roleChangeForm button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 12px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .driver-edit-row {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .topbar {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .stat-card {
    padding: 12px 10px;
  }

  .stat-card span {
    font-size: 11px;
  }

  .stat-card b {
    font-size: 22px;
  }

  .panel,
  .form-section,
  .column,
  .job-card {
    padding-left: 12px;
    padding-right: 12px;
  }

  .job-card .actions {
    gap: 7px;
  }

  .job-card .actions button {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
  }

  .nav-btn {
    flex-basis: auto;
    min-width: 0;
    font-size: 8px;
  }

  .nav-icon {
    font-size: 16px !important;
  }

  th,
  td {
    padding: 8px 4px;
    font-size: 10px;
  }

  th {
    font-size: 8px;
  }
}


/* V10 mobile nav drawer, parts profit, and Home pickup card polish */
.mobile-nav-grip { display: none; }
.parts-profit-card {
  border-color: rgba(52,199,89,.30);
  background: linear-gradient(180deg, #ffffff, #f7fff9);
}
.delete-load-panel {
  border-color: rgba(255,59,48,.30);
  background: linear-gradient(180deg, #fff, #fff7f6);
}
.home-pickup-list {
  display: grid;
  gap: 12px;
}
.home-pickup-card {
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 20px;
  background: #fff;
  padding: 13px;
  box-shadow: 0 4px 15px rgba(16,24,40,.05);
  display: grid;
  gap: 12px;
}
.home-pickup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.home-pickup-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}
.home-pickup-head span:not(.status-pill) {
  display: block;
  color: var(--muted);
  font-weight: 850;
  margin-top: 3px;
  font-size: 13px;
}
.home-pickup-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.home-info-line {
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  padding: 9px 10px;
  min-width: 0;
}
.home-info-line.wide { grid-column: 1 / -1; }
.home-info-line span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 950;
  margin-bottom: 3px;
}
.home-info-line b,
.home-info-line a {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.home-money-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.home-money-row span {
  display: grid;
  gap: 2px;
  border-radius: 13px;
  background: #f1f5f9;
  padding: 8px 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}
.home-money-row b {
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.home-open-btn { width: 100%; min-height: 42px; }

@media (min-width: 761px) {
  .cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

@media (max-width: 760px) {
  .mobile-nav-grip {
    display: flex;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 4px;
    height: 12px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(226,232,240,.64);
    pointer-events: auto;
  }
  .mobile-nav-grip span {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(226,232,240,.55);
    margin: 0;
  }
  .mobile-nav-grip em {
    display: none;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
  }
  .sidebar.nav-expanded .mobile-nav-grip em { display: inline; }
  .sidebar {
    height: 78px;
    padding: 16px 8px 8px;
    transition: height .18s ease, border-radius .18s ease, transform .18s ease;
  }
  .sidebar.nav-expanded {
    height: 154px;
    border-radius: 28px;
  }
  .sidebar nav,
  .sidebar.nav-expanded nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 56px;
    gap: 5px;
    height: auto;
    overflow: hidden !important;
    padding: 0;
  }
  .sidebar:not(.nav-expanded) .nav-btn.mobile-secondary { display: none !important; }
  .sidebar.nav-expanded .nav-btn.mobile-secondary { display: flex; }
  .nav-btn.hidden { display: none !important; }
  .nav-btn {
    width: 100%;
    height: 56px;
    min-width: 0 !important;
    flex: none !important;
    font-size: 9px;
  }
  .main { padding-bottom: calc(112px + var(--safe-bottom)); }
  .sidebar.nav-expanded + .main { padding-bottom: calc(190px + var(--safe-bottom)); }
  .toast { bottom: calc(104px + var(--safe-bottom)); }
  .sidebar.nav-expanded ~ .toast { bottom: calc(184px + var(--safe-bottom)); }

  .home-pickup-card { padding: 12px; }
  .home-pickup-head { align-items: flex-start; }
  .home-pickup-head .status-pill { flex: 0 0 auto; max-width: 48%; justify-content: center; white-space: normal; text-align: center; }
  .home-pickup-main { grid-template-columns: 1fr 1fr; gap: 7px; }
  .home-info-line { padding: 8px; }
  .home-money-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-money-row span { min-height: 48px; }
}

@media (max-width: 430px) {
  .sidebar { left: 10px; right: 10px; max-width: calc(100vw - 20px); }
  .nav-btn { font-size: 8.5px; padding-left: 1px; padding-right: 1px; }
  .nav-icon { font-size: 17px !important; }
  .home-pickup-main { grid-template-columns: 1fr; }
  .home-info-line.wide { grid-column: auto; }
}

/* v12 driver load performance modal */
.driver-profile-head p { margin: 4px 0; color: var(--muted); overflow-wrap: anywhere; }
.driver-performance-cards { margin-top: 14px; }
.driver-load-list {
  display: grid;
  gap: 12px;
}
.driver-load-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 14px;
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.driver-load-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.driver-load-head strong { overflow-wrap: anywhere; }
.compact-money { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compact-money span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .driver-performance-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .driver-load-card { padding: 12px; border-radius: 20px; }
  .driver-load-head { display: grid; grid-template-columns: 1fr; }
  .driver-load-head .status-pill { width: fit-content; max-width: 100%; }
  .compact-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v13: Sico logo + existing-customer load flow */
.sico-logo {
  display: block;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: var(--shadow-soft);
}
.auth-logo {
  width: 132px;
  height: 58px;
  border-radius: 17px;
  padding: 7px 10px;
}
.side-logo {
  width: 68px;
  height: 42px;
  border-radius: 13px;
  padding: 4px 6px;
  flex: 0 0 auto;
}
.page-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.page-heading > div { min-width: 0; }
.page-logo {
  width: 128px;
  height: 54px;
  border-radius: 17px;
  padding: 6px 10px;
  flex: 0 0 auto;
}
.existing-customer-section input[readonly] {
  background: #f8fafc;
  color: #334155;
  border-color: #dbe7f5;
}
.customer-card-list {
  display: grid;
  gap: 12px;
}
.customer-card {
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: var(--shadow-soft);
}
.customer-card-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.customer-card-main strong {
  color: var(--ink);
  font-size: 16px;
}
.customer-card-main span,
.customer-card-main small {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.customer-card-actions {
  display: grid;
  gap: 8px;
  min-width: 106px;
}
.customer-card-actions .mini-btn {
  width: 100%;
  min-height: 40px;
}

@media (max-width: 760px) {
  .page-heading { align-items: flex-start; gap: 10px; }
  .page-logo {
    width: 92px;
    height: 40px;
    border-radius: 13px;
    padding: 4px 6px;
    margin-top: 2px;
  }
  .auth-logo {
    width: 118px;
    height: 52px;
    border-radius: 16px;
  }
  .customer-card {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .customer-card-actions {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
  }
}

@media (max-width: 380px) {
  .page-heading { flex-direction: column; }
  .page-logo { width: 118px; height: 48px; }
}


/* v14 live map / delivery / role polish */
.nav-btn.hidden { display: none !important; }
.subsection-title { margin-top: 16px; margin-bottom: 10px; font-size: 16px; }
.live-map-panel { overflow: hidden; }
.map-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.map-toolbar h3 { margin: 0 0 4px; }
.map-toolbar p { margin: 0; color: var(--muted); max-width: 720px; }
.map-actions { justify-content: flex-end; }
.live-map-canvas { width: 100%; height: min(62vh, 620px); min-height: 420px; border-radius: 26px; border: 1px solid var(--border); overflow: hidden; background: #e5edf7; margin-top: 14px; }
.map-load-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.map-load-card { padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: var(--shadow-soft); }
.map-load-card div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.map-load-card p { margin: 7px 0; color: var(--text); overflow-wrap: anywhere; }
.warn-text { color: #991b1b; font-weight: 900; margin-left: 6px; }
.driver-tracking-panel p { color: var(--muted); }
.leaflet-popup-content button { border: 0; border-radius: 10px; padding: 8px 10px; background: #0f172a; color: white; font-weight: 800; margin-top: 6px; }

@media (max-width: 760px) {
  .map-toolbar { display: block; }
  .map-actions { display: grid; grid-template-columns: 1fr; margin-top: 12px; }
  .live-map-canvas { min-height: 360px; height: 52vh; border-radius: 22px; }
  .map-load-list { grid-template-columns: 1fr; }
}

.map-connection-ok { display: inline-block; margin-left: 6px; color: #166534; font-weight: 900; }


/* v17 smart autofill dropdowns */
.autocomplete-field {
  position: relative;
  overflow: visible;
}
.autocomplete-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: min(320px, 55vh);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
  padding: 8px;
}
.autocomplete-option {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 12px;
  border-radius: 16px;
  color: var(--text);
  display: grid;
  gap: 4px;
  font-weight: 800;
  cursor: pointer;
}
.autocomplete-option:hover,
.autocomplete-option:focus {
  background: #eef6ff;
  outline: none;
}
.suggestion-primary {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.suggestion-secondary,
.suggestion-meta {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.inline-action {
  display: inline-flex;
  width: auto;
  min-height: 34px;
  padding: 6px 12px;
  margin-left: 8px;
  vertical-align: middle;
}
@media (max-width: 780px) {
  .autocomplete-list {
    position: fixed;
    left: 18px;
    right: 18px;
    top: auto;
    bottom: calc(96px + env(safe-area-inset-bottom));
    max-height: 42vh;
    border-radius: 26px;
  }
  .autocomplete-option {
    padding: 14px;
    min-height: 58px;
  }
  .suggestion-primary { font-size: 16px; }
  .suggestion-secondary, .suggestion-meta { font-size: 13px; }
  .inline-action {
    display: flex;
    margin: 8px 0 0;
    width: fit-content;
  }
}

/* v18 smart auto-fill sheet: always visible/clickable on phone */
.smart-autofill-sheet {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(108px + env(safe-area-inset-bottom));
  z-index: 9999;
  max-height: min(54vh, 460px);
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.98);
  border-radius: 28px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 60px rgba(15,23,42,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.smart-autofill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(226,232,240,.9);
}
.smart-autofill-head strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}
.smart-autofill-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-top: 2px;
}
.smart-autofill-list {
  max-height: calc(min(54vh, 460px) - 68px);
  overflow-y: auto;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
}
.smart-autofill-option {
  width: 100%;
  min-height: 64px;
  border: 0;
  border-radius: 20px;
  background: #f7fbff;
  color: var(--text);
  text-align: left;
  display: grid;
  gap: 4px;
  padding: 14px;
  margin-bottom: 8px;
  box-shadow: inset 0 0 0 1px rgba(226,232,240,.9);
}
.smart-autofill-option:active,
.smart-autofill-option:hover,
.smart-autofill-option:focus {
  background: #e8f3ff;
  outline: none;
}
.smart-autofill-empty {
  padding: 18px 14px;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}
@media (min-width: 781px) {
  .smart-autofill-sheet {
    left: auto;
    right: 34px;
    bottom: 34px;
    width: min(460px, 32vw);
    max-height: 520px;
  }
  .smart-autofill-list { max-height: 440px; }
}
@media (max-width: 780px) {
  .sidebar.nav-expanded ~ .smart-autofill-sheet,
  .sidebar.nav-expanded + .main ~ .smart-autofill-sheet {
    bottom: calc(184px + env(safe-area-inset-bottom));
  }
  .autocomplete-list {
    display: none !important;
  }
}

/* v19 map icon polish + automatic driver tracking UI */
.nav-img-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.sico-map-marker-icon {
  border-radius: 999px;
  filter: drop-shadow(0 8px 10px rgba(15, 23, 42, 0.26));
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}
.map-legend img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
@media (max-width: 760px) {
  .map-legend {
    display: grid;
    grid-template-columns: 1fr;
  }
  .map-legend span {
    justify-content: flex-start;
    width: 100%;
  }
  .nav-img-icon img {
    width: 25px;
    height: 25px;
  }
}

/* v20 Yard/Junkyard profile polish */
.yard-card-list .customer-card-main strong::before {
  content: '🏠 ';
}
.yard-card .customer-card-actions {
  align-items: stretch;
}
@media (max-width: 760px) {
  .yard-card .customer-card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* v21 driver On Duty gate */
.duty-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(22px, var(--safe-top)) 16px max(22px, var(--safe-bottom));
  background: radial-gradient(circle at top, rgba(10,132,255,.38), transparent 35%), linear-gradient(165deg, #0b1020, #111827 58%, #172033);
}
.duty-card {
  width: min(520px, 100%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 32px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
  display: grid;
  gap: 16px;
}
.duty-brand h1 { font-size: 26px; }
.duty-status-box {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid var(--line);
}
.duty-status-box strong { display: block; font-size: 18px; color: var(--ink); }
.duty-status-box p { margin-top: 3px; }
.duty-dot,
.duty-status-inline span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 5px rgba(148,163,184,.18);
  background: #94a3b8;
}
.duty-dot.off,
.duty-status-inline.off span {
  background: var(--danger);
  box-shadow: 0 0 0 5px rgba(255,59,48,.15);
}
.duty-status-inline.on span {
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(52,199,89,.16);
}
.duty-actions { grid-template-columns: 1fr 1fr; }
.duty-live-panel {
  border-color: rgba(52,199,89,.22);
  background: linear-gradient(180deg, #fff, #f7fff9);
}
.duty-status-inline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  margin: 10px 0;
  padding: 8px 11px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}
@media (max-width: 760px) {
  .duty-card { border-radius: 30px; padding: 18px; }
  .duty-brand { align-items: flex-start; }
  .duty-brand h1 { font-size: 23px; }
  .duty-status-box { align-items: flex-start; }
  .duty-actions { grid-template-columns: 1fr; }
}


/* v22 mobile visual polish */
:root {
  --border: #e5e7eb;
  --panel-sheen: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,.96));
}
body { letter-spacing: -.01em; }
.main { max-width: 1500px; width: 100%; margin: 0 auto; }
.page { display: grid; gap: 16px; align-content: start; }
.panel, .form-section, .table-wrap, .column, .job-card, .stat-card, .home-pickup-card, .customer-card, .driver-load-card, .map-load-card, .duty-card, .auth-card {
  background: var(--panel-sheen);
}
.panel, .form-section, .table-wrap, .column, .job-card, .stat-card, .home-pickup-card, .customer-card, .driver-load-card, .map-load-card {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
}
.topbar {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(226,232,240,.88);
  border-radius: 28px;
  padding: 16px 18px;
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.page-heading h2 { font-size: clamp(28px, 3vw, 34px); }
.page-heading p { font-size: 14px; }
.top-actions { flex-wrap: wrap; }
#globalSearch {
  border-radius: 999px;
  border-color: rgba(10,132,255,.12);
  box-shadow: 0 10px 24px rgba(10,132,255,.06);
}
.primary, .secondary, .ghost, .danger, .success, .mini-btn { box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.job-card .meta strong, .home-info-line b, .money-total-row span, .money-total-row strong { line-height: 1.3; }
.status-pill, .role-pill, .count-pill { letter-spacing: .03em; }
.home-pickup-card, .customer-card, .map-load-card, .driver-load-card { border-radius: 24px; }
.home-pickup-main, .home-money-row { align-items: stretch; }
.map-toolbar { padding-bottom: 2px; }
.dialog { border: 1px solid rgba(226,232,240,.9); }
#jobDialogBody > .grid-2, #jobDialogBody > .panel { align-items: start; }

@media (max-width: 760px) {
  body::before { height: 170px; background: radial-gradient(circle at 20% 0%, rgba(10,132,255,.22), transparent 34%), linear-gradient(180deg, #eef6ff 0%, rgba(246,247,251,0) 100%); }
  .main {
    padding-top: calc(max(14px, var(--safe-top)) + 2px);
    padding-left: 12px;
    padding-right: 12px;
  }
  .topbar {
    margin: calc(-1 * max(14px, var(--safe-top))) -12px 12px;
    padding: max(14px, var(--safe-top)) 12px 12px;
    border-radius: 0 0 24px 24px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    box-shadow: 0 12px 24px rgba(15,23,42,.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .page { gap: 12px; }
  .page-heading { align-items: center; gap: 10px; }
  .page-heading h2 { font-size: 26px; line-height: 1.04; }
  .page-heading p { font-size: 12px; line-height: 1.35; }
  .top-actions { grid-template-columns: 1fr 86px 86px; }
  .stat-card { border-radius: 22px; }
  .panel, .form-section, .job-card, .column, .home-pickup-card, .customer-card, .driver-load-card, .map-load-card { border-radius: 22px; }
  .job-card { gap: 12px; }
  .job-card .job-top { display: grid; grid-template-columns: 1fr auto; align-items: start; }
  .job-card .vehicle { font-size: 17px; line-height: 1.15; }
  .job-card .meta { font-size: 12.5px; }
  .job-card .actions { gap: 7px; }
  .home-pickup-head { gap: 8px; }
  .home-pickup-head strong { font-size: 15px; }
  .home-pickup-head span:not(.status-pill) { font-size: 12px; }
  .home-info-line { border-radius: 16px; }
  .home-info-line span { font-size: 9px; }
  .home-info-line b, .home-info-line a { font-size: 12.5px; }
  .home-money-row span { border-radius: 15px; min-height: 52px; }
  .home-money-row b { font-size: 12px; }
  .customer-card-main strong { font-size: 15px; }
  .customer-card-main span, .customer-card-main small { font-size: 12px; }
  .form-section h3, .panel h3 { font-size: 17px; }
  .help-box, .lock-note { border-radius: 16px; }
  .map-load-card p { font-size: 12.5px; }
  .map-legend span { border-radius: 16px; }
  .dialog-head { background: rgba(255,255,255,.95); }
  .smart-autofill-sheet { border-radius: 24px; }

  .table-wrap {
    overflow: visible !important;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap th,
  .table-wrap td {
    display: block;
    width: 100%;
  }
  .table-wrap thead { display: none; }
  .table-wrap tbody {
    display: grid;
    gap: 10px;
  }
  .table-wrap tr {
    background: linear-gradient(180deg, #fff, #fbfdff);
    border: 1px solid rgba(226,232,240,.95);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
  }
  .table-wrap td {
    display: grid;
    grid-template-columns: minmax(92px, 40%) 1fr;
    gap: 10px;
    align-items: start;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid rgba(237,240,244,.85);
    max-width: 100%;
    font-size: 12px;
  }
  .table-wrap td:last-child { border-bottom: 0; padding-bottom: 0; }
  .table-wrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .table-wrap td > * { min-width: 0; }
  .table-wrap td .mini-btn,
  .table-wrap td button,
  .table-wrap td select,
  .table-wrap td input {
    width: 100%;
  }
  .table-wrap td .roleChangeForm { display: grid; gap: 8px; }
}

@media (max-width: 430px) {
  .top-actions { grid-template-columns: 1fr; }
  .top-actions button { width: 100%; }
  .page-heading { align-items: flex-start; }
  .cards { gap: 8px; }
  .home-pickup-card, .customer-card, .job-card, .map-load-card { padding: 12px; }
  .table-wrap tr { border-radius: 18px; padding: 11px; }
  .table-wrap td {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 6px 0;
  }
  .table-wrap td::before { font-size: 9px; }
}


/* v23 overlap + bottom nav fit fixes */
@media (max-width: 760px) {
  .topbar {
    position: relative;
    top: auto;
    z-index: 10;
    margin: 0 0 14px;
    padding: 14px 12px;
    border-radius: 24px;
    border: 1px solid rgba(229,231,235,.82);
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
  }
  .main {
    padding-top: max(14px, var(--safe-top));
  }
  .page-heading {
    align-items: flex-start;
  }
  .cards {
    margin-top: 0;
  }
  .sidebar {
    height: 78px;
  }
  .sidebar.nav-expanded {
    height: 240px;
    padding-bottom: 10px;
  }
  .sidebar nav,
  .sidebar.nav-expanded nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 54px;
    gap: 6px;
    align-content: start;
  }
  .nav-btn {
    height: 54px;
  }
  .sidebar.nav-expanded + .main {
    padding-bottom: calc(280px + var(--safe-bottom));
  }
  .toast { bottom: calc(104px + var(--safe-bottom)); }
  .sidebar.nav-expanded ~ .toast,
  .sidebar.nav-expanded + .main ~ .toast {
    bottom: calc(252px + var(--safe-bottom));
  }
}

@media (max-width: 430px) {
  .sidebar.nav-expanded {
    height: 248px;
  }
  .sidebar.nav-expanded + .main {
    padding-bottom: calc(288px + var(--safe-bottom));
  }
}


/* v25 live tracking required gate */
.tracking-required-panel {
  border-color: rgba(10,132,255,.28);
  background: linear-gradient(180deg, #ffffff, #f3f9ff);
}
.tracking-required-panel h3 { font-size: 22px; }
@media (max-width: 760px) {
  .tracking-required-panel {
    min-height: calc(100dvh - 230px);
    display: grid;
    align-content: center;
    gap: 14px;
  }
  .tracking-required-panel h3 { font-size: 24px; }
}

/* v26 driver auto live tracking fix */
.tracking-required-panel {
  border-color: rgba(10,132,255,.28);
  background: linear-gradient(180deg, #ffffff, #f4f9ff);
}
.tracking-required-panel .form-actions {
  grid-template-columns: 1fr;
}
@media (max-width: 760px) {
  .tracking-required-panel h3 { font-size: 20px; }
  .tracking-required-panel .primary { min-height: 52px; }
}


/* v27 detailed reports polish */
.report-period-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.report-period-card {
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  display: grid;
  gap: 13px;
  min-width: 0;
}
.report-period-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.report-period-head h3 { font-size: 20px; line-height: 1.1; }
.report-period-head strong { font-size: 20px; text-align: right; white-space: nowrap; }
.report-kicker {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 950;
  margin-bottom: 5px;
}
.report-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 7px;
}
.report-mini-grid span {
  background: #f1f5f9;
  border: 1px solid #edf0f4;
  border-radius: 15px;
  padding: 9px 7px;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.report-mini-grid b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  overflow-wrap: anywhere;
}
.report-mini-grid em {
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
}
.report-money-lines {
  display: grid;
  gap: 7px;
}
.report-money-lines div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding-top: 7px;
  border-top: 1px solid #edf0f4;
}
.report-money-lines span { color: var(--muted); font-size: 12px; font-weight: 900; }
.report-money-lines b { color: var(--ink); font-size: 13px; text-align: right; }
.report-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.report-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}
.report-section-head h3 { margin: 0; }
.report-section-head p { margin: 0; }
.report-table table { min-width: 760px; }
.report-table td strong { font-weight: 950; }
.report-table small { color: var(--muted); font-size: 11px; }

@media (max-width: 1180px) {
  .report-section-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .report-period-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .report-period-card {
    border-radius: 22px;
    padding: 13px;
    gap: 11px;
  }
  .report-period-head h3 { font-size: 18px; }
  .report-period-head strong { font-size: 18px; }
  .report-mini-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .report-money-lines div { padding-top: 6px; }
  .report-section-grid { gap: 12px; margin-top: 12px; }
  .report-section-head h3 { font-size: 17px; }
  .report-section-head p { font-size: 12px; }
  .report-table table { min-width: 0; }
}


/* v28 settings logout button */
.settings-logout-panel {
  border-color: rgba(255,59,48,.22);
  background: linear-gradient(180deg, #ffffff, #fff7f6);
}
@media (max-width: 760px) {
  .settings-logout-panel .danger {
    min-height: 52px;
    border-radius: 18px;
    font-size: 16px;
  }
}


/* v29 mobile menu logout button */
.mobile-menu-logout { display: none; }
@media (max-width: 760px) {
  .mobile-menu-logout {
    display: none;
    width: 100%;
    min-height: 48px;
    border-radius: 19px;
    margin-top: 8px;
    background: #ffe8e6;
    color: #b42318;
    font-weight: 950;
    box-shadow: inset 0 0 0 1px rgba(255,59,48,.18), 0 6px 16px rgba(15,23,42,.08);
  }
  .sidebar.nav-expanded .mobile-menu-logout {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar.nav-expanded {
    height: 312px;
    padding-bottom: 10px;
  }
  .sidebar.nav-expanded nav {
    grid-auto-rows: 52px;
    gap: 6px;
  }
  .sidebar.nav-expanded .nav-btn {
    height: 52px;
  }
  .sidebar.nav-expanded + .main {
    padding-bottom: calc(352px + var(--safe-bottom));
  }
  .sidebar.nav-expanded ~ .toast,
  .sidebar.nav-expanded + .main ~ .toast {
    bottom: calc(324px + var(--safe-bottom));
  }
}
@media (max-width: 430px) {
  .sidebar.nav-expanded {
    height: 320px;
  }
  .sidebar.nav-expanded + .main {
    padding-bottom: calc(360px + var(--safe-bottom));
  }
}


/* v33 Resell module */
.status-resell { background:#f3e8ff; color:#6b21a8; }
.resell-list { display:grid; gap:14px; }
.resell-card { display:grid; gap:14px; }
.resell-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.resell-card-head h3 { margin-top:8px; }
.resell-card-head p { font-size:12px; }
.resell-money-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.resell-money-grid span, .resell-details-grid span { background:#f8fafc; border:1px solid #edf0f4; border-radius:16px; padding:10px; display:grid; gap:4px; color:var(--muted); font-size:10px; font-weight:900; }
.resell-money-grid b, .resell-details-grid b { color:var(--ink); font-size:13px; overflow-wrap:anywhere; }
.resell-details-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.resell-status-repairing { background:#fff7ed; color:#9a3412; }
.resell-status-ready { background:#ecfdf3; color:#047857; }
.resell-status-listed { background:#e0f2fe; color:#075985; }
.resell-status-sold { background:#dcfce7; color:#166534; }
.resell-status-on_hold { background:#fef3c7; color:#92400e; }
@media (max-width:760px) {
  .resell-card-head { display:grid; grid-template-columns:1fr; }
  .resell-card-head .status-pill { width:fit-content; }
  .resell-money-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .resell-details-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sidebar.nav-expanded { height:370px; }
  .sidebar.nav-expanded + .main { padding-bottom:calc(410px + var(--safe-bottom)); }
}
@media (max-width:430px) {
  .resell-details-grid { grid-template-columns:1fr; }
  .sidebar.nav-expanded { height:378px; }
  .sidebar.nav-expanded + .main { padding-bottom:calc(418px + var(--safe-bottom)); }
}

/* v34 individual Resell parts and labor costs */
.resell-detail-summary { grid-template-columns: repeat(6, minmax(135px,1fr)); }
.resell-expense-add-panel { border-color: rgba(52,199,89,.24); background: linear-gradient(180deg,#fff,#f7fff9); }
.resell-expense-add-panel.labor-panel { border-color: rgba(10,132,255,.24); background: linear-gradient(180deg,#fff,#f7fbff); }
.resell-expense-list { display:grid; gap:10px; }
.resell-expense-line {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  border:1px solid var(--line);
  border-left:5px solid var(--success);
  border-radius:18px;
  padding:12px;
  background:#fff;
  box-shadow:0 5px 14px rgba(15,23,42,.04);
}
.resell-expense-line.labor { border-left-color:var(--primary); }
.resell-expense-main { display:flex; align-items:flex-start; gap:10px; min-width:0; }
.resell-expense-main > div { min-width:0; display:grid; gap:3px; }
.resell-expense-main strong { color:var(--ink); overflow-wrap:anywhere; }
.resell-expense-main small { color:var(--muted); overflow-wrap:anywhere; }
.resell-expense-main p { font-size:12px; overflow-wrap:anywhere; }
.resell-expense-amount { display:grid; justify-items:end; gap:7px; }
.resell-expense-amount > strong { color:var(--ink); font-size:17px; }
@media (max-width:1180px) {
  .resell-detail-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .resell-detail-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .resell-expense-line { grid-template-columns:1fr; align-items:start; border-radius:20px; }
  .resell-expense-main { display:grid; grid-template-columns:auto minmax(0,1fr); }
  .resell-expense-amount { grid-template-columns:1fr auto; align-items:center; justify-items:stretch; }
  .resell-expense-amount > strong { text-align:left; }
}
@media (max-width:430px) {
  .resell-detail-summary { grid-template-columns:1fr 1fr; }
}

/* v35 VIN camera scan + NHTSA decode */
.vin-control { display: grid; gap: 8px; min-width: 0; }
.vin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vin-actions .mini-btn { min-height: 40px; width: 100%; }
.vin-decode-result { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #bbf7d0; border-radius: 14px; background: #ecfdf3; }
.vin-decode-result strong { color: #14532d; font-size: 13px; }
.vin-decode-result span, .vin-decode-result small { color: #166534; font-size: 11px; }
.vin-scanner { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); background: rgba(7,12,24,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.vin-scanner-card { width: min(560px,100%); max-height: 100%; overflow-y: auto; background: #fff; border-radius: 28px; padding: 16px; box-shadow: 0 28px 90px rgba(0,0,0,.4); display: grid; gap: 12px; }
.vin-scanner-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vin-scanner-head strong { display: block; font-size: 21px; color: var(--ink); }
.vin-scanner-head span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.vin-camera-wrap { position: relative; overflow: hidden; border-radius: 22px; background: #0b1020; aspect-ratio: 4 / 3; }
#vinScannerVideo { width: 100%; height: 100%; object-fit: cover; display: block; }
.vin-scan-frame { position: absolute; left: 6%; right: 6%; top: 38%; height: 24%; border: 3px solid #34c759; border-radius: 16px; box-shadow: 0 0 0 999px rgba(0,0,0,.18); pointer-events: none; }
.vin-manual-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.vin-photo-button { width: 100%; cursor: pointer; }
@media (max-width: 430px) {
  .vin-scanner { padding-left: 8px; padding-right: 8px; }
  .vin-scanner-card { border-radius: 24px; padding: 12px; }
  .vin-manual-row { grid-template-columns: 1fr; }
  .vin-actions { grid-template-columns: 1fr 1fr; }
}

/* v37 My Fleet */
.fleet-list { display:grid; gap:14px; }
.fleet-card { display:grid; gap:13px; }
.fleet-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.fleet-card-head h3 { margin-top:8px; }
.fleet-info-grid, .fleet-expiry-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.fleet-expiry-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fleet-info-grid span, .fleet-expiry-grid span { background:#f8fafc; border:1px solid #edf0f4; border-radius:16px; padding:10px; display:grid; gap:4px; color:var(--muted); font-size:10px; font-weight:900; }
.fleet-info-grid b, .fleet-expiry-grid b { color:var(--ink); font-size:13px; overflow-wrap:anywhere; }
.fleet-status-active { background:#dcfce7; color:#166534; }
.fleet-status-maintenance { background:#fff7ed; color:#9a3412; }
.fleet-status-out_of_service { background:#fee2e2; color:#991b1b; }
.fleet-status-retired, .fleet-status-sold { background:#e5e7eb; color:#374151; }
.fleet-due-overdue { color:#b42318 !important; background:#fff1f0 !important; }
.fleet-due-soon { color:#9a3412 !important; background:#fff7ed !important; }
.fleet-due-ok { color:#166534 !important; }
.fleet-detail-summary { grid-template-columns:repeat(4,minmax(135px,1fr)); }
.fleet-service-add-panel { border-color:rgba(10,132,255,.24); background:linear-gradient(180deg,#fff,#f7fbff); }
.fleet-service-list { display:grid; gap:10px; }
.fleet-service-line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; border:1px solid var(--line); border-left:5px solid var(--primary); border-radius:18px; padding:12px; background:#fff; box-shadow:0 5px 14px rgba(15,23,42,.04); }
.fleet-service-line > div:first-child { min-width:0; display:grid; gap:4px; }
.fleet-service-line strong, .fleet-service-line small, .fleet-service-line p { overflow-wrap:anywhere; }
.fleet-service-line small { color:var(--muted); }
.fleet-service-cost { display:grid; gap:7px; justify-items:end; }
.fleet-service-cost > strong { font-size:17px; color:var(--ink); }
@media (max-width:1180px) { .fleet-info-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  .fleet-card-head { display:grid; grid-template-columns:1fr; }
  .fleet-card-head button { width:100%; }
  .fleet-info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fleet-expiry-grid { grid-template-columns:1fr; }
  .fleet-detail-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fleet-service-line { grid-template-columns:1fr; border-radius:20px; }
  .fleet-service-cost { grid-template-columns:1fr auto; align-items:center; justify-items:stretch; }
  .sidebar.nav-expanded { height:430px; }
  .sidebar.nav-expanded + .main { padding-bottom:calc(470px + var(--safe-bottom)); }
}
@media (max-width:430px) {
  .fleet-info-grid { grid-template-columns:1fr 1fr; }
  .sidebar.nav-expanded { height:438px; }
  .sidebar.nav-expanded + .main { padding-bottom:calc(478px + var(--safe-bottom)); }
}


/* v40 VIN scanner reliability */
.vin-scan-frame {
  border: 3px solid #0a84ff !important;
  box-shadow: 0 0 0 9999px rgba(2,8,23,.36), 0 0 0 5px rgba(255,255,255,.75);
}
.vin-camera-wrap video { object-fit: cover; }
@media (max-width:760px) {
  .vin-scanner-card { max-height: 94dvh; overflow-y: auto; }
  .vin-camera-wrap { min-height: 260px; }
}

/* v50 — iPhone-first native app redesign */
:root {
  --ios-bg: #f2f2f7;
  --ios-card: rgba(255,255,255,.94);
  --ios-blue: #007aff;
  --ios-green: #34c759;
  --ios-orange: #ff9500;
  --ios-red: #ff3b30;
  --ios-purple: #af52de;
  --ios-teal: #30b0c7;
  --ios-indigo: #5856d6;
  --ios-pink: #ff2d55;
  --ios-gray: #8e8e93;
  --ios-separator: rgba(60,60,67,.16);
}
body { background: var(--ios-bg); }
body::before { display: none; }
.mobile-more-tab { display: none; }
.ios-fab, .ios-action-backdrop { display: none; }

/* Refined desktop keeps the same data, with an Apple-like surface */
@media (min-width: 761px) {
  .main { background: var(--ios-bg); }
  .sidebar { background: rgba(17,24,39,.98); }
  .topbar { background: rgba(255,255,255,.86); }
  .mobile-more-tab { display: none !important; }
}

@media (max-width: 760px) {
  html, body { background: var(--ios-bg); }
  body { min-height: 100dvh; color: #1c1c1e; overscroll-behavior-y: auto; }
  body.ios-sheet-open { overflow: hidden; }
  .app { min-height: 100dvh; }
  .main {
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px calc(104px + env(safe-area-inset-bottom, 0px));
    background: var(--ios-bg);
  }

  /* Native iOS large-title header */
  .topbar {
    position: relative;
    display: grid;
    gap: 12px;
    margin: 0 0 14px;
    padding: 4px 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .page-heading { align-items: center; gap: 10px; }
  .page-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    padding: 3px;
    border: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.09);
  }
  .page-heading h2 {
    font-size: 31px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.035em;
    color: #000;
  }
  .page-heading p { display: none; }
  .top-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) 46px 46px;
    gap: 8px;
    width: 100%;
  }
  #globalSearch {
    min-height: 44px;
    border: 0;
    border-radius: 13px;
    padding: 11px 14px 11px 38px;
    background: #e3e3e8;
    box-shadow: none;
    color: #1c1c1e;
    background-image: radial-gradient(circle, #8e8e93 0 2px, transparent 3px);
    background-position: 18px 18px;
    background-repeat: no-repeat;
  }
  #globalSearch::placeholder { color: #8e8e93; }
  #searchBtn, #refreshBtn {
    width: 46px;
    min-height: 44px;
    padding: 0;
    border-radius: 13px;
    overflow: hidden;
    text-indent: -9999px;
    position: relative;
    box-shadow: none;
  }
  #searchBtn::after { content: '⌕'; text-indent: 0; position: absolute; inset: 0; display:grid; place-items:center; font-size:23px; }
  #refreshBtn::after { content: '↻'; text-indent: 0; position: absolute; inset: 0; display:grid; place-items:center; font-size:23px; }

  /* Permanent four-tab iPhone tab bar */
  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: none;
    height: calc(82px + env(safe-area-inset-bottom, 0px));
    padding: 7px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: .5px solid rgba(60,60,67,.24);
    border-radius: 0;
    background: rgba(249,249,249,.88);
    box-shadow: 0 -8px 28px rgba(0,0,0,.05);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    z-index: 1000;
  }
  .logo-row, .logout-btn, .desktop-secondary, .mobile-menu-logout, .mobile-nav-grip { display: none !important; }
  .mobile-more-tab { display: flex !important; }
  .sidebar nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 4px;
    width: 100%;
    height: 60px;
    overflow: visible !important;
    padding: 0;
  }
  .sidebar .nav-btn.mobile-primary {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 60px;
    padding: 5px 2px 2px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    border-radius: 12px;
    background: transparent;
    color: #8e8e93;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: -.01em;
  }
  .sidebar .nav-btn.mobile-primary.active { background: transparent; color: var(--ios-blue); }
  .sidebar .nav-btn.mobile-primary:active { background: rgba(0,122,255,.08); transform: scale(.96); }
  .sidebar .nav-icon { width: 27px; height: 27px; display:grid; place-items:center; font-size: 24px !important; line-height: 1; }
  .sidebar .nav-img-icon img { width: 27px; height: 27px; filter: grayscale(1); opacity: .58; }
  .sidebar .nav-btn.active .nav-img-icon img { filter: none; opacity: 1; }
  .ios-symbol { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; }

  /* Cards and controls */
  .page { gap: 14px; animation: iosPageIn .22s cubic-bezier(.2,.75,.25,1); }
  @keyframes iosPageIn { from { opacity: .55; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  .cards { gap: 10px; }
  .stat-card, .panel, .form-section, .job-card, .column, .home-pickup-card, .customer-card, .driver-load-card, .map-load-card {
    background: var(--ios-card);
    border: .5px solid rgba(60,60,67,.13);
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.035);
  }
  .stat-card { min-height: 92px; padding: 14px; }
  .stat-card span { font-size: 11px; color: #6e6e73; font-weight: 650; }
  .stat-card b { margin-top: 6px; font-size: 25px; color: #000; }
  .panel, .form-section { padding: 16px; }
  .panel h3, .form-section h3 { font-size: 18px; font-weight: 750; }
  input, select, textarea {
    min-height: 48px;
    border: .5px solid rgba(60,60,67,.18);
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    box-shadow: none;
  }
  input:focus, select:focus, textarea:focus { border-color: var(--ios-blue); box-shadow: 0 0 0 3px rgba(0,122,255,.13); }
  .primary, .secondary, .danger, .success, .mini-btn {
    min-height: 46px;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: none;
  }
  .primary { background: var(--ios-blue); }
  .secondary { background: rgba(0,122,255,.11); color: var(--ios-blue); }
  .success { background: rgba(52,199,89,.14); color: #168638; }
  .danger { background: rgba(255,59,48,.12); color: var(--ios-red); }
  .job-card .actions button:first-child { background: var(--ios-blue); }
  .status-pill, .role-pill, .count-pill { padding: 5px 9px; font-size: 10px; }

  /* More screen */
  .ios-profile-card {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.035);
  }
  .ios-profile-card img { width:58px; height:58px; object-fit:contain; border-radius:15px; padding:4px; border:.5px solid var(--ios-separator); }
  .ios-profile-card strong { display:block; font-size:18px; color:#000; }
  .ios-profile-card span:not(.ios-chevron) { display:block; margin-top:3px; color:#8e8e93; text-transform:capitalize; font-size:13px; }
  .ios-more-group { overflow:hidden; background:#fff; border-radius:18px; box-shadow:0 2px 12px rgba(0,0,0,.035); }
  .ios-more-row {
    width:100%; min-height:68px; display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:12px;
    padding:10px 14px; background:#fff; color:#000; text-align:left; border-bottom:.5px solid var(--ios-separator);
  }
  .ios-more-row:last-child { border-bottom:0; }
  .ios-more-row:active { background:#e9e9ed; }
  .ios-more-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; color:#fff; font-size:17px; font-weight:800; }
  .ios-more-icon.blue { background:var(--ios-blue); } .ios-more-icon.green { background:var(--ios-green); }
  .ios-more-icon.indigo { background:var(--ios-indigo); } .ios-more-icon.orange { background:var(--ios-orange); }
  .ios-more-icon.cyan { background:#32ade6; } .ios-more-icon.purple { background:var(--ios-purple); }
  .ios-more-icon.teal { background:var(--ios-teal); } .ios-more-icon.pink { background:var(--ios-pink); }
  .ios-more-icon.gray { background:var(--ios-gray); } .ios-more-icon.red { background:var(--ios-red); }
  .ios-more-copy { min-width:0; }
  .ios-more-copy strong { display:block; font-size:16px; font-weight:650; color:#000; }
  .ios-more-copy small { display:block; margin-top:2px; color:#8e8e93; font-size:12px; line-height:1.25; }
  .ios-chevron { color:#c7c7cc; font-size:27px; font-weight:300; }
  .ios-account-group { margin-top:4px; }
  .ios-logout-row strong { color:var(--ios-red); }
  .ios-version-note { text-align:center; color:#8e8e93; font-size:11px; margin:2px 0 18px; }

  /* Floating create button and Apple-style action sheet */
  .ios-fab {
    display:grid; place-items:center; position:fixed; right:18px; bottom:calc(95px + env(safe-area-inset-bottom,0px));
    width:56px; height:56px; border-radius:50%; background:var(--ios-blue); color:#fff; font-size:32px; font-weight:300;
    box-shadow:0 10px 28px rgba(0,122,255,.34); z-index:900;
  }
  .ios-fab:active { transform:scale(.92); }
  .ios-fab.hidden { display:none !important; }
  .ios-action-backdrop {
    display:flex; position:fixed; inset:0; z-index:2000; align-items:flex-end; justify-content:center;
    padding:0 10px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(0,0,0,.28);
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  }
  .ios-action-backdrop.hidden { display:none !important; }
  .ios-action-sheet { width:min(520px,100%); padding:8px; border-radius:24px; background:rgba(248,248,248,.96); box-shadow:0 18px 60px rgba(0,0,0,.26); animation:iosSheetUp .24s cubic-bezier(.2,.8,.2,1); }
  @keyframes iosSheetUp { from { transform:translateY(110%); } to { transform:none; } }
  .ios-sheet-grabber { width:36px; height:5px; border-radius:999px; margin:1px auto 10px; background:#c7c7cc; }
  .ios-action-sheet h3 { padding:2px 8px 10px; text-align:center; font-size:13px; color:#6e6e73; }
  .ios-action-sheet > button:not(.ios-sheet-cancel) { width:100%; display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:center; min-height:60px; padding:8px 12px; text-align:left; background:#fff; border-bottom:.5px solid var(--ios-separator); }
  .ios-action-sheet > button:first-of-type { border-radius:16px 16px 0 0; }
  .ios-action-sheet > button:nth-last-of-type(2) { border-radius:0 0 16px 16px; border-bottom:0; }
  .ios-action-sheet > button > span { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:rgba(0,122,255,.12); color:var(--ios-blue); font-size:19px; }
  .ios-action-sheet strong { display:block; color:#000; font-size:16px; }
  .ios-action-sheet small { display:block; margin-top:2px; color:#8e8e93; font-size:12px; }
  .ios-sheet-cancel { width:100%; min-height:54px; margin-top:8px; border-radius:16px; background:#fff; color:var(--ios-blue); font-size:17px; font-weight:700; }

  /* Full-screen sheets for job details */
  .dialog { background:var(--ios-bg); }
  .dialog-head { padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px; background:rgba(249,249,249,.92); border-bottom:.5px solid var(--ios-separator); }
  .dialog-head h3 { font-size:18px; font-weight:700; }
  .icon-btn { background:rgba(118,118,128,.12); color:var(--ios-blue); }
  #jobDialogBody { padding:14px 14px calc(30px + env(safe-area-inset-bottom,0px)); }

  /* Map resembles an Apple Maps screen */
  .live-map-canvas { height:58vh; min-height:390px; border-radius:18px; border:0; box-shadow:0 2px 14px rgba(0,0,0,.08); }
  .map-toolbar { background:#fff; border-radius:18px; padding:14px; }

  /* Authentication and duty gate */
  .auth-page, .duty-page { background:linear-gradient(180deg,#f2f7ff 0%,#f2f2f7 44%,#e9e9ef 100%); }
  .auth-card, .duty-card { border:0; border-radius:26px; box-shadow:0 18px 55px rgba(0,0,0,.12); }
  .auth-card h1, .duty-card h1 { color:#000; }
}

@media (max-width: 390px) {
  .main { padding-left:11px; padding-right:11px; }
  .page-heading h2 { font-size:28px; }
  .page-logo { width:44px; height:44px; }
  .top-actions { grid-template-columns:minmax(0,1fr) 44px 44px; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (display-mode: standalone) and (max-width:760px) {
  .main { padding-top:calc(env(safe-area-inset-top,0px) + 8px); }
}


/* v51 load view-first action sections + mobile polish */
.load-view-section {
  position: relative;
  overflow: hidden;
}
.load-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.load-section-head h3 {
  margin: 0 !important;
  min-width: 0;
}
.load-section-edit-btn {
  min-height: 36px;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 8px 13px;
  background: #e8f3ff;
  color: #006edb;
  font-weight: 900;
  font-size: 12px;
  border: 0;
}
.load-section-edit-btn[aria-expanded="true"] {
  background: #0a84ff;
  color: #fff;
}
.load-section-editor {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(229,231,235,.9);
  animation: sectionEditorIn .18s ease-out;
}
.load-section-cancel-btn {
  width: 100%;
  margin-top: 2px;
}
.load-view-section.editing {
  border-color: rgba(10,132,255,.35);
  box-shadow: 0 14px 32px rgba(10,132,255,.10);
}
.danger-outline {
  background: #fff0ef;
  color: #b42318;
}
@keyframes sectionEditorIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  #jobDialogBody {
    display: grid;
    gap: 12px;
    padding: 12px 12px calc(118px + var(--safe-bottom));
    overflow-x: hidden;
  }
  #jobDialogBody > .grid-2,
  #jobDialogBody > .panel {
    margin-top: 0 !important;
    width: 100%;
    min-width: 0;
  }
  #jobDialogBody .grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #jobDialogBody .panel {
    padding: 14px;
    border-radius: 22px;
  }
  #jobDialogBody .panel p {
    font-size: 13px;
    line-height: 1.45;
  }
  #jobDialogBody .form-grid,
  #jobDialogBody .admin-edit-grid {
    gap: 12px;
  }
  .load-section-head {
    align-items: center;
    gap: 8px;
  }
  .load-section-head h3 {
    font-size: 17px;
  }
  .load-section-edit-btn {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .dialog-head {
    padding-left: 12px;
    padding-right: 12px;
  }
  .dialog-head h3 {
    max-width: calc(100vw - 72px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .photo-grid {
    gap: 8px;
  }
  .money-total-row {
    align-items: center;
  }
  .money-total-row strong {
    max-width: 52%;
  }
}

@media (max-width: 390px) {
  .load-section-head {
    align-items: flex-start;
  }
  .load-section-edit-btn {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* v54 mobile stability, push reminders, and VIN top-layer scanner */
@media (max-width: 760px) {
  html, body { min-height: 100%; height: auto; background: var(--ios-bg, #f2f2f7); }
  body { padding-bottom: 0 !important; }
  .app { min-height: 100svh; overflow: visible !important; transform: none !important; }
  .main {
    min-height: 100svh;
    padding-top: max(18px, env(safe-area-inset-top, 18px)) !important;
    padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
    transform: none !important;
  }
  .sidebar {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translate3d(0,0,0) !important;
    -webkit-transform: translate3d(0,0,0) !important;
    will-change: transform;
    contain: layout paint style;
    transition: none !important;
    isolation: isolate;
    z-index: 2147483000 !important;
  }
  .sidebar nav { transform: none !important; }
  .ios-fab {
    bottom: calc(98px + env(safe-area-inset-bottom,0px)) !important;
    z-index: 2147482000 !important;
  }
  .job-card, .home-pickup-card { overflow: hidden; }
  .job-card .job-top, .home-pickup-head { min-width: 0; }
  .job-card .status-pill, .home-pickup-head .status-pill {
    max-width: 45%; white-space: normal; text-align: center; justify-content: center;
  }
  .job-card .actions { position: relative; z-index: 1; }
}

.vin-scanner {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border: 0 !important;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
  background: rgba(7,12,24,.88) !important;
  overflow: hidden !important;
  z-index: 2147483647 !important;
}
.vin-scanner::backdrop {
  background: rgba(7,12,24,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.vin-scanner[open] { display: grid !important; place-items: center; }
.vin-scanner-card { position: relative; z-index: 2; max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
@media (max-width: 430px) {
  .vin-scanner { padding-left: 8px !important; padding-right: 8px !important; }
  .vin-scanner-card { width: 100%; border-radius: 24px; }
}


/* v55 responsiveness and database-latency feedback */
button, .primary, .secondary, .mini-btn, .nav-btn { will-change: transform; }
.tap-feedback { transform: scale(.965) !important; filter: brightness(.96); }
html.network-busy #refreshBtn::after {
  content: '';
  width: 14px;
  height: 14px;
  margin-left: 7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sico-spin .65s linear infinite;
}
@keyframes sico-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  button, .primary, .secondary, .mini-btn, .nav-btn { transition: transform .08s ease, filter .08s ease, background .12s ease; }
}

/* v56 Daily Cashier */
.cashier-hero-card {
  padding: 26px 22px;
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(145deg, #0a84ff, #075dc7 62%, #0b3b82);
  box-shadow: 0 18px 42px rgba(10,132,255,.28);
  display: grid;
  gap: 5px;
}
.cashier-hero-card span { font-size: 14px; font-weight: 850; opacity: .88; }
.cashier-hero-card strong { font-size: clamp(42px, 8vw, 64px); line-height: 1; letter-spacing: -.05em; }
.cashier-hero-card small { font-weight: 800; opacity: .78; }
.cashier-summary-cards { grid-template-columns: repeat(4, minmax(0,1fr)); }
.ios-cashier-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.cashier-action {
  min-height: 104px;
  border-radius: 24px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--ink);
}
.cashier-action span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 27px; font-weight: 700; }
.cashier-action.add span { background: #e7f8ed; color: #167c3d; }
.cashier-action.withdraw span { background: #ffe8e6; color: #b42318; }
.cashier-action.opening span { background: #e8f3ff; color: #0756a3; }
.cashier-action strong { font-size: 13px; }
.cashier-transaction-list, .cashier-history-list { display: grid; }
.cashier-transaction-row, .cashier-history-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.cashier-transaction-row:last-child, .cashier-history-row:last-child { border-bottom: 0; }
.cashier-tx-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-weight: 950; font-size: 20px; }
.cashier-tx-icon.in { background: #e7f8ed; color: #167c3d; }
.cashier-tx-icon.out { background: #ffe8e6; color: #b42318; }
.cashier-tx-copy { min-width: 0; display: grid; gap: 3px; }
.cashier-tx-copy strong { color: var(--ink); }
.cashier-tx-copy span, .cashier-history-row span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.cashier-tx-amount { white-space: nowrap; }
.cashier-history-row { grid-template-columns: minmax(0,1fr) auto; }
.cashier-history-row > div { display: grid; gap: 3px; }
.ios-empty-state { padding: 26px 10px; text-align: center; color: var(--muted); }
.ios-empty-state strong { display: block; color: var(--ink); margin-bottom: 4px; }

@media (max-width: 760px) {
  .cashier-hero-card { border-radius: 26px; padding: 22px 18px; }
  .cashier-hero-card strong { font-size: 46px; }
  .cashier-summary-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ios-cashier-actions { gap: 9px; }
  .cashier-action { min-height: 96px; border-radius: 22px; padding: 10px 6px; }
  .cashier-action span { width: 40px; height: 40px; }
  .cashier-action strong { font-size: 12px; }
  .cashier-transaction-row { grid-template-columns: auto minmax(0,1fr); }
  .cashier-tx-amount { grid-column: 2; justify-self: start; }
}


/* Sico Dispatch V1 final cashier + mobile polish */
.cashier-summary-cards { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.cashier-hero-card { overflow: hidden; isolation: isolate; }
.cashier-hero-card::after {
  content: '$'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 92px; font-weight: 950; opacity: .07; pointer-events: none;
}
.cashier-transaction-row { min-width: 0; }
.cashier-tx-copy { min-width: 0; }
.cashier-tx-copy span { overflow-wrap: anywhere; }
.cashier-tx-amount { white-space: nowrap; }

@media (max-width: 760px) {
  .cashier-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cashier-hero-card { border-radius: 28px; padding: 22px 18px; }
  .cashier-hero-card strong { font-size: clamp(38px, 12vw, 54px); }
  .cashier-transaction-row {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
  }
  .cashier-tx-amount { font-size: 14px; }
  .ios-cashier-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cashier-action { min-width: 0; padding: 12px 6px; }
  .cashier-action strong { font-size: 12px; }
  .cashier-history-row { gap: 10px; }
}
@media (max-width: 390px) {
  .cashier-summary-cards { grid-template-columns: 1fr 1fr; }
  .cashier-transaction-row { grid-template-columns: 36px minmax(0,1fr); }
  .cashier-tx-amount { grid-column: 2; justify-self: start; }
}


/* v57 unified Sico branding icons */
.sico-logo { object-fit: cover; background: #fff; }
.auth-logo, .page-logo, .side-logo { aspect-ratio: 1 / 1; }
.auth-logo { width: 72px; height: 72px; padding: 0; border-radius: 22px; }
.side-logo { width: 48px; height: 48px; padding: 0; border-radius: 15px; }
.page-logo { width: 58px; height: 58px; padding: 0; border-radius: 18px; }
@media (max-width:760px){
  .auth-logo { width: 68px; height: 68px; border-radius: 21px; }
  .page-logo { width: 54px; height: 54px; border-radius: 17px; margin-top:0; }
}

/* V60 phone-first settings and compact page organization */
.settings-hub { display: grid; gap: 14px; }
.settings-quick-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.settings-quick-card {
  min-height: 92px; padding: 13px 10px; border-radius: 20px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-soft); color: var(--ink);
  display: grid; justify-items: start; align-content: center; gap: 3px; text-align: left;
}
.settings-quick-card > span { font-size: 23px; color: var(--primary); }
.settings-quick-card strong { font-size: 14px; }
.settings-quick-card small { color: var(--muted); font-weight: 750; font-size: 11px; }
.settings-groups { display: grid; gap: 10px; }
.settings-group {
  background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-soft); scroll-margin-top: 18px;
}
.settings-group > summary {
  list-style: none; min-height: 72px; padding: 13px 15px; display: grid;
  grid-template-columns: 42px 1fr 24px; gap: 11px; align-items: center; cursor: pointer;
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-summary-icon {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: #edf6ff; color: var(--primary); font-size: 20px; font-weight: 950;
}
.settings-summary-copy { display: grid; gap: 2px; min-width: 0; }
.settings-summary-copy strong { font-size: 16px; color: var(--ink); }
.settings-summary-copy small { font-size: 12px; color: var(--muted); font-weight: 700; }
.settings-chevron { font-size: 28px; color: #94a3b8; transform: rotate(0); transition: transform .16s ease; }
.settings-group[open] .settings-chevron { transform: rotate(90deg); }
.settings-group[open] > summary { border-bottom: 1px solid var(--line); }
.settings-group-body { padding: 15px; }
.settings-status-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.settings-status-cards > div { background: #f8fafc; border: 1px solid var(--line); border-radius: 16px; padding: 11px; display: grid; gap: 2px; }
.settings-status-cards span { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.settings-status-cards strong { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.settings-status-cards small { color: var(--muted); font-size: 11px; }
.settings-action-list { display: grid; gap: 8px; }
.settings-action-row {
  width: 100%; min-height: 62px; border-radius: 17px; padding: 10px 12px; background: #f8fafc;
  border: 1px solid var(--line); display: grid; grid-template-columns: 36px 1fr 18px; gap: 10px; align-items: center; text-align: left; color: var(--ink);
}
.settings-action-row > span:nth-child(2) { display: grid; gap: 2px; }
.settings-action-row strong { font-size: 14px; }
.settings-action-row small { color: var(--muted); font-size: 11px; font-weight: 700; }
.settings-action-row > b { color: #94a3b8; font-size: 22px; }
.settings-action-row.destructive strong { color: #b42318; }
.settings-action-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-weight: 950; }
.settings-action-icon.blue { background: #e8f3ff; color: var(--primary); }
.settings-action-icon.gray { background: #eef2f7; color: #64748b; }
.settings-action-icon.red { background: #ffe8e6; color: #b42318; }
.compact-status-box { padding: 10px 12px; border-radius: 14px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 800; }
.compact-status-box.success-state { background: #ecfdf3; color: #166534; }
.compact-status-box.warning-state { background: #fff7ed; color: #9a3412; }
.compact-settings-form { gap: 11px; }
.compact-settings-form textarea { min-height: 76px; }
.settings-intro { font-size: 12px; margin: 0 0 12px; }
.quote-rule-mobile-list, .settings-user-list { display: grid; gap: 10px; }
.quote-rule-card, .settings-user-card { border: 1px solid var(--line); border-radius: 18px; padding: 12px; background: #fbfdff; display: grid; gap: 11px; }
.quote-rule-head, .settings-user-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.quote-rule-head strong { text-transform: capitalize; }
.quote-rule-head span { color: var(--muted); font-size: 12px; font-weight: 800; }
.quote-rule-grid, .settings-user-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.quote-rule-grid label, .settings-user-controls label { font-size: 11px; }
.settings-user-head > div { display: grid; gap: 2px; min-width: 0; }
.settings-user-head small { color: var(--muted); overflow-wrap: anywhere; }
.settings-subdetails { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.settings-subdetails > summary { cursor: pointer; color: var(--primary); font-weight: 900; }
.settings-activity-list { display: grid; gap: 8px; margin-top: 10px; }
.settings-activity-list > div { padding: 10px; border-radius: 14px; background: #f8fafc; display: grid; gap: 2px; }
.settings-activity-list span, .settings-activity-list small { color: var(--muted); font-size: 11px; }

@media (max-width: 760px) {
  .settings-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .settings-quick-card { min-height: 78px; border-radius: 18px; padding: 10px; }
  .settings-quick-card > span { font-size: 20px; }
  .settings-group { border-radius: 20px; }
  .settings-group > summary { min-height: 66px; padding: 11px 12px; grid-template-columns: 38px 1fr 20px; gap: 9px; }
  .settings-summary-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
  .settings-summary-copy strong { font-size: 15px; }
  .settings-summary-copy small { font-size: 11px; }
  .settings-group-body { padding: 12px; }
  .settings-status-cards { gap: 7px; }
  .settings-status-cards > div { padding: 9px; border-radius: 14px; }
  .settings-action-row { min-height: 58px; border-radius: 16px; }
  .quote-rule-grid, .settings-user-controls { grid-template-columns: 1fr 1fr; }
  .page > .help-box { margin-top: 0; margin-bottom: 0; }
  .page .panel > h3:first-child { margin-bottom: 9px; }
  .page .form-grid { gap: 11px; }
}
@media (max-width: 380px) {
  .settings-status-cards, .quote-rule-grid, .settings-user-controls { grid-template-columns: 1fr; }
}


/* V61 phone-first expandable dispatch, home loads, and driver loads */
.dispatch-status-list,
.expandable-load-list,
.driver-load-expand-list { display: grid; gap: 10px; }
.dispatch-status-group,
.load-expand-card {
  border: 1px solid rgba(226,232,240,.96);
  border-radius: 22px;
  background: linear-gradient(180deg,#fff,#fbfdff);
  box-shadow: 0 8px 20px rgba(15,23,42,.055);
  overflow: clip;
}
.dispatch-status-group > summary,
.load-expand-card > summary {
  list-style: none;
  cursor: pointer;
  min-height: 68px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto 20px;
  align-items: center;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.dispatch-status-group > summary::-webkit-details-marker,
.load-expand-card > summary::-webkit-details-marker { display: none; }
.dispatch-status-title { color: var(--ink); font-size: 15px; font-weight: 950; letter-spacing: .01em; }
.expand-chevron { color: #94a3b8; font-size: 27px; line-height: 1; transition: transform .16s ease; }
.dispatch-status-group[open] > summary,
.load-expand-card[open] > summary { border-bottom: 1px solid var(--line); background: rgba(248,250,252,.72); }
.dispatch-status-group[open] .expand-chevron,
.load-expand-card[open] .expand-chevron { transform: rotate(90deg); }
.dispatch-status-body { padding: 12px; display: grid; gap: 10px; }
.dispatch-status-body .job-card { margin: 0; }
.empty-expand-message { padding: 8px 4px 10px; margin: 0; text-align: center; }
.load-expand-summary-main { min-width: 0; display: grid; gap: 2px; }
.load-expand-summary-main strong { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.load-expand-summary-main span { color: var(--text); font-size: 13px; font-weight: 850; overflow-wrap: anywhere; }
.load-expand-summary-main small { color: var(--muted); font-size: 11px; font-weight: 750; overflow-wrap: anywhere; }
.load-expand-card > summary .status-pill { justify-self: end; max-width: 116px; white-space: normal; text-align: center; justify-content: center; }
.load-expand-body { padding: 12px; display: grid; gap: 11px; }
.load-expand-body > .job-card { margin: 0; box-shadow: none; border: 0; padding: 0; background: transparent; }
.home-load-expand .home-pickup-main { margin: 0; }

@media (min-width: 761px) {
  .dispatch-status-list { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .dispatch-status-group[open] { grid-column: 1 / -1; }
  .driver-load-expand-list { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .dispatch-status-group,
  .load-expand-card { border-radius: 20px; }
  .dispatch-status-group > summary,
  .load-expand-card > summary { min-height: 64px; padding: 11px 12px; gap: 8px; }
  .dispatch-status-body,
  .load-expand-body { padding: 10px; }
  .load-expand-summary-main strong { font-size: 13px; }
  .load-expand-summary-main span { font-size: 12px; }
  .load-expand-card > summary .status-pill { font-size: 9px; max-width: 96px; padding: 4px 7px; }
}
@media (max-width: 380px) {
  .dispatch-status-group > summary,
  .load-expand-card > summary { grid-template-columns: minmax(0,1fr) auto 16px; }
  .load-expand-card > summary .status-pill { max-width: 82px; }
  .expand-chevron { font-size: 23px; }
}


/* V62 universal phone-first expandable sections */
.mobile-page-expander { display: contents; }
.mobile-page-expander > summary { display: none; }
.mobile-expander-body { display: contents; }

@media (max-width: 760px) {
  .mobile-page-expander {
    display: block;
    border: 1px solid rgba(226,232,240,.96);
    border-radius: 20px;
    background: linear-gradient(180deg,#fff,#fbfdff);
    box-shadow: 0 8px 20px rgba(15,23,42,.055);
    overflow: clip;
    min-width: 0;
  }
  .mobile-page-expander > summary {
    list-style: none;
    cursor: pointer;
    min-height: 64px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 18px;
    align-items: center;
    gap: 9px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mobile-page-expander > summary::-webkit-details-marker { display: none; }
  .mobile-expander-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: #edf6ff;
    font-size: 21px;
    font-weight: 950;
  }
  .mobile-expander-copy { min-width: 0; display: grid; gap: 2px; }
  .mobile-expander-copy strong { color: var(--ink); font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
  .mobile-expander-copy small { color: var(--muted); font-size: 11px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
  .mobile-expander-chevron { color: #94a3b8; font-size: 27px; line-height: 1; transition: transform .16s ease; }
  .mobile-page-expander[open] > summary { border-bottom: 1px solid var(--line); background: rgba(248,250,252,.72); }
  .mobile-page-expander[open] .mobile-expander-chevron { transform: rotate(90deg); }
  .mobile-expander-body { display: block; padding: 10px; min-width: 0; }
  .mobile-expander-body > .panel,
  .mobile-expander-body > .form-section,
  .mobile-expander-body > .table-wrap,
  .mobile-expander-body > .customer-card,
  .mobile-expander-body > .yard-card,
  .mobile-expander-body > .resell-card,
  .mobile-expander-body > .fleet-card,
  .mobile-expander-body > .map-load-card,
  .mobile-expander-body > .driver-load-card {
    margin: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
  }
  .mobile-expander-body > .panel > h3:first-child,
  .mobile-expander-body > .form-section > h3:first-child { display: none; }
  .page > .mobile-page-expander,
  .page .grid-2 > .mobile-page-expander,
  .page .grid-3 > .mobile-page-expander { width: 100%; min-width: 0; }
  .page .grid-2:has(> .mobile-page-expander),
  .page .grid-3:has(> .mobile-page-expander) { grid-template-columns: 1fr; gap: 10px; }
  .mobile-page-expander .table-wrap { overflow: visible !important; }
  #jobDialogBody .mobile-page-expander { margin-bottom: 10px; }
}

@media (max-width: 380px) {
  .mobile-page-expander > summary { grid-template-columns: 34px minmax(0,1fr) 16px; padding: 10px; }
  .mobile-expander-icon { width: 34px; height: 34px; border-radius: 11px; }
  .mobile-expander-copy strong { font-size: 14px; }
  .mobile-expander-body { padding: 9px; }
}


/* Final V1 cash dashboard + Resell mobile identity polish */
.cash-available-stat {
  text-align: left;
  border: 1px solid rgba(52,199,89,.30);
  background: linear-gradient(180deg,#fff,#f1fff6);
  color: var(--ink);
  cursor: pointer;
}
.cash-available-stat small { display:block; margin-top:5px; color:#16803d; font-weight:850; font-size:11px; }
.cash-available-stat b { color:#167c3d; }
@media (max-width:760px) {
  .resell-list .mobile-expander-copy strong { font-size:17px; line-height:1.15; }
  .resell-list .mobile-expander-copy small { max-width:100%; }
  .cash-available-stat { min-height:150px; }
}


/* V1.1 business notification center */
.notification-summary{display:flex;align-items:center;justify-content:space-between;gap:14px}.notification-summary div{display:grid;gap:2px}.notification-summary span{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase}.notification-summary strong{font-size:32px}.notification-list{display:grid;gap:10px}.notification-card{border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden;box-shadow:var(--shadow-soft)}.notification-card.unread{border-color:rgba(10,132,255,.35);background:linear-gradient(180deg,#fff,#f4f9ff)}.notification-main{width:100%;display:grid;grid-template-columns:10px 1fr auto;gap:10px;text-align:left;padding:14px;background:transparent;color:var(--text);align-items:start}.notification-dot{width:9px;height:9px;border-radius:50%;background:#cbd5e1;margin-top:7px}.notification-card.unread .notification-dot{background:var(--primary);box-shadow:0 0 0 4px rgba(10,132,255,.12)}.notification-main span:nth-child(2){display:grid;gap:3px;min-width:0}.notification-main small{color:var(--muted);font-weight:800}.notification-main strong{font-size:15px}.notification-main p{font-size:13px;margin:0}.notification-archive{width:100%;padding:10px;border-top:1px solid var(--line);background:#f8fafc;color:var(--muted);font-weight:850}.notification-pref-list{display:grid;gap:8px}.notification-pref-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}.notification-pref-row span{display:grid;gap:2px}.notification-pref-row small{color:var(--muted)}.notification-pref-row input{width:48px;height:28px;min-height:0;accent-color:var(--primary)}
@media(max-width:760px){.notification-summary{position:sticky;top:0;z-index:8;border-radius:20px}.notification-main{padding:13px}.notification-main strong{font-size:14px}.notification-main p{font-size:12px}.notification-card{border-radius:20px}}

.notification-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ff3b30;color:white;font-size:11px;margin-left:6px;vertical-align:middle}