:root {
  --bg: #ffffff;
  --surface: #f8fafc;
  --surface-strong: #ffffff;
  --text: #111111;
  --muted: #334155;
  --border: #cbd5e1;
  --border-strong: #475569;
  --header-bg: #0f172a;
  --header-text: #ffffff;
  --button-bg: #1e293b;
  --button-bg-hover: #0f172a;
  --button-text: #ffffff;
  --focus: #2563eb;
  --danger: #991b1b;
  --danger-bg: #fee2e2;
  --success: #065f46;
  --success-bg: #dcfce7;
  --warning-bg: #fef3c7;
  --warning-border: #92400e;
  --info-bg: #dbeafe;
  --info-border: #1d4ed8;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
  background: var(--bg);
  color: var(--text);
}

body {
  min-height: 100vh;
  font-size: 1.125rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  padding: 0.85rem 1rem;
  text-decoration: none;
}

.site-header {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 1.5rem 0;
}

.site-header h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.25;
}

.container {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 1rem;
}

.subtitle {
  margin-top: 0.4rem;
  margin-bottom: 0;
  font-size: 1.05rem;
}

.top-link {
  display: inline-block;
  margin: 1rem 0 0;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
}

.top-link:focus,
.top-link:hover {
  text-decoration: underline;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin: 1rem 0;
}

.hidden {
  display: none;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

input,
select,
button,
textarea,
a {
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-height: 3rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}

input[readonly] {
  background: #f1f5f9;
}

button {
  min-height: 3rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--button-bg);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--button-text);
  cursor: pointer;
  font-weight: 700;
}

button:hover,
button:focus {
  background: var(--button-bg-hover);
}

button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus,
summary:focus {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.toolbar h2 {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.toolbar-actions,
.filter-buttons,
.action-row,
.help-actions,
.appearance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.driver-profile-row {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.profile-display-group {
  max-width: 100%;
}

.filters,
.availability-panel,
.help-panel,
.appearance-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.filter-toggle-row,
.availability-toggle-row,
.help-toggle-row {
  margin-top: 1rem;
}

.filter-toggle,
.availability-toggle,
.help-toggle {
  min-width: 220px;
}

.availability-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem 1rem;
  align-items: end;
}

.availability-note-group {
  min-width: 260px;
}

.message {
  margin-top: 1rem;
  font-weight: 700;
}

.message[data-type="error"] {
  color: var(--danger);
}

.message[data-type="success"] {
  color: var(--success);
}

.helper-text {
  margin-top: 0.3rem;
  color: var(--muted);
}

.emergency-help-text {
  font-weight: 700;
  color: var(--danger);
}

.call-action-button {
  display: inline-block;
  min-height: 3rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--button-bg);
  border-radius: 8px;
  background: var(--button-bg);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}

.call-action-button:hover,
.call-action-button:focus {
  background: var(--button-bg-hover);
}

.emergency-call-button {
  background: #7f1d1d;
  border-color: #7f1d1d;
}

.emergency-call-button:hover,
.emergency-call-button:focus {
  background: #991b1b;
}

.trip-card {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem;
  margin-top: 1rem;
}

.trip-card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.trip-card h3,
.trip-section h4 {
  margin-top: 0;
}

.trip-subtitle {
  margin-top: 0.25rem;
  color: #475569;
}

.trip-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem 1rem;
}

.trip-field {
  margin: 0;
}

.trip-field strong {
  display: block;
  margin-bottom: 0.2rem;
}

.trip-location-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.map-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.map-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--button-bg);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--button-text);
  text-decoration: none;
  font-weight: 700;
}

.map-link-button:hover,
.map-link-button:focus {
  background: var(--button-bg-hover);
  text-decoration: none;
}

.secondary-map-link {
  background: transparent;
  color: var(--text);
}

body.theme-dark .secondary-map-link,
body.high-contrast .secondary-map-link {
  color: var(--button-text);
}

.additional-stop-block {
  margin-top: 0.85rem;
}

.phone-link {
  color: #0f172a;
  font-weight: 700;
  text-decoration: underline;
  word-break: break-word;
}

.phone-link:hover,
.phone-link:focus {
  color: #1d4ed8;
}

.note-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem;
  margin-top: 0.75rem;
}

.note-block p {
  margin-bottom: 0;
}

.status-badge {
  display: inline-block;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  border: 1px solid #1e293b;
  background: #e2e8f0;
}

.status-assigned {
  background: #e2e8f0;
}

.status-accepted {
  background: var(--success-bg);
  border-color: #166534;
}

.status-rejected {
  background: var(--danger-bg);
  border-color: var(--danger);
}

.status-enroute {
  background: var(--info-bg);
  border-color: var(--info-border);
}

