/* SSLS-inspired responsive operations theme */
:root {
  --ui-scale: 1;
  --bg-root: #f3f8fb;
  --bg-sidebar: #f8fbfd;
  --bg-surface: #ffffff;
  --bg-elevated: #f7fafc;
  --bg-card: #ffffff;
  --bg-hover: #eef9fb;
  --bg-input: #fbfdfe;
  --border-subtle: #e5edf3;
  --border-default: #cfdce6;
  --border-strong: #a9bdca;
  --border-accent: rgba(0, 190, 201, .42);
  --brand: #00bec9;
  --brand-light: #19ced7;
  --brand-dark: #003b63;
  --brand-glow: rgba(0, 190, 201, .15);
  --brand-soft: #e7f9fb;
  --text-primary: #00214b;
  --text-secondary: #536781;
  --text-muted: #718299;
  --text-accent: #007f91;
  --warning: #c88b2c;
  --danger: #cc554c;
  --success: #1f9d78;
  --shadow-sm: 0 1px 2px rgba(0, 33, 75, .05);
  --shadow-md: 0 12px 34px rgba(15, 52, 76, .08);
  --shadow-lg: 0 28px 65px rgba(15, 52, 76, .14);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --sidebar-w: 278px;
  --header-h: 92px;
  --page-gutter: clamp(16px, 2.2vw, 34px);
}

html { background: var(--bg-root); }
html, body, body * { font-family: "Noto Sans Thai", system-ui, sans-serif !important; }
body {
  display: block !important;
  min-width: 320px;
  padding: calc(var(--header-h) + 22px) var(--page-gutter) 38px;
  zoom: 1 !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background:
    repeating-linear-gradient(155deg, rgba(0, 190, 201, .045) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #f9fcfd 0%, #f1f6fa 42%, #f7fafc 100%);
}

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, [onclick], a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(0, 190, 201, .28) !important;
  outline-offset: 2px;
}

