/* Booking detail workspace — Dev only. */
#viewModal {
  z-index: 1000 !important;
  padding: clamp(12px, 2vw, 24px) !important;
  background: rgba(2, 18, 35, .72) !important;
  backdrop-filter: blur(5px);
}

#viewModal .vmd-dialog {
  width: min(1220px, calc(100vw - 48px));
  height: min(820px, calc(100dvh - 48px));
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ccd9df;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 27, 63, .24);
}

#viewModal .vmd-header {
  position: relative;
  flex: 0 0 auto;
  min-height: 102px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 17px 24px 16px 29px;
  border-top: 4px solid #00b8c4;
  border-bottom: 1px solid #d9e2e8;
  background: #fff;
}

#viewModal .vmd-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 5px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(#00b8c4, #001b3f);
}

#viewModal .vmd-eyebrow {
  display: block;
  color: #007d88;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}

#viewModal .vmd-title-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 1px;
}

#viewModal .vmd-title-row h2 {
  margin: 0;
  color: #001b3f;
  font-size: 25px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.02em;
}

#viewModal .vmd-title-row .status-badge {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 10px !important;
  font-weight: 650 !important;
}

#viewModal .vmd-heading p {
  margin: 4px 0 0;
  color: #65798d;
  font-size: 11px;
}

#viewModal .vmd-heading p strong { color: #425a70; font-weight: 650; }

#viewModal .vmd-close {
  min-width: 70px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #c6d2da;
  border-radius: 10px;
  background: #fff;
  color: #42576d;
  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}

#viewModal .vmd-close:hover { border-color: #94a9b6; background: #f6f9fa; }
#viewModal .vmd-close:focus-visible,
#viewModal .vmd-button:focus-visible { outline: 3px solid rgba(0, 184, 196, .28); outline-offset: 2px; }

#viewModal .vmd-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 22px;
  background: #f7f9fa;
  scrollbar-width: thin;
  scrollbar-color: #9aabb8 #edf2f5;
}

#viewModal .vmd-summary {
  display: grid;
  grid-template-columns: minmax(205px, 1.35fr) repeat(4, minmax(122px, .75fr));
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid #d9e2e8;
  border-radius: 13px;
  background: #fff;
}

#viewModal .vmd-summary-item {
  min-width: 0;
  padding: 11px 14px;
  border-right: 1px solid #e5ebef;
}

#viewModal .vmd-summary-item:last-child { border-right: 0; }
#viewModal .vmd-summary-item > span,
#viewModal .vmd-fare > span,
#viewModal .vmd-fact > span,
#viewModal .vmd-stop small {
  display: block;
  margin-bottom: 2px;
  color: #8b9aaa;
  font-size: 9px;
  font-weight: 600;
}

#viewModal .vmd-summary-item > strong {
  display: block;
  overflow: hidden;
  color: #001b3f;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#viewModal .vmd-summary-item > small {
  display: block;
  overflow: hidden;
  margin-top: 1px;
  color: #65798d;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#viewModal .vmd-summary-item > small b { font-weight: 600; }
#viewModal #vm-driver { color: #8b5705; }

#viewModal .vmd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(285px, .75fr);
  gap: 14px;
  align-items: stretch;
}

#viewModal .vmd-panel,
#viewModal .vmd-note {
  overflow: hidden;
  border: 1px solid #d9e2e8;
  border-radius: 15px;
  background: #fff;
}

#viewModal .vmd-panel-head {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 15px;
  border-bottom: 1px solid #e5ebef;
}

#viewModal .vmd-panel-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #001b3f;
  font-size: 14px;
  font-weight: 750;
}

#viewModal .vmd-panel-head h3 i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e8f8f9;
  color: #007d88;
  font-size: 12px;
}

#viewModal #vm-route-info { color: #65798d; font-size: 10px; font-weight: 600; }

#viewModal .vmd-route-body {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(275px, .9fr) minmax(310px, 1.2fr);
}