.status-arrived {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

.status-completed {
  background: #ecfccb;
  border-color: #4d7c0f;
}

.secondary-action {
  background: #7f1d1d;
  border-color: #7f1d1d;
}

.secondary-action:hover,
.secondary-action:focus {
  background: #991b1b;
}

.availability-list {
  margin-top: 1rem;
}

.availability-item,
.no-results {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 0.75rem;
}

.availability-item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.availability-item p {
  margin-bottom: 0;
}

.remove-availability-button {
  white-space: nowrap;
}

.appearance-details {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.appearance-details summary {
  cursor: pointer;
  font-weight: 700;
  list-style: revert;
}

.appearance-details summary::-webkit-details-marker {
  display: inline;
}

.appearance-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 0;
}

.appearance-fieldset legend {
  font-weight: 700;
  padding: 0 0.25rem;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.checkbox-group input[type="checkbox"] {
  width: 1.35rem;
  min-width: 1.35rem;
  height: 1.35rem;
  min-height: 1.35rem;
  margin: 0;
  padding: 0;
}

.checkbox-group label {
  margin: 0;
}

.appearance-actions {
  margin-top: 1rem;
}

/* Appearance setting classes */

body.theme-light {
  --bg: #ffffff;
  --surface: #f8fafc;
  --surface-strong: #ffffff;
  --text: #111111;
  --muted: #334155;
  --border: #cbd5e1;
  --border-strong: #475569;
  --header-bg: #0f172a;
  --header-text: #ffffff;
  --button-bg: #1e293b;
  --button-bg-hover: #0f172a;
  --button-text: #ffffff;
  --focus: #2563eb;
}

body.theme-dark {
  --bg: #0b1220;
  --surface: #111827;
  --surface-strong: #1f2937;
  --text: #f9fafb;
  --muted: #d1d5db;
  --border: #374151;
  --border-strong: #9ca3af;
  --header-bg: #000000;
  --header-text: #ffffff;
  --button-bg: #374151;
  --button-bg-hover: #4b5563;
  --button-text: #ffffff;
  --focus: #93c5fd;
  --success: #86efac;
  --danger: #fca5a5;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .availability-item,
body.theme-dark .no-results {
  background: #111827;
  color: #f9fafb;
}

body.theme-dark input[readonly] {
  background: #1f2937;
}

body.theme-dark .trip-subtitle,
body.theme-dark .phone-link,
body.theme-dark .helper-text {
  color: #d1d5db;
}

body.bg-soft {
  --bg: #f4f7fb;
}

body.bg-warm {
  --bg: #fcf7f0;
}

body.bg-cool {
  --bg: #eef6f8;
}

body.large-font {
  font-size: 1.275rem;
}

body.large-font input,
body.large-font select,
body.large-font textarea,
body.large-font button,
body.large-font .call-action-button {
  font-size: 1.1em;
}

body.high-contrast {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --text: #000000;
  --muted: #111111;
  --border: #000000;
  --border-strong: #000000;
  --header-bg: #000000;
  --header-text: #ffffff;
  --button-bg: #000000;
  --button-bg-hover: #222222;
  --button-text: #ffffff;
  --focus: #ffbf47;
  --success: #006400;
  --danger: #8b0000;
  --info-border: #00008b;
  --warning-border: #8b4513;
}

body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea,
body.high-contrast .availability-item,
body.high-contrast .no-results,
body.high-contrast .trip-card,
body.high-contrast .note-block,
body.high-contrast .panel,
body.high-contrast .appearance-fieldset {
  border-width: 2px;
}

body.high-contrast .status-badge {
  border-width: 2px;
  color: #000000;
}

body.btn-large button,
body.btn-large .call-action-button {
  min-height: 3.5rem;
  padding: 1rem 1.3rem;
  font-size: 1.05em;
}

body.btn-xlarge button,
body.btn-xlarge .call-action-button {
  min-height: 4rem;
  padding: 1.15rem 1.5rem;
  font-size: 1.12em;
}

@media (max-width: 768px) {
  body {
    font-size: 1rem;
  }

  .site-header h1 {
    font-size: 1.65rem;
  }

  .panel {
    padding: 1rem;
  }

  .toolbar-actions,
  .filter-buttons,
  .action-row,
  .help-actions,
  .appearance-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-toggle,
  .availability-toggle,
  .help-toggle,
  button,
  .call-action-button {
    width: 100%;
  }

  .availability-item {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
  }
}

.button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.85rem 1.1rem; border: 1px solid var(--button-bg); border-radius: 8px; background: var(--button-bg); color: var(--button-text); text-decoration: none; font-weight: 700; }
.button-link:hover, .button-link:focus { background: var(--button-bg-hover); }
.trip-list { display: grid; gap: 1rem; }
.message-layout-driver { display: grid; gap: 1rem; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
.message-thread-list, .message-thread { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-strong); min-height: 16rem; max-height: 28rem; overflow: auto; padding: 0.9rem; }
.thread-item { width: 100%; text-align: left; margin-bottom: 0.6rem; }
.thread-item.active-thread { box-shadow: inset 0 0 0 2px var(--focus); }
.message-bubble { border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem; margin-bottom: 0.75rem; background: #fff; }
.message-bubble.from-driver { border-left: 5px solid #1d4ed8; }
.message-bubble.from-dispatch { border-left: 5px solid #065f46; }
.message-bubble.urgent-message { background: #fff7ed; }
.quick-reply-row { margin-bottom: 1rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.empty-state { color: var(--muted); }
@media (max-width: 900px) { .message-layout-driver { grid-template-columns: 1fr; } }


/* ===== Phase 1 Driver Portal Modernization ===== */

.trip-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.trip-card {
  border-radius: 18px;
  padding: 1.25rem;
  border: 3px solid var(--border);
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  background: #ffffff;
}

.trip-card-header h3 {
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
}

.trip-subtitle {
  font-size: 1rem;
}

.trip-grid {
  gap: 1rem;
}

.trip-section h4 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.info-field,
.note-block {
  padding: 1rem;
  border-radius: 14px;
  background: #f8fafc;
}

.action-row,
.toolbar-actions,
.filter-buttons,
.quick-reply-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.action-row button,
.toolbar-actions button,
.filter-buttons button,
.quick-reply-row button,
.status-action {
  min-height: 64px;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.9rem 1.2rem;
  border-radius: 14px;
  flex: 1 1 180px;
}

.message-layout-driver {
  gap: 1.25rem;
}

.message-thread-list,
.message-panel {
  border-radius: 16px;
}

.filter-toggle {
  min-height: 60px;
  font-size: 1.05rem;
  font-weight: 700;
}

.collapsible-history {
  margin-top: 1.5rem;
  border: 2px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #f8fafc;
}

.collapsible-history summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-size: 1.2rem;
  font-weight: 700;
  background: #e2e8f0;
}

.collapsible-history .history-content {
  padding: 1rem;
}

@media (max-width: 768px) {

  .trip-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .trip-card-header h3 {
    font-size: 1.5rem;
  }

  .action-row button,
  .toolbar-actions button,
  .filter-buttons button,
  .quick-reply-row button,
  .status-action {
    width: 100%;
    flex: 1 1 100%;
  }

  .message-layout-driver {
    display: flex;
    flex-direction: column;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .availability-form {
    grid-template-columns: 1fr;
  }

  body {
    font-size: 1.15rem;
  }
}


/* ===== Driver Portal Final Phase 1 Refinements ===== */

.driver-trip-card {
  position: relative;
  overflow: visible;
}

.driver-top-actions {
  position: sticky;
  top: 0.5rem;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
  padding: 0.75rem;
  border: 2px solid #cbd5e1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.driver-top-actions .status-action,
.driver-action-link {
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1.2;
  white-space: normal;
}

.driver-action-navigate {
  background: #172033;
  color: #ffffff;
}

.driver-action-navigate-secondary {
  background: #334155;
  color: #ffffff;
}

.action-accept {
  background: #15803d !important;
  color: #ffffff !important;
}

.action-reject {
  background: #b91c1c !important;
  color: #ffffff !important;
}

.action-enroute {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

.action-arrived {
  background: #b45309 !important;
  color: #ffffff !important;
}

.action-complete {
  background: #166534 !important;
  color: #ffffff !important;
}

.driver-top-actions .status-action:disabled {
  background: #9ca3af !important;
  color: #1f2937 !important;
  border-color: #6b7280;
  opacity: 1;
}

.status-badge {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.75rem 1.1rem;
  border-width: 3px;
  border-radius: 999px;
}

.status-assigned,
.status-badge {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #1d4ed8;
}

.status-accepted {
  background: #dcfce7;
  color: #14532d;
  border-color: #16a34a;
}

.status-enroute {
  background: #fef3c7;
  color: #78350f;
  border-color: #d97706;
}

.status-arrived {
  background: #ffedd5;
  color: #7c2d12;
  border-color: #ea580c;
}

.status-completed {
  background: #bbf7d0;
  color: #052e16;
  border-color: #15803d;
}

.status-rejected {
  background: #fee2e2;
  color: #7f1d1d;
  border-color: #dc2626;
}

.driver-status-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 0.5rem;
  padding: 0;
  margin: 1rem 0;
}

.driver-status-steps li {
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  padding: 0.55rem 0.7rem;
  text-align: center;
  font-weight: 800;
  background: #f8fafc;
  color: #334155;
}

.driver-status-steps li.current {
  background: #172033;
  color: #ffffff;
  border-color: #172033;
}

.driver-summary-grid .trip-field,
.driver-location-grid .trip-field {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 1rem;
}

.driver-location-grid .trip-location-field {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.map-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.map-link-button {
  min-height: 54px;
  flex: 1 1 170px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 800;
  text-align: center;
}

.compact-map-row .map-link-button {
  min-height: 48px;
  flex-basis: 145px;
}

.compact-notes-section {
  margin-top: 1rem;
}

.driver-notes-details {
  margin: 0.75rem 0;
  border: 2px solid #cbd5e1;
  border-radius: 16px;
  background: #f8fafc;
  overflow: hidden;
}

.driver-notes-details summary {
  cursor: pointer;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  font-weight: 900;
  font-size: 1.05rem;
  background: #e2e8f0;
}

.driver-notes-content {
  padding: 0.75rem;
}

.additional-stop-block {
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  margin: 0.65rem 0;
}

.collapsible-history {
  margin-top: 1.5rem;
  border: 3px solid #94a3b8;
  border-radius: 18px;
  background: #f8fafc;
  overflow: hidden;
}

.collapsible-history > summary {
  cursor: pointer;
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  font-size: 1.2rem;
  font-weight: 900;
  background: #e2e8f0;
  color: #172033;
}

.history-content {
  padding: 1rem;
}

@media (max-width: 900px) {
  .driver-status-steps {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .driver-status-steps li:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .driver-top-actions {
    position: static;
    grid-template-columns: 1fr;
    padding: 0.65rem;
  }

  .driver-top-actions .status-action,
  .driver-action-link {
    width: 100%;
    min-height: 64px;
    font-size: 1.08rem;
  }

  .driver-status-steps {
    grid-template-columns: 1fr;
  }

  .map-link-button {
    flex: 1 1 100%;
  }

  .trip-card-header {
    gap: 0.75rem;
  }
}


/* ===== Desktop Final Polish ===== */

@media (min-width: 901px) {

  .panel {
    padding: 0.9rem 1rem;
  }

  .toolbar {
    align-items: center;
    gap: 0.65rem;
  }

  .toolbar h2 {
    font-size: 2rem;
    margin-bottom: 0.1rem;
    line-height: 1.15;
  }

  .toolbar p {
    margin-top: 0;
    margin-bottom: 0.15rem;
    max-width: 760px;
  }

  .driver-profile-row {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
  }

  .trip-card:first-of-type {
    margin-top: 0.4rem;
  }

  .trip-card {
    border-radius: 20px;
  }
}

.toolbar-actions,
#desktop-driver-quick-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(180px, 220px));
  gap: 0.75rem;
  align-items: stretch;
}

.toolbar-actions button,
#desktop-driver-quick-controls a,
#desktop-driver-quick-controls button {
  width: 100%;
  min-height: 60px;
  border-radius: 16px;
  font-size: 1.02rem;
  font-weight: 800;
}

.driver-profile-readonly {
  min-height: 56px !important;
  padding: 0.7rem 1rem !important;
  font-size: 1.05rem;
  border-radius: 14px !important;
}

.filter-toggle,
.secondary-filter-toggle {
  min-height: 44px !important;
  padding: 0.55rem 0.9rem !important;
  font-size: 0.96rem !important;
  border-radius: 12px !important;
}

.trip-list {
  gap: 1rem !important;
}

.driver-trip-card {
  border-width: 3px !important;
  border-color: #b6c2d1 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

.driver-top-actions {
  backdrop-filter: blur(8px);
}

.driver-top-actions .status-action:disabled {
  opacity: 0.55 !important;
  filter: grayscale(0.35);
  cursor: not-allowed;
}

.status-badge {
  min-width: 120px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.driver-status-steps li {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trip-section h4 {
  margin-bottom: 0.45rem !important;
}

.driver-location-grid {
  gap: 1rem !important;
}

.driver-location-grid .trip-location-field {
  border-width: 3px;
  background: linear-gradient(to bottom, #ffffff, #f8fafc);
}

.driver-notes-details {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.driver-notes-details summary {
  min-height: 50px;
}

.collapsible-history > summary {
  min-height: 56px;
}

.message-layout-driver {
  align-items: start;
}

.message-thread-list,
.message-thread {
  border-radius: 18px !important;
}

.thread-item {
  border-radius: 12px;
}

.message-bubble {
  border-radius: 16px;
}

@media (max-width: 900px) {
  .toolbar-actions,
  #desktop-driver-quick-controls {
    grid-template-columns: 1fr;
  }
}


/* ===== Final Desktop Alignment Polish ===== */

@media (min-width: 901px) {

  .panel {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }

  .toolbar-actions,
  #desktop-driver-quick-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(210px, 210px));
    justify-content: start;
    align-items: stretch;
    gap: 0.8rem;
  }

  .toolbar-actions button,
  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button {
    width: 210px;
    min-height: 58px;
  }

  .driver-profile-readonly {
    min-height: 52px !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }

  .filter-toggle,
  .secondary-filter-toggle {
    min-height: 40px !important;
    max-width: 170px !important;
    font-size: 0.92rem !important;
    padding: 0.45rem 0.8rem !important;
  }

  .site-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .site-header h1 {
    margin-bottom: 0.15rem;
  }

  .trip-list {
    margin-top: 0.35rem;
  }
}


/* ===== Mobile Phase 2 Optimization ===== */

@media (max-width: 900px) {

  .site-header {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }

  .site-header h1 {
    font-size: 1.7rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.2rem !important;
  }

  .subtitle {
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
  }

  .container {
    padding: 0.7rem !important;
  }

  .panel {
    padding: 0.8rem !important;
    margin: 0.6rem 0 !important;
    border-radius: 16px !important;
  }

  .toolbar {
    gap: 0.45rem !important;
  }

  .toolbar h2 {
    font-size: 1.9rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.15rem !important;
  }

  .toolbar p {
    margin-top: 0 !important;
    margin-bottom: 0.35rem !important;
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
  }

  /* Compact utility controls */

  .toolbar-actions,
  #desktop-driver-quick-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
  }

  .toolbar-actions button,
  #desktop-driver-quick-controls button,
  #desktop-driver-quick-controls a {
    min-height: 52px !important;
    font-size: 0.98rem !important;
    border-radius: 14px !important;
    padding: 0.7rem !important;
  }

  /* Make sign out secondary */
  .toolbar-actions button:last-child {
    opacity: 0.88;
  }

  /* Compact profile area */

  .driver-profile-row {
    margin-top: 0.45rem !important;
    padding-top: 0.45rem !important;
  }

  .driver-profile-readonly {
    min-height: 48px !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
  }

  .profile-display-group label {
    font-size: 0.92rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* Compact filters */

  .filter-toggle,
  .secondary-filter-toggle {
    min-height: 38px !important;
    max-width: 120px !important;
    font-size: 0.85rem !important;
    padding: 0.35rem 0.6rem !important;
    border-radius: 10px !important;
  }

  .filter-toggle-row {
    margin-top: 0.4rem !important;
  }

  /* Trip cards */

  .trip-card,
  .driver-trip-card {
    margin-top: 0.55rem !important;
    padding: 0.9rem !important;
    border-radius: 18px !important;
  }

  .trip-card-header {
    gap: 0.4rem !important;
  }

  .trip-card-header h3 {
    font-size: 1.8rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.15rem !important;
  }

  .trip-subtitle {
    margin-top: 0 !important;
    font-size: 0.98rem !important;
  }

  .status-badge {
    min-width: auto !important;
    width: fit-content !important;
    font-size: 0.95rem !important;
    padding: 0.45rem 0.8rem !important;
  }

  /* Convert workflow into compact horizontal chips */

  .driver-status-steps {
    display: flex !important;
    overflow-x: auto !important;
    gap: 0.45rem !important;
    padding-bottom: 0.2rem !important;
    margin: 0.55rem 0 !important;
    scrollbar-width: thin;
  }

  .driver-status-steps li {
    flex: 0 0 auto !important;
    min-width: 125px !important;
    min-height: 40px !important;
    font-size: 0.92rem !important;
    padding: 0.45rem 0.7rem !important;
    border-radius: 999px !important;
  }

  /* Bring actions higher and reduce height */

  .driver-top-actions {
    position: sticky !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 60 !important;
    margin: 0.6rem -0.2rem -0.2rem !important;
    padding: 0.6rem !important;
    border-radius: 18px 18px 0 0 !important;
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 18px rgba(15,23,42,0.16) !important;
  }

  .driver-top-actions .status-action,
  .driver-action-link {
    min-height: 50px !important;
    font-size: 0.92rem !important;
    padding: 0.55rem 0.65rem !important;
    border-radius: 12px !important;
  }

  /* Summary fields */

  .trip-section {
    margin-top: 0.55rem !important;
    padding-top: 0.55rem !important;
  }

  .trip-section h4 {
    font-size: 1.15rem !important;
    margin-bottom: 0.35rem !important;
  }

  .trip-grid {
    gap: 0.6rem !important;
  }

  .driver-summary-grid .trip-field,
  .driver-location-grid .trip-field {
    padding: 0.75rem !important;
    border-radius: 14px !important;
  }

  .trip-field strong {
    font-size: 0.9rem !important;
    margin-bottom: 0.15rem !important;
  }

  /* Map buttons */

  .map-link-row {
    gap: 0.45rem !important;
    margin-top: 0.45rem !important;
  }

  .map-link-button {
    min-height: 44px !important;
    font-size: 0.9rem !important;
    padding: 0.55rem 0.7rem !important;
    border-radius: 10px !important;
  }

  /* Notes compacting */

  .driver-notes-details {
    margin: 0.45rem 0 !important;
    border-radius: 14px !important;
  }

  .driver-notes-details summary {
    min-height: 44px !important;
    padding: 0.65rem 0.8rem !important;
    font-size: 0.92rem !important;
  }

  .note-block {
    padding: 0.75rem !important;
    border-radius: 12px !important;
  }

  /* History section */

  .collapsible-history > summary {
    min-height: 48px !important;
    font-size: 1rem !important;
    padding: 0.75rem 0.9rem !important;
  }

  /* Messaging */

  .message-layout-driver {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.7rem !important;
  }

  .message-thread-list,
  .message-thread {
    min-height: 10rem !important;
    max-height: 18rem !important;
    border-radius: 16px !important;
    padding: 0.7rem !important;
  }

  .thread-item {
    margin-bottom: 0.4rem !important;
  }

  .message-bubble {
    padding: 0.7rem !important;
    border-radius: 14px !important;
  }

  /* Prevent huge gaps at bottom from sticky actions */

  body {
    padding-bottom: 5.5rem !important;
  }
}

/* Small phones */

@media (max-width: 480px) {

  .toolbar-actions,
  #desktop-driver-quick-controls {
    grid-template-columns: 1fr 1fr !important;
  }

  .toolbar-actions button,
  #desktop-driver-quick-controls button,
  #desktop-driver-quick-controls a {
    min-height: 48px !important;
    font-size: 0.88rem !important;
  }

  .trip-card-header h3 {
    font-size: 1.55rem !important;
  }

  .driver-top-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .driver-top-actions .status-action,
  .driver-action-link {
    min-height: 46px !important;
    font-size: 0.84rem !important;
  }

  .driver-status-steps li {
    min-width: 110px !important;
    font-size: 0.84rem !important;
  }
}

/* ===== Mobile Phase 2 Near-Complete Refinement ===== */
/* Mobile-only rules. Desktop layout is preserved. */

@media (max-width: 900px) {
  .container { padding: 0.55rem !important; }
  .top-link { margin: 0.45rem 0 0.35rem !important; font-size: 0.95rem !important; }
  .panel { padding: 0.7rem !important; margin: 0.45rem 0 !important; border-radius: 16px !important; }
  .toolbar { display: block !important; gap: 0.35rem !important; }
  .toolbar h2 { font-size: 1.65rem !important; margin-bottom: 0.15rem !important; line-height: 1.1 !important; }
  .toolbar p { font-size: 0.92rem !important; line-height: 1.3 !important; margin-bottom: 0.45rem !important; }

  /* Refresh and Sign Out compact row near top */
  .toolbar-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    margin: 0.45rem 0 0.55rem !important;
  }
  .toolbar-actions button {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0.45rem 0.55rem !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    line-height: 1.1 !important;
  }

  /* Dispatch buttons stay visible but compact */
  #desktop-driver-quick-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    margin-top: 0.45rem !important;
    margin-bottom: 0.5rem !important;
  }
  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button {
    min-height: 50px !important;
    width: 100% !important;
    padding: 0.55rem 0.6rem !important;
    border-radius: 14px !important;
    font-size: 0.9rem !important;
    line-height: 1.15 !important;
  }

  /* Compact driver identity and filters */
  .driver-profile-row { margin-top: 0.4rem !important; padding-top: 0.45rem !important; }
  .profile-display-group label {
    display: inline-block !important;
    margin: 0 0.35rem 0.25rem 0 !important;
    font-size: 0.85rem !important;
  }
  .driver-profile-readonly {
    min-height: 40px !important;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
  }
  .filter-toggle-row { margin-top: 0.35rem !important; }
  .filter-toggle,
  .secondary-filter-toggle {
    min-height: 34px !important;
    max-width: 95px !important;
    padding: 0.3rem 0.45rem !important;
    font-size: 0.78rem !important;
    border-radius: 9px !important;
  }
  .filters { margin-top: 0.5rem !important; padding-top: 0.5rem !important; }

  /* Trip card density */
  .trip-list { gap: 0.65rem !important; margin-top: 0.25rem !important; }
  .trip-card,
  .driver-trip-card {
    padding: 0.75rem !important;
    margin-top: 0.45rem !important;
    border-radius: 16px !important;
  }
  .trip-card-header h3 { font-size: 1.45rem !important; margin-bottom: 0.05rem !important; line-height: 1.1 !important; }
  .trip-subtitle { font-size: 0.86rem !important; }
  .status-badge { font-size: 0.78rem !important; padding: 0.35rem 0.6rem !important; }

  /* Workflow chips */
  .driver-status-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.35rem !important;
    margin: 0.4rem 0 !important;
    padding: 0 0 0.15rem !important;
  }
  .driver-status-steps li {
    flex: 0 0 auto !important;
    min-width: 95px !important;
    min-height: 34px !important;
    font-size: 0.75rem !important;
    padding: 0.3rem 0.5rem !important;
    white-space: nowrap !important;
  }

  /* Sticky bottom driver action tray */
  .driver-top-actions {
    position: sticky !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 70 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    margin: 0.45rem -0.1rem -0.1rem !important;
    padding: 0.45rem !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .driver-top-actions .status-action,
  .driver-action-link {
    min-height: 42px !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
  }

  /* Details compacting */
  .trip-section { margin-top: 0.45rem !important; padding-top: 0.45rem !important; }
  .trip-section h4 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
  .trip-grid { gap: 0.45rem !important; }
  .driver-summary-grid .trip-field,
  .driver-location-grid .trip-field {
    padding: 0.55rem !important;
    border-radius: 12px !important;
    min-height: unset !important;
  }
  .trip-field strong { font-size: 0.78rem !important; }
  .trip-field span,
  .trip-field p { font-size: 0.9rem !important; }

  .map-link-row { gap: 0.35rem !important; margin-top: 0.35rem !important; }
  .map-link-button {
    min-height: 38px !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.78rem !important;
    border-radius: 9px !important;
  }

  .driver-notes-details { margin: 0.35rem 0 !important; border-radius: 12px !important; }
  .driver-notes-details summary {
    min-height: 38px !important;
    padding: 0.5rem 0.65rem !important;
    font-size: 0.82rem !important;
  }
  .note-block { padding: 0.55rem !important; font-size: 0.86rem !important; }

  .collapsible-history > summary {
    min-height: 42px !important;
    font-size: 0.9rem !important;
    padding: 0.6rem 0.75rem !important;
  }
  .history-content { padding: 0.65rem !important; }

  body { padding-bottom: 4.5rem !important; }
}

@media (max-width: 430px) {
  .site-header h1 { font-size: 1.45rem !important; }
  .subtitle { font-size: 0.86rem !important; }
  .toolbar h2 { font-size: 1.45rem !important; }
  .toolbar-actions button { min-height: 40px !important; font-size: 0.78rem !important; }
  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button { min-height: 46px !important; font-size: 0.82rem !important; }
  .trip-card-header h3 { font-size: 1.32rem !important; }
  .driver-top-actions .status-action,
  .driver-action-link { min-height: 40px !important; font-size: 0.72rem !important; }
  .driver-status-steps li { min-width: 88px !important; font-size: 0.7rem !important; }
}


/* ===== Final Driver Portal CSS Polish Cleanup ===== */
/* Desktop alignment is protected; mobile conflicts are force-corrected below. */

/* Desktop: keep utility buttons aligned and clean */
@media (min-width: 901px) {
  .toolbar-actions,
  #desktop-driver-quick-controls {
    display: grid !important;
    grid-template-columns: repeat(2, 210px) !important;
    gap: 0.8rem !important;
    justify-content: start !important;
    align-items: stretch !important;
    width: auto !important;
    max-width: 440px !important;
  }

  .toolbar-actions button,
  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    min-height: 58px !important;
    padding: 0.7rem 0.9rem !important;
    border-radius: 16px !important;
    line-height: 1.15 !important;
  }

  .driver-profile-readonly {
    min-height: 52px !important;
    padding: 0.55rem 0.85rem !important;
  }

  .filter-toggle,
  .secondary-filter-toggle {
    width: 150px !important;
    min-width: 120px !important;
    max-width: 170px !important;
    min-height: 40px !important;
  }
}

/* Mobile: final override to stop old full-width button rules from winning */
@media (max-width: 900px) {
  .site-header {
    padding: 0.8rem 0 !important;
  }

  .site-header h1 {
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
  }

  .subtitle {
    font-size: 0.86rem !important;
    line-height: 1.3 !important;
  }

  .container {
    padding: 0.55rem !important;
  }

  .panel {
    padding: 0.7rem !important;
    margin: 0.45rem 0 !important;
    border-radius: 16px !important;
  }

  .toolbar {
    display: block !important;
  }

  .toolbar h2 {
    font-size: 1.55rem !important;
    line-height: 1.1 !important;
    margin: 0 0 0.15rem !important;
  }

  .toolbar p {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    margin: 0 0 0.45rem !important;
  }

  /* Force Refresh + Sign Out into compact 2-column utility row */
  .toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0.45rem 0 0.5rem !important;
    align-items: stretch !important;
  }

  .toolbar-actions button,
  .toolbar-actions > button,
  body .toolbar-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    height: auto !important;
    flex: initial !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.42rem 0.5rem !important;
    border-radius: 12px !important;
    font-size: 0.8rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  /* Force dispatch controls into balanced row */
  #desktop-driver-quick-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0.45rem 0 0.5rem !important;
  }

  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button,
  body #desktop-driver-quick-controls a,
  body #desktop-driver-quick-controls button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 48px !important;
    height: auto !important;
    flex: initial !important;
    padding: 0.5rem 0.55rem !important;
    border-radius: 13px !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  /* Compact profile and filter controls */
  .driver-profile-row {
    margin-top: 0.35rem !important;
    padding-top: 0.4rem !important;
  }

  .profile-display-group label {
    font-size: 0.82rem !important;
    margin-bottom: 0.2rem !important;
  }

  .driver-profile-readonly {
    min-height: 38px !important;
    height: auto !important;
    padding: 0.3rem 0.6rem !important;
    font-size: 0.86rem !important;
    border-radius: 10px !important;
    border-width: 2px !important;
  }

  .filter-toggle-row {
    margin-top: 0.3rem !important;
  }

  .filter-toggle,
  .secondary-filter-toggle,
  body .filter-toggle,
  body .secondary-filter-toggle {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    min-height: 32px !important;
    height: auto !important;
    padding: 0.25rem 0.4rem !important;
    font-size: 0.74rem !important;
    border-radius: 9px !important;
    line-height: 1.1 !important;
  }

  /* Move trip content up */
  .trip-list {
    gap: 0.55rem !important;
    margin-top: 0.2rem !important;
  }

  .trip-card,
  .driver-trip-card {
    margin-top: 0.4rem !important;
    padding: 0.7rem !important;
    border-radius: 16px !important;
  }

  .trip-card-header h3 {
    font-size: 1.32rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.05rem !important;
  }

  .trip-subtitle {
    font-size: 0.82rem !important;
  }

  .status-badge {
    font-size: 0.72rem !important;
    padding: 0.32rem 0.55rem !important;
    border-width: 2px !important;
  }

  /* Keep workflow compact and horizontal */
  .driver-status-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.3rem !important;
    margin: 0.35rem 0 !important;
    padding: 0 0 0.12rem !important;
  }

  .driver-status-steps li {
    flex: 0 0 auto !important;
    min-width: 86px !important;
    min-height: 32px !important;
    padding: 0.28rem 0.45rem !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
  }

  /* Sticky bottom action controls */
  .driver-top-actions {
    position: sticky !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;
    margin: 0.4rem -0.05rem -0.1rem !important;
    padding: 0.4rem !important;
    border-radius: 15px 15px 0 0 !important;
  }

  .driver-top-actions .status-action,
  .driver-action-link,
  body .driver-top-actions .status-action,
  body .driver-action-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 40px !important;
    height: auto !important;
    flex: initial !important;
    padding: 0.34rem 0.42rem !important;
    border-radius: 10px !important;
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
  }

  .trip-section {
    margin-top: 0.4rem !important;
    padding-top: 0.4rem !important;
  }

  .trip-section h4 {
    font-size: 0.98rem !important;
    margin-bottom: 0.25rem !important;
  }

  .trip-grid {
    gap: 0.4rem !important;
  }

  .driver-summary-grid .trip-field,
  .driver-location-grid .trip-field {
    padding: 0.5rem !important;
    border-radius: 11px !important;
    min-height: unset !important;
  }

  .trip-field strong {
    font-size: 0.75rem !important;
  }

  .trip-field span,
  .trip-field p {
    font-size: 0.86rem !important;
  }

  .map-link-row {
    gap: 0.3rem !important;
    margin-top: 0.3rem !important;
  }

  .map-link-button {
    min-height: 36px !important;
    padding: 0.35rem 0.45rem !important;
    font-size: 0.72rem !important;
    border-radius: 9px !important;
  }

  .driver-notes-details {
    margin: 0.3rem 0 !important;
    border-radius: 11px !important;
  }

  .driver-notes-details summary {
    min-height: 36px !important;
    padding: 0.45rem 0.6rem !important;
    font-size: 0.78rem !important;
  }

  .note-block {
    padding: 0.5rem !important;
    font-size: 0.82rem !important;
  }

  .collapsible-history > summary {
    min-height: 40px !important;
    font-size: 0.84rem !important;
    padding: 0.55rem 0.7rem !important;
  }

  body {
    padding-bottom: 4.25rem !important;
  }
}