/* Global SSLS header */
.ssls-global-header {
  position: fixed;
  z-index: 210;
  top: 18px;
  left: var(--page-gutter);
  right: var(--page-gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px 14px 26px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: linear-gradient(105deg, #001d48 0%, #002a56 56%, #003f61 100%);
  box-shadow: 0 18px 44px rgba(0, 33, 75, .2);
  overflow: hidden;
}
.ssls-global-header::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0 76%, var(--warning) 76% 100%);
}
.ssls-brand { display: flex; align-items: center; min-width: 210px; }
.ssls-brand img { width: 170px; height: 60px; object-fit: contain; object-position: left center; }
.ssls-header-spacer { flex: 1; }
.ssls-header-action, .ssls-account {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  border: 1px solid rgba(178, 213, 228, .28);
  border-radius: 14px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.ssls-header-action { padding: 0 17px; cursor: pointer; font-weight: 700; }
.ssls-account { padding: 7px 9px 7px 16px; min-width: 240px; }
.ssls-account-copy { min-width: 0; line-height: 1.2; }
.ssls-account-label { font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.58); }
.ssls-account-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssls-head-icon, .ssls-logout-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; flex: none;
}
.ssls-head-icon { color: var(--brand-light); }
.ssls-logout-icon { color: #ff9b92; background: rgba(255,255,255,.09); cursor: pointer; }
.ssls-global-header i, .fi { line-height: 1; display: inline-flex; align-items: center; justify-content: center; }

/* Sidebar */
.sidebar {
  top: calc(var(--header-h) + 40px) !important;
  bottom: 24px !important;
  left: var(--page-gutter) !important;
  width: var(--sidebar-w) !important;
  min-width: var(--sidebar-w) !important;
  min-height: 0 !important;
  padding: 18px 14px 14px;
  color: var(--text-secondary);
  border: 1px solid var(--border-default) !important;
  border-radius: 24px;
  background: rgba(248, 251, 253, .94) !important;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
  overflow-y: auto;
}
.sidebar-logo { display: none !important; }
.sidebar-user {
  order: 20;
  margin-top: 14px;
  padding: 13px 10px !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px;
  background: #fff !important;
}
.user-ava { background: linear-gradient(135deg, #00375f, var(--brand)) !important; border: 0 !important; }
.user-info .user-name { color: var(--text-primary) !important; }
.user-info .user-role { color: var(--text-muted) !important; }
.sidebar-section {
  padding: 18px 12px 7px !important;
  color: #718092 !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
}
.nav-item {
  min-height: 44px;
  margin: 2px 4px !important;
  padding: 10px 13px !important;
  gap: 12px !important;
  color: #52657d !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.nav-item:hover { color: var(--text-primary) !important; background: #eef6f9 !important; }
.nav-item.active {
  color: var(--text-primary) !important;
  border-color: #b9dfe5 !important;
  border-left: 4px solid var(--brand) !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 45, 72, .07);
}
.nav-icon { width: 20px !important; font-size: 17px !important; color: #76867f; }
.nav-item.active .nav-icon { color: var(--brand); filter: none !important; }
.nav-badge { color: #fff !important; background: #c68b2e !important; }
.nav-badge { font-size: 9px !important; font-weight: 650 !important; }
.nav-badge.blue { background: var(--brand-dark) !important; }
.sidebar-spacer { min-height: 12px; }
.sidebar-bottom { order: 21; padding: 0 !important; border: 0 !important; }
.logout-btn {
  color: #a73f3a !important;
  border-color: #f0d2cf !important;
  background: #fff7f6 !important;
  border-radius: 12px !important;
}

/* Main workspace */
.main {
  margin-left: calc(var(--sidebar-w) + 22px) !important;
  min-height: calc(100vh - var(--header-h) - 62px) !important;
  border: 1px solid var(--border-default);
  border-radius: 24px;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--shadow-md);
  overflow: clip;
  position: relative;
}
.main::before {
  content: "";
  position: absolute; z-index: 60; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand) 0 74%, var(--warning) 74% 100%);
}
.topbar {
  height: auto !important;
  min-height: 104px;
  padding: 26px clamp(18px, 3vw, 44px) !important;
  gap: 18px;
  background: #fff !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
}
.topbar-left { gap: 12px !important; min-width: 0; }
.topbar-left::before {
  content: "\f3df";
  font-family: "uicons-regular-rounded" !important;
  width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--brand-dark); font-size: 22px;
}
.topbar-page-title { font-size: clamp(20px, 2vw, 28px) !important; color: var(--text-primary) !important; line-height: 1.25; }
.topbar-breadcrumb { font-size: 12px !important; color: var(--text-muted) !important; }
.booking-id-tag {
  padding: 8px 13px !important;
  color: var(--brand-dark) !important;
  background: var(--brand-soft) !important;
  border-color: #b7e5e9 !important;
  border-radius: 12px !important;
}
.page-content { padding: clamp(16px, 2.5vw, 36px) !important; }

/* Cards and controls */
.create-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
.form-col { gap: 18px !important; }
.section-block, .card {
  border-color: var(--border-subtle) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(15, 52, 76, .055);
}
.section-head {
  min-height: 58px;
  padding: 13px 18px !important;
  color: var(--text-primary);
  border-bottom-color: var(--border-subtle) !important;
  background: linear-gradient(180deg, #fff, #fbfdfe) !important;
}
.section-num {
  color: #fff !important;
  background: var(--brand-dark) !important;
  border-radius: 8px !important;
}
.section-head-title { color: var(--text-primary) !important; font-size: 14px !important; }
.section-head-sub { color: var(--text-muted) !important; font-size: 11px !important; }
.section-body { padding: 18px !important; }
.form-label { color: #657991 !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; }
.form-input, .form-select, input:not([type=checkbox]):not([type=radio]), select, textarea {
  min-height: 42px;
  color: var(--text-primary) !important;
  background: #fbfdfe !important;
  border-color: var(--border-default) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.form-input:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
  background: #fff !important;
}
.job-pill { min-height: 48px; color: var(--text-primary); background: #fff !important; border-color: var(--border-default) !important; }
.job-pill.selected { background: var(--brand-soft) !important; border-color: var(--brand) !important; box-shadow: inset 4px 0 var(--brand); }
.jp-icon { color: var(--brand-dark); }
.jp-check { border-color: #9fb4cb !important; }
.job-pill.selected .jp-check { color: #fff !important; background: var(--brand) !important; border-color: var(--brand) !important; }
.btn-primary, .btn-submit {
  color: #fff !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #003a62, #006f87) !important;
  box-shadow: 0 8px 18px rgba(0, 59, 99, .18) !important;
}
.btn-primary:hover, .btn-submit:hover { background: linear-gradient(135deg, #004872, #0097a7) !important; }
.data-table, table { border-collapse: separate; border-spacing: 0; }
.table-wrap, .table-container, [id$="-table-wrap"] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
th { color: #60738b !important; background: #f4f8fa !important; }
tbody tr:hover { background: #f3fbfc !important; }
.modal-overlay { padding: 14px; }
.modal-box { max-height: calc(100dvh - 28px); overflow-y: auto; border-radius: 20px !important; }

/* Flaticon presentation */
.ui-flaticon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; }
.nav-icon .ui-flaticon { font-size: 17px; }
.jp-icon .ui-flaticon, .input-icon-btn .ui-flaticon, .route-dot-icon .ui-flaticon { font-size: 16px; }
.map-ctrl-btn .fi,
.need-chip > .fi,
.summary-top h3 .fi,
.s-label .fi {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}
.map-ctrl-btn .fi { font-size: 15px; }
.need-chip > .fi { color: var(--brand-dark); font-size: 16px; }
.need-chip.checked > .fi { color: var(--brand); }
.summary-top h3 .fi { font-size: 18px; }
.s-label .fi { width: 15px; color: var(--brand-dark); font-size: 13px; }
.input-icon-btn { color: var(--brand-dark); background: var(--brand-soft) !important; border-color: #b7e5e9 !important; }
.route-dot-icon { color: var(--brand-dark); }

/* Responsive */
@media (max-width: 1380px) {
  :root { --sidebar-w: 238px; }
  .create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .create-grid > .form-col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 980px) {
  :root { --header-h: 78px; --sidebar-w: 270px; }
  body { padding-top: calc(var(--header-h) + 18px); }
  .ssls-global-header { top: 10px; height: var(--header-h); padding: 10px 12px 10px 18px; border-radius: 18px; }
  .ssls-brand img { width: 135px; height: 52px; }
  .ssls-header-action span { display: none; }
  .ssls-header-action { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .ssls-account { min-width: 190px; min-height: 48px; }
  .sidebar {
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    z-index: 300 !important; width: min(86vw, 310px) !important;
    min-width: 0 !important; border-radius: 0 22px 22px 0;
    transform: translateX(-105%); transition: transform .26s ease;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-user, .sidebar-section, .sidebar-spacer { display: flex !important; }
  .sidebar-section { display: block !important; }
  .nav-item { justify-content: flex-start !important; }
  .nav-item > span:not(.nav-icon):not(.nav-badge) { display: inline !important; }
  .sidebar-overlay {
    display: block; position: fixed; inset: 0; z-index: 290;
    opacity: 0; visibility: hidden; background: rgba(0, 26, 56, .5);
    backdrop-filter: blur(3px); transition: .22s ease;
  }
  .sidebar-overlay.show { opacity: 1; visibility: visible; }
  .mobile-menu-btn {
    display: grid; place-items: center; width: 42px; height: 42px; flex: none;
    color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
    background: rgba(255,255,255,.08); cursor: pointer;
  }
  .main { margin-left: 0 !important; }
  .topbar { min-height: 88px; }
}

@media (max-width: 720px) {
  body { padding-left: 10px; padding-right: 10px; padding-bottom: 18px; }
  .ssls-global-header { left: 10px; right: 10px; }
  .ssls-brand { min-width: 0; }
  .ssls-brand img { width: 112px; }
  .ssls-account { min-width: 0; padding-left: 10px; }
  .ssls-account-label { display: none; }
  .ssls-logout-icon { width: 34px; height: 34px; }
  .main { border-radius: 18px; }
  .topbar { min-height: 84px; padding: 18px 16px !important; align-items: flex-start; }
  .topbar-left { align-items: flex-start !important; }
  .topbar-left::before { width: 30px; height: 30px; }
  .topbar-page-title { font-size: 19px !important; }
  .topbar-breadcrumb { display: none; }
  .booking-id-tag { padding: 6px 9px !important; font-size: 11px !important; }
  .page-content { padding: 14px !important; }
  .create-grid { grid-template-columns: 1fr !important; }
  .create-grid > .form-col:last-child { grid-column: auto; display: flex; }
  .field-row, .field-row.triple { grid-template-columns: 1fr !important; }
  .job-type-row { grid-template-columns: 1fr !important; }
  .section-body [style*="flex-wrap:nowrap"] { flex-wrap: wrap !important; }
  .section-body [style*="flex-wrap:nowrap"] > * { flex: 1 1 45% !important; }
  .card-header, .page-section > div:first-child { flex-wrap: wrap; gap: 10px; }
  .modal-box { width: 100% !important; max-width: 100% !important; }
  #login-screen { overflow-y: auto !important; }
  .ssls-login-center { position: relative !important; min-height: 100%; padding: 14px !important; }
  .ssls-login-card {
    width: min(100%, 440px) !important;
    min-height: 0 !important;
    flex-direction: column !important;
    margin: auto;
    border-radius: 20px !important;
  }
  .ssls-login-brand-panel {
    width: 100% !important;
    min-height: 148px;
    padding: 18px 24px !important;
  }
  .ssls-login-brand-panel > div:first-of-type { display: none !important; }
  .ssls-login-brand-panel > div:nth-of-type(2) { margin: 0 !important; }
  .ssls-login-brand-panel > div:nth-of-type(2) > div:first-child {
    width: 180px !important;
    height: 92px !important;
    margin-bottom: 0 !important;
  }
  .ssls-login-brand-panel > div:nth-of-type(2) > div:nth-child(2),
  .ssls-login-brand-panel > div:nth-of-type(2) > div:nth-child(3),
  .ssls-login-brand-panel > div:last-child { display: none !important; }
  .ssls-login-form-panel { width: 100% !important; padding: 28px 20px 24px !important; }
  .ssls-login-form-panel input { width: 100% !important; }
}

@media (max-width: 480px) {
  .ssls-header-action { display: none; }
  .ssls-account-copy { max-width: 92px; }
  .ssls-account { margin-left: auto; }
  .topbar { flex-wrap: wrap; }
  .topbar-right { margin-left: 42px; }
  .section-head-sub { display: none; }
  #db-kpi, #rpt-kpi, #drv-kpi { grid-template-columns: 1fr !important; }
  .action-popup { width: calc(100vw - 20px) !important; }
  .apm-body { grid-template-columns: 1fr !important; }
}

/* Compact mode + universal navigation drawer */
:root {
  --header-h: 70px;
  --page-gutter: clamp(10px, 1.5vw, 22px);
}

body {
  padding-top: calc(var(--header-h) + 16px) !important;
  padding-bottom: 22px !important;
  font-size: 13px !important;
}

.ssls-global-header {
  top: 10px !important;
  height: var(--header-h) !important;
  padding: 8px 12px 8px 16px !important;
  border-radius: 18px !important;
  overflow: visible !important;
}
.ssls-brand { min-width: 150px !important; }
.ssls-brand img { width: 132px !important; height: 48px !important; }
.mobile-menu-btn { display: none !important; }
#mobile-menu-btn, #sidebar-overlay { display: none !important; }
.ssls-header-action, .ssls-account { min-height: 44px !important; }
.ssls-header-action { padding: 0 13px !important; }
.ssls-account { min-width: 205px !important; padding: 5px 7px 5px 13px !important; }
.ssls-head-icon, .ssls-logout-icon { width: 34px !important; height: 34px !important; }
.header-settings-wrap { position: relative; }
.header-settings-wrap .ssls-header-action { display: flex !important; }
.settings-caret { margin-left: 2px; font-size: 12px; transition: transform .18s ease; }
.ssls-header-action[aria-expanded="true"] .settings-caret { transform: rotate(180deg); }
.header-settings-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 286px;
  padding: 8px;
  color: var(--text-primary);
  border: 1px solid #d5e1e8;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 48px rgba(0,33,75,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index: 400;
}
.header-settings-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.header-settings-menu > button {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  color: var(--text-primary);
  text-align: left;
  border: 0;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
}
.header-settings-menu > button:hover { background: var(--brand-soft); }
.header-settings-menu > button > span {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  color: var(--brand-dark); border-radius: 9px; background: #edf7f9;
}
.header-settings-menu strong { display: block; font-size: 13px; }
.header-settings-menu small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; font-weight: 500; }

.sidebar {
  top: calc(var(--header-h) + 30px) !important;
  bottom: 20px !important;
  left: var(--page-gutter) !important;
  z-index: 300 !important;
  width: 238px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 20px 16px !important;
  border: 1px solid #d6e1e8 !important;
  border-radius: 24px !important;
  transform: translateX(calc(-100% - var(--page-gutter) - 20px)) !important;
  transition: transform .24s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 22px 55px rgba(0, 33, 75, .13) !important;
  overflow: visible !important;
}
.sidebar.mobile-open { transform: translateX(0) !important; }
.sidebar-section {
  margin: 12px 6px 8px !important;
  padding: 18px 10px 6px !important;
  color: #63728a !important;
  border-top: 1px solid #dde6eb;
  font-size: 9px !important;
  letter-spacing: .08em !important;
}
.sidebar-section:first-of-type { margin-top: 0 !important; padding-top: 8px !important; border-top: 0; }
.nav-item { min-height: 42px !important; margin: 3px 6px !important; padding: 9px 12px !important; font-size: 11px !important; }
.nav-icon { font-size: 15px !important; }
.sidebar-user, .sidebar-spacer { display: none !important; }
.sidebar-bottom { display: none !important; }
.drawer-toggle-btn {
  position: fixed;
  top: calc(var(--header-h) + 52px);
  left: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #6d7a76;
  border: 1px solid #d2dde3;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 33, 75, .12);
  cursor: pointer;
  z-index: 310;
  transition: left .24s cubic-bezier(.4,0,.2,1), color .16s, background .16s, border-color .16s;
}
.drawer-toggle-btn:hover { color: var(--brand-dark); background: #f5fbfc; border-color: #acdce1; }
body.drawer-is-open .drawer-toggle-btn { left: calc(var(--page-gutter) + 223px); }
.sidebar-overlay {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 290;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  backdrop-filter: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.sidebar-overlay.show { opacity: 1; visibility: visible; }

@media (min-width: 721px) {
  .sidebar-overlay,
  .sidebar-overlay.show { pointer-events: none !important; }
}

.main {
  margin-left: 0 !important;
  min-height: calc(100vh - var(--header-h) - 38px) !important;
  border-radius: 18px !important;
  transition: margin-left .24s cubic-bezier(.4,0,.2,1) !important;
}
body.drawer-is-open .main { margin-left: 258px !important; }
.topbar {
  min-height: 76px !important;
  padding: 16px clamp(16px, 2.2vw, 30px) !important;
}
.topbar-left::before { width: 32px !important; height: 32px !important; font-size: 19px !important; }
.topbar-page-title { font-size: clamp(18px, 1.7vw, 23px) !important; }
.topbar-breadcrumb { font-size: 11px !important; }
.booking-id-tag { padding: 6px 10px !important; font-size: 12px !important; }
.page-content { padding: clamp(12px, 1.8vw, 22px) !important; }
.create-grid { gap: 12px !important; }
.form-col, .form-sections { gap: 12px !important; }
.section-block, .card { border-radius: 14px !important; }
.section-head { min-height: 48px !important; padding: 10px 13px !important; }
.section-num { width: 21px !important; height: 21px !important; font-size: 11px !important; }
.section-head-title { font-size: 13px !important; }
.section-head-sub { font-size: 10px !important; }
.section-body, .card-body { padding: 13px !important; }
.card-header { padding: 11px 14px !important; }
.card-title { font-size: 14px !important; }
.field-row { gap: 10px !important; margin-bottom: 10px !important; }
.form-label { font-size: 11px !important; margin-bottom: 4px !important; }
.form-input, .form-select,
input:not([type=checkbox]):not([type=radio]), select, textarea {
  min-height: 36px !important;
  height: 36px;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 12px !important;
}
textarea { height: auto !important; min-height: 66px !important; }
.job-type-row { gap: 6px !important; }
.job-pill { min-height: 42px !important; padding: 8px 10px !important; }
.jp-label { font-size: 12px !important; }
.jp-sub { font-size: 10px !important; }
.num-btn { width: 29px !important; height: 34px !important; }
.num-val { height: 34px !important; font-size: 14px !important; }
.btn-primary, .btn-submit, .btn-ghost { padding: 7px 13px !important; font-size: 12px !important; }
th, td { padding-top: 7px !important; padding-bottom: 7px !important; font-size: 11px !important; }

@media (max-width: 720px) {
  :root { --header-h: 62px; }
  .ssls-global-header { padding: 6px 8px !important; border-radius: 15px !important; }
  .ssls-brand { min-width: 0 !important; }
  .ssls-brand img { width: 102px !important; height: 40px !important; }
  .ssls-account { min-width: 0 !important; }
  .header-settings-menu { position: fixed; top: calc(var(--header-h) + 18px); right: 10px; width: min(286px, calc(100vw - 20px)); }
  .header-settings-wrap .ssls-header-action { width: 40px; padding: 0 !important; justify-content: center; }
  .header-settings-wrap .ssls-head-icon { width: 32px !important; height: 32px !important; }
  .header-settings-wrap .settings-caret { display: none; }
  .topbar { min-height: 66px !important; }
  .page-content { padding: 10px !important; }
  .sidebar {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(84vw, 282px) !important;
    padding: 16px 12px !important;
    border-radius: 0 20px 20px 0 !important;
    transform: translateX(-105%) !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
  }
  .drawer-toggle-btn { top: calc(var(--header-h) + 20px); left: 8px; width: 36px; height: 36px; }
  body.drawer-is-open .drawer-toggle-btn { left: calc(min(84vw, 282px) - 46px); }
  .sidebar-overlay { background: rgba(0, 26, 56, .46); backdrop-filter: blur(3px); }
  body.drawer-is-open .main { margin-left: 0 !important; }
}

/* Compact analysis: driver management
   Keeps ten-row operational lists readable without the page feeling oversized. */
#page-dashboard,
#page-report,
#page-receipt,
#page-drivers {
  width: 100%;
  padding: clamp(14px, 1.5vw, 20px) !important;
  box-sizing: border-box;
}
#page-drivers > div:first-child {
  min-width: 0;
  gap: 12px;
  margin-bottom: 12px !important;
}
#page-drivers > div:first-child > div:first-child > div:first-child {
  font-size: 17px !important;
  line-height: 1.25;
}
#page-drivers > div:first-child > div:first-child > div:last-child {
  margin-top: 1px !important;
  font-size: 10px !important;
}
#page-drivers > div:first-child > div:last-child {
  min-width: 0;
  gap: 7px !important;
}
#page-drivers > div:first-child select,
#page-drivers > div:first-child input,
#page-drivers > div:first-child button {
  min-height: 32px !important;
  height: 32px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}
#page-drivers #drv-search {
  width: 205px !important;
  padding-left: 34px !important;
}
#drv-kpi {
  gap: 9px !important;
  margin-bottom: 12px !important;
}
#drv-kpi > div {
  min-width: 0;
  padding: 11px 13px !important;
  border-radius: 11px !important;
}
#drv-kpi > div > div > div:first-child > div:first-child {
  margin-bottom: 4px !important;
  font-size: 10px !important;
}
#drv-kpi > div > div > div:first-child > div:nth-child(2) {
  font-size: 22px !important;
}
#drv-kpi > div > div > div:last-child {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  font-size: 15px !important;
}
#drv-grid > div {
  border-radius: 12px !important;
  box-shadow: 0 1px 5px rgba(0, 33, 75, .045) !important;
}
#drv-grid table {
  font-size: 11px !important;
}
#drv-grid th,
#drv-grid td {
  padding: 7px 10px !important;
}
#drv-grid th {
  font-size: 9px !important;
  letter-spacing: .06em !important;
}
#drv-grid tbody td:first-child {
  width: 34px !important;
  font-size: 10px !important;
}
#drv-grid tbody td:nth-child(2) > div {
  gap: 8px !important;
}
#drv-grid tbody td:nth-child(2) > div > div:first-child {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}
#drv-grid tbody td:nth-child(2) > div > div:last-child > div:first-child {
  font-size: 11px !important;
}
#drv-grid tbody td:nth-child(2) > div > div:last-child > div:last-child {
  font-size: 9px !important;
}
#drv-grid tbody td span {
  font-size: 10px !important;
  padding: 2px 8px !important;
}
#drv-grid > div > div:last-child {
  padding: 7px 10px !important;
  gap: 7px !important;
}