#viewModal .vmd-stops {
  padding: 20px 19px 18px 22px;
  border-right: 1px solid #e5ebef;
}

#viewModal .vmd-stop {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 11px;
  padding-bottom: 28px;
}

#viewModal .vmd-stop:last-of-type { padding-bottom: 0; }
#viewModal .vmd-stop:first-child::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 22px;
  bottom: 2px;
  width: 2px;
  background: linear-gradient(#00b8c4, #65cfd5);
}

#viewModal .vmd-marker {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border: 7px solid #dff7f8;
  border-radius: 50%;
  background: #00b8c4;
}

#viewModal .vmd-stop.is-destination .vmd-marker { border-color: #fff0d5; background: #c98a25; }
#viewModal .vmd-stop strong { display: block; color: #001b3f; font-size: 12px; font-weight: 700; line-height: 1.55; }

#viewModal .vmd-map-wrap { position: relative; min-width: 0; min-height: 330px; overflow: hidden; background: #dce8e8; }
#viewModal .vmd-map-label {
  position: absolute;
  left: 13px;
  top: 12px;
  z-index: 3;
  padding: 6px 9px;
  border: 1px solid rgba(185, 200, 210, .9);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  color: #52687c;
  font-size: 9px;
  font-weight: 650;
  box-shadow: 0 4px 14px rgba(0, 27, 63, .08);
}

#viewModal #vm-map.vmd-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 330px !important;
  max-height: none !important;
  display: block !important;
  background: #dce8e8;
}

#viewModal #vm-map.vmd-map:empty::before {
  content: "แผนที่จะแสดงเมื่อระบบได้รับพิกัดเส้นทาง";
  min-height: 330px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #6f8494;
  font-size: 10px;
  text-align: center;
}

#viewModal .vmd-ops-panel { display: flex; flex-direction: column; }
#viewModal .vmd-fare {
  padding: 16px;
  border-bottom: 1px solid #cbe8ec;
  background: linear-gradient(135deg, #eafafb, #f7ffff);
}

#viewModal .vmd-fare > span { color: #007d88; font-weight: 700; }
#viewModal .vmd-fare > strong { display: block; margin-top: 1px; color: #001b3f; font-size: 27px; font-weight: 750; line-height: 1.25; }
#viewModal .vmd-fare > small { color: #65798d; font-size: 9px; }

#viewModal .vmd-facts { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
#viewModal .vmd-fact {
  min-height: 77px;
  padding: 12px 13px;
  border-right: 1px solid #e7edf0;
  border-bottom: 1px solid #e7edf0;
}

#viewModal .vmd-fact:nth-child(even) { border-right: 0; }
#viewModal .vmd-fact strong { display: block; color: #001b3f; font-size: 11px; font-weight: 700; line-height: 1.45; }
#viewModal .vmd-fact.is-driver { grid-column: 1 / -1; border-right: 0; border-bottom: 0; background: #fbfcfd; }
#viewModal .vmd-fact.is-driver strong { color: #8b5705; }

#viewModal .vmd-note {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 15px;
  margin-top: 14px;
  padding: 13px 16px;
}

#viewModal .vmd-note > div { display: flex; align-items: center; gap: 8px; color: #001b3f; font-size: 11px; }
#viewModal .vmd-note > div i { color: #007d88; }
#viewModal .vmd-note p { margin: 0; color: #354d63; font-size: 11px; line-height: 1.65; }

#viewModal .vmd-cancel-reason {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 15px;
  margin-top: 12px;
  padding: 13px 16px;
  border: 1px solid #fed7aa;
  border-radius: 15px;
  background: #fff7ed;
}
#viewModal .vmd-cancel-reason[hidden] { display: none !important; }
#viewModal .vmd-cancel-reason > div:first-child { display: flex; align-items: flex-start; gap: 8px; color: #9a3412; font-size: 11px; }
#viewModal .vmd-cancel-reason > div:first-child i { margin-top: 2px; color: #ea580c; }
#viewModal .vmd-cancel-reason p { margin: 0; color: #c2410c; font-size: 12px; font-weight: 700; line-height: 1.6; }
#viewModal .vmd-cancel-reason small { display: block; margin-top: 4px; color: #9a5a36; font-size: 9px; line-height: 1.5; }
#viewModal .vmd-cancel-reason small[hidden] { display: none !important; }