/* Extra narrow iPhones */
@media (max-width: 430px) {
  .toolbar-actions button {
    min-height: 38px !important;
    font-size: 0.72rem !important;
  }

  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button {
    min-height: 44px !important;
    font-size: 0.76rem !important;
  }

  .trip-card-header h3 {
    font-size: 1.24rem !important;
  }

  .driver-top-actions .status-action,
  .driver-action-link {
    min-height: 38px !important;
    font-size: 0.64rem !important;
  }
}


/* ===== FINAL MOBILE CASCADE FIX - DO NOT REMOVE ===== */
/* Purpose: Resolve mobile toolbar button stacking caused by older global mobile button rules.
   Desktop is untouched because this entire block only runs under 900px. */

@media screen and (max-width: 900px) {

  /* Main assigned-trips panel stays compact */
  #portal-section .panel {
    padding: 0.65rem !important;
  }

  /* Force the toolbar area to stop inheriting old flex-column mobile behavior */
  #portal-section .toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.45rem !important;
    align-items: stretch !important;
  }

  #portal-section .toolbar > div:first-child {
    min-width: 0 !important;
  }

  /* Hard override: Refresh / Sign Out must be a compact two-button row */
  #portal-section .toolbar .toolbar-actions,
  body #portal-section .toolbar .toolbar-actions,
  main #portal-section .toolbar .toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 0.45rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0.4rem 0 0.45rem !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    flex-direction: unset !important;
  }

  #portal-section .toolbar .toolbar-actions > *,
  #portal-section .toolbar .toolbar-actions > button,
  body #portal-section .toolbar .toolbar-actions > button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 40px !important;
    max-height: 46px !important;
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.38rem 0.5rem !important;
    margin: 0 !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Hard override: dispatch quick controls stay two columns, not full-width stacked */
  #portal-section #desktop-driver-quick-controls,
  body #portal-section #desktop-driver-quick-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    width: 100% !important;
    margin: 0.35rem 0 0.45rem !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  #portal-section #desktop-driver-quick-controls > *,
  #portal-section #desktop-driver-quick-controls > a,
  #portal-section #desktop-driver-quick-controls > button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    max-height: 54px !important;
    padding: 0.45rem 0.5rem !important;
    margin: 0 !important;
    border-radius: 13px !important;
    font-size: 0.8rem !important;
    line-height: 1.12 !important;
    flex: none !important;
  }

  /* Reduce top section height so the first trip appears sooner */
  #portal-section .toolbar h2 {
    font-size: 1.45rem !important;
    line-height: 1.08 !important;
    margin: 0 0 0.12rem !important;
  }

  #portal-section .toolbar p {
    font-size: 0.84rem !important;
    line-height: 1.25 !important;
    margin: 0 0 0.35rem !important;
  }

  /* Compact profile area */
  #portal-section .driver-profile-row {
    margin-top: 0.3rem !important;
    padding-top: 0.35rem !important;
  }

  #portal-section .profile-display-group label {
    font-size: 0.78rem !important;
    margin-bottom: 0.18rem !important;
  }

  #portal-section .driver-profile-readonly,
  #portal-section input.driver-profile-readonly {
    min-height: 36px !important;
    max-height: 42px !important;
    padding: 0.28rem 0.55rem !important;
    font-size: 0.82rem !important;
    border-radius: 9px !important;
    border-width: 2px !important;
  }

  /* Compact filter button and prevent it from becoming full width */
  #portal-section .filter-toggle-row {
    margin-top: 0.25rem !important;
  }

  #portal-section .filter-toggle,
  #portal-section .secondary-filter-toggle,
  body #portal-section .filter-toggle,
  body #portal-section .secondary-filter-toggle {
    display: inline-flex !important;
    width: auto !important;
    min-width: 82px !important;
    max-width: 92px !important;
    min-height: 30px !important;
    max-height: 36px !important;
    padding: 0.25rem 0.42rem !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
    line-height: 1.1 !important;
    flex: none !important;
  }

  /* Trip content density */
  #portal-section .trip-list {
    margin-top: 0.15rem !important;
    gap: 0.5rem !important;
  }

  #portal-section .driver-trip-card,
  #portal-section .trip-card {
    margin-top: 0.35rem !important;
    padding: 0.65rem !important;
    border-radius: 15px !important;
  }

  #portal-section .trip-card-header h3 {
    font-size: 1.2rem !important;
    line-height: 1.08 !important;
  }

  #portal-section .trip-subtitle {
    font-size: 0.78rem !important;
  }

  #portal-section .status-badge {
    font-size: 0.68rem !important;
    padding: 0.28rem 0.5rem !important;
  }

  /* Horizontal workflow chips */
  #portal-section .driver-status-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.28rem !important;
    margin: 0.3rem 0 !important;
    padding: 0 0 0.1rem !important;
  }

  #portal-section .driver-status-steps li {
    flex: 0 0 auto !important;
    min-width: 82px !important;
    min-height: 30px !important;
    padding: 0.24rem 0.42rem !important;
    font-size: 0.64rem !important;
  }

  /* Sticky bottom trip actions */
  #portal-section .driver-top-actions {
    position: sticky !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
    margin: 0.35rem -0.05rem -0.1rem !important;
    padding: 0.35rem !important;
    border-radius: 14px 14px 0 0 !important;
  }

  #portal-section .driver-top-actions > *,
  #portal-section .driver-top-actions .status-action,
  #portal-section .driver-action-link {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    max-height: 44px !important;
    padding: 0.32rem 0.4rem !important;
    font-size: 0.62rem !important;
    border-radius: 9px !important;
    line-height: 1.08 !important;
    flex: none !important;
  }

  body {
    padding-bottom: 4rem !important;
  }
}