@media (max-width: 1180px) {
  #page-drivers > div:first-child {
    align-items: flex-start !important;
    flex-direction: column;
  }
  #page-drivers > div:first-child > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }
  #page-drivers #drv-search { width: min(260px, 48vw) !important; }
  #drv-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px) {
  #page-dashboard,
  #page-report,
  #page-receipt,
  #page-drivers { padding: 10px !important; }
  #page-drivers > div:first-child > div:last-child > div {
    order: 5;
    width: 100%;
  }
  #page-drivers #drv-search { width: 100% !important; }
  #drv-kpi { grid-template-columns: 1fr !important; }
  #drv-kpi > div { padding: 9px 11px !important; }
}

/* Booking controls */
.travel-date-control {
  cursor: pointer;
  border-radius: 10px;
}
.travel-date-control:focus-visible,
.time-select-control:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.travel-date-control .form-input { cursor: pointer !important; }
.travel-date-control.schedule-locked,
.time-select-control:disabled {
  cursor: default !important;
  opacity: .82;
}
.travel-date-control.schedule-locked .form-input,
.time-select-control:disabled {
  color: #52687c !important;
  background-color: #eef3f5 !important;
  box-shadow: none !important;
}
.travel-date-control.schedule-locked .input-icon-btn {
  color: #8a9ca9 !important;
  background: #e2e9ed !important;
  border-color: #d2dde3 !important;
  pointer-events: none;
}
.time-select-control {
  padding-right: 38px !important;
  background-image: linear-gradient(45deg, transparent 50%, #658096 50%), linear-gradient(135deg, #658096 50%, transparent 50%) !important;
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}
.passenger-counter {
  width: fit-content;
  padding: 4px;
  gap: 4px !important;
  border: 1px solid #c9d9e3;
  border-radius: 12px;
  background: #f5fafc;
  box-shadow: inset 0 1px 2px rgba(0,33,75,.04);
}
.passenger-group {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  align-items: flex-start;
}
.passenger-group > .form-label {
  width: 100%;
  text-align: left;
}
#timePicker {
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
}
.passenger-counter .num-btn {
  width: 34px !important;
  height: 34px !important;
  flex: none;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #00527a, #007f8e) !important;
  box-shadow: 0 4px 10px rgba(0,83,112,.18);
}
.passenger-counter .num-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(145deg, #00638c, #00a4ad) !important;
}
.passenger-counter .num-btn:disabled {
  color: #9aaab7 !important;
  background: #e4ebef !important;
  box-shadow: none;
  cursor: not-allowed;
}
.passenger-counter .num-btn i { font-size: 12px; line-height: 1; }
.passenger-counter .num-val {
  width: 48px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 15px !important;
}
.passenger-counter .num-unit { margin: 0 7px 0 3px; font-size: 11px; font-weight: 700; }
.route-dot-icon.pickup,
.route-dot-icon.dropoff {
  width: 28px;
  height: 28px;
  font-size: 14px;
}
.route-dot-icon.pickup { color: #dc2626; background: #fee2e2 !important; }
.route-dot-icon.dropoff { color: #059669; background: #dcfce7 !important; }
.map-pin-info {
  justify-content: center;
  padding: 9px 12px;
  background: #f7fbfc;
}
.map-badge.duration {
  color: #075985;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
}
.map-pin-info .map-badge { gap: 6px; padding: 6px 10px; }
.map-pin-info .map-badge strong { color: var(--text-primary); }

/* Compact job type and booking-channel controls */
#jobTypeSection .section-body { font-size: 11px !important; }
#jobTypeSection .job-type-row { gap: 7px !important; margin-bottom: 10px !important; }
#jobTypeSection .job-pill { min-height: 38px !important; padding: 7px 9px !important; }
#jobTypeSection .jp-icon { font-size: 14px !important; }
#jobTypeSection .jp-label,
#jobTypeSection .job-pill .jp-label { font-size: 11px !important; }
#jobTypeSection .jp-sub { font-size: 9px !important; }
#jobTypeSection .form-label,
#jobTypeSection [style*="font-size: 14px"] { font-size: 10px !important; }
#jobTypeSection .jp-check { width: 18px !important; height: 18px !important; }

/* Radio controls use a dot, never a check mark */
.job-pill .jp-check {
  position: relative;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  display: block !important;
  box-sizing: border-box;
  border: 2px solid #a9bdd0 !important;
  border-radius: 50% !important;
  color: transparent !important;
  font-size: 0 !important;
  background: #fff !important;
}
.job-pill.selected .jp-check {
  border-color: var(--brand) !important;
  background: #fff !important;
}
.job-pill.selected .jp-check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  background: var(--brand);
  transform: translate(-50%,-50%);
}

/* Special-needs boxes show selection without tick glyphs */
.need-chip .nc-chk {
  color: transparent !important;
  font-size: 0 !important;
}
.need-chip.checked .nc-chk {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: inset 0 0 0 3px #fff;
}

/* Read-only route calculations */
.auto-calculated-field,
.auto-calculated-field:focus {
  cursor: not-allowed !important;
  color: #486277 !important;
  background: #eef3f5 !important;
  border-color: #d5e0e6 !important;
  box-shadow: none !important;
}

/* Clear luggage quantity control */
#chip-luggage.checked { align-items: center; }
#chip-luggage {
  flex-wrap: wrap;
  align-content: center;
}
#chip-luggage .luggage-counter {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  margin: 6px 0 0;
  padding: 4px 6px;
  gap: 5px;
  justify-content: flex-end;
  box-sizing: border-box;
  border: 1px solid #72d6dc;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,127,142,.1);
}
.lug-counter-label,
.lug-counter-unit { color: #61778a; font-size: 9px; font-weight: 700; }
.lug-btn {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 7px;
  background: #007f8e !important;
}
.lug-btn:hover { background: #005b78 !important; }
.lug-btn i { font-size: 9px; line-height: 1; }
.lug-count {
  width: 58px !important;
  min-width: 0 !important;
  max-width: 58px;
  flex: 0 1 58px;
  min-height: 28px !important;
  height: 28px !important;
  padding: 2px 22px 2px 8px !important;
  color: #003a62 !important;
  border: 1px solid #c8dce4;
  border-radius: 7px;
  background: #f5fafc;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center;
  cursor: pointer;
}

/* Match special-needs controls to the compact 36px form fields. */
#page-create .need-chip {
  min-height: 36px !important;
  height: 36px;
  box-sizing: border-box;
  padding: 6px 10px !important;
  gap: 6px;
  border-radius: 10px;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2;
}
#page-create .need-chip > .fi { font-size: 14px; }
#page-create .need-chip .nc-chk { width: 13px; height: 13px; }
#page-create #chip-luggage.checked { height: auto; min-height: 36px !important; }

/* Route map becomes a non-interactive preview after calculation */
.map-wrap.route-locked #leaflet-map { pointer-events: none !important; }
.map-wrap.route-locked .map-ctrl { display: none !important; }
.map-wrap.route-locked::after {
  content: "เส้นทางคำนวณแล้ว";
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 120;
  padding: 5px 8px;
  color: #075985;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: rgba(240,249,255,.94);
  box-shadow: 0 3px 10px rgba(0,33,75,.1);
  font-size: 9px;
  font-weight: 700;
}

/* Suggested places in map picker */
.suggested-places { margin-top: 8px; }
.suggested-places-label { margin-bottom: 5px; color: #74879a; font-size: 10px; font-weight: 700; }
.suggested-places-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.suggested-place {
  min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; color: var(--text-primary); text-align: left;
  border: 1px solid #d4e1e8; border-radius: 10px; background: #f8fbfc;
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.suggested-place:hover,
.suggested-place.selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand-glow); }
.suggested-place-pin {
  width: 30px; height: 30px; display: grid; place-items: center; flex: none;
  color: #fff; border-radius: 9px; background: linear-gradient(145deg,#00527a,#00a4ad);
}
.suggested-place strong { display: block; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.suggested-place small { display: block; margin-top: 2px; overflow: hidden; color: #7a8c9c; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 560px) {
  .suggested-places-list { grid-template-columns: 1fr; }
}

/* Compact table typography across booking, report, receipt, user and driver pages */
table,
.data-table {
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}
table thead th,
.data-table thead th {
  padding: 6px 9px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .02em !important;
}
table tbody td,
.data-table tbody td,
.data-table tbody td .bk-no,
.data-table tbody td .cust-name,
.data-table tbody td .cust-phone,
.data-table tbody td .route-truncate,
.data-table tbody td .price-val {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}
table tbody td > *,
.data-table tbody td > * {
  font-size: inherit !important;
  line-height: inherit !important;
}
table tbody td strong,
table tbody td b,
table tbody td [style*="font-weight:700"],
table tbody td [style*="font-weight: 700"],
.data-table tbody td strong,
.data-table tbody td b,
.data-table tbody td .bk-no,
.data-table tbody td .cust-name,
.data-table tbody td .price-val {
  font-weight: 600 !important;
}
table tbody td span,
table tbody td small,
table tbody td button,
.data-table tbody td span,
.data-table tbody td small,
.data-table tbody td button {
  font-size: 9px !important;
  font-weight: 500 !important;
}
table tbody td button,
.data-table tbody td button {
  min-height: 26px !important;
  padding: 4px 8px !important;
}
table .ui-flaticon,
table i.fi,
.data-table .ui-flaticon,
.data-table i.fi {
  font-size: 10px !important;
}

/* Today — Daily Operations Board */
#page-today { --today-navy: #062f4f; --today-cyan: #09bcc8; --today-amber: #d49325; }
.today-command {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 20px;
  color: #fff;
  border: 1px solid rgba(0,188,202,.35);
  border-radius: 18px;
  background: linear-gradient(118deg, #032b4d 0%, #06466a 68%, #075873 100%);
  box-shadow: 0 14px 30px rgba(4,47,79,.14);
}
.today-command::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background: repeating-linear-gradient(135deg, transparent 0 25px, rgba(89,226,232,.25) 26px 27px);
}
.today-command-copy, .today-command-actions, .today-metrics { position: relative; z-index: 1; }
.today-eyebrow { display: block; margin-bottom: 5px; color: #66e2e6; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.today-command h2 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.today-command p { margin: 4px 0 0; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 500; }
.today-command-actions { display: flex; align-items: flex-start; gap: 8px; }
.today-command-actions button {
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.today-refresh-btn { background: rgba(255,255,255,.08); }
.today-refresh-btn:hover { background: rgba(255,255,255,.16); }
.today-create-btn { color: #063554 !important; border-color: #74e7eb !important; background: #67dce2; box-shadow: 0 7px 16px rgba(0,0,0,.16); }
.today-create-btn:hover { background: #8be9ed; }
.today-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.today-metric {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(255,255,255,.075);
  backdrop-filter: blur(5px);
}
.today-metric-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: none; border-radius: 9px; background: rgba(255,255,255,.1); font-size: 14px; }
.today-metric small { display: block; color: rgba(255,255,255,.62); font-size: 9px; font-weight: 500; }
.today-metric strong { display: block; margin-top: 1px; color: #fff; font-size: 20px; font-weight: 650; line-height: 1; }
.metric-total .today-metric-icon { color: #65e1e5; }
.metric-waiting .today-metric-icon { color: #ffd36e; }
.metric-matched .today-metric-icon { color: #72e7ae; }
.metric-sending .today-metric-icon { color: #89c9ff; }

.today-workboard { overflow: hidden; border: 1px solid #d9e4e9; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(15,52,76,.05); }
.today-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #e2eaee; background: #fbfdfe; }
.today-filter-tabs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.today-filter-tabs .filter-tab { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; font-size: 10px; font-weight: 550; }
.today-filter-tabs .filter-tab.active { color: #00556d; border-color: #63dbe1; background: #e9fbfc; box-shadow: inset 3px 0 #08bbc6; }
.today-toolbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.today-page-size { display: inline-flex; align-items: center; gap: 4px; color: #71849a; font-size: 8px; font-weight: 500; white-space: nowrap; }
.today-page-size select { width: 68px; min-width: 68px; min-height: 30px !important; height: 30px; padding: 3px 25px 3px 10px !important; font-family: inherit !important; font-size: 8px !important; font-weight: 500 !important; line-height: 1 !important; text-align: left; }
.today-page-size select option { font-family: inherit; font-size: 8px; }
.today-search { width: min(270px, 25vw); min-width: 190px; min-height: 34px; padding: 5px 9px; border-radius: 9px; background: #fff; }
.today-search i { color: #8295aa; font-size: 12px; }
.today-search input { min-height: 20px !important; height: 20px; padding: 0 !important; font-size: 10px !important; font-weight: 450 !important; }

/* Keep toolbar controls on one consistent 36px height. */
#page-today .today-page-size select {
  min-height: 36px !important;
  height: 36px !important;
}
#page-today .today-search {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  box-sizing: border-box;
}
#page-today .today-search input {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Use the same 36px toolbar control height on Upcoming and Archive pages. */
#page-upcoming #upcomingDateFilterText,
#page-upcoming .btn-show-all,
#page-upcoming .filter-strip .filter-tab,
#page-upcoming .filter-strip .per-page-select,
#page-upcoming #upcomingExportBtn,
#page-upcoming .filter-strip .search-wrap,
#page-archive #archiveDateFromText,
#page-archive #archiveDateToText,
#page-archive #archiveTimeFromBtn,
#page-archive #archiveTimeToBtn,
#page-archive #archiveStatusSel,
#page-archive #archiveSearch,
#page-archive button[onclick="renderArchive()"],
#page-archive button[onclick="resetArchiveFilter()"],
#page-archive button[onclick="exportArchiveExcel()"],
#page-archive button[onclick="openHtmlReport()"] {
  min-height: 36px !important;
  height: 36px !important;
  box-sizing: border-box;
}
#page-upcoming .filter-strip .per-page-select {
  width: 68px;
  min-width: 68px;
  padding: 3px 25px 3px 10px !important;
  font-size: 8px !important;
}
#page-upcoming .filter-strip .search-wrap {
  padding: 0 10px !important;
}
#page-upcoming .filter-strip .search-wrap input {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 10px !important;
}

/* Upcoming bookings: compact two-tier control deck without empty full-width bands. */
#page-upcoming .upcoming-date-bar {
  width: fit-content;
  max-width: 100%;
  min-height: 52px;
  margin-bottom: 8px;
  padding: 7px 10px;
  gap: 8px;
  box-sizing: border-box;
  border-color: #d7e4ea;
  border-radius: 12px;
  background: #f8fbfc;
}
#page-upcoming .upcoming-date-bar label { font-size: 10px; font-weight: 600; }
#page-upcoming .upcoming-date-bar .btn-show-all { padding: 0 11px; font-size: 10px; font-weight: 600; }
#page-upcoming .upcoming-filter-strip {
  min-height: 54px;
  margin-bottom: 10px;
  padding: 8px 10px;
  flex-wrap: nowrap;
  gap: 7px;
  box-sizing: border-box;
  border: 1px solid #dbe6eb;
  border-radius: 13px;
  background: #fbfdfe;
}
#page-upcoming .upcoming-filter-strip .filter-tabs { flex-wrap: nowrap; gap: 5px; }
#page-upcoming .upcoming-filter-strip .filter-tab { padding: 0 11px; font-size: 10px; font-weight: 600; white-space: nowrap; }
#page-upcoming .upcoming-page-size { gap: 4px !important; }
#page-upcoming .upcoming-page-size > span { color: #71849a !important; font-size: 8px !important; font-weight: 500 !important; }
#page-upcoming #upcomingExportBtn { padding: 0 12px !important; font-size: 10px !important; font-weight: 600 !important; white-space: nowrap; }
#page-upcoming .upcoming-search-wrap { width: 230px; min-width: 180px; }
#page-upcoming .upcoming-search-wrap > span { font-size: 12px !important; }

#page-upcoming .upcoming-table-scroll {
  width: 100%;
  max-width: 100%;
  height: clamp(280px, calc(100dvh - var(--header-h) - 245px), 620px);
  min-height: 280px;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  background: #fff;
}
#page-upcoming #upcomingTable thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: inset 0 -1px #dce6eb;
}
#page-upcoming #upcoming-pagination {
  position: sticky;
  bottom: 0;
  z-index: 4;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #dce6eb;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(6px);
}
#page-upcoming .upcoming-table-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
#page-upcoming .upcoming-table-scroll::-webkit-scrollbar-thumb { background: #9db3c0; border-radius: 8px; }
#page-upcoming .upcoming-table-scroll::-webkit-scrollbar-thumb:hover { background: #6f899a; }

@media (max-width: 1100px) {
  #page-upcoming .upcoming-filter-strip { flex-wrap: wrap; }
  #page-upcoming .upcoming-page-size { margin-left: 0 !important; }
  #page-upcoming .upcoming-search-wrap { width: min(100%, 280px); }
}

@media (max-width: 720px) {
  #page-upcoming .upcoming-date-bar { width: 100%; flex-wrap: wrap; }
  #page-upcoming .upcoming-filter-strip { align-items: stretch; flex-direction: column; }
  #page-upcoming .upcoming-filter-strip .filter-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  #page-upcoming .upcoming-filter-strip .filter-tab { justify-content: center; }
  #page-upcoming .upcoming-page-size { justify-content: flex-end; }
  #page-upcoming #upcomingExportBtn, #page-upcoming .upcoming-search-wrap { width: 100%; }
  #page-upcoming .upcoming-table-scroll {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: visible;
    scrollbar-gutter: auto;
  }
  #page-upcoming #upcomingTable thead th,
  #page-upcoming #upcoming-pagination { position: static; }
}

/* Archive: structured filter grid prevents horizontal scrolling and clipping. */
#page-archive .archive-filter-panel {
  padding: 10px 12px !important;
  border-color: #cfe0ea !important;
  border-radius: 13px !important;
  background: #f4f9fc !important;
}
#page-archive .archive-filter-row {
  display: grid !important;
  grid-template-columns: auto auto minmax(210px,1fr);
  grid-template-areas:
    "dates status search"
    "actions actions actions";
  align-items: center !important;
  gap: 8px 12px !important;
  overflow: visible !important;
}
#page-archive .archive-date-group { grid-area: dates; gap: 5px !important; }
#page-archive .archive-status-group { grid-area: status; gap: 5px !important; }
#page-archive .archive-search-group {
  grid-area: search;
  display: grid !important;
  grid-template-columns: auto minmax(160px,1fr) auto 36px;
  align-items: center;
  min-width: 210px !important;
  gap: 5px !important;
}
#page-archive .archive-actions-group { grid-area: actions; justify-self: end; margin-left: 0 !important; gap: 6px !important; }
#page-archive .archive-date-group > span,
#page-archive .archive-status-group > span,
#page-archive .archive-search-group > span { font-size: 10px !important; font-weight: 600 !important; }
#page-archive #archiveDateFromText,
#page-archive #archiveDateToText { width: 112px !important; padding-right: 28px !important; }
#page-archive #archiveTimeFromBtn,
#page-archive #archiveTimeToBtn { min-width: 76px !important; padding: 0 8px !important; }
#page-archive #archiveStatusSel { min-width: 105px !important; width: 105px; padding: 0 27px 0 9px !important; }
#page-archive .archive-search-group #archiveSearch { width: 100% !important; min-width: 0; max-width: none !important; }
#page-archive .archive-actions-group button { padding-left: 12px !important; padding-right: 12px !important; white-space: nowrap; }
#page-archive .archive-search-btn,
#page-archive .archive-reset-btn {
  height: 36px;
  border-radius: 8px;
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
#page-archive .archive-search-btn {
  gap: 5px;
  padding: 0 12px;
  color: #fff;
  background: #057eab;
  border: 1px solid #057eab;
}
#page-archive .archive-search-btn:hover { background: #036f99; border-color: #036f99; }
#page-archive .archive-reset-btn {
  width: 36px;
  padding: 0;
  color: #526b7d;
  background: #fff;
  border: 1px solid #c9d8e3;
}
#page-archive .archive-reset-btn:hover { color: #057eab; border-color: #65bfd7; background: #effbfe; }
#page-archive .archive-reset-btn i { font-size: 14px; line-height: 1; }
#page-archive .archive-search-btn:focus-visible,
#page-archive .archive-reset-btn:focus-visible { outline: 3px solid rgba(0,188,212,.22); outline-offset: 2px; }