#viewModal .vmd-footer {
  flex: 0 0 auto;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 20px;
  border-top: 1px solid #d9e2e8;
  background: #fff;
}

#viewModal .vmd-footer > span { color: #65798d; font-size: 9px; }
#viewModal .vmd-footer > div { display: flex; gap: 8px; }
#viewModal .vmd-button {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

#viewModal .vmd-button[hidden] { display: none !important; }

#viewModal .vmd-button.is-secondary { border: 1px solid #c6d2da; background: #fff; color: #42576d; }
#viewModal .vmd-button.is-primary { border: 1px solid #001b3f; background: #001b3f; color: #fff; }
#viewModal .vmd-button.is-primary:hover { background: #06345c; }

@media (max-width: 1000px) {
  #viewModal .vmd-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #viewModal .vmd-summary-item { border-bottom: 1px solid #e5ebef; }
  #viewModal .vmd-summary-item:nth-child(even) { border-right: 0; }
  #viewModal .vmd-passenger { grid-column: 1 / -1; }
  #viewModal .vmd-layout { grid-template-columns: 1fr; }
  #viewModal .vmd-route-body { grid-template-columns: minmax(250px, .8fr) minmax(300px, 1.2fr); }
}

@media (max-width: 720px) {
  #viewModal { padding: 0 !important; }
  #viewModal .vmd-dialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  #viewModal .vmd-header { min-height: 88px; padding: 14px 14px 13px 20px; }
  #viewModal .vmd-title-row h2 { font-size: 21px; }
  #viewModal .vmd-heading p { display: none; }
  #viewModal .vmd-scroll { padding: 11px; }
  #viewModal .vmd-summary { grid-template-columns: 1fr; }
  #viewModal .vmd-summary-item,
  #viewModal .vmd-summary-item:nth-child(even),
  #viewModal .vmd-passenger { grid-column: auto; border-right: 0; }
  #viewModal .vmd-route-body { display: block; }
  #viewModal .vmd-stops { border-right: 0; border-bottom: 1px solid #e5ebef; }
  #viewModal .vmd-map-wrap,
  #viewModal #vm-map.vmd-map { min-height: 260px !important; }
  #viewModal #vm-map.vmd-map:empty::before { min-height: 260px; }
  #viewModal .vmd-note,
  #viewModal .vmd-cancel-reason { grid-template-columns: 1fr; gap: 7px; }
  #viewModal .vmd-footer { padding: 9px 11px; }
  #viewModal .vmd-footer > span { display: none; }
  #viewModal .vmd-footer > div { width: 100%; }
  #viewModal .vmd-button { flex: 1; }
}

#viewModal .vmd-footer > div{align-items:center;justify-content:flex-end}
#viewModal #vm-send-action{min-width:112px}

/* Popup actions opened from Booking Details stay above the current detail view. */
#matchModal {
  z-index: 1300 !important;
  background: rgba(0, 20, 47, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#matchModal .modal-box {
  max-height: min(92dvh, 760px);
}

/* Minimal popup visual system */
#matchModal,
#customAlertOverlay {
  background: rgba(0, 27, 63, .38) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

#matchModal .match-popup-card,
#customAlertBox {
  border: 1px solid rgba(148, 163, 184, .24) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(0, 27, 63, .22) !important;
}

#matchModal .match-popup-card {
  width: min(520px, calc(100vw - 32px)) !important;
}

#matchModal .match-popup-header {
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid #e6edf2;
  background: #fff !important;
}

#matchModal .match-popup-title,
#matchModal #mm-id {
  color: #001b3f !important;
}