/* Extra small phones */
@media screen and (max-width: 430px) {
  #portal-section .toolbar .toolbar-actions > button {
    min-height: 38px !important;
    max-height: 42px !important;
    font-size: 0.7rem !important;
  }

  #portal-section #desktop-driver-quick-controls > * {
    min-height: 42px !important;
    font-size: 0.72rem !important;
  }

  #portal-section .trip-card-header h3 {
    font-size: 1.12rem !important;
  }
}


/* ===== TRUE MOBILE VIEWPORT FINAL FIX ===== */
/* This block handles phones even when the browser reports a wider layout viewport.
   It targets actual mobile device width and coarse touch behavior.
   Desktop mouse/keyboard layout remains protected. */

@media screen and (max-width: 900px),
       screen and (max-device-width: 900px) and (orientation: portrait) {

  /* Top assigned-trip control area */
  #portal-section .toolbar-actions,
  #portal-section .toolbar .toolbar-actions,
  .panel .toolbar-actions,
  .toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0.4rem 0 0.45rem !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    flex-direction: unset !important;
  }

  /* Direct ID targeting prevents older generic button rules from winning */
  #refresh-button,
  #logout-button,
  #portal-section #refresh-button,
  #portal-section #logout-button,
  .toolbar-actions #refresh-button,
  .toolbar-actions #logout-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 42px !important;
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.3rem 0.45rem !important;
    margin: 0 !important;
    border-radius: 12px !important;
    font-size: 0.74rem !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  /* Compact the section above the first trip */
  #portal-section .panel {
    padding: 0.6rem !important;
    margin: 0.4rem 0 !important;
    border-radius: 15px !important;
  }

  #portal-section .toolbar h2,
  .toolbar h2 {
    font-size: 1.32rem !important;
    line-height: 1.08 !important;
    margin: 0 0 0.1rem !important;
  }

  #portal-section .toolbar p,
  .toolbar p {
    font-size: 0.8rem !important;
    line-height: 1.22 !important;
    margin: 0 0 0.32rem !important;
  }

  /* Dispatch controls */
  #desktop-driver-quick-controls,
  #portal-section #desktop-driver-quick-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    width: 100% !important;
    margin: 0.35rem 0 0.4rem !important;
    padding: 0 !important;
  }

  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button,
  #portal-section #desktop-driver-quick-controls a,
  #portal-section #desktop-driver-quick-controls button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  /* Profile and filter */
  #portal-section .driver-profile-row {
    margin-top: 0.25rem !important;
    padding-top: 0.32rem !important;
  }

  #portal-section .profile-display-group label {
    font-size: 0.74rem !important;
    margin-bottom: 0.15rem !important;
  }

  #portal-section .driver-profile-readonly,
  #portal-section input.driver-profile-readonly {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0.22rem 0.5rem !important;
    font-size: 0.78rem !important;
    border-radius: 9px !important;
  }

  #filter-toggle,
  #portal-section #filter-toggle,
  .filter-toggle,
  .secondary-filter-toggle {
    display: inline-flex !important;
    width: auto !important;
    min-width: 78px !important;
    max-width: 88px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0.2rem 0.35rem !important;
    font-size: 0.68rem !important;
    border-radius: 8px !important;
    line-height: 1 !important;
  }

  /* Trip visibility */
  #portal-section .trip-list {
    margin-top: 0.1rem !important;
    gap: 0.45rem !important;
  }

  #portal-section .trip-card,
  #portal-section .driver-trip-card {
    margin-top: 0.3rem !important;
    padding: 0.58rem !important;
    border-radius: 14px !important;
  }

  #portal-section .trip-card-header h3 {
    font-size: 1.08rem !important;
    line-height: 1.05 !important;
  }

  #portal-section .trip-subtitle {
    font-size: 0.72rem !important;
  }

  #portal-section .status-badge {
    font-size: 0.62rem !important;
    padding: 0.24rem 0.42rem !important;
  }

  /* Mobile trip progress */
  #portal-section .driver-status-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.25rem !important;
    margin: 0.25rem 0 !important;
    padding-bottom: 0.08rem !important;
  }

  #portal-section .driver-status-steps li {
    min-width: 76px !important;
    min-height: 28px !important;
    padding: 0.2rem 0.36rem !important;
    font-size: 0.58rem !important;
    flex: 0 0 auto !important;
  }

  /* Sticky operational tray */
  #portal-section .driver-top-actions {
    position: sticky !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
    padding: 0.32rem !important;
    margin: 0.3rem -0.04rem -0.08rem !important;
    border-radius: 13px 13px 0 0 !important;
  }

  #portal-section .driver-top-actions .status-action,
  #portal-section .driver-action-link {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0.26rem 0.34rem !important;
    border-radius: 8px !important;
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  body {
    padding-bottom: 3.75rem !important;
  }
}