@media (max-width: 1050px) {
  #page-archive .archive-filter-row {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
      "dates dates"
      "status search"
      "actions actions";
  }
}

@media (max-width: 720px) {
  #page-archive .archive-filter-row {
    grid-template-columns: 1fr;
    grid-template-areas: "dates" "status" "search" "actions";
  }
  #page-archive .archive-date-group { flex-wrap: wrap !important; }
  #page-archive .archive-status-group,
  #page-archive .archive-search-group { width: 100%; }
  #page-archive .archive-search-group { grid-template-columns: auto minmax(0,1fr) auto 36px; }
  #page-archive .archive-actions-group { width: 100%; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #page-archive .archive-actions-group button { width: 100%; justify-content: center; }
}
#page-upcoming #upcomingDateFilterText,
#page-archive #archiveDateFromText,
#page-archive #archiveDateToText,
#page-archive #archiveSearch,
#page-archive #archiveStatusSel,
#page-archive #archiveTimeFromBtn,
#page-archive #archiveTimeToBtn {
  font-size: 10px !important;
  font-weight: 550 !important;
}
#page-archive button[onclick="renderArchive()"],
#page-archive button[onclick="resetArchiveFilter()"],
#page-archive button[onclick="exportArchiveExcel()"],
#page-archive button[onclick="openHtmlReport()"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 10px !important;
}
.today-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  container-name: today-table;
  container-type: inline-size;
}
.today-data-table { min-width: 1040px; table-layout: fixed; }
.today-data-table th:nth-child(1) { width: 14%; }
.today-data-table th:nth-child(2) { width: 10%; }
.today-data-table th:nth-child(3) { width: 11%; }
.today-data-table th:nth-child(4) { width: 20%; }
.today-data-table th:nth-child(5) { width: 11%; }
.today-data-table th:nth-child(6) { width: 7%; }
.today-data-table th:nth-child(7) { width: 12%; }
.today-data-table th:nth-child(8) { width: 6%; }
.today-data-table th:nth-child(9) { width: 9%; }
.today-data-table thead tr { background: #f0f5f7; }
.today-data-table thead th { color: #607487 !important; border-bottom: 1px solid #dce6eb; text-transform: none; }
.today-fare-head span, .today-fare-head small { display: block; white-space: nowrap; }
.today-fare-head small { margin-top: 1px; color: #8a9baa; font-size: 7px; font-weight: 500; }
.today-data-table tbody tr { --row-accent: #8da0b2; transition: background .15s, box-shadow .15s; }
.today-data-table tbody tr.today-row-waiting { --row-accent: #d99a29; }
.today-data-table tbody tr.today-row-matched { --row-accent: #19a96b; }
.today-data-table tbody tr.today-row-sending { --row-accent: #168dcc; }
.today-data-table tbody tr { cursor: pointer; }
.today-data-table tbody tr:hover { background: #f8fcfd; box-shadow: inset 3px 0 var(--row-accent); }
.today-data-table tbody tr:focus-visible { outline: 2px solid #0ab8c3; outline-offset: -2px; background: #f3fcfd; }
.today-data-table tbody td { padding: 9px 8px !important; line-height: 1.5 !important; vertical-align: top; }
.today-data-table tbody td:first-child { border-left: 3px solid var(--row-accent); }
.today-job-cell, .today-schedule-cell, .today-type-cell, .today-route-cell, .today-detail-cell, .today-status-cell { min-width: 0; }
.today-job-cell { width: 155px; }
.today-job-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.today-sequence { width: 18px; height: 18px; display: grid; place-items: center; flex: none; color: #75889a; border-radius: 5px; background: #edf3f6; font-size: 8px !important; }
.today-job-cell .cust-name { display: block; overflow: hidden; max-width: 150px; color: #0d2f4a; white-space: nowrap; text-overflow: ellipsis; }
.today-job-cell .cust-phone { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; color: #708399; }
.today-schedule-cell { width: 104px; white-space: nowrap; }
.today-schedule-cell > strong, .today-schedule-cell > span { display: flex; align-items: center; gap: 4px; }
.today-schedule-cell > span { margin-top: 5px; color: #5f7489; }
.today-schedule-cell > div { margin: 5px 0 0 !important; }
.today-type-cell { width: 135px; }
.today-type-cell small { display: block; overflow: hidden; margin-top: 5px; max-width: 135px; color: #71859a; white-space: nowrap; text-overflow: ellipsis; }
.today-route-cell { width: 210px; }
.today-data-table tbody td.today-route-cell > span { display: flex; align-items: flex-start; gap: 5px; overflow: hidden; color: #345269; font-family: inherit !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.5 !important; }
.today-data-table tbody td.today-route-cell > span + span { margin-top: 5px; color: #345269; }
.today-route-cell i { margin-top: 1px; color: #0da7b2; }
.today-route-cell > span:last-child i { color: #df9a2e; }
.today-route-cell span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.today-detail-cell { width: 145px; }
.today-detail-cell > span, .today-detail-cell > small { display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.today-detail-cell > small { margin-top: 5px; color: #7a8c9f; }
.today-detail-cell i { color: #758aa0; }
.today-fare-cell .price-val { display: block; color: #063c62; font-size: 11px !important; font-weight: 600 !important; white-space: nowrap; }
.today-fare-cell small { display: block; margin-top: 5px; color: #7c8ea0; font-size: 8px !important; font-weight: 450 !important; white-space: nowrap; }
.today-status-cell { width: 130px; }
.today-status-cell > * { display: flex; align-items: center; gap: 4px; width: fit-content; }
.today-status-cell > small { margin-top: 5px; color: #60778c; }
.today-overdue { margin-top: 5px; padding: 2px 6px; color: #a02222; border-radius: 5px; background: #fff0f0; }
.today-creator-cell { max-width: 100px; display: table-cell; white-space: nowrap; }
.today-creator-cell i { margin-right: 4px; color: #71859a; }
.today-actions-cell { width: 135px; }
.today-actions-cell > div { width: 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.today-data-table th:nth-child(9) { text-align: center !important; }
.today-actions-cell button { box-shadow: none !important; }
.today-actions-cell .btn-send-driver, .today-actions-cell .btn-complete-job { flex: 0 0 100%; width: 100%; justify-content: center; }
.today-match-btn, .table-match-btn { min-height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 8px; color: #08744e; border: 1px solid #82d9b3; border-radius: 7px; background: #e8fbf3; font-family: inherit; font-size: 9px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.today-match-btn:hover, .table-match-btn:hover { color: #fff; border-color: #078254; background: #078254; }
.today-match-btn { width: 30px; height: 30px; min-height: 30px; flex: 0 0 30px; padding: 0; font-size: 12px; }
.today-edit-btn { min-height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 8px; color: #075b75; border: 1px solid #9fdce1; border-radius: 7px; background: #eafbfc; font-family: inherit; cursor: pointer; }
.today-edit-btn { width: 30px; height: 30px; min-height: 30px; flex: 0 0 30px; padding: 0; font-size: 12px; }
.today-edit-btn:hover { color: #fff; border-color: #087f91; background: #087f91; }
.today-actions-cell .action-dropdown-btn { width: 30px; height: 30px; min-width: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; color: #60778a; border-color: #cbdbe3; background: #fff; }
.upcoming-action-group { min-width: 92px; display: flex; flex-direction: column; align-items: stretch; gap: 5px; white-space: nowrap; }
.upcoming-action-group .action-dropdown-btn { width: 100%; justify-content: center; }

.booking-edit-bar { margin: 14px 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; color: #71450a; border: 1px solid #e9b94f; border-radius: 12px; background: #fff8df; box-shadow: 0 5px 16px rgba(130,83,10,.07); }
.booking-edit-bar[hidden] { display: none !important; }
.booking-edit-copy { min-width: 0; display: flex; align-items: center; gap: 10px; }
.booking-edit-copy > div { min-width: 0; display: flex; flex-direction: column; }
.booking-edit-copy strong { color: #603c08; font-size: 11px; font-weight: 650; }
.booking-edit-copy small { color: #93703a; font-size: 9px; font-weight: 400; }
.booking-edit-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: #c98617; }
.booking-edit-close, .booking-cancel-edit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-weight: 600; cursor: pointer; }
.booking-edit-close { min-height: 32px; flex-shrink: 0; padding: 6px 10px; color: #8b3a2e; border: 1px solid #e5a69e; border-radius: 8px; background: #fff; font-size: 9px; }
.booking-edit-close:hover { color: #fff; border-color: #b8463a; background: #b8463a; }
.summary-actions .btn-submit, .summary-actions .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.summary-actions > button[hidden] { display: none !important; }
.summary-actions .booking-cancel-edit { color: #8b3a2e; border-color: #e5a69e; background: #fff4f2; }
.summary-actions .booking-cancel-edit:hover { color: #fff; border-color: #b8463a; background: #b8463a; }

@media (max-width: 720px) {
  .booking-edit-bar { align-items: stretch; flex-direction: column; margin: 10px 10px 0; }
  .booking-edit-close { width: 100%; }
}

#actionPopup .action-popup { width: min(500px, calc(100vw - 24px)); }
#actionPopup .apm-body { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
#actionPopup .apm-history { background: #dbeafe; border-color: #60a5fa; }
#actionPopup .apm-history:hover { background: #bfdbfe; border-color: #3b82f6; }
#actionPopup .apm-history .apm-btn-icon { color: #1d4ed8; background: #bfdbfe; }
#actionPopup .apm-history .apm-btn-label { color: #1e3a8a; }

@media (max-width: 480px) {
  #actionPopup .apm-body { grid-template-columns: 1fr !important; }
}
.today-empty-state { min-height: 290px; flex-direction: column; justify-content: center; gap: 6px; color: #74869a; }
.today-empty-state > span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 4px; color: #08aeb8; border-radius: 15px; background: #e8fafb; font-size: 20px; }
.today-empty-state strong { color: #26465f; font-size: 13px; font-weight: 600; }
.today-empty-state small { font-size: 10px; font-weight: 400; }
.today-empty-state button { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; color: #fff; border: 0; border-radius: 9px; background: #00647d; font-family: inherit; font-size: 10px; cursor: pointer; }
.today-pagination {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid #e4ebef;
}

@media (max-width: 1380px) and (min-width: 721px) {
  .today-table-wrap { overflow-x: hidden; }
  .today-data-table { width: 100%; min-width: 100%; }
  .today-data-table th:nth-child(5),
  .today-data-table td:nth-child(5),
  .today-data-table th:nth-child(8),
  .today-data-table td:nth-child(8) { display: none; }
  .today-data-table th:nth-child(1) { width: 16%; }
  .today-data-table th:nth-child(2) { width: 12%; }
  .today-data-table th:nth-child(3) { width: 13%; }
  .today-data-table th:nth-child(4) { width: 26%; }
  .today-data-table th:nth-child(6) { width: 8%; }
  .today-data-table th:nth-child(7) { width: 13%; }
  .today-data-table th:nth-child(9) { width: 12%; }
  .today-job-cell { width: 145px; }
  .today-route-cell { width: 180px; }
  .today-actions-cell { width: 125px; }
}

/* Keep operational columns inside their real content area at every browser zoom.
   Browser zoom changes the CSS viewport; the table container remains the reliable boundary. */
@media (min-width: 721px) {
  @container today-table (max-width: 1150px) {
    .today-data-table { width: 100%; min-width: 100%; }
    .today-data-table th:nth-child(5),
    .today-data-table td:nth-child(5),
    .today-data-table th:nth-child(8),
    .today-data-table td:nth-child(8) { display: none; }
    .today-data-table th:nth-child(1) { width: 16%; }
    .today-data-table th:nth-child(2) { width: 12%; }
    .today-data-table th:nth-child(3) { width: 13%; }
    .today-data-table th:nth-child(4) { width: 26%; }
    .today-data-table th:nth-child(6) { width: 8%; }
    .today-data-table th:nth-child(7) { width: 13%; }
    .today-data-table th:nth-child(9) { width: 12%; }
    .today-job-cell { width: auto; }
    .today-route-cell { width: auto; }
    .today-actions-cell { width: auto; }
  }
}

@media (max-width: 1100px) {
  .today-command { padding: 17px; }
  .today-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .today-toolbar { align-items: stretch; flex-direction: column; }
  .today-toolbar-right { justify-content: space-between; }
  .today-search { width: min(360px, 55vw); }
}

@media (max-width: 720px) {
  .today-command { grid-template-columns: 1fr; padding: 15px; border-radius: 15px; }
  .today-command-actions { position: absolute; top: 0; right: 0; }
  .today-command-actions button { min-width: 35px; min-height: 35px; padding: 6px; }
  .today-command-actions button span { display: none; }
  .today-command h2 { padding-right: 90px; font-size: 18px; }
  .today-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .today-metric { padding: 8px; }
  .today-metric strong { font-size: 17px; }
  .today-filter-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .today-filter-tabs .filter-tab { justify-content: flex-start; }
  .today-toolbar-right { align-items: stretch; flex-direction: column-reverse; }
  .today-search { width: 100%; min-width: 0; }
  .today-page-size { justify-content: flex-end; }
  .today-table-wrap { overflow: visible; background: transparent; }
  .today-data-table, .today-data-table tbody { min-width: 0; display: block; }
  .today-data-table thead { display: none; }
  .today-data-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 12px;
    overflow: hidden;
    margin: 10px;
    border: 1px solid #dce6eb;
    border-left: 3px solid var(--row-accent);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(11,50,75,.055);
  }
  .today-data-table tbody td { display: block; width: auto; max-width: none; padding: 8px 10px !important; border: 0; border-bottom: 1px solid #edf2f4; }
  .today-data-table tbody td:first-child { grid-column: 1 / -1; border-left: 0; background: #f8fbfc; }
  .today-route-cell, .today-detail-cell, .today-status-cell, .today-actions-cell { grid-column: 1 / -1; }
  .today-creator-cell { display: block; }
  .today-actions-cell > div { justify-content: flex-start; }
  .today-job-cell .cust-name, .today-job-cell .cust-phone { max-width: none; }
  .today-route-cell { width: auto; }
  .today-pagination { margin: 0 10px 10px; border: 1px solid #e2eaee; border-radius: 10px; background: #fff; }
}

/* Booking details modal: stable sizing whether the navigation drawer is open or closed. */
#viewModal {
  z-index: 1000 !important;
  padding: clamp(12px, 2vw, 24px) !important;
}

#viewModal .vm-modal-box {
  width: min(1080px, calc(100vw - 48px)) !important;
  max-width: 1080px !important;
  height: min(490px, calc(100dvh - 48px)) !important;
  max-height: 490px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 72px rgba(3, 25, 43, .32) !important;
}

#viewModal .vm-modal-header {
  min-height: 68px;
  align-items: center !important;
  padding: 9px 14px !important;
}
#viewModal .vm-modal-header > div > div:first-child {
  margin-bottom: 2px !important;
  font-size: 8px !important;
  font-weight: 550 !important;
  letter-spacing: 1.4px !important;
}
#viewModal #vm-status-badge {
  padding: 3px 8px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

#viewModal .vm-modal-body {
  grid-template-columns: 350px minmax(0, 1fr) !important;
}

#viewModal .vm-modal-sidebar {
  gap: 10px !important;
  padding: 12px !important;
  scrollbar-width: thin;
}

#viewModal .vm-modal-sidebar > .vm-sidebar-secondary { display: none !important; }
#viewModal .vm-modal-sidebar > .vm-sidebar-route { display: block !important; }
#viewModal .vm-customer-section > div:first-child,
#viewModal .vm-trip-section > div:first-child { margin-bottom: 7px !important; }
#viewModal .vm-customer-section > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px !important;
  padding: 7px !important;
}
#viewModal .vm-customer-section > div:nth-child(2) > div {
  min-width: 0;
  gap: 6px !important;
  padding: 0 !important;
  border-top: 0 !important;
}
#viewModal .vm-customer-section > div:nth-child(2) > div > div:first-child {
  width: 30px !important;
  height: 30px !important;
  font-size: 12px !important;
}
#viewModal .vm-customer-section > div:nth-child(2) > div > div:last-child { min-width: 0; }
#viewModal .vm-customer-section > div:nth-child(2) > div > div:last-child > div:first-child { font-size: 8px !important; }
#viewModal .vm-customer-section > div:nth-child(2) > div > div:last-child > div:last-child {
  overflow: hidden;
  font-size: 11px !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#viewModal .vm-trip-section > div:nth-child(2) { gap: 6px !important; }
#viewModal .vm-trip-section > div:nth-child(2) > div { min-height: 43px; padding: 6px 8px !important; }
#viewModal .vm-trip-section > div:nth-child(2) > div > div:first-child { margin-bottom: 1px !important; font-size: 8px !important; }
#viewModal .vm-trip-section > div:nth-child(2) > div > div:last-child { font-size: 10px !important; }
#viewModal .vm-sidebar-route > div:first-child { margin-bottom: 5px !important; }
#viewModal .vm-sidebar-route > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px !important;
  padding: 7px 9px !important;
  border-radius: 9px !important;
}
#viewModal .vm-sidebar-route > div:nth-child(2) > div {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 9px minmax(0,1fr);
  gap: 5px !important;
  margin: 0 !important;
  align-items: start;
}
#viewModal .vm-sidebar-route > div:nth-child(2) > div:nth-child(2) { display: none !important; }
#viewModal .vm-sidebar-route > div:nth-child(2) > div > div:first-child {
  width: 8px !important;
  height: 8px !important;
  margin-top: 3px !important;
}
#viewModal .vm-sidebar-route > div:nth-child(2) > div > div:last-child { min-width: 0; }
#viewModal .vm-sidebar-route > div:nth-child(2) > div > div:last-child > div:first-child { margin-bottom: 0 !important; font-size: 8px !important; }
#viewModal .vm-sidebar-route > div:nth-child(2) > div > div:last-child > div:last-child {
  overflow: hidden;
  font-size: 9px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#viewModal .vm-map-panel {
  min-width: 0;
  overflow: hidden;
  background: #e9eff2;
}

#viewModal .vm-map-header {
  min-height: 42px;
  padding: 9px 14px !important;
}

#viewModal #vm-map {
  width: 100%;
  flex: 0 0 172px !important;
  height: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
}

#viewModal .vm-side-summary {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 9px 12px 10px;
  border-top: 1px solid #dce6eb;
  background: #f7fafb;
}
#viewModal .vm-side-route-card,
#viewModal .vm-side-detail {
  border: 1px solid #dce6eb;
  background: #fff;
}
#viewModal .vm-side-route-card {
  min-width: 0;
  padding: 7px 9px;
  border-radius: 10px;
}
#viewModal .vm-side-route-row { min-width: 0; display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: start; gap: 6px; }
#viewModal .vm-side-route-row + .vm-side-route-row { margin-top: 7px; padding-top: 7px; border-top: 1px dashed #dce6eb; }
#viewModal .vm-side-route-row > i { margin-top: 2px; color: #0aa7b4; font-size: 12px; }
#viewModal .vm-side-route-row.is-destination > i { color: #d69124; }
#viewModal .vm-side-route-row div { min-width: 0; display: flex; flex-direction: column; }
#viewModal .vm-side-route-row span,
#viewModal .vm-side-detail span { color: #8091a3; font-size: 8px; font-weight: 500; }
#viewModal .vm-side-route-row strong { overflow: hidden; color: #173b55; font-size: 9px; font-weight: 600; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
#viewModal .vm-side-detail-grid { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
#viewModal .vm-side-detail {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 5px;
  padding: 5px 7px;
  border-radius: 9px;
}
#viewModal .vm-side-detail > i { grid-row: 1 / 3; align-self: center; color: #0a879c; font-size: 11px; }
#viewModal .vm-side-detail strong { overflow: hidden; color: #173b55; font-size: 9px; font-weight: 650; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
#viewModal .vm-side-detail.is-fare { border-color: #9bcfe0; background: #eefaff; }
#viewModal .vm-side-detail.is-fare strong { color: #05678b; }

#viewModal .vm-modal-footer {
  min-height: 48px;
  padding: 7px 14px !important;
}

#viewModal .vm-close-button,
#viewModal .vm-footer-close {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

#viewModal .vm-close-button {
  min-width: 66px;
  padding: 7px 12px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.16);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

#viewModal .vm-close-button:hover {
  border-color: #fff;
  background: #c94f45;
  transform: translateY(-1px);
}

#viewModal .vm-footer-close {
  min-width: 108px;
  padding: 8px 14px !important;
  color: #fff !important;
  border: 1px solid #07506a !important;
  background: #07506a !important;
  box-shadow: 0 4px 12px rgba(7,80,106,.18);
}

#viewModal .vm-footer-close:hover {
  border-color: #c94f45 !important;
  background: #c94f45 !important;
  transform: translateY(-1px);
}

#viewModal .vm-close-button i,
#viewModal .vm-footer-close i {
  display: inline-flex;
  font-size: 12px;
}

@media (max-width: 900px) {
  #viewModal .vm-modal-box {
    width: min(760px, calc(100vw - 32px)) !important;
    height: min(490px, calc(100dvh - 32px)) !important;
    max-height: 490px !important;
  }
  #viewModal .vm-modal-body { grid-template-columns: 310px minmax(0, 1fr) !important; }
}

@media (max-width: 720px) {
  #viewModal { padding: 10px !important; }
  #viewModal .vm-modal-box {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 14px !important;
  }
  #viewModal .vm-modal-header { min-height: 68px; }
  #viewModal .vm-modal-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  #viewModal .vm-modal-sidebar {
    height: auto !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d9e4e9;
  }
  #viewModal .vm-modal-sidebar > .vm-sidebar-secondary { display: block !important; }
  #viewModal .vm-modal-sidebar > .vm-sidebar-secondary[style*="display:grid"] { display: grid !important; }
  #viewModal .vm-map-panel {
    height: 300px !important;
    min-height: 300px;
  }
  #viewModal #vm-map {
    flex: 0 0 250px !important;
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
  }
  #viewModal .vm-side-summary { display: none; }
  #viewModal .vm-customer-section > div:nth-child(2) { grid-template-columns: 1fr; }
  #viewModal .vm-modal-footer { position: sticky; bottom: 0; flex-shrink: 0; }
}

/* Desktop application shell
   The document stays within one browser viewport; long screens scroll only inside
   the white workspace, so the header, drawer and footer remain anchored. */
@media (min-width: 721px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
  }

  body {
    height: 100vh;
    height: 100dvh;
  }

  .main {
    height: calc(100vh - var(--header-h) - 60px) !important;
    height: calc(100dvh - var(--header-h) - 60px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - var(--header-h) - 60px) !important;
    max-height: calc(100dvh - var(--header-h) - 60px) !important;
    display: flex;
    flex-direction: column;
  }

  .main > .topbar {
    flex: 0 0 auto;
  }

  .main > .page-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  #page-upcoming.active {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #page-upcoming .upcoming-date-bar,
  #page-upcoming .upcoming-filter-strip {
    flex: 0 0 auto;
  }

  #page-upcoming .upcoming-table-scroll {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .ssls-global-header, .sidebar { display: none !important; }
  body { padding: 0; background: #fff; }
  .main { margin: 0 !important; border: 0; box-shadow: none; }
}