#matchModal .match-popup-title { font-size: 16px !important; font-weight: 650 !important; }
#matchModal #mm-id { margin-top: 3px !important; color: #65798d !important; font-size: 10px !important; }

#matchModal .match-popup-close,
#customAlertClose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid #d8e1e7 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #425a70 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
}

#matchModal .match-popup-close:hover,
#customAlertClose:hover { background: #f5f8fa !important; border-color: #b7c5cf !important; }

#matchModal .match-popup-body { padding: 18px 20px !important; }
#matchModal .match-popup-footer {
  padding: 14px 20px 18px !important;
  border-top: 1px solid #edf1f4 !important;
  background: #fff !important;
}

#matchModal .match-popup-cancel,
#matchModal .match-popup-confirm,
#customAlertFooter .cal-btn {
  min-width: 108px;
  min-height: 38px;
  padding: 9px 18px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}

#matchModal .match-popup-cancel,
#customAlertFooter .cal-btn.secondary {
  border: 1px solid #d8e1e7 !important;
  background: #f4f6f8 !important;
  color: #425a70 !important;
}

#matchModal .match-popup-confirm,
#customAlertFooter .cal-btn.primary {
  border: 1px solid #006f7a !important;
  background: #007d88 !important;
  color: #fff !important;
}

#customAlertFooter .cal-btn.danger {
  border: 1px solid #e14949 !important;
  background: #ef5a5a !important;
  color: #fff !important;
}

#customAlertBox {
  position: relative;
  width: min(390px, calc(100vw - 32px)) !important;
  overflow: visible !important;
}

#customAlertHeader {
  position: relative;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 20px 56px 8px 20px !important;
}

#customAlertIcon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #f2f5f7 !important;
  filter: grayscale(1);
  font-size: 17px !important;
}

#customAlertTitle {
  color: #001b3f !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  text-align: left !important;
}

#customAlertClose {
  position: absolute;
  top: 16px;
  right: 16px;
}

#customAlertMsg {
  padding: 12px 20px 18px !important;
  color: #53697d !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

#customAlertFooter {
  justify-content: flex-end !important;
  padding: 0 20px 20px !important;
  border-top: 0 !important;
}

@media (max-width: 560px) {
  #matchModal .match-popup-card { max-height: calc(100dvh - 24px) !important; }
  #customAlertFooter .cal-btn { flex: 1; max-width: none; }
}

/* Unified frameless close buttons */
.popup-close-x,
body #activityLogModal .popup-close-x,
#viewModal .popup-close-x,
#matchModal .popup-close-x,
#customAlertClose.popup-close-x {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  opacity: .82;
  cursor: pointer;
  transition: opacity .14s ease, color .14s ease !important;
}

.popup-close-x:hover,
body #activityLogModal .popup-close-x:hover,
#viewModal .popup-close-x:hover,
#matchModal .popup-close-x:hover,
#customAlertClose.popup-close-x:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1;
  transform: none !important;
}

#viewModal .popup-close-x,
#matchModal .popup-close-x,
#customAlertClose.popup-close-x,
.map-modal-close.popup-close-x,
body #activityLogModal .popup-close-x {
  color: #425a70 !important;
}

.popup-close-x:focus-visible,
body #activityLogModal .popup-close-x:focus-visible {
  outline: 2px solid #00b8c4 !important;
  outline-offset: 2px !important;
}

/* Match popup route rows */
#matchModal .match-route-summary {
  display: grid;
  gap: 7px;
  margin: 8px 0 9px;
}

#matchModal .match-route-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  color: #166534;
  line-height: 1.55;
}

#matchModal .match-route-row > span {
  padding-top: 1px;
  color: #4f7e64;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

#matchModal .match-route-row > strong {
  min-width: 0;
  color: #125c32;
  font-size: 11px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

#matchModal .match-route-row.is-destination {
  padding-top: 7px;
  border-top: 1px dashed #b8dfc7;
}

/* Driver recall workflow actions */
#viewModal .vmd-button.is-warning {
  border: 1px solid #d99a2b;
  background: #fff8e8;
  color: #9a5d05;
}