/* Extra protection for very narrow iPhones */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
  #refresh-button,
  #logout-button {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 40px !important;
    font-size: 0.68rem !important;
  }

  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 0.68rem !important;
  }
}


/* ===== Final Minor Polish + No-Overlap Safety ===== */
/* CSS-only refinement. Desktop remains protected. */

/* Desktop final polish */
@media (min-width: 901px) {
  .site-header {
    padding-top: 0.95rem !important;
    padding-bottom: 0.95rem !important;
  }

  .panel {
    max-width: 1180px !important;
  }

  .filter-toggle,
  .secondary-filter-toggle {
    min-height: 38px !important;
    font-size: 0.9rem !important;
  }

  .driver-profile-readonly {
    min-height: 50px !important;
  }

  .driver-summary-grid .trip-field,
  .driver-location-grid .trip-field {
    padding: 0.85rem !important;
  }
}

/* Mobile final polish */
@media screen and (max-width: 900px),
       screen and (max-device-width: 900px) and (orientation: portrait) {

  /* Slightly reduce header height while preserving readability */
  .site-header {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }

  .site-header h1 {
    font-size: 1.32rem !important;
    line-height: 1.12 !important;
  }

  .subtitle {
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
  }

  /* Utility area refinement */
  #portal-section .toolbar h2,
  .toolbar h2 {
    font-size: 1.25rem !important;
    line-height: 1.05 !important;
  }

  #portal-section .toolbar p,
  .toolbar p {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }

  /* Refresh and Sign Out stay compact and balanced */
  #refresh-button,
  #logout-button {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 40px !important;
    font-size: 0.68rem !important;
    padding: 0.28rem 0.4rem !important;
    border-radius: 10px !important;
  }

  /* Dispatch controls are compact but still easy to tap */
  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 0.68rem !important;
    border-radius: 10px !important;
    padding: 0.3rem 0.4rem !important;
  }

  /* Driver profile and filters are secondary utilities */
  #portal-section .driver-profile-readonly,
  #portal-section input.driver-profile-readonly {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 0.74rem !important;
    padding: 0.18rem 0.45rem !important;
  }

  #filter-toggle,
  #portal-section #filter-toggle,
  .filter-toggle,
  .secondary-filter-toggle {
    min-height: 28px !important;
    height: 28px !important;
    min-width: 74px !important;
    max-width: 82px !important;
    font-size: 0.64rem !important;
    padding: 0.18rem 0.32rem !important;
    border-radius: 7px !important;
  }

  /* Trip cards and detail fields */
  #portal-section .trip-card,
  #portal-section .driver-trip-card {
    padding: 0.52rem !important;
    margin-top: 0.28rem !important;
  }

  #portal-section .driver-summary-grid .trip-field,
  #portal-section .driver-location-grid .trip-field {
    padding: 0.42rem !important;
    border-radius: 10px !important;
  }

  #portal-section .trip-field strong {
    font-size: 0.7rem !important;
  }

  #portal-section .trip-field span,
  #portal-section .trip-field p {
    font-size: 0.8rem !important;
  }

  /* IMPORTANT: Prevent sticky controls from overlapping notes/details.
     This keeps the action tray in normal document flow on mobile. */
  #portal-section .driver-top-actions {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    z-index: auto !important;
    margin: 0.3rem 0 0.4rem !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  #portal-section .driver-top-actions .status-action,
  #portal-section .driver-action-link {
    min-height: 36px !important;
    height: auto !important;
    font-size: 0.6rem !important;
    padding: 0.28rem 0.34rem !important;
  }

  /* Since sticky overlap is removed, no artificial page bottom padding is needed */
  body {
    padding-bottom: 0 !important;
  }

  /* Notes stay collapsed and cannot be covered by controls */
  #portal-section .driver-notes-details {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 0.35rem !important;
  }

  #portal-section .driver-notes-details summary {
    min-height: 34px !important;
    font-size: 0.72rem !important;
    padding: 0.4rem 0.55rem !important;
  }

  #portal-section .note-block {
    padding: 0.45rem !important;
    font-size: 0.78rem !important;
  }

  .collapsible-history > summary {
    min-height: 38px !important;
    font-size: 0.8rem !important;
  }
}


/* ===== Final Driver Portal Completion Cleanup ===== */
/* CSS-only final pass: visual consistency, no clipping, balanced headings/buttons. */

/* Global dispatch button consistency */
#desktop-driver-quick-controls a,
#desktop-driver-quick-controls button,
.desktop-quick-dispatch-call,
.desktop-quick-dispatch-message {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  border: 2px solid transparent !important;
  line-height: 1.12 !important;
}

.desktop-quick-dispatch-call,
#desktop-driver-quick-controls a:first-child {
  background: #172033 !important;
  color: #ffffff !important;
  border-color: #172033 !important;
}

.desktop-quick-dispatch-message,
#desktop-driver-quick-controls button,
#desktop-driver-quick-controls a:last-child {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
}

/* Prevent workflow/status chip clipping everywhere */
.driver-status-steps {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.driver-status-steps li {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Desktop polish stays desktop-only */
@media (min-width: 901px) {
  .site-header h1 {
    font-size: 1.85rem !important;
    line-height: 1.15 !important;
  }

  .toolbar h2 {
    font-size: 1.9rem !important;
    line-height: 1.1 !important;
  }

  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button {
    min-height: 58px !important;
    width: 210px !important;
    max-width: 210px !important;
  }

  .driver-status-steps {
    padding-bottom: 0.25rem !important;
  }

  .driver-status-steps li {
    min-width: 100px !important;
  }
}

/* Mobile final cleanup */
@media screen and (max-width: 900px),
       screen and (max-device-width: 900px) and (orientation: portrait) {

  /* Header balance: readable but not oversized */
  .site-header {
    padding: 0.55rem 0 !important;
  }

  .site-header h1 {
    font-size: 1.2rem !important;
    line-height: 1.08 !important;
    margin: 0 0 0.12rem !important;
  }

  .subtitle {
    font-size: 0.74rem !important;
    line-height: 1.22 !important;
    margin: 0 !important;
  }

  .top-link {
    font-size: 0.82rem !important;
    margin: 0.35rem 0 0.25rem !important;
  }

  .panel {
    padding: 0.55rem !important;
    border-radius: 14px !important;
  }

  .toolbar h2 {
    font-size: 1.18rem !important;
    line-height: 1.05 !important;
    margin: 0 0 0.08rem !important;
  }

  .toolbar p {
    font-size: 0.74rem !important;
    line-height: 1.18 !important;
    margin: 0 0 0.28rem !important;
  }

  /* Utility buttons: consistent sizing */
  #refresh-button,
  #logout-button {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 0.66rem !important;
    border-radius: 10px !important;
    padding: 0.25rem 0.38rem !important;
  }

  /* Dispatch controls: Call Dispatch must look like an actual matching button */
  #desktop-driver-quick-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    width: 100% !important;
    margin: 0.35rem 0 0.38rem !important;
  }

  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button,
  .desktop-quick-dispatch-call,
  .desktop-quick-dispatch-message {
    min-height: 42px !important;
    height: 42px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0.32rem 0.42rem !important;
    font-size: 0.68rem !important;
    border-radius: 11px !important;
    line-height: 1.08 !important;
  }

  #desktop-driver-quick-controls a:first-child,
  .desktop-quick-dispatch-call {
    background: #172033 !important;
    color: #ffffff !important;
    border-color: #172033 !important;
  }

  #desktop-driver-quick-controls button,
  #desktop-driver-quick-controls a:last-child,
  .desktop-quick-dispatch-message {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
  }

  /* Driver profile + filters */
  .profile-display-group label {
    font-size: 0.72rem !important;
    margin-bottom: 0.12rem !important;
  }

  #portal-section .driver-profile-readonly,
  #portal-section input.driver-profile-readonly {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 0.72rem !important;
    padding: 0.16rem 0.42rem !important;
    border-radius: 8px !important;
  }

  #filter-toggle,
  #portal-section #filter-toggle,
  .filter-toggle,
  .secondary-filter-toggle {
    min-width: 82px !important;
    max-width: 92px !important;
    min-height: 30px !important;
    height: 30px !important;
    font-size: 0.66rem !important;
    border-radius: 8px !important;
    padding: 0.18rem 0.38rem !important;
  }

  /* Trip card header and contents */
  #portal-section .trip-card,
  #portal-section .driver-trip-card {
    padding: 0.55rem !important;
    border-radius: 14px !important;
  }

  #portal-section .trip-card-header h3 {
    font-size: 1.12rem !important;
    line-height: 1.08 !important;
    margin-bottom: 0.03rem !important;
  }

  #portal-section .trip-subtitle {
    font-size: 0.72rem !important;
  }

  #portal-section .status-badge {
    font-size: 0.62rem !important;
    padding: 0.24rem 0.42rem !important;
  }

  /* Workflow chips: recommended fix is horizontal scroll, not squeezing/clipping */
  #portal-section .driver-status-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0.24rem !important;
    margin: 0.28rem 0 !important;
    padding: 0 0 0.18rem !important;
    scroll-snap-type: x proximity;
  }

  #portal-section .driver-status-steps li {
    flex: 0 0 auto !important;
    min-width: 78px !important;
    max-width: none !important;
    min-height: 30px !important;
    padding: 0.22rem 0.38rem !important;
    font-size: 0.58rem !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  /* Driver actions: no overlap, consistent buttons */
  #portal-section .driver-top-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    padding: 0.34rem !important;
    margin: 0.3rem 0 0.35rem !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  #portal-section .driver-top-actions .status-action,
  #portal-section .driver-action-link {
    min-height: 38px !important;
    height: auto !important;
    font-size: 0.6rem !important;
    padding: 0.28rem 0.34rem !important;
    border-radius: 9px !important;
    line-height: 1.06 !important;
  }

  #portal-section .trip-section {
    margin-top: 0.32rem !important;
    padding-top: 0.32rem !important;
  }

  #portal-section .driver-summary-grid .trip-field,
  #portal-section .driver-location-grid .trip-field {
    padding: 0.4rem !important;
    border-radius: 10px !important;
  }

  #portal-section .trip-field strong {
    font-size: 0.68rem !important;
  }

  #portal-section .trip-field span,
  #portal-section .trip-field p {
    font-size: 0.78rem !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}

/* Narrowest iPhone cleanup */
@media screen and (max-width: 430px),
       screen and (max-device-width: 430px) and (orientation: portrait) {
  .site-header h1 {
    font-size: 1.08rem !important;
  }

  .toolbar h2 {
    font-size: 1.08rem !important;
  }

  #desktop-driver-quick-controls a,
  #desktop-driver-quick-controls button {
    font-size: 0.62rem !important;
  }

  #portal-section .driver-status-steps li {
    min-width: 74px !important;
    font-size: 0.54rem !important;
  }
}


/* ===== Final Call Dispatch Button Override ===== */
/* Keeps Call Dispatch visually consistent with Message Dispatch on desktop and mobile. */

#desktop-driver-quick-controls a:first-child,
#desktop-driver-quick-controls a:first-child:link,
#desktop-driver-quick-controls a:first-child:visited,
#desktop-driver-quick-controls a:first-child:hover,
#desktop-driver-quick-controls a:first-child:focus,
#desktop-driver-quick-controls a:first-child:active,
.desktop-quick-dispatch-call,
.desktop-quick-dispatch-call:link,
.desktop-quick-dispatch-call:visited,
.desktop-quick-dispatch-call:hover,
.desktop-quick-dispatch-call:focus,
.desktop-quick-dispatch-call:active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #172033 !important;
  color: #ffffff !important;
  border: 2px solid #172033 !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  text-align: center !important;
  line-height: 1.12 !important;
  box-shadow: none !important;
}

/* Mobile sizing for Call Dispatch so it matches Message Dispatch */
@media screen and (max-width: 900px),
       screen and (max-device-width: 900px) and (orientation: portrait) {
  #desktop-driver-quick-controls a:first-child,
  #desktop-driver-quick-controls a:first-child:link,
  #desktop-driver-quick-controls a:first-child:visited,
  #desktop-driver-quick-controls a:first-child:hover,
  #desktop-driver-quick-controls a:first-child:focus,
  #desktop-driver-quick-controls a:first-child:active,
  .desktop-quick-dispatch-call,
  .desktop-quick-dispatch-call:link,
  .desktop-quick-dispatch-call:visited,
  .desktop-quick-dispatch-call:hover,
  .desktop-quick-dispatch-call:focus,
  .desktop-quick-dispatch-call:active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0.32rem 0.42rem !important;
    font-size: 0.68rem !important;
    border-radius: 11px !important;
  }
}


/* ===== FULL REVIEW FINAL FIX: Quick Dispatch Buttons ===== */
/* Final high-specificity fix for dynamically created Call Dispatch / Message Dispatch controls. */

#driver-quick-controls-anchor {
  width: 100%;
}

#driver-quick-controls-anchor #desktop-driver-quick-controls,
#portal-section #driver-quick-controls-anchor #desktop-driver-quick-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0.35rem 0 0.4rem !important;
  padding: 0 !important;
  align-items: stretch !important;
}

#desktop-call-dispatch-button,
#desktop-call-dispatch-button:link,
#desktop-call-dispatch-button:visited,
#desktop-call-dispatch-button:hover,
#desktop-call-dispatch-button:focus,
#desktop-call-dispatch-button:active,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:link,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:visited,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:hover,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:focus,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0.32rem 0.42rem !important;
  margin: 0 !important;
  border: 2px solid #172033 !important;
  border-radius: 11px !important;
  background: #172033 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  line-height: 1.08 !important;
  text-align: center !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#desktop-message-dispatch-button,
#desktop-driver-quick-controls > button.desktop-quick-dispatch-message {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0.32rem 0.42rem !important;
  margin: 0 !important;
  border: 2px solid #1d4ed8 !important;
  border-radius: 11px !important;
  background: #1d4ed8 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  line-height: 1.08 !important;
  text-align: center !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