#viewModal .vmd-button.is-warning:hover {
  border-color: #bd7914;
  background: #ffefc8;
}

.btn-recall-driver,
.table-recall-driver-btn {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid #e3ac50;
  border-radius: 8px;
  background: #fff8e8;
  color: #985d08;
  font-family: 'Prompt', sans-serif;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.btn-recall-driver:hover,
.table-recall-driver-btn:hover {
  border-color: #c8831a;
  background: #ffefc8;
}


/* Consolidated booking row actions */
#page-today .today-action-group,
#page-upcoming .upcoming-action-group {
  display: block !important;
}

#page-today .today-action-group .action-dropdown-btn,
#page-upcoming .upcoming-action-group .action-dropdown-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
  border: 1px solid #b9c9d8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #0c2d4a !important;
  font: 700 11px 'Prompt', sans-serif !important;
  white-space: nowrap !important;
}

#page-today .today-action-group .action-dropdown-btn:hover,
#page-upcoming .upcoming-action-group .action-dropdown-btn:hover {
  border-color: #00b7c7 !important;
  background: #eefbfc !important;
  color: #007e8b !important;
}

.apm-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 20px;
}

.apm-actions-grid .apm-btn {
  min-height: 82px;
  padding: 14px 16px;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  text-align: left;
}

.apm-actions-grid .apm-btn-label { font-size: 13px; }
.apm-actions-grid .apm-btn-desc { font-size: 10px; text-align: left; }
.apm-actions-grid .apm-send { background:#dbeafe; border-color:#60a5fa; }
.apm-actions-grid .apm-send:hover { background:#bfdbfe; border-color:#3b82f6; }
.apm-actions-grid .apm-send .apm-btn-label { color:#1e3a8a; }
.apm-actions-grid .apm-send .apm-btn-desc { color:#1d4ed8; }
.apm-actions-grid .apm-recall { background:#fff7ed; border-color:#fdba74; }
.apm-actions-grid .apm-recall:hover { background:#ffedd5; border-color:#fb923c; }
.apm-actions-grid .apm-recall .apm-btn-label { color:#9a3412; }
.apm-actions-grid .apm-recall .apm-btn-desc { color:#c2410c; }
.apm-actions-grid .apm-complete { background:#dcfce7; border-color:#86efac; }
.apm-actions-grid .apm-complete:hover { background:#bbf7d0; border-color:#4ade80; }
.apm-actions-grid .apm-complete .apm-btn-label { color:#166534; }
.apm-actions-grid .apm-complete .apm-btn-desc { color:#15803d; }
.apm-actions-grid .apm-history { background:#f1f5f9; border-color:#cbd5e1; }
.apm-actions-grid .apm-history:hover { background:#e2e8f0; border-color:#94a3b8; }
.apm-actions-grid .apm-history .apm-btn-label { color:#0f172a; }
.apm-actions-grid .apm-history .apm-btn-desc { color:#475569; }

@media (max-width: 640px) {
  .apm-actions-grid { grid-template-columns: 1fr; }
  .apm-actions-grid .apm-btn { min-height: 68px; }
}


/* Booking action dropdown */
#actionPopup.action-dropdown-menu {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1400 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  animation: none !important;
}

#actionPopup.action-dropdown-menu.open { display: block !important; }

#actionPopup.action-dropdown-menu .action-popup {
  position: fixed !important;
  width: 320px !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 20px) !important;
  overflow: auto !important;
  border: 1px solid #d7e1ea !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 40px rgba(12,45,74,.18) !important;
  animation: actionDropdownIn .14s ease-out !important;
}

@keyframes actionDropdownIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

#actionPopup .apm-header {
  padding: 11px 14px !important;
  border-bottom: 1px solid #e5edf3;
  background: #f8fbfd !important;
}

#actionPopup .apm-title { color:#0c2d4a !important; font-size:12px !important; }
#actionPopup .apm-id { color:#007e8b !important; font-size:10px !important; font-weight:700; }
#actionPopup .apm-cust { color:#64748b !important; font-size:10px !important; }
#actionPopup .apm-close { color:#64748b !important; background:transparent !important; }

#actionPopup .apm-actions-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 6px !important;
}

#actionPopup .apm-actions-grid .apm-btn {
  display: flex;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 8px 10px !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  transform: none !important;
}

#actionPopup .apm-actions-grid .apm-btn:hover { background:#f1f7fa !important; }
#actionPopup .apm-actions-grid .apm-btn + .apm-btn { border-top:1px solid #eef2f6 !important; border-radius:0 !important; }

#actionPopup .apm-list-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:8px;
  background:#eaf8fa;
  color:#008e9b;
  font-size:14px;
}

#actionPopup .apm-list-copy { display:flex; flex-direction:column; min-width:0; gap:1px; }
#actionPopup .apm-btn-label { color:#0c2d4a !important; font-size:11px !important; }
#actionPopup .apm-btn-desc { color:#718096 !important; font-size:9px !important; text-align:left !important; }
#actionPopup .apm-complete .apm-list-icon { background:#dcfce7; color:#15803d; }
#actionPopup .apm-recall .apm-list-icon,
#actionPopup .apm-cancel-job .apm-list-icon { background:#fff3e6; color:#c56a16; }
#actionPopup .apm-del .apm-list-icon { background:#feecee; color:#d43f4f; }
#actionPopup .apm-history .apm-list-icon { background:#eaf1ff; color:#3568bd; }
#actionPopup .apm-edit .apm-list-icon { background:#fff8d8; color:#9b7411; }
#actionPopup .apm-footer { display:none !important; }

@media (max-width: 640px) {
  #actionPopup.action-dropdown-menu .action-popup { width:300px !important; }
}

/* Align job-type column content */
#page-today .today-data-table th:nth-child(3),
#page-upcoming #upcomingTable th:nth-child(3),
#page-today .today-type-cell,
#page-upcoming .upcoming-type-cell {
  text-align: left !important;
}

#page-today .today-type-cell .type-pill,
#page-upcoming .upcoming-type-cell .type-pill {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Archive table aligned with active booking tables */
#page-archive .archive-table-wrap {
  border:1px solid #d7e1ea !important;
  border-radius:12px !important;
  overflow:auto !important;
  background:#fff !important;
}

#page-archive #archiveTable {
  width:100% !important;
  min-width:1000px !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
}

#page-archive #archiveTable th {
  padding:14px 12px !important;
  background:#f7f9fb !important;
  color:#64748a !important;
  font-size:9px !important;
  font-weight:600 !important;
  text-align:left !important;
  white-space:normal !important;
}

#page-archive #archiveTable td {
  padding:16px 12px !important;
  border-bottom:1px solid #edf1f4 !important;
  font-size:11px !important;
  vertical-align:top !important;
  white-space:normal !important;
}

#page-archive #archiveTable th:nth-child(1){width:17% !important;}
#page-archive #archiveTable th:nth-child(2){width:12% !important;}
#page-archive #archiveTable th:nth-child(3){width:11% !important;}
#page-archive #archiveTable th:nth-child(4){width:24% !important;}
#page-archive #archiveTable th:nth-child(5){width:13% !important;}
#page-archive #archiveTable th:nth-child(6){width:11% !important;}
#page-archive #archiveTable th:nth-child(7){width:12% !important;}
#page-archive #archiveTable tbody tr { cursor:pointer; }
#page-archive #archiveTable tbody tr:hover td,
#page-archive #archiveTable tbody tr:focus td { background:#f4fbfc !important; }
#page-archive #archiveTable tbody tr:focus { outline:3px solid rgba(0,184,196,.24); outline-offset:-3px; }
#page-archive .archive-type-cell .type-pill { padding-left:0 !important; padding-right:0 !important; }
#page-archive .archive-detail-cell .note-clamp { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.55; }
#page-archive .archive-fare-meta { color:#007e8b !important; font-weight:700; }
#page-archive .archive-cancel-reason { color:#64748b !important; line-height:1.4; }
#page-archive .archive-cancel-reason.is-auto { color:#dc2626 !important; }
#page-archive .archive-action-group { display:block !important; }
#page-archive .archive-action-group .action-dropdown-btn {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100% !important;
  min-height:40px !important;
  padding:9px 12px !important;
  border:1px solid #b9c9d8 !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#0c2d4a !important;
  font:700 11px 'Prompt',sans-serif !important;
  white-space:nowrap !important;
}
#page-archive .archive-action-group .action-dropdown-btn:hover { border-color:#00b7c7 !important; background:#eefbfc !important; color:#007e8b !important; }
#actionPopup .apm-receipt .apm-list-icon { background:#e8f8ef; color:#13814b; }

@media(max-width:720px){
  #page-archive #archiveTable{min-width:0 !important;display:block !important;}
  #page-archive #archiveTable thead{display:none !important;}
  #page-archive #archiveTable tbody{display:block !important;padding:8px;}
  #page-archive #archiveTable tbody tr{display:grid !important;grid-template-columns:1fr !important;margin-bottom:10px;border:1px solid #d7e1ea;border-radius:12px;overflow:hidden;}
  #page-archive #archiveTable tbody td{display:block !important;width:auto !important;padding:8px 10px !important;}
}

/* Archive status: keep driver code and name below status badge */
#page-archive .archive-status-cell .today-status-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
}
#page-archive .archive-status-cell .today-status-stack > small:not(.archive-cancel-reason) {
  display: block !important;
  width: 100% !important;
  margin-top: 1px !important;
  line-height: 1.45 !important;
}


/* Consistent driver details in Upcoming and Archive tables */
#page-upcoming .driver-status-stack,
#page-archive .driver-status-stack,
#page-archive .archive-status-cell .today-status-stack {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:6px !important;
}