@media (min-width: 901px) {
  #driver-quick-controls-anchor #desktop-driver-quick-controls,
  #portal-section #driver-quick-controls-anchor #desktop-driver-quick-controls {
    grid-template-columns: repeat(2, 210px) !important;
    max-width: 440px !important;
    gap: 0.8rem !important;
    justify-content: start !important;
  }

  #desktop-call-dispatch-button,
  #desktop-call-dispatch-button:link,
  #desktop-call-dispatch-button:visited,
  #desktop-call-dispatch-button:hover,
  #desktop-call-dispatch-button:focus,
  #desktop-call-dispatch-button:active,
  #desktop-driver-quick-controls > a.desktop-quick-dispatch-call,
  #desktop-driver-quick-controls > a.desktop-quick-dispatch-call:link,
  #desktop-driver-quick-controls > a.desktop-quick-dispatch-call:visited,
  #desktop-driver-quick-controls > a.desktop-quick-dispatch-call:hover,
  #desktop-driver-quick-controls > a.desktop-quick-dispatch-call:focus,
  #desktop-driver-quick-controls > a.desktop-quick-dispatch-call:active,
  #desktop-message-dispatch-button,
  #desktop-driver-quick-controls > button.desktop-quick-dispatch-message {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    min-height: 58px !important;
    height: 58px !important;
    font-size: 1.02rem !important;
    border-radius: 16px !important;
    padding: 0.7rem 0.9rem !important;
  }
}

@media screen and (max-width: 900px),
       screen and (max-device-width: 900px) and (orientation: portrait) {
  #driver-quick-controls-anchor #desktop-driver-quick-controls,
  #portal-section #driver-quick-controls-anchor #desktop-driver-quick-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#portal-section .driver-status-steps {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

#portal-section .driver-status-steps li {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}


/* ===== 100% Completion Pass: Accessible Final Polish ===== */
/* Scope: final visual/accessibility polish only. No backend/API/login flow changes. */

/* Strong, consistent focus visibility across interactive controls */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 4px solid var(--focus) !important;
  outline-offset: 4px !important;
}

/* Make dynamically-created quick dispatch controls fully consistent. */
#driver-quick-controls-anchor #desktop-driver-quick-controls {
  width: 100% !important;
}

#desktop-call-dispatch-button,
#desktop-call-dispatch-button:link,
#desktop-call-dispatch-button:visited,
#desktop-call-dispatch-button:hover,
#desktop-call-dispatch-button:focus,
#desktop-call-dispatch-button:active,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:link,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:visited,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:hover,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:focus,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:active {
  background: #172033 !important;
  color: #ffffff !important;
  border-color: #172033 !important;
  text-decoration: none !important;
}

#desktop-message-dispatch-button,
#desktop-driver-quick-controls > button.desktop-quick-dispatch-message {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
}

/* Prevent status chip edge clipping while preserving horizontal scroll. */
.driver-status-steps {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.driver-status-steps::after {
  content: "";
  flex: 0 0 0.65rem;
}

.driver-status-steps li {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Desktop remains polished and stable. */
@media (min-width: 901px) {
  .site-header h1 {
    font-size: 1.85rem !important;
    line-height: 1.15 !important;
  }

  .toolbar h2 {
    font-size: 1.9rem !important;
    line-height: 1.1 !important;
  }

  #driver-quick-controls-anchor #desktop-driver-quick-controls {
    display: grid !important;
    grid-template-columns: repeat(2, 210px) !important;
    gap: 0.8rem !important;
    max-width: 440px !important;
    justify-content: start !important;
  }

  #desktop-call-dispatch-button,
  #desktop-message-dispatch-button,
  #desktop-driver-quick-controls > a.desktop-quick-dispatch-call,
  #desktop-driver-quick-controls > button.desktop-quick-dispatch-message {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    min-height: 58px !important;
    height: 58px !important;
    font-size: 1.02rem !important;
    border-radius: 16px !important;
  }
}

/* Mobile final accessibility and visual completion. */
@media screen and (max-width: 900px),
       screen and (max-device-width: 900px) and (orientation: portrait) {

  /* Maintain readable but compact header. */
  .site-header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .site-header h1 {
    font-size: clamp(1.08rem, 4.2vw, 1.28rem) !important;
    line-height: 1.12 !important;
    margin: 0 0 0.1rem !important;
  }

  .site-header .subtitle,
  .subtitle {
    font-size: clamp(0.74rem, 3vw, 0.86rem) !important;
    line-height: 1.22 !important;
  }

  .top-link {
    font-size: 0.84rem !important;
    margin: 0.32rem 0 0.24rem !important;
  }

  /* Keep Assigned Trips readable without overpowering screen. */
  #portal-section .panel {
    padding: 0.52rem !important;
    border-radius: 14px !important;
  }

  #portal-section .toolbar h2 {
    font-size: clamp(1.12rem, 5vw, 1.35rem) !important;
    line-height: 1.08 !important;
    margin: 0 0 0.08rem !important;
  }

  #portal-section .toolbar p {
    font-size: clamp(0.78rem, 3.2vw, 0.9rem) !important;
    line-height: 1.22 !important;
    margin: 0 0 0.28rem !important;
  }

  /* Utility buttons remain easy to tap but no longer oversized. */
  #portal-section .portal-utility-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    margin: 0.34rem 0 0.4rem !important;
    width: 100% !important;
  }

  #refresh-button,
  #logout-button {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 0.72rem !important;
    border-radius: 11px !important;
    padding: 0.3rem 0.42rem !important;
  }

  /* Quick dispatch buttons: identical shape/weight, different intentional colors. */
  #driver-quick-controls-anchor #desktop-driver-quick-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    width: 100% !important;
    margin: 0.34rem 0 0.36rem !important;
  }

  #desktop-call-dispatch-button,
  #desktop-call-dispatch-button:link,
  #desktop-call-dispatch-button:visited,
  #desktop-call-dispatch-button:hover,
  #desktop-call-dispatch-button:focus,
  #desktop-call-dispatch-button:active,
  #desktop-message-dispatch-button,
  #desktop-driver-quick-controls > a.desktop-quick-dispatch-call,
  #desktop-driver-quick-controls > button.desktop-quick-dispatch-message {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0.35rem 0.42rem !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-decoration: none !important;
    opacity: 1 !important;
  }

  /* Profile: readable, less heavy, consistent with form controls. */
  #portal-section .driver-profile-row {
    margin-top: 0.3rem !important;
    padding-top: 0.34rem !important;
  }

  #portal-section .profile-display-group label {
    font-size: 0.78rem !important;
    margin-bottom: 0.14rem !important;
  }

  #portal-section .driver-profile-readonly,
  #portal-section input.driver-profile-readonly {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 0.78rem !important;
    padding: 0.22rem 0.48rem !important;
    border-width: 2px !important;
    border-radius: 9px !important;
  }

  /* Filters: accessible chip, not visually oversized. */
  #filter-toggle,
  #portal-section #filter-toggle,
  .filter-toggle,
  .secondary-filter-toggle {
    min-width: 88px !important;
    max-width: 102px !important;
    min-height: 32px !important;
    height: 32px !important;
    font-size: 0.7rem !important;
    border-radius: 8px !important;
    padding: 0.2rem 0.4rem !important;
  }

  .filter-toggle-row {
    margin-top: 0.28rem !important;
  }

  /* Trip card spacing stays clean and readable. */
  #portal-section .trip-list {
    margin-top: 0.12rem !important;
    gap: 0.5rem !important;
  }

  #portal-section .driver-trip-card,
  #portal-section .trip-card {
    padding: 0.58rem !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  #portal-section .trip-card-header h3 {
    font-size: clamp(1.16rem, 5vw, 1.38rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 0.04rem !important;
  }

  #portal-section .trip-subtitle {
    font-size: 0.78rem !important;
  }

  #portal-section .status-badge {
    font-size: 0.68rem !important;
    padding: 0.28rem 0.48rem !important;
    border-width: 2px !important;
  }

  /* Workflow chips: no clipping, readable, scrollable. */
  #portal-section .driver-status-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0.3rem !important;
    margin: 0.32rem 0 !important;
    padding: 0 0.7rem 0.16rem 0 !important;
    scroll-snap-type: x proximity;
  }

  #portal-section .driver-status-steps li {
    flex: 0 0 auto !important;
    min-width: 86px !important;
    min-height: 32px !important;
    padding: 0.24rem 0.4rem !important;
    font-size: 0.64rem !important;
    border-width: 2px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  /* Driver action grid: no overlap, strong colors, accessible touch area. */
  #portal-section .driver-top-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.36rem !important;
    padding: 0.36rem !important;
    margin: 0.32rem 0 0.36rem !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  #portal-section .driver-top-actions .status-action,
  #portal-section .driver-action-link {
    min-height: 42px !important;
    height: auto !important;
    font-size: 0.66rem !important;
    padding: 0.32rem 0.36rem !important;
    border-radius: 10px !important;
    line-height: 1.08 !important;
  }

  /* Trip detail cards: readable without excess height. */
  #portal-section .trip-section {
    margin-top: 0.34rem !important;
    padding-top: 0.34rem !important;
  }

  #portal-section .driver-summary-grid .trip-field,
  #portal-section .driver-location-grid .trip-field {
    padding: 0.44rem !important;
    border-radius: 10px !important;
  }

  #portal-section .trip-field strong {
    font-size: 0.72rem !important;
  }

  #portal-section .trip-field span,
  #portal-section .trip-field p {
    font-size: 0.82rem !important;
  }

  /* Notes/history remain accessible and cannot be covered. */
  #portal-section .driver-notes-details summary,
  #portal-section .collapsible-history > summary {
    min-height: 38px !important;
    font-size: 0.78rem !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}

@media screen and (max-width: 430px),
       screen and (max-device-width: 430px) and (orientation: portrait) {
  #portal-section .driver-status-steps li {
    min-width: 82px !important;
    font-size: 0.6rem !important;
  }

  #portal-section .driver-top-actions .status-action,
  #portal-section .driver-action-link {
    font-size: 0.62rem !important;
  }
}