#page-upcoming .table-driver-details,
#page-archive .table-driver-details {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  width:100%;
  min-width:0;
  line-height:1.4;
}

#page-upcoming .table-driver-details strong,
#page-archive .table-driver-details strong {
  color:#0c2d4a;
  font-size:10px;
  font-weight:700;
  overflow-wrap:anywhere;
}

#page-upcoming .table-driver-details small,
#page-archive .table-driver-details small {
  color:#718096 !important;
  font-size:9px !important;
  font-weight:500;
}


/* Unified status cells across Today, Upcoming and Archive tables */
#page-today .driver-status-stack,
#page-upcoming .driver-status-stack,
#page-archive .archive-status-cell .today-status-stack {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:7px !important;
}

#page-today .status-badge,
#page-upcoming .status-badge,
#page-archive .status-badge {
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  min-height:28px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  font-size:10px !important;
  line-height:1.35 !important;
  white-space:normal !important;
}

#page-today .table-driver-details,
#page-upcoming .table-driver-details,
#page-archive .table-driver-details {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  color:#718096 !important;
  font-size:10px !important;
  font-weight:500 !important;
  line-height:1.55 !important;
  overflow-wrap:anywhere;
}

#page-today .table-driver-details span,
#page-upcoming .table-driver-details span,
#page-archive .table-driver-details span {
  color:inherit !important;
  font:inherit !important;
}


/* Never show legacy duplicated driver details below the unified status line. */
#page-today .advance-driver-assignment,
#page-upcoming .advance-driver-assignment,
#page-archive .advance-driver-assignment,
#page-today .driver-status-stack > small:not(.archive-cancel-reason),
#page-upcoming .driver-status-stack > small:not(.archive-cancel-reason) {
  display:none !important;
}

/* Action modals share the compact white confirmation-dialog visual system. */
body .unified-action-modal{
  position:fixed!important;
  inset:0!important;
  z-index:2400!important;
  box-sizing:border-box!important;
  padding:clamp(12px,2vw,24px)!important;
  background:rgba(0,27,63,.38)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
body .unified-action-modal .modal-box{
  max-width:calc(100vw - 32px)!important;
  max-height:calc(100dvh - 32px)!important;
  border:1px solid rgba(148,163,184,.24)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 24px 70px rgba(0,27,63,.22)!important;
}
body .unified-action-modal .modal-box>div:first-child{
  min-height:68px!important;
  padding:16px 20px!important;
  border-bottom:1px solid #e6edf2!important;
  background:#fff!important;
}
body .unified-action-modal .uam-title{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#001b3f!important;
  font-size:15px!important;
  font-weight:650!important;
  line-height:1.4!important;
}
body .unified-action-modal .uam-icon{
  width:34px!important;
  height:34px!important;
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 34px!important;
  border-radius:10px!important;
  background:#f2f5f7!important;
  color:#53697d!important;
  font-size:15px!important;
}
body .unified-action-modal .uam-icon i{color:inherit!important;line-height:1!important}
body .unified-action-modal :is(#em-id,#cjm-id,#hm-id){
  margin-top:3px!important;
  color:#65798d!important;
  font-size:10px!important;
}
body .unified-action-modal .popup-close-x{color:#425a70!important}
body .unified-action-modal .modal-box>div:last-child{
  padding:14px 20px 18px!important;
  border-top:1px solid #edf1f4!important;
  background:#fff!important;
}
body .unified-action-modal .modal-box>div:last-child>button{
  min-width:108px!important;
  min-height:38px!important;
  padding:9px 18px!important;
  border-radius:10px!important;
  font-size:11px!important;
  font-weight:600!important;
  box-shadow:none!important;
  transform:none!important;
}
body .unified-action-modal .modal-box>div:last-child>.modal-btn{
  border:1px solid #d8e1e7!important;
  background:#f4f6f8!important;
  color:#425a70!important;
}
body #editModal .modal-box>div:last-child>button:not(.modal-btn){border:1px solid #006f7a!important;background:#007d88!important;color:#fff!important}
body #cancelJobModal .modal-box>div:last-child>button:not(.modal-btn){border:1px solid #d97706!important;background:#d97706!important;color:#fff!important}
body #deleteModal .modal-box>div:last-child>button:not(.modal-btn){border:1px solid #e14949!important;background:#ef5a5a!important;color:#fff!important}
body:has(.unified-action-modal.open),body:has(#customAlertOverlay.show){overflow:hidden!important}
body:has(.unified-action-modal.open) :is(.sidebar,.drawer-toggle-btn,.sidebar-overlay),
body:has(#customAlertOverlay.show) :is(.sidebar,.drawer-toggle-btn,.sidebar-overlay){
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
@media(max-width:560px){
  body .unified-action-modal{padding:8px!important}
  body .unified-action-modal .modal-box{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}
  body .unified-action-modal .modal-box>div:last-child>button{flex:1!important;min-width:0!important}
}

/* The map picker is a child action and must stay above the edit modal. */
body #mapModalOverlay.map-modal-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:3200!important;
  background:rgba(0,27,63,.46)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
body:has(#mapModalOverlay.active){overflow:hidden!important}

/* Cancellation summary separates pickup and destination into clear rows. */
#cancelJobModal .cancel-route-summary{
  display:grid!important;
  gap:8px!important;
  margin-top:10px!important;
}
#cancelJobModal .cancel-route-row{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  align-items:start!important;
  gap:10px!important;
  color:#c2410c!important;
  line-height:1.55!important;
}
#cancelJobModal .cancel-route-row>span{
  padding-top:1px!important;
  color:#9a5a36!important;
  font-size:10px!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
#cancelJobModal .cancel-route-row>strong{
  min-width:0!important;
  color:#c2410c!important;
  font-size:11px!important;
  font-weight:650!important;
  overflow-wrap:anywhere!important;
}
#cancelJobModal .cancel-route-row.is-destination{
  padding-top:8px!important;
  border-top:1px solid #fed7aa!important;
}