/* ===== FINAL VISUAL POLISH PASS: Mobile/Desktop Accessibility Cleanup ===== */
/* Scope: visual/accessibility polish only. No API, login, message, map, or status-flow changes. */

/* Keep focus visible but less oversized on mobile-sized controls. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 3px !important;
}

/* Do not let labels inherit input-like border treatment from accessibility/high contrast overrides. */
.profile-display-group label,
#portal-section .profile-display-group label {
  display: block !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Divider cleanup under quick dispatch controls. */
#driver-quick-controls-anchor {
  border-bottom: 1px solid #334155 !important;
  padding-bottom: 0.42rem !important;
  margin-bottom: 0.42rem !important;
}

/* Final quick dispatch button normalization. */
#desktop-call-dispatch-button,
#desktop-call-dispatch-button:link,
#desktop-call-dispatch-button:visited,
#desktop-call-dispatch-button:hover,
#desktop-call-dispatch-button:focus,
#desktop-call-dispatch-button:active,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:link,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:visited,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:hover,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:focus,
#desktop-driver-quick-controls > a.desktop-quick-dispatch-call:active {
  background: #172033 !important;
  color: #ffffff !important;
  border-color: #172033 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
}

#desktop-message-dispatch-button,
#desktop-driver-quick-controls > button.desktop-quick-dispatch-message {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  vertical-align: middle !important;
}

/* Workflow chip safety: scrollable, no clipped final chip. */
#portal-section .driver-status-steps {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#portal-section .driver-status-steps::after {
  content: "";
  flex: 0 0 1.15rem;
}

#portal-section .driver-status-steps li {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Desktop remains stable and readable. */
@media (min-width: 901px) {
  #driver-quick-controls-anchor {
    border-bottom: 1px solid #cbd5e1 !important;
  }

  .driver-trip-card {
    border-color: #b6c2d1 !important;
    border-width: 3px !important;
  }

  .driver-profile-readonly {
    border-width: 2px !important;
  }
}

/* Mobile final visual polish. */
@media screen and (max-width: 900px),
       screen and (max-device-width: 900px) and (orientation: portrait) {

  /* Reduce top card whitespace without hurting readability. */
  #portal-section .panel {
    padding: 0.48rem !important;
    border-radius: 13px !important;
    border-width: 2px !important;
  }

  #portal-section .toolbar h2 {
    font-size: clamp(1.08rem, 4.7vw, 1.28rem) !important;
    line-height: 1.06 !important;
    margin-bottom: 0.06rem !important;
  }

  #portal-section .toolbar p {
    font-size: clamp(0.78rem, 3.1vw, 0.88rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 0.24rem !important;
  }

  /* Utility controls remain balanced and aligned. */
  #portal-section .portal-utility-actions {
    gap: 0.4rem !important;
    margin: 0.3rem 0 0.36rem !important;
  }

  #refresh-button,
  #logout-button {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 0.72rem !important;
    border-radius: 11px !important;
    padding: 0.28rem 0.4rem !important;
  }

  /* Dispatch controls: equal height, centered text, same radius. */
  #driver-quick-controls-anchor {
    padding-bottom: 0.34rem !important;
    margin-bottom: 0.34rem !important;
    border-bottom: 1px solid #334155 !important;
  }

  #driver-quick-controls-anchor #desktop-driver-quick-controls {
    gap: 0.4rem !important;
    margin: 0.3rem 0 0.32rem !important;
  }

  #desktop-call-dispatch-button,
  #desktop-call-dispatch-button:link,
  #desktop-call-dispatch-button:visited,
  #desktop-call-dispatch-button:hover,
  #desktop-call-dispatch-button:focus,
  #desktop-call-dispatch-button:active,
  #desktop-message-dispatch-button,
  #desktop-driver-quick-controls > a.desktop-quick-dispatch-call,
  #desktop-driver-quick-controls > button.desktop-quick-dispatch-message {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0.34rem 0.42rem !important;
    font-size: 0.72rem !important;
    border-radius: 12px !important;
    line-height: 1.08 !important;
  }

  /* Focus ring normalized; avoid oversized gold ring appearance. */
  #desktop-call-dispatch-button:focus,
  #desktop-message-dispatch-button:focus,
  #desktop-call-dispatch-button:focus-visible,
  #desktop-message-dispatch-button:focus-visible,
  #desktop-driver-quick-controls > a:focus,
  #desktop-driver-quick-controls > button:focus,
  #desktop-driver-quick-controls > a:focus-visible,
  #desktop-driver-quick-controls > button:focus-visible {
    outline: 3px solid var(--focus) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }

  /* Driver profile label and input cleanup. */
  #portal-section .driver-profile-row {
    margin-top: 0.28rem !important;
    padding-top: 0.3rem !important;
  }

  #portal-section .profile-display-group label {
    display: block !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    margin: 0 0 0.16rem !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  #portal-section .driver-profile-readonly,
  #portal-section input.driver-profile-readonly {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 0.8rem !important;
    padding: 0.24rem 0.5rem !important;
    border-width: 2px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
  }

  /* Filters: slightly larger touch target, less isolated visually. */
  #filter-toggle,
  #portal-section #filter-toggle,
  .filter-toggle,
  .secondary-filter-toggle {
    min-width: 104px !important;
    max-width: 118px !important;
    min-height: 38px !important;
    height: 38px !important;
    font-size: 0.76rem !important;
    border-radius: 10px !important;
    padding: 0.28rem 0.48rem !important;
  }

  .filter-toggle-row {
    margin-top: 0.26rem !important;
    margin-bottom: 0.24rem !important;
  }

  /* Trip card border and spacing softened. */
  #portal-section .driver-trip-card,
  #portal-section .trip-card {
    border-width: 2px !important;
    border-color: #c5d0dd !important;
    padding: 0.58rem !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
  }

  #portal-section .trip-card-header h3 {
    font-size: clamp(1.18rem, 5vw, 1.36rem) !important;
    line-height: 1.08 !important;
  }

  #portal-section .trip-subtitle {
    font-size: 0.78rem !important;
  }

  #portal-section .status-badge {
    font-size: 0.68rem !important;
    padding: 0.28rem 0.48rem !important;
    border-width: 2px !important;
  }

  /* Workflow chips: smaller min width, right padding safety, no clipping. */
  #portal-section .driver-status-steps {
    gap: 0.28rem !important;
    margin: 0.3rem 0 !important;
    padding: 0 1.35rem 0.18rem 0 !important;
    scroll-padding-right: 1.35rem;
  }

  #portal-section .driver-status-steps li {
    min-width: 78px !important;
    min-height: 32px !important;
    padding: 0.22rem 0.36rem !important;
    font-size: 0.62rem !important;
    border-width: 2px !important;
  }

  /* Main trip action box: stable, readable, no overlap. */
  #portal-section .driver-top-actions {
    position: static !important;
    gap: 0.34rem !important;
    padding: 0.34rem !important;
    margin: 0.3rem 0 0.34rem !important;
    border-width: 2px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  #portal-section .driver-top-actions .status-action,
  #portal-section .driver-action-link {
    min-height: 42px !important;
    font-size: 0.66rem !important;
    padding: 0.32rem 0.36rem !important;
    border-radius: 10px !important;
    line-height: 1.08 !important;
  }

  /* Details remain accessible but compact. */
  #portal-section .trip-section {
    margin-top: 0.32rem !important;
    padding-top: 0.32rem !important;
  }

  #portal-section .driver-summary-grid .trip-field,
  #portal-section .driver-location-grid .trip-field {
    padding: 0.42rem !important;
    border-width: 2px !important;
    border-radius: 10px !important;
  }

  #portal-section .trip-field strong {
    font-size: 0.72rem !important;
  }

  #portal-section .trip-field span,
  #portal-section .trip-field p {
    font-size: 0.82rem !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}

/* Narrow iPhone completion safety. */
@media screen and (max-width: 430px),
       screen and (max-device-width: 430px) and (orientation: portrait) {
  #portal-section .driver-status-steps {
    padding-right: 1.5rem !important;
  }

  #portal-section .driver-status-steps li {
    min-width: 76px !important;
    font-size: 0.58rem !important;
  }

  #portal-section .driver-top-actions .status-action,
  #portal-section .driver-action-link {
    font-size: 0.62rem !important;
  }
}


/* ===== Targeted Driver Portal Fix: Map Options + iPhone Safe Area ===== */
/* Keeps top driver action buttons from forcing Google Maps on iPhone. */
.driver-map-options-button {
  cursor: pointer !important;
}

#portal-section [id^="trip-locations-"]:focus {
  outline: 3px solid var(--focus) !important;
  outline-offset: 4px !important;
}

@media screen and (max-width: 900px),
       screen and (max-device-width: 900px) and (orientation: portrait) {
  .driver-map-options-button {
    min-height: 42px !important;
    font-size: 0.66rem !important;
    padding: 0.32rem 0.36rem !important;
    border-radius: 10px !important;
  }

  body {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  }

  #portal-section .driver-notes-details:last-child,
  #portal-section .trip-card:last-child {
    margin-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
}


/* ===== Driver Portal: Today / Future / Past Trip Sections ===== */
/* Main Assigned Trips area shows today's trips first. Future and past trips stay collapsed to reduce driver screen clutter. */

.today-trips-section {
  display: grid;
  gap: 1rem;
}

.collapsible-future {
  margin-top: 1.25rem;
  border: 3px solid #94a3b8;
  border-radius: 18px;
  background: #f8fafc;
  overflow: hidden;
}

.collapsible-future > summary {
  cursor: pointer;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 0.9rem 1rem;
  font-size: 1.05rem;
  font-weight: 900;
  background: #e0f2fe;
  color: #172033;
}

.collapsible-future > summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.future-content {
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

@media screen and (max-width: 900px),
       screen and (max-device-width: 900px) and (orientation: portrait) {
  .today-trips-section {
    gap: 0.55rem !important;
  }

  .collapsible-future {
    margin-top: 0.85rem !important;
    border-width: 2px !important;
    border-radius: 14px !important;
  }

  .collapsible-future > summary {
    min-height: 42px !important;
    padding: 0.6rem 0.75rem !important;
    font-size: 0.86rem !important;
  }

  .future-content {
    padding: 0.65rem !important;
    gap: 0.65rem !important;
  }
}