:root {
  --blue: #195e9f;
  --blue-dark: #0e467e;
  --green: #14795a;
  --line: #cfd9ce;
  --paper: #f5f3eb;
  --cell: #fbfcf8;
  --ink: #101820;
  --load: #fff1c7;
  --load-line: #e0ad42;
  --continue: #eef8f2;
  --driver: #dcefe7;
  --trailer: #ddeef6;
  --need: #f8d9d9;
  --need-line: #c53737;
  --icon-blue: #2f7db8;
  --icon-blue-dark: #1f639e;
  --icon-blue-soft: #92c9ea;
  --icon-blue-panel: #e9f5fb;
  --sidebar-width: 238px;
  --sidebar-collapsed-width: 72px;
}

/* v98: forecast repair availability is visible but never shown as confirmed capacity. */
.schedule-modern-page .truck-status-card.truck-status-expected-ready,
.schedule-modern-page .truck-status-card.truck-status-eta-overdue {
  background: #fff4d6;
  border-color: #f59e0b;
  color: #78350f;
}

.schedule-modern-page .truck-status-card.truck-status-eta-overdue {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}

.open-trucks-page .open-truck-card.is-oos-expected {
  background: #fffbeb;
  border-color: #f59e0b;
}

.open-trucks-page .open-truck-card.is-oos-expected::before {
  background: #d97706;
}

.open-trucks-page .open-truck-oos-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  background: #fff4d6;
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 0.34rem 0.48rem;
}

.open-trucks-page .open-truck-oos-check,
.open-trucks-page .open-truck-oos-status {
  background: #fff4d6;
  border-color: #f59e0b;
  color: #78350f;
}

.open-trucks-page .open-truck-oos-check b,
.open-trucks-page .open-truck-oos-status b {
  color: #92400e;
}

/* Customer contracts and read-only LoadStop trip matching. */
.contracts-page {
  background: #f3f6fa;
}

.contracts-main {
  width: 100%;
  min-width: 0;
  padding: 18px 24px 42px;
}

.contracts-header {
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 10px;
}

.contracts-header h1,
.contract-editor-header h2,
.contract-section-heading h3,
.contracts-matching-controls h2 {
  margin: 0;
  color: #102f55;
}

.contracts-header p,
.contract-section-heading p,
.contracts-matching-controls p {
  margin: 6px 0 0;
  color: #64788f;
}

.contracts-header-actions,
.contracts-toolbar,
.contracts-week-nav,
.contracts-view-tabs,
.contract-editor-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contracts-header-actions {
  margin-left: auto;
}

.contracts-primary-button,
.contracts-secondary-button,
.contracts-danger-button,
.contracts-toolbar button,
.contracts-view-tabs button,
.contracts-matching-controls select,
.contracts-match-table button,
.contract-stops-heading button,
.contract-editor-footer button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #c8d5e4;
  border-radius: 9px;
  background: #fff;
  color: #264663;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.contracts-primary-button {
  border-color: #245fc8 !important;
  background: #2867d6 !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(40, 103, 214, .16);
}

.contracts-secondary-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.contracts-danger-button {
  border-color: #e2aaaa !important;
  color: #a42d2d !important;
}

.contracts-primary-button:disabled,
.contracts-toolbar button:disabled {
  opacity: .58;
  cursor: not-allowed;
}

.contracts-safety-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid #b9d9c9;
  border-radius: 9px;
  background: #eef9f3;
  color: #2d6450;
  font-size: .8rem;
}

.contracts-safety-note > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.contracts-safety-note > span {
  white-space: nowrap;
  color: #587569;
}

.contracts-safety-mark {
  width: 16px;
  height: 16px;
  border: 2px solid #2b8060;
  border-radius: 5px 5px 7px 7px;
  background: #dff3e8;
}

.contracts-checked-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contracts-checked-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #238357;
  box-shadow: 0 0 0 3px rgba(35, 131, 87, .1);
}

.contracts-toolbar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: end;
  gap: 14px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #d5e0eb;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 48, 79, .05);
}

.contracts-toolbar-week,
.contracts-toolbar-filters {
  display: flex;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.contracts-toolbar-filters {
  padding-left: 14px;
  border-left: 1px solid #d8e2ec;
}

.contracts-week-nav {
  position: relative;
  padding: 2px;
  border: 1px solid #c8d6e5;
  border-radius: 10px;
  background: #f5f8fc;
}

.contracts-week-nav > button {
  min-width: 36px;
  border: 0;
  background: transparent;
}

.contracts-week-nav .contracts-week-button {
  min-width: 158px;
  color: #173f6d;
}

#contractWeekPicker {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contracts-filter-field {
  display: grid;
  gap: 3px;
  min-width: 145px;
}

.contracts-filter-field span {
  color: #65798e;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.contracts-filter-field input,
.contracts-filter-field select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #c8d5e4;
  border-radius: 9px;
  background: #fff;
  color: #274662;
  font: inherit;
  font-size: .83rem;
}

.contracts-customer-field { flex: 0 0 132px; }
.contracts-region-field { flex: 0 0 170px; }

.contracts-search-field {
  flex: 1;
  min-width: 190px;
}

.contracts-view-tabs {
  gap: 8px;
  margin-bottom: 10px;
  border-bottom: 0;
}

.contracts-view-tabs button {
  position: relative;
  min-height: 36px;
  margin-bottom: 0;
  border: 1px solid #d3deea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(22, 48, 79, .04);
}

.contracts-view-tabs button.is-active {
  border-color: #4f86e5;
  color: #1956bc;
  background: #edf4ff;
  box-shadow: inset 0 -2px 0 #2867d6;
}

.contracts-view-tabs button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 999px;
  background: #c92e2e;
  color: #fff;
  font-size: .7rem;
}

#contractLaneBadge { background: #2867d6; }

.contracts-message {
  margin-bottom: 14px;
  padding: 12px 15px;
  border: 1px solid #bad0e8;
  border-radius: 10px;
  background: #edf5ff;
  color: #22578c;
  font-size: .83rem;
  font-weight: 750;
}

.contracts-message.success {
  border-color: #acd7bd;
  background: #eef9f2;
  color: #176c42;
}

.contracts-message.danger {
  border-color: #e9b3b3;
  background: #fff0f0;
  color: #a12d2d;
}

.contracts-week-grid {
  min-width: 1320px;
  overflow: hidden;
  border: 1px solid #d2dde8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(22, 48, 79, .06);
}

#contractScheduleView {
  overflow-x: auto;
  padding-bottom: 8px;
}

.contracts-grid-header,
.contracts-lane-row {
  display: grid;
  grid-template-columns: 210px repeat(7, minmax(150px, 1fr));
}

.contracts-grid-header {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid #cfdbe7;
  min-height: 46px;
  background: #eef4fa;
}

.contracts-lane-row {
  height: 84px;
  min-height: 84px;
  border-bottom: 1px solid #dfe7ef;
}

.contracts-lane-row.is-even > * {
  background-color: #f9fbfd;
}

.contracts-lane-row:hover > * {
  background-color: #eef5fd;
}

.contracts-lane-row:last-child {
  border-bottom: 0;
}

.contracts-lane-heading,
.contracts-day-heading,
.contracts-lane-identity,
.contracts-day-cell {
  min-width: 0;
  padding: 6px;
  border-right: 1px solid #dfe7ef;
}

.contracts-day-heading:last-child,
.contracts-day-cell:last-child {
  border-right: 0;
}

.contracts-lane-heading,
.contracts-day-heading {
  display: grid;
  align-content: center;
  gap: 2px;
  color: #25445f;
  font-size: .79rem;
  text-align: center;
}

.contracts-lane-heading {
  position: sticky;
  left: 0;
  z-index: 4;
  padding-left: 12px;
  background: #eef4fa;
  text-align: left;
  font-weight: 900;
}

.contracts-day-heading span {
  color: #6a7e92;
  font-size: .7rem;
}

.contracts-day-heading.is-today {
  border-top: 3px solid #2867d6;
  background: #eaf3ff;
  color: #175bc4;
}

.contracts-lane-identity {
  position: sticky;
  left: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border-top: 0;
  border-bottom: 0;
  border-left: 3px solid #e89a22;
  background: #fff;
  color: #263e55;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
}

.contracts-lane-identity.customer-dhl {
  border-left-color: #28a061;
  background: #fff;
}

.contracts-lane-identity span {
  color: #97600c;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .07em;
}

.contracts-lane-identity.customer-dhl span {
  color: #167144;
}

.contracts-lane-identity strong {
  color: #173b61;
  font-size: .9rem;
}

.contracts-lane-identity small {
  color: #697b8e;
  line-height: 1.25;
}

.contracts-lane-route {
  display: -webkit-box;
  overflow: hidden;
  font-size: .68rem;
  font-weight: 800;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.contracts-day-cell {
  display: grid;
  place-items: stretch;
  align-content: center;
  gap: 5px;
  background: #fff;
}

.contracts-day-cell.has-multiple-contracts {
  align-content: start;
}

.contracts-day-cell.has-multiple-contracts .contract-trip-card {
  height: auto;
  min-height: 76px;
}

.contract-pattern-count {
  color: #167144 !important;
  font-size: .6rem !important;
  font-weight: 800;
}

.contracts-day-cell.is-today {
  background: #f2f7ff;
}

.contracts-no-run {
  place-self: center;
  color: #b1bdc9;
}

.contract-trip-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  width: 100%;
  height: 80px;
  min-height: 76px;
  padding: 5px 7px 5px 9px;
  border: 1px solid #d8e0e8;
  border-left: 3px solid #d99a35;
  border-radius: 7px;
  background: #fffdf8;
  color: #3b4651;
  font: inherit;
  line-height: 1.12;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
}

.contract-trip-card.customer-dhl {
  border-color: #d5e3dc;
  border-left-color: #34a36a;
  background: #fbfefc;
}

.contract-trip-card.match-missing,
.contract-trip-card.match-needs_review {
  border-color: #d9e0e7;
  border-left-color: #8996a3;
  background: #f7f9fb;
  box-shadow: none;
}

.contract-trip-card.match-schedule_mismatch {
  border-color: #e9d39f;
  border-left-color: #d59321;
  background: #fff9eb;
}

.contract-trip-card.match-noted_exception {
  border-color: #e9d39f;
  border-left-color: #d59321;
  background: #fff9eb;
}

.contract-trip-card.match-noted_exception em { color: #8a6212; }

.contract-trip-card.match-matched { border-left-color: #2f9660; }

.contract-trip-card.is-cancelled,
.contract-trip-card.is-cancelled.customer-dhl {
  border-color: #e7a6a6;
  border-left-color: #c72d2d;
  background: #fff1f1;
}

.contract-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.contract-card-top strong {
  color: #9b5300;
  font-size: .75rem;
}

.customer-dhl .contract-card-top strong {
  color: #126c41;
}

.contract-card-top i {
  color: #6b5a3d;
  font-size: .63rem;
  font-style: normal;
  font-weight: 850;
}

.contract-card-route {
  color: #1c3e5d;
  display: -webkit-box;
  min-height: 24px;
  overflow: hidden;
  font-size: .66rem;
  font-weight: 850;
  line-height: 1.18;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.contract-card-time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.contract-card-time {
  color: #425d74;
  font-size: .59rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-trip-card small {
  color: #647a8e;
  font-size: .64rem;
}

.contract-note-icon {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: #b7c2cc;
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}

.contract-note-icon:hover,
.contract-note-icon:focus-visible {
  color: #425d74;
  background: #eef2f6;
  outline: none;
}

.contract-note-icon.has-note {
  color: #b3790f;
}

.contract-note-icon.has-note:hover,
.contract-note-icon.has-note:focus-visible {
  color: #8a5c0a;
  background: #fff2d6;
}

.contract-card-stops {
  flex: 0 0 auto;
  font-size: .53rem !important;
  font-weight: 800;
  white-space: nowrap;
}

.contract-trip-card em {
  color: #9f2828;
  overflow: hidden;
  font-size: .54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-card-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  margin-top: auto;
}

.contract-card-state em { min-width: 0; }

.contract-load-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 15px;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: .49rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.contract-load-badge.dispatched { background: #dceaff; color: #1457b8; }
.contract-load-badge.completed { background: #dcfce7; color: #166534; }
.contract-load-badge.cancelled { background: #c72d2d; color: #fff; }
.contract-trip-card.is-completed,
.contract-trip-card.is-completed.customer-dhl {
  border-color: #86d7aa;
  border-left-color: #1f8a55;
  background: #f0fbf5;
}
.contract-trip-card.is-cancelled .contract-card-top strong,
.contract-trip-card.is-cancelled .contract-card-route,
.contract-trip-card.is-cancelled em { color: #982323; }

.contracts-page .contracts-region-heading {
  position: sticky;
  top: calc(var(--contracts-sticky-navigation-height, 104px) + 46px);
  z-index: 22;
  min-height: 32px;
  padding: 6px 12px;
  background: #e5edf5;
}

.contracts-page .contracts-region-heading strong { font-size: .75rem; }
.contracts-page .contracts-region-heading span { font-size: .66rem; }

@media (max-width: 1500px) {
  .contracts-toolbar { grid-template-columns: 1fr; }
  .contracts-toolbar-filters { padding-left: 0; border-left: 0; }
}

.contract-trip-card.match-matched em {
  color: #217044;
}

.contract-trip-card.is-cancelled em { color: #982323; }

.contracts-empty {
  min-height: 260px;
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 30px;
  color: #64798f;
  text-align: center;
}

.contracts-empty strong {
  color: #244765;
}

.contracts-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 11px;
  margin-bottom: 14px;
}

.contracts-kpi {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid #d8e2ec;
  border-radius: 12px;
  background: #fff;
}

.contracts-kpi span {
  color: #687b8f;
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.contracts-kpi strong {
  color: #173b60;
  font-size: 1.55rem;
}

.contracts-kpi.success { border-color: #b8ddc8; background: #f0faf4; }
.contracts-kpi.warning { border-color: #ead39d; background: #fff9e9; }
.contracts-kpi.danger { border-color: #ebbbbb; background: #fff2f2; }
.contracts-kpi.danger strong { color: #ae3030; }

.contracts-matching-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  border: 1px solid #d4dfeb;
  border-radius: 12px 12px 0 0;
  background: #fff;
}

.contracts-matching-controls label {
  display: grid;
  gap: 5px;
  color: #63778d;
  font-size: .72rem;
  font-weight: 850;
}

.contracts-table-wrap {
  overflow: auto;
  border: 1px solid #d4dfeb;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #fff;
}

.contracts-match-table {
  width: 100%;
  min-width: 970px;
  border-collapse: collapse;
  font-size: .79rem;
}

.contracts-match-table th,
.contracts-match-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e1e8ef;
  text-align: left;
  vertical-align: middle;
}

.contracts-match-table th {
  background: #f1f5f9;
  color: #536b82;
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.contracts-match-table td strong,
.contracts-match-table td small {
  display: block;
}

.contracts-match-table td strong { color: #234562; }
.contracts-match-table td small { margin-top: 4px; color: #718396; }

.contract-match-status {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef2f6;
  color: #576c80;
  font-size: .68rem;
  font-weight: 900;
  white-space: nowrap;
}

.contract-match-status.matched { background: #e4f6eb; color: #166b40; }
.contract-match-status.missing,
.contract-match-status.needs_review { background: #eef2f6; color: #576c80; }
.contract-match-status.schedule_mismatch { background: #fff0cc; color: #855700; }
.contract-match-status.extra { background: #e7eff9; color: #315c89; }
.contract-loadstop-cell { display: inline-flex; align-items: center; gap: 7px; }
.contracts-match-table tr.is-cancelled td { background: #fff7f7; }
.contracts-match-table .contract-load-badge { font-size: .57rem; }
.contracts-table-empty { padding: 30px !important; color: #718398; text-align: center !important; }

.contract-editor-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(8, 27, 48, .32);
}

.contract-editor-dialog::backdrop {
  background: rgba(13, 31, 52, .64);
  backdrop-filter: blur(2px);
}

.contract-editor-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100vh - 32px);
}

.contract-editor-header,
.contract-editor-footer {
  padding: 18px 22px;
  border-bottom: 1px solid #dbe4ed;
}

.contract-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.contract-editor-header > button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #eef3f8;
  color: #44617c;
  font-size: 1.5rem;
  cursor: pointer;
}

.contract-editor-body {
  overflow-y: auto;
  padding: 0 22px 22px;
  background: #f7f9fc;
}

.contract-form-section {
  margin-top: 18px;
  padding: 19px;
  border: 1px solid #d7e1eb;
  border-radius: 13px;
  background: #fff;
}

.contract-section-heading {
  margin-bottom: 15px;
}

.contract-section-heading p,
.contracts-matching-controls p {
  font-size: .8rem;
}

.contract-form-grid,
.contract-stop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.contract-form-grid label,
.contract-stop-grid label {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  color: #536a80;
  font-size: .72rem;
  font-weight: 850;
}

.contract-form-grid input,
.contract-form-grid select,
.contract-form-grid textarea,
.contract-stop-grid input,
.contract-stop-grid select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #c7d5e3;
  border-radius: 8px;
  background: #fff;
  color: #24445f;
  font: inherit;
  font-size: .8rem;
}

.contract-form-grid textarea {
  resize: vertical;
}

.contract-date-hint {
  color: #718398;
  font-size: .66rem;
  font-weight: 700;
}

.contract-wide-field {
  grid-column: span 2;
}

.contract-save-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 15px 0 0;
  padding: 12px;
  border: 1px solid #d7e1eb;
  border-radius: 10px;
  background: #f8fbff;
}

.contract-save-mode[hidden] {
  display: none;
}

.contract-save-mode legend {
  padding: 0 6px;
  color: #31506c;
  font-size: .76rem;
  font-weight: 850;
}

.contract-save-mode label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid #c9d8e7;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.contract-save-mode strong,
.contract-save-mode small {
  display: block;
}

.contract-save-mode small {
  margin-top: 3px;
  color: #617890;
  line-height: 1.35;
}

.contract-weekday-picker {
  display: grid;
  grid-template-columns: repeat(7, minmax(70px, 1fr));
  gap: 8px;
}

.contract-weekday-picker label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid #c8d6e4;
  border-radius: 9px;
  background: #f7f9fc;
  color: #3b5872;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
}

.contract-weekday-picker label:has(input:checked) {
  border-color: #6b99e4;
  background: #eaf2ff;
  color: #1854b7;
}

.contract-stops-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.contract-stops {
  display: grid;
  gap: 12px;
}

.contract-stop-row {
  padding: 14px;
  border: 1px solid #d9e2eb;
  border-radius: 10px;
  background: #f9fbfd;
}

.contract-stop-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.contract-stop-title strong { color: #173c61; }
.contract-stop-title span { color: #718398; font-size: .72rem; }
.contract-stop-title button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #ad3434;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.contract-editor-footer {
  justify-content: flex-end;
  border-top: 1px solid #dbe4ed;
  border-bottom: 0;
  background: #fff;
}

.contract-editor-footer > span {
  flex: 1;
}

@media (max-width: 1050px) {
  .contracts-main { padding: 22px 18px 42px; }
  .contracts-header { flex-direction: column; }
  .contracts-header-actions { margin-left: 0; }
  .contracts-kpis { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .contract-form-grid,
  .contract-stop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .contracts-main { padding: 18px 12px 36px; }
  .contracts-header-actions,
  .contracts-safety-note,
  .contracts-safety-note > div,
  .contracts-matching-controls,
  .contract-stops-heading,
  .contract-editor-footer { align-items: stretch; flex-direction: column; }
  .contracts-header-actions > *,
  .contracts-toolbar > button,
  .contracts-filter-field { width: 100%; }
  .contracts-safety-note > span { white-space: normal; }
  .contracts-week-nav { width: 100%; justify-content: space-between; }
  .contracts-week-nav .contracts-week-button { min-width: 130px; }
  .contracts-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contract-form-grid,
  .contract-stop-grid { grid-template-columns: 1fr; }
  .contract-wide-field { grid-column: auto; }
  .contract-weekday-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contract-editor-footer > span { display: none; }
  .contract-editor-footer button { width: 100%; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  transition: grid-template-columns 160ms ease;
}

body.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-width) 1fr;
}

.sidebar {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #17568f 0%, #124a7c 52%, #0f416f 100%);
  color: white;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.13);
}

.sidebar-brand {
  min-height: 64px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 30px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(13, 58, 99, 0.42);
}

.brand-mark {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--icon-blue-panel);
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 0 0 1px rgba(31, 99, 158, 0.08);
}

.brand-text {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.brand-text strong {
  font-size: 15px;
  line-height: 18px;
}

.brand-text span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.sidebar-collapse-toggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #ffffff;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-collapse-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-collapse-toggle svg {
  width: 18px;
  height: 18px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: grid;
  align-content: start;
  grid-auto-rows: min-content;
  gap: 10px;
  overflow: auto;
}

.nav-section {
  display: grid;
  gap: 3px;
}

.nav-section + .nav-section {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-section-title {
  padding: 0 10px 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 900;
  line-height: 14px;
  text-transform: uppercase;
}

.nav-item,
.nav-subitem {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.nav-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 0 8px 0 6px;
  font-weight: 700;
  position: relative;
  border-left: 3px solid transparent;
}

.sidebar-nav > .nav-item {
  grid-template-columns: 30px minmax(0, 1fr) auto;
}

.nav-group {
  display: grid;
  gap: 2px;
}

.nav-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(233, 245, 251, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 0 0 1px rgba(31, 99, 158, 0.06);
}

.nav-icon svg {
  width: 20px;
  height: 20px;
}

.brand-icon {
  width: 30px;
  height: 30px;
}

.icon-line,
.icon-fill {
  stroke: var(--icon-blue-dark);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.icon-line {
  fill: none;
}

.icon-fill {
  fill: var(--icon-blue-soft);
}

.icon-accent {
  fill: var(--icon-blue);
}

.icon-soft {
  fill: var(--icon-blue-soft);
  stroke: var(--icon-blue-dark);
  stroke-width: 1.2;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 16px;
}

.nav-chevron {
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.72);
}

.nav-group:not(.open) .nav-submenu {
  display: none;
}

.nav-submenu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 3px 0 4px 44px;
}

.nav-subitem {
  min-height: 31px;
  padding: 0 9px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  border-left: 2px solid rgba(255, 255, 255, 0.18);
}

/* v122: preserve readable single-line labels in expanded sidebar submenus. */
body:not(.auth-page) .nav-submenu,
.schedule-modern-page .nav-submenu {
  margin-left: 0;
  padding-left: 28px;
}

body:not(.auth-page) .nav-subitem,
.schedule-modern-page .nav-subitem {
  min-width: 0;
  padding-right: 6px;
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item.active,
.nav-subitem.active {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.nav-item.active {
  border-left-color: #ffffff;
}

.nav-subitem.active {
  border-left-color: #ffffff;
}

.nav-item.active .nav-icon {
  background: #ffffff;
}

.nav-item:hover,
.nav-subitem:hover {
  background: rgba(255, 255, 255, 0.16);
}

main {
  min-width: 0;
  padding: 12px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

h1 {
  font-size: 23px;
  margin: 0;
}

p {
  margin: 3px 0 0;
  color: #53605d;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 1px solid #becabe;
  background: white;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}

button:hover {
  border-color: var(--green);
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.sidebar button {
  border: 0;
}

.sidebar .brand-mark {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 6px;
  background: var(--icon-blue-panel);
  border: 1px solid rgba(255, 255, 255, 0.48);
}

.sidebar .nav-item {
  border: 0;
  color: #ffffff;
  border-radius: 6px;
}

.sidebar .nav-item:hover {
  border: 0;
  background: rgba(255, 255, 255, 0.18);
}

.sidebar-guide {
  padding: 6px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sidebar-account {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding: 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  background: rgba(13, 58, 99, 0.26);
}

.sidebar-account span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.sidebar-account small {
  color: rgba(255, 255, 255, 0.76);
}

.sidebar-account button {
  width: fit-content;
  margin-top: 5px;
  padding: 5px 8px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

body.sidebar-collapsed .sidebar-brand {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 58px;
  padding: 10px 0;
}

body.sidebar-collapsed .brand-mark,
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-section-title,
body.sidebar-collapsed .nav-chevron,
body.sidebar-collapsed .nav-submenu,
body.sidebar-collapsed .sidebar-account span,
body.sidebar-collapsed .sidebar-account small,
body.sidebar-collapsed .sidebar-account button {
  display: none;
}

body.sidebar-collapsed .sidebar-nav {
  padding: 10px 7px;
  gap: 7px;
  overflow-x: hidden;
}

body.sidebar-collapsed .nav-section {
  gap: 5px;
}

body.sidebar-collapsed .nav-section + .nav-section {
  padding-top: 8px;
}

body.sidebar-collapsed .nav-item {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 42px;
  padding: 0;
  border-left: 0;
}

body.sidebar-collapsed .nav-icon {
  width: 32px;
  height: 32px;
}

body.sidebar-collapsed .nav-icon svg {
  width: 22px;
  height: 22px;
}

body.sidebar-collapsed .nav-badge {
  position: absolute;
  top: 3px;
  right: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 9px;
}

body.sidebar-collapsed .sidebar-account {
  min-height: 52px;
  padding: 10px 0;
  justify-items: center;
}

body.sidebar-collapsed .sidebar-account::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.auth-page {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr;
  place-items: center;
  background: #eef1eb;
}

.auth-shell {
  width: min(430px, calc(100vw - 24px));
  padding: 0;
}

.auth-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(30, 45, 38, 0.14);
}

.auth-brand {
  display: grid;
  gap: 4px;
}

.auth-brand strong {
  color: var(--blue);
  font-size: 26px;
}

.auth-brand span,
.auth-link {
  color: #56635f;
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-form button {
  justify-content: center;
}

.auth-message {
  min-height: 18px;
  color: #8a330d;
  font-size: 13px;
}

.auth-message[data-kind="success"] {
  color: #14643f;
}

.auth-message[data-kind="error"] {
  color: #a32618;
}

.auth-help {
  margin: -4px 0 0;
  color: #65726e;
  font-size: 12px;
}

.turnstile-container {
  min-height: 65px;
}

.auth-form[hidden] {
  display: none;
}

.auth-link {
  width: fit-content;
  font-size: 13px;
  font-weight: 800;
}

.auth-card-wide {
  width: min(520px, calc(100vw - 48px));
}

.mfa-setup,
.recovery-codes-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #c9d8ef;
  border-radius: 8px;
  background: #f7faff;
}

.mfa-setup[hidden],
.recovery-codes-panel[hidden] {
  display: none;
}

.mfa-setup h2,
.recovery-codes-panel h2 {
  margin: 0;
  color: #17365f;
  font-size: 17px;
}

.mfa-setup ol,
.recovery-codes-panel p {
  margin: 0;
  color: #4f5f70;
  font-size: 13px;
  line-height: 1.45;
}

.mfa-setup ol {
  display: grid;
  gap: 6px;
  padding-left: 21px;
}

.mfa-qr-panel {
  display: grid;
  gap: 8px;
  justify-items: center;
  margin: 0;
  padding: 12px;
  border: 1px solid #d6e2f2;
  border-radius: 8px;
  background: #fff;
}

.mfa-qr-panel[hidden] {
  display: none;
}

.mfa-qr-canvas {
  display: block;
  width: min(244px, 100%);
  height: auto;
  aspect-ratio: 1;
  image-rendering: pixelated;
}

.mfa-qr-panel figcaption {
  color: #4f5f70;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.mfa-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 5px;
}

.mfa-manual-key,
.recovery-codes {
  display: block;
  padding: 10px;
  border: 1px solid #b7c9df;
  border-radius: 6px;
  background: #fff;
  color: #17365f;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.recovery-codes {
  margin: 0;
  line-height: 1.65;
  white-space: pre-wrap;
}

.auth-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
}

.auth-check-row input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.auth-text-button {
  min-height: auto;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  justify-self: start;
  text-decoration: underline;
}

.auth-page .secondary-action {
  min-height: 40px;
  border: 1px solid #b7c9df;
  border-radius: 6px;
  background: #fff;
  color: #17365f;
  font-weight: 800;
}

@media (max-width: 560px) {
  .auth-card-wide {
    width: auto;
  }

  .mfa-key-row {
    grid-template-columns: 1fr;
  }
}

.status,
.controls,
.board {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 7px;
  margin-bottom: 8px;
}

.status {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  align-items: center;
  padding: 8px 10px;
  font-size: 14px;
}

.status[hidden] {
  display: none;
}

.status span {
  white-space: nowrap;
}

.status.success {
  color: #0f5132;
  background: #e8f5ee;
  border-color: #a9d5ba;
}

.status.error {
  color: #842029;
  background: #f8d7da;
  border-color: #e8aeb4;
}

.status-footer {
  margin-top: 8px;
  margin-bottom: 0;
  padding: 7px 10px;
  color: #56635f;
  background: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.status-footer strong {
  color: #2a3b34;
}

.status-footer .sync-running,
.status-footer .sync-idle {
  font-weight: 700;
}

.sync-running {
  color: #a16400;
  font-weight: 800;
}

.sync-idle {
  color: var(--green);
  font-weight: 800;
}

.last-refresh {
  color: #66756f;
  font-size: 12px;
}

.settings-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  padding: 12px;
}

.settings-link-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  color: #102019;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.settings-link-card:hover {
  border-color: var(--green);
}

.settings-link-card span {
  color: #56635f;
  font-size: 13px;
}

.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 12px;
  align-items: start;
}

.account-main-column {
  display: grid;
  gap: 12px;
}

.account-panel,
.account-summary-panel {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.account-panel {
  display: grid;
  gap: 12px;
}

.account-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.account-panel-head h2,
.account-summary-panel h2 {
  margin: 0;
  font-size: 20px;
}

.account-summary-panel {
  position: sticky;
  top: 14px;
  grid-row: span 2;
}

.account-summary-panel > p:last-of-type {
  margin: 5px 0 12px;
  color: #596661;
  word-break: break-word;
}

.account-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-form label {
  display: grid;
  gap: 5px;
  color: #2a3b34;
  font-size: 12px;
  font-weight: 800;
}

.account-form input {
  min-width: 0;
}

.account-security-form .account-current-password {
  grid-column: 1 / -1;
  max-width: 520px;
}

.account-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.account-summary-grid {
  display: grid;
  gap: 8px;
}

.account-summary-grid div {
  padding: 9px;
  background: #fbfcf8;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.account-summary-grid span {
  display: block;
  margin-bottom: 3px;
  color: #596661;
  font-size: 12px;
  font-weight: 800;
}

.account-summary-grid strong {
  display: block;
  color: #17231e;
}

.account-force-notice {
  color: #7a4d00;
  background: #fff4d6;
  border-color: #e6c676;
  font-weight: 800;
}

.account-form input:disabled,
.account-form button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

@media (max-width: 900px) {
  .account-layout {
    grid-template-columns: 1fr;
  }

  .account-summary-panel {
    position: static;
    grid-row: auto;
  }

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

.status-page main {
  display: grid;
  gap: 14px;
}

.status-page .modern-page-header {
  align-items: center;
}

.status-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.status-card,
.status-detail-card {
  border: 1px solid var(--portal-line, #dbe3ef);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.status-card {
  display: grid;
  gap: 6px;
  min-height: 86px;
  padding: 16px;
}

.status-card span,
.status-card small {
  color: #64748b;
  font-size: 12px;
}

.status-card strong {
  color: #0f172a;
  font-size: 24px;
  line-height: 1;
}

.status-card-blue {
  border-left: 4px solid #2563eb;
}

.status-card-green {
  border-left: 4px solid #16a34a;
}

.status-card-amber {
  border-left: 4px solid #d97706;
}

.status-card-red {
  border-left: 4px solid #dc2626;
}

.status-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 14px;
}

.status-detail-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.status-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f7;
}

.status-card-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
}

.status-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.status-action-button,
.status-danger-button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
}

.status-action-button {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.status-danger-button {
  border-color: #fecaca;
  background: #fff1f2;
  color: #be123c;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.status-pill.success {
  background: #dcfce7;
  color: #166534;
}

.status-pill.warning {
  background: #fef3c7;
  color: #92400e;
}

.status-pill.danger {
  background: #fee2e2;
  color: #991b1b;
}

.status-list {
  display: grid;
  gap: 8px;
}

.status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  background: #fbfdff;
}

.status-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.status-row strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-row span,
.status-row small,
.status-empty span {
  color: #64748b;
  font-size: 12px;
}

.status-empty {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
}

.backup-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.backup-summary div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  background: #f8fafc;
}

.backup-summary strong {
  color: #0f172a;
  font-size: 12px;
}

.backup-summary span {
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-restore-note {
  background: #ffffbf;
}

.backup-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
  padding: 9px 10px;
}

.board-search-field {
  min-width: 130px;
}

.board-search-field input {
  width: 130px;
}

.board-filter-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  padding-bottom: 1px;
}

.board-filter-group button,
.board-refresh-panel button {
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.board-filter-group button.active {
  color: #ffffff;
  background: var(--green);
  border-color: var(--green);
}

.board-refresh-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-bottom: 1px;
  color: #66756f;
  font-size: 12px;
  font-weight: 800;
}

.board-refresh-panel button.refreshing {
  cursor: wait;
  opacity: 0.72;
}

.schedule-changes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: -1px 0 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  color: #3c4a45;
  font-size: 12px;
  font-weight: 800;
}

.schedule-changes[hidden] {
  display: none;
}

.schedule-change-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid #c5d0c4;
  border-radius: 999px;
  background: #ffffff;
  color: #31423b;
  font-size: 12px;
}

label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #4a5753;
}

input,
select {
  border: 1px solid #c5d0c4;
  border-radius: 6px;
  padding: 7px 9px;
  background: white;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.board {
  max-height: calc(100vh - 174px);
  overflow: auto;
  margin-bottom: 0;
  background: #ffffff;
  scrollbar-gutter: stable both-edges;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.schedule-modern-page .board {
  overflow-anchor: none;
}

.grid {
  display: grid;
  min-width: max(1080px, 100%);
}

.corner,
.day-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #e7eee6;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid #abb9aa;
  padding: 7px 8px;
  font-weight: 800;
  font-size: 13px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.corner {
  left: 0;
  z-index: 6;
  justify-content: flex-start;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 #abb9aa;
}

.day-header.today {
  background: #fff5dc;
  box-shadow: inset 0 3px 0 #d89216;
}

.truck {
  position: sticky;
  left: 0;
  z-index: 3;
  min-height: 74px;
  color: #111;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  text-align: center;
  display: grid;
  align-content: center;
  gap: 5px;
  box-shadow: 1px 0 0 rgba(16, 24, 32, 0.1);
}

.truck.board-filter-hidden,
.cell.board-filter-hidden {
  display: none;
}

.truck strong {
  font-size: 17px;
  line-height: 1;
}

.truck span {
  font-size: 9.5px;
  text-transform: uppercase;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.cell {
  position: relative;
  min-height: 74px;
  background: var(--cell);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4px;
  align-content: start;
  content-visibility: auto;
  contain-intrinsic-size: 74px 160px;
  transition: box-shadow 120ms ease, background-color 120ms ease;
}

.cell-note-add {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #9eb8d0;
  border-radius: 4px;
  background: #f4fbff;
  color: #145a86;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
}

.cell:hover .cell-note-add,
.cell:focus-within .cell-note-add {
  opacity: 1;
}

.owner-note-add {
  top: 4px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.owner-note-add .jitc-icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

.schedule-note-card.owner-note-card {
  position: relative;
  z-index: 2;
  border-style: dashed;
}

/* The CTA is an absolute overlay, so it never adds its own height - a cell
   with only a note in normal flow would otherwise stay note-sized, leaving
   the centered CTA label cramped right under it. */
.cell:has(> .owner-note-card):has(> .owner-ready-team-cta) {
  min-height: 150px;
}

.owner-ready-team-cta {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(228, 241, 255, 0.55));
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.cell:hover .owner-ready-team-cta,
.cell:focus-within .owner-ready-team-cta {
  opacity: 1;
  transform: scale(1);
}

.owner-ready-team-cta:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.75);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22), 0 0 0 4px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.owner-ready-team-cta-icon {
  display: flex;
  color: #2563eb;
  filter: drop-shadow(0 1px 2px rgba(37, 99, 235, 0.35));
}

.owner-ready-team-cta-icon .jitc-icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.8;
}

.owner-ready-team-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f2a4a;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.owner-ready-team-cta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .owner-ready-team-cta { transition: opacity 140ms ease; transform: none; }
  .owner-ready-team-cta:hover { transform: none; }
}

.cell.today-cell {
  background: #fffaf0;
  box-shadow: inset 2px 0 0 #d89216, inset -2px 0 0 #d89216;
}

.cell.row-hover {
  box-shadow: inset 0 0 0 1px rgba(25, 94, 159, 0.24);
}

.cell.today-cell.row-hover {
  box-shadow: inset 2px 0 0 #d89216, inset -2px 0 0 #d89216, inset 0 0 0 1px rgba(25, 94, 159, 0.24);
}

.truck.row-hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 1px 0 0 rgba(16, 24, 32, 0.1);
}

.resource,
.load-card,
.last-location,
.moved-location-marker,
.truck-status-card {
  display: grid;
  width: 100%;
  min-width: 0;
  text-align: left;
  border-radius: 5px;
  margin-bottom: 4px;
  transition: outline-color 120ms ease, box-shadow 120ms ease;
}

.cell > :last-child {
  margin-bottom: 0;
}

.resource {
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid #b7d5ca;
  color: #0f1b24;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.resource.driver {
  background: var(--driver);
}

.resource.driver-resource-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 22px;
  padding: 1px 5px;
}

.resource-driver-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.driver-role-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
  vertical-align: -2px;
}

.driver-role-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  object-fit: contain;
}

.resource .driver-role-icons {
  gap: 1px;
  margin-right: 0;
  vertical-align: middle;
}

.resource .driver-role-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.resource .driver-role-icon.trainee-icon {
  width: 24px;
  height: 22px;
  flex-basis: 24px;
}

.driver-name-with-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.driver-name-with-icons .driver-role-icons {
  margin-right: 0;
}

.resource.trailer {
  background: var(--trailer);
  border-color: #bfd6e4;
}

.resource.resource-change-alert {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #7c2d12;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.32);
}

.resource.resource-empty {
  visibility: hidden;
}

.resource.trailer-missing {
  background: #ffe4e4;
  border-color: #e35d5d;
  color: #b51f1f;
}

.load-card {
  gap: 2px;
  border: 1px solid var(--load-line);
  background: var(--load);
  padding: 5px 6px;
}

.load-card.continuing {
  border-style: dashed;
  border-color: #b8d8c4;
  background: var(--continue);
}

.load-card.empty-move {
  border-color: #8798a5;
  background: #dfe7ed;
}

.load-card.empty-move.continuing {
  border-color: #9aaab5;
  background: #eef3f6;
}

.load-card.load-usps {
  border-color: #c79600;
  background: #ffc000;
  color: #111;
}

.load-card.load-dhl {
  border-color: #8db376;
  background: #c6e0b4;
  color: #10210f;
}

.load-card.load-other-customer {
  border-color: #0088ba;
  background: #00b0f0;
  color: #051b24;
}

.load-card.load-high-value {
  border-color: #777;
  background: #b7b7b7;
  color: #111;
}

.load-card.load-to-dispatch {
  border-color: #7f61b8;
  border-left: 4px solid #6846a2;
  background: #e4d9ff;
  color: #1e1435;
}

.load-card.load-loadstop-assigned {
  border-color: #bf7b00;
  border-left: 4px solid #9a6400;
  background: #fff0bd;
  color: #412900;
}

.load-card.load-dfw-ready-team {
  border-color: #b56a12;
  border-left: 4px solid #9a4f08;
  background: #ffe0a3;
  color: #482300;
  cursor: pointer;
}

.load-card.load-dfw-ready-team .ready-team-needs-load {
  color: #b91c1c;
  font-weight: 900;
}

.load-card.load-dfw-ready-team .ready-team-instruction-alert {
  color: #9a3412;
  font-weight: 900;
  opacity: 1;
}

.load-card.load-dfw-ready-team.owner-ready-team-pending {
  border-style: dashed;
  background: #fff3d6;
}

.load-card.load-usps small,
.load-card.load-dhl small,
.load-card.load-other-customer small,
.load-card.load-high-value small,
.load-card.load-to-dispatch small,
.load-card.load-loadstop-assigned small,
.load-card.load-dfw-ready-team small {
  color: inherit;
  opacity: 0.88;
}

.dispatch-workflow-main {
  min-width: 0;
  padding: 0 28px 48px;
}

.dispatch-workflow-header {
  margin: 0 -28px 22px;
  padding: 22px 28px;
}

.dispatch-safety-banner {
  align-items: center;
  background: #eefbf2;
  border: 1px solid #7bdfa0;
  border-radius: 16px;
  color: #075b2c;
  display: flex;
  gap: 26px;
  margin-bottom: 20px;
  padding: 18px 22px;
}

.dispatch-kpis {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.dispatch-kpis article {
  align-items: center;
  background: #fff;
  border: 2px solid #d8e1ef;
  border-radius: 16px;
  display: flex;
  gap: 14px;
  min-height: 88px;
  padding: 16px 20px;
}

.dispatch-kpis strong {
  font-size: 32px;
}

.dispatch-kpi-local { border-color: #8b6bc4 !important; }
.dispatch-kpi-assigned { border-color: #d49a2e !important; }
.dispatch-kpi-sent { border-color: #9aa5b1 !important; }
.dispatch-kpi-accepted { border-color: #45b979 !important; }

.dispatch-workflow-controls {
  align-items: center;
  background: #fff;
  border: 1px solid #d7e0ec;
  border-radius: 16px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 14px;
}

.dispatch-state-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dispatch-state-tabs button.active {
  background: #2864e8;
  color: #fff;
}

#dispatchSearch {
  max-width: 430px;
  width: 100%;
}

.dispatch-message {
  border-radius: 12px;
  font-weight: 800;
  margin-bottom: 16px;
  padding: 14px 18px;
}

.dispatch-message.success {
  background: #dcfce7;
  border: 1px solid #6fd694;
  color: #075b2c;
}

.dispatch-message.error {
  background: #fee2e2;
  border: 1px solid #f2a2a2;
  color: #991b1b;
}

.dispatch-workflow-list {
  display: grid;
  gap: 14px;
}

.dispatch-workflow-list.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.dispatch-workflow-card {
  align-items: stretch;
  background: #fff;
  border: 2px solid #d8e1ef;
  border-left-width: 8px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr) 230px;
  min-height: 152px;
  overflow: hidden;
}

.dispatch-state-local { border-color: #7650af; }
.dispatch-state-assigned { border-color: #c98200; }
.dispatch-state-sent { border-color: #a5adb6; background: #f3f4f6; }
.dispatch-state-accepted { border-color: #21a35b; background: #ecfdf3; }

.dispatch-card-status {
  align-items: center;
  background: rgba(255, 255, 255, 0.48);
  display: flex;
  font-size: 14px;
  font-weight: 900;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.dispatch-card-body {
  border-left: 1px solid rgba(100, 116, 139, 0.25);
  padding: 18px 22px;
}

.dispatch-card-heading {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.dispatch-card-heading h2 {
  margin: 0 0 5px;
}

.dispatch-card-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 12px;
}

.dispatch-card-resources {
  font-weight: 800;
  margin: 10px 0 0;
}

.dispatch-request-details {
  color: #64748b;
  display: block;
  margin-top: 7px;
}

.dispatch-card-error {
  color: #b91c1c;
  font-weight: 800;
  margin: 8px 0 0;
}

.dispatch-card-action {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 18px;
}

.dispatch-primary-action,
.dispatch-send-action,
.dispatch-accept-action {
  min-height: 48px;
  width: 100%;
}

.dispatch-send-action {
  background: #d98c00;
  border-color: #b87400;
  color: #fff;
}

.dispatch-accept-action {
  background: #1fac62;
  border-color: #168248;
  color: #fff;
  margin-top: 10px;
}

.dispatch-pilot-note,
.dispatch-waiting-note,
.dispatch-accepted-note {
  color: #5f6b7a;
  font-weight: 800;
  text-align: center;
}

.dispatch-accepted-note {
  color: #08783a;
}

.dispatch-empty {
  background: #fff;
  border: 1px solid #d8e1ef;
  border-radius: 16px;
  color: #64748b;
  padding: 36px;
  text-align: center;
}

@media (max-width: 1050px) {
  .dispatch-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dispatch-workflow-card {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .dispatch-card-action {
    border-top: 1px solid #d8e1ef;
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .dispatch-kpis {
    grid-template-columns: 1fr;
  }

  .dispatch-workflow-controls,
  .dispatch-safety-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .dispatch-workflow-card {
    display: block;
  }
}

.load-card.connection-load-card {
  border-color: #e36f6f;
  border-left: 4px solid #ba1d1d;
  background: #ffe1e1;
  color: #8d1414;
}

.load-card.connection-load-card small {
  color: #8d1414;
}

.load-card.connection-load-card.is-not-needed {
  border-color: #cbd5e1;
  border-left-color: #64748b;
  background: #e5e7eb;
  color: #334155;
}

.load-card.connection-load-card.is-not-needed small {
  color: #475569;
}

.load-card.cancelled-load-card {
  border-color: #d76b6b;
  border-left: 4px solid #b42020;
  background: #ffdede;
  color: #8d1414;
}

.load-card.cancelled-load-card small {
  color: #8d1414;
}

.schedule-note-card {
  display: grid;
  width: 100%;
  min-width: 0;
  text-align: left;
  border: 1px solid #9ec5dc;
  border-color: color-mix(in srgb, var(--note-color, #24769f) 35%, #ffffff);
  border-left: 4px solid var(--note-color, #24769f);
  border-radius: 4px;
  background: var(--note-bg, #e8f6ff);
  color: #14384a;
  padding: 5px 6px;
  margin-bottom: 4px;
}

.schedule-note-card b {
  font-size: 10px;
  line-height: 1.1;
}

.schedule-note-card span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

.load-card b,
.last-location b,
.moved-location-marker b,
.truck-status-card b {
  font-size: 10px;
  line-height: 1.12;
}

.load-card span,
.last-location span,
.moved-location-marker span,
.truck-status-card span {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.load-card small,
.last-location small,
.moved-location-marker small,
.truck-status-card small {
  font-size: 9.5px;
  line-height: 1.18;
  color: #56625d;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.last-location {
  gap: 2px;
  border: 1px solid #e78f8f;
  border-left: 4px solid var(--need-line);
  background: var(--need);
  color: #9f1f1f;
  padding: 5px 6px;
}

.last-location small {
  color: #9f1f1f;
}

.moved-location-marker {
  gap: 2px;
  border: 1px solid #d9a900;
  border-left: 4px solid #d9a900;
  background: #fff4bd;
  color: #5d4300;
  padding: 5px 6px;
}

.moved-location-marker small {
  color: #5d4300;
}

.truck-status-card {
  gap: 2px;
  border: 1px solid #8f98a3;
  border-left: 4px solid #4f5965;
  background: #d8dde2;
  color: #202a33;
  padding: 5px 6px;
}

.load-card:hover,
.last-location:hover,
.moved-location-marker:hover,
.truck-status-card:hover,
.schedule-note-card:hover,
.home-reset-card:hover {
  outline: 2px solid rgba(16, 24, 32, 0.14);
  outline-offset: 0;
}

.truck-status-card small {
  color: #4f5965;
}

.truck-ready-location {
  border-color: #d87d7d;
  background: #ffe0e0;
}

.home-reset-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 42px;
  gap: 1px;
  align-content: center;
  border: 1px solid #b969bd;
  border-left: 4px solid #8a3d90;
  border-radius: 4px;
  background: #d183d4;
  color: #111111;
  justify-items: center;
  padding: 5px 6px;
}

.home-reset-card b {
  font-size: 10px;
  line-height: 1.1;
}

.home-reset-card span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-reset-card small {
  font-size: 9px;
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-reset-remove {
  position: static;
  justify-self: center;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 62px;
  height: 20px;
  margin-top: 3px;
  border: 1px solid rgba(75, 20, 80, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  padding: 1px 9px;
  color: #111111;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.home-reset-card.is-removing {
  opacity: 0.55;
  pointer-events: none;
}

.home-reset-remove:hover,
.home-reset-remove:focus-visible {
  border-color: #7a267f;
  background: #fff;
  color: #7a1f36;
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 1px;
}

.empty {
  padding: 16px;
}

.loading-state {
  color: #53605d;
  font-weight: 800;
}

.error {
  color: #b42020;
}

.resource-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 7px;
}

.resource-tabs button {
  padding: 7px 5px;
  font-size: 12px;
}

.resource-tabs button.active {
  color: white;
  background: var(--green);
  border-color: var(--green);
}

.multi-filter {
  position: relative;
}

.multi-filter-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(20, 35, 30, 0.18);
  padding: 6px;
}

.resource-state-search {
  width: 100%;
  min-height: 28px;
  margin-bottom: 6px;
  padding: 5px 7px;
  border: 1px solid #b7c8c2;
  border-radius: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.multi-filter-menu label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.multi-filter-menu label[hidden] {
  display: none !important;
}

.multi-filter-menu .resource-state-select-all {
  border-bottom: 1px solid #e3ebe7;
  margin-bottom: 4px;
  padding-bottom: 6px;
}

.multi-filter-menu input {
  width: auto;
  min-height: auto;
  padding: 0;
}

.resource-match-context {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #c6d8d0;
  background: #edf7f2;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.25;
}

.resource-match-context button {
  padding: 4px 8px;
  font-size: 11px;
}

.resource-summary {
  border: 1px solid #c6d8d0;
  background: #edf7f2;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 800;
}

.resource-list {
  display: grid;
  gap: 5px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 24, 32, 0.36);
}

.modal-overlay[hidden] {
  display: none;
}

.modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.22);
}

.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
}

.eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 4px;
}

.modal-panel h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

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

.detail-grid div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #fbfcf8;
}

.detail-grid .detail-grid-wide {
  grid-column: 1 / -1;
}

.detail-grid span {
  display: block;
  color: #52605c;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
}

.detail-grid strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

.connection-detail-grid small {
  display: block;
  margin-top: 4px;
  color: #52605c;
  line-height: 1.35;
}

.load-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.load-detail-toolbar h3 {
  margin: 0;
  font-size: 16px;
}

.load-detail-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #52605c;
  font-size: 12px;
  font-weight: 800;
}

.empty-location-card small {
  display: block;
  margin-top: 3px;
  color: #52605c;
  font-size: 13px;
  font-weight: 800;
}

.empty-location-edit {
  display: grid;
  gap: 6px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.primary-action {
  color: white;
  background: var(--green);
  border-color: var(--green);
}

.danger-action {
  color: white;
  background: #a92222;
  border-color: #a92222;
}

.empty-move-form {
  display: grid;
  gap: 10px;
}

.empty-move-form .detail-grid label,
.truck-status-form .detail-grid label,
.truck-status-eta-form .detail-grid label,
.truck-ready-form .detail-grid label {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #fbfcf8;
}

.empty-move-form .wide-field,
.truck-status-form .wide-field,
.truck-status-eta-form .wide-field,
.truck-ready-form .wide-field {
  grid-column: 1 / -1;
}

.truck-status-form .checkbox-field,
.truck-ready-form .checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.truck-status-form .checkbox-field input,
.truck-ready-form .checkbox-field input {
  width: auto;
}

.truck-status-form,
.truck-status-note-form,
.truck-status-eta-form,
.truck-ready-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.truck-status-eta-form,
.truck-ready-form {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.truck-status-feedback {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #a7d7bb;
  border-radius: 10px;
  background: #ecf9f1;
  color: #17603b;
  font-weight: 800;
  line-height: 1.35;
  margin: 12px 0;
  padding: 11px 13px;
}

.truck-status-feedback[hidden] {
  display: none;
}

.truck-status-feedback.error {
  border-color: #efb0aa;
  background: #fff0ef;
  color: #a1261c;
}

.truck-status-feedback .jitc-icon {
  flex: 0 0 auto;
  height: 19px;
  width: 19px;
}

.truck-status-eta-form h3,
.truck-ready-form h3 {
  margin: 0;
}

.status-notes-panel {
  margin-top: 10px;
}

.form-hint {
  margin-top: 2px;
  font-size: 13px;
  color: #53605d;
}

@media (max-width: 900px) {
  body {
    grid-template-columns: var(--sidebar-collapsed-width) 1fr;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .sidebar-brand {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 58px;
    padding: 10px 0;
  }

  .brand-mark,
  .brand-text,
  .nav-label,
  .nav-section-title,
  .nav-chevron,
  .nav-submenu,
  .sidebar-account span,
  .sidebar-account small,
  .sidebar-account button {
    display: none;
  }

  .sidebar-nav {
    padding: 10px 7px;
    gap: 7px;
    overflow-x: hidden;
  }

  .nav-section {
    gap: 5px;
  }

  .nav-section + .nav-section {
    padding-top: 8px;
  }

  .nav-item {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 42px;
    padding: 0;
    border-left: 0;
  }

  .nav-icon {
    width: 32px;
    height: 32px;
  }

  .nav-icon svg {
    width: 22px;
    height: 22px;
  }

  .nav-badge {
    position: absolute;
    top: 3px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 9px;
  }

  .sidebar-account {
    min-height: 52px;
    padding: 10px 0;
    justify-items: center;
  }

  .sidebar-account::before {
    content: "";
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
  }

  .user-toolbar-actions,
  .user-modal-grid {
    grid-template-columns: 1fr;
  }

  .user-toolbar-actions {
    display: grid;
  }

  .user-filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .user-filter-bar label {
    grid-column: 1 / -1;
    margin-left: 0;
  }

  .user-bulk-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .user-bulk-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .user-detail-grid {
    grid-template-columns: 1fr;
  }

  .access-profile-layout,
  .access-profile-fields,
  .permission-checks {
    grid-template-columns: 1fr;
  }

  .access-profile-editor-head {
    display: grid;
  }
}

.routing-controls {
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 9px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.78);
}

.routing-window {
  min-height: 37px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #d6dfd3;
  border-radius: 6px;
  background: #f9fbf5;
  font-weight: 700;
  color: #32423d;
}

.routing-layout {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 300px;
  gap: 8px;
  align-items: start;
}

.routing-loads-panel,
.routing-resource-panel {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.64);
}

.routing-loads-panel {
  padding: 8px;
}

.routing-resource-panel {
  position: sticky;
  top: 10px;
  display: grid;
  gap: 8px;
  padding: 8px;
  max-height: calc(100vh - 20px);
  overflow: auto;
}

.routing-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

.routing-panel-head h2,
.routing-group h3 {
  margin: 0;
}

.routing-panel-head h2 {
  font-size: 17px;
}

.routing-panel-head span {
  color: #53605d;
  font-weight: 700;
}

.routing-group {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
}

.routing-group h3 {
  padding: 4px 7px;
  background: #e7eee6;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 13px;
}

.routing-load-list {
  display: grid;
  gap: 5px;
}

.routing-load-card {
  display: grid;
  grid-template-columns: minmax(245px, 0.95fr) minmax(420px, 1.55fr) auto;
  gap: 4px 8px;
  align-items: center;
  border: 1px solid #dfc06a;
  border-left: 4px solid #d18816;
  border-radius: 6px;
  background: #fff4cf;
  padding: 6px 8px;
}

.routing-load-card.priority {
  border-color: #d9912a;
  background: #fff0bd;
}

.routing-load-card.ready-confirm {
  border-color: #9f8bd3;
  border-left-color: #6846a2;
  background: #f3edff;
}

.routing-load-card.split-yard-leg {
  border-color: #7fb4aa;
  border-left-color: #0f7f72;
  background: #ecfaf6;
}

.routing-load-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid #7fb4aa;
  border-radius: 4px;
  background: #d8f2ea;
  color: #0e5d54;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
  vertical-align: middle;
}

.routing-load-dedicated-badge {
  border-color: #7c5ce8;
  background: #ece5ff;
  color: #4a2ea8;
}

.routing-load-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.routing-load-card h3 {
  display: inline-block;
  margin: 1px 0 0;
  padding: 2px 5px;
  border: 1px solid #c9d8d3;
  border-radius: 5px;
  background: #e7f0ec;
  font-size: 13px;
  line-height: 1.15;
}

.routing-load-card header span {
  color: #6a5d34;
  font-weight: 700;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.routing-load-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: #5e675f;
  font-size: 11px;
  line-height: 1.2;
}

.routing-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  grid-column: 2;
  grid-row: 1 / span 2;
  gap: 5px;
}

.routing-load-actions {
  display: flex;
  justify-content: flex-end;
  grid-column: 3;
  grid-row: 1 / span 2;
  gap: 6px;
}

.routing-load-actions button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.broker-out-panel {
  margin-top: 10px;
}

.broker-load-list {
  display: grid;
  justify-items: center;
  overflow-x: auto;
}

.broker-load-list .routing-group {
  width: fit-content;
  max-width: 100%;
}

.broker-main-table {
  width: fit-content;
  min-width: 1100px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #d9e1ea;
  border-radius: 6px;
  background: white;
}

.broker-main-head,
.broker-main-row {
  display: grid;
  grid-template-columns: 60px 230px 230px 185px 250px 96px;
}

.broker-main-head {
  background: #f1f1f4;
  color: #8b86a3;
  font-size: 11px;
  font-weight: 700;
}

.broker-main-head div,
.broker-main-row > div {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 2px 5px;
  border-right: 1px solid #e2e7ee;
}

.broker-main-head div:last-child,
.broker-main-row > div:last-child {
  border-right: 0;
}

.broker-main-item {
  border-bottom: 1px dashed #cddbea;
  background: #fff7df;
  cursor: pointer;
}

.broker-main-item:last-child {
  border-bottom: 0;
}

.broker-main-row {
  color: #192a40;
  font-size: 13px;
  line-height: 1.12;
}

.broker-main-row strong,
.broker-main-row p {
  margin: 0;
}

.broker-main-pickup,
.broker-main-delivery {
  gap: 1px;
  justify-items: center !important;
  text-align: center !important;
  font-weight: 800;
  line-height: 1.1;
}

.broker-main-pickup > strong,
.broker-main-delivery > strong {
  display: block;
}

.broker-load-link button {
  border: 0;
  background: transparent;
  padding: 0;
  color: #0057a8;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.broker-main-requirements {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  align-items: center;
  justify-items: center;
}

.broker-main-requirements .broker-requirements {
  grid-column: auto;
  grid-row: auto;
  gap: 0;
  font-size: 11px;
  line-height: 1.1;
}

.broker-main-requirements .broker-requirements strong {
  font-size: 12px;
}

.broker-main-note {
  min-width: 0;
}

.broker-main-note button {
  width: auto;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.38);
  color: #26352f;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  padding: 3px 6px;
  min-height: 24px;
}

.broker-main-note button:hover {
  border-color: #b9c9c1;
  background: #ffffff;
}

.broker-main-action button {
  min-height: 32px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  white-space: normal;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  width: auto;
  min-width: 78px;
}

.broker-main-action button span {
  display: block;
}

.broker-source-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 5px;
  background: #eef1ff;
  color: #264288;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.broker-out-page main,
.broker-out-page main *,
.broker-out-page strong,
.broker-out-page b,
.broker-out-page button,
.broker-out-page input,
.broker-out-page select {
  letter-spacing: 0;
}

.broker-middle-stop-row {
  background: #f8fcff;
  color: #41515f;
}

.broker-middle-stop-row > div {
  border-top: 1px solid #e6edf3;
}

.broker-wide-cell {
  grid-column: span 2;
}

.broker-load-card {
  grid-template-columns: minmax(280px, 0.95fr) minmax(260px, 0.82fr) minmax(210px, 0.55fr);
  background: #fff7df;
  cursor: pointer;
}

.broker-load-card header {
  grid-column: 1;
}

.broker-load-card .routing-load-meta {
  grid-column: 1;
}

.broker-requirements {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  align-content: center;
  gap: 1px;
  min-width: 0;
  color: #17231f;
  font-size: 11px;
  line-height: 1.16;
}

.broker-requirements strong {
  font-size: 12px;
  color: #07110e;
}

.broker-notes {
  display: grid;
  gap: 4px;
}

.broker-note,
.broker-note-empty {
  border: 1px solid #d6dfd5;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.72);
  padding: 4px 6px;
  color: #48524d;
  font-size: 11px;
  line-height: 1.2;
}

.broker-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
}

.broker-note span {
  color: #6d7770;
  white-space: nowrap;
}

.broker-note p {
  grid-column: 1 / -1;
  margin: 0;
}

.broker-notes-panel {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.broker-latest-note {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  color: #17231f;
  font-size: 12px;
  line-height: 1.25;
}

.broker-latest-note span {
  color: #52605c;
  font-weight: 700;
}

.broker-latest-note strong {
  display: inline;
  color: #07110e;
  font-size: 12px;
}

.broker-latest-note button {
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0;
}

.broker-latest-note button:hover {
  text-decoration: underline;
}

.broker-older-notes {
  display: grid;
  gap: 5px;
  width: min(520px, 100%);
}

.broker-older-notes[hidden] {
  display: none;
}

.broker-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  align-content: center;
  align-items: center;
}

.broker-actions > div {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.broker-actions button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.broker-detail-modal {
  width: min(880px, 100%);
  text-align: center;
}

.broker-detail-modal .eyebrow,
.broker-detail-modal h2 {
  text-align: center;
}

.broker-detail-grid pre {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  font-size: 12px;
  color: #17231f;
}

.broker-detail-grid > div {
  text-align: center;
}

.broker-detail-grid > div > span {
  text-align: center;
}

.broker-stop-table {
  display: grid;
  grid-template-columns: 88px 84px minmax(185px, 1fr) 84px minmax(185px, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
}

.broker-stop-head,
.broker-stop-cell {
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: white;
  padding: 8px 10px;
}

.broker-stop-head {
  background: #f1f1f4;
  color: #8b86a3;
  font-size: 11px;
  font-weight: 700;
}

.broker-stop-cell {
  border-top: 1px solid #dbe3ed;
}

.broker-stop-table div:nth-child(5n) {
  border-right: 0;
}

.broker-stop-table strong {
  display: block;
  color: #192a40;
  font-size: 12px;
  line-height: 1.25;
}

.broker-stop-table p {
  margin: 2px 0 0;
  color: #192a40;
  font-size: 12px;
  line-height: 1.25;
}

.broker-stop-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 0;
}

.detail-grid .broker-stop-timeline,
.detail-grid .broker-stop-timeline div {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.detail-grid .broker-stop-timeline {
  border: 1px solid var(--line);
  padding: 0;
}

.detail-grid .broker-stop-timeline .broker-timeline-stop {
  position: relative;
  min-height: 148px;
  border: 0;
  border-right: 1px solid #dbe3ed;
  padding: 10px 12px 12px;
  text-align: center;
}

.detail-grid .broker-stop-timeline .broker-timeline-stop:last-child {
  border-right: 0;
}

.broker-timeline-title {
  border: 0;
  padding: 0;
  color: #5c6661;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.broker-timeline-marker {
  position: relative;
  border: 0;
  height: 28px;
  margin: 4px 0 8px;
  padding: 0;
}

.broker-timeline-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  right: -50%;
  top: 13px;
  height: 1px;
  background: #ccd6d0;
}

.broker-timeline-stop:last-child .broker-timeline-marker::before {
  right: 0;
}

.broker-timeline-marker span {
  position: relative;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  border: 4px solid #202525;
  border-radius: 50%;
  background: #fff;
  margin: 0 auto;
}

.broker-timeline-stop strong {
  color: #07110e;
  font-size: 13px;
  line-height: 1.25;
}

.broker-timeline-stop p {
  margin: 3px 0 0;
  color: #111b18;
  font-size: 12px;
  line-height: 1.25;
}

.broker-timeline-appt {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  border: 0;
  padding: 0;
  margin-top: 12px;
}

.broker-timeline-appt span {
  margin: 0;
  color: #111b18;
  font-size: 12px;
  font-weight: 500;
}

.broker-timeline-appt strong {
  font-size: 12px;
  font-weight: 500;
}

.broker-load-number-cell strong {
  font-size: 14px;
}

.broker-date-cell strong {
  font-weight: 500;
}

.broker-detail-grid .broker-requirements {
  grid-column: auto;
  grid-row: auto;
  margin-top: 3px;
}

.modal-broker-notes {
  max-height: 180px;
  overflow: auto;
  margin-top: 4px;
}

.broker-modal-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.broker-modal-actions textarea {
  min-height: 66px;
  resize: vertical;
  border: 1px solid #c7d4c7;
  border-radius: 5px;
  padding: 7px 9px;
  font: inherit;
  font-size: 12px;
}

.broker-modal-actions > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.routing-slot {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 7px;
  border: 1px dashed #aab8aa;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.74);
  color: #54615b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  min-width: 0;
}

.routing-slot span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.routing-slot.filled {
  border-style: solid;
  background: #e2f1eb;
  color: #102c23;
}

.routing-slot.drag-over {
  outline: 2px solid var(--green);
  background: #d6f0e5;
}

.routing-slot button {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 4px;
  color: #456056;
  font-size: 12px;
}

.routing-resource-list {
  max-height: none;
}

.routing-resource-card {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 6px;
  background: #fafdf7;
  cursor: grab;
}

.routing-resource-card:active {
  cursor: grabbing;
}

.routing-resource-card strong {
  font-size: 12px;
}

.routing-resource-card span,
.routing-resource-card small {
  color: #50605a;
  font-size: 11px;
}

.driver-detail-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.driver-detail-trigger:hover,
.driver-detail-trigger:focus-visible {
  color: #155bd7;
  text-decoration: underline;
}

.driver-card-latest-note {
  color: #244f3b !important;
  font-weight: 700;
}

.routing-resource-card.driver-profile-card {
  cursor: pointer;
}

.routing-resource-card.driver-profile-card:hover,
.routing-resource-card.driver-profile-card:focus-visible {
  border-color: #6ba489;
  box-shadow: 0 0 0 3px rgba(52, 125, 94, 0.12);
  outline: none;
}

.driver-resource-select {
  justify-self: start;
  margin-top: 5px;
  padding: 4px 8px;
  border: 1px solid #9db7d3;
  border-radius: 6px;
  background: #f1f6fc;
  color: #174a82;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.driver-resource-select:hover,
.driver-resource-select:focus-visible {
  border-color: #347d5e;
  background: #e8f6ef;
  color: #245c46;
}

.driver-detail-panel {
  width: min(720px, calc(100vw - 32px));
}

.driver-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.driver-detail-summary > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  padding: 9px 10px;
}

.driver-detail-summary > div.wide {
  grid-column: 1 / -1;
}

.driver-detail-summary dt {
  color: #627386;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.driver-detail-summary dd {
  margin: 3px 0 0;
  color: #13253a;
  font-size: 13px;
  font-weight: 700;
}

.driver-detail-notes {
  display: grid;
  gap: 8px;
}

.driver-detail-notes h3 {
  margin: 4px 0;
}

.driver-detail-notes article {
  border-left: 4px solid #4b8d68;
  border-radius: 7px;
  background: #f1f8f4;
  padding: 9px 11px;
}

.driver-detail-notes article p {
  margin: 0 0 4px;
  white-space: pre-wrap;
}

.driver-detail-notes article small {
  color: #607080;
}

.driver-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(145px, auto) repeat(5, auto);
  gap: 6px;
  align-items: end;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 8px;
  margin-bottom: 6px;
}

.driver-filters input[type="search"] {
  min-width: 220px;
}

.driver-filter-check {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  white-space: nowrap;
}

.driver-export-btn {
  white-space: nowrap;
  align-self: end;
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
  font-weight: 700;
}

.driver-export-btn:hover {
  background: #0f684d;
  border-color: #0f684d;
}

.driver-list {
  display: grid;
  gap: 4px;
}

.driver-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-left: 4px solid #d18816;
  border-radius: 6px;
  padding: 6px 8px;
}

.driver-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.driver-card h3 {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.2;
}

.driver-source-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #e2f0ff;
  color: #155b9c;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
}

.driver-planned-ahead-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
  padding: 3px 8px;
  border: 1px solid #e0bd7c;
  border-radius: 999px;
  background: #fff3d9;
  color: #6b4308;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.driver-planned-ahead-badge:hover {
  background: #fbe6b8;
}

.driver-meta,
.driver-load-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  color: #4c5c57;
  font-size: 11px;
  line-height: 1.25;
}

.driver-load-line {
  margin-top: 3px;
  font-weight: 700;
}

.driver-confirm-line {
  margin-top: 2px;
  color: #1b7358;
  font-size: 11px;
  font-weight: 800;
}

.driver-badge {
  align-self: start;
  white-space: nowrap;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 800;
  background: #fff0c4;
  color: #7b4d00;
}

.driver-badge.available {
  background: #dff1e8;
  color: var(--green);
}

.driver-badge.on_load {
  background: #dfeafa;
  color: #195e9f;
}

.driver-badge.vacation {
  background: #f1def6;
  color: #78408b;
}

.driver-badge.away_from_home {
  background: #f7e3c4;
  color: #8a4b00;
}

.driver-badge.dns,
.driver-badge.unresponsive {
  background: #f8d9d9;
  color: var(--need-line);
}

.driver-notes {
  margin-top: 3px;
  font-size: 11px;
  color: #4c5c57;
  line-height: 1.25;
}

.driver-latest-note {
  display: inline;
  margin-right: 6px;
}

.driver-notes-empty {
  color: #77837f;
}

.driver-all-notes {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f4f6f1;
  border: 1px solid #d8e0d5;
}

.driver-all-notes[hidden],
.open-truck-all-notes[hidden] {
  display: none;
}

.text-action {
  border: 0;
  background: transparent;
  color: var(--green);
  padding: 0;
  font-size: 11px;
  font-weight: 800;
}

.driver-inline-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(5, auto);
  gap: 5px;
  align-items: end;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #d9e1d6;
}

.driver-inline-form input {
  padding: 5px 7px;
}

.driver-inline-form button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

.driver-note-field {
  min-width: 180px;
}

.driver-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}

.driver-checkin-modern-page main {
  background: #f3f6fb;
}

.driver-checkin-modern-page .driver-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}

.driver-checkin-modern-page .driver-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 16px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.driver-checkin-modern-page .driver-kpi-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}

.driver-checkin-modern-page .driver-kpi-card strong {
  display: block;
  color: #0f172a;
  font-size: 22px;
  line-height: 1;
}

.driver-checkin-modern-page .driver-kpi-card span:last-child {
  display: block;
  margin-top: 5px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.driver-checkin-modern-page .driver-kpi-card.green .driver-kpi-icon {
  background: #dcfce7;
  color: #059669;
}

.driver-checkin-modern-page .driver-kpi-card.red .driver-kpi-icon {
  background: #ffe4e6;
  color: #e11d48;
}

.driver-checkin-modern-page .driver-kpi-card.purple .driver-kpi-icon {
  background: #ede9fe;
  color: #7c3aed;
}

.driver-checkin-modern-page .driver-filters {
  grid-template-columns: minmax(300px, 1.6fr) auto repeat(4, minmax(120px, auto)) auto;
  gap: 12px;
  align-items: end;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.driver-checkin-modern-page .driver-filters label {
  color: #475569;
  font-size: 11px;
  font-weight: 850;
}

.driver-checkin-modern-page .driver-filters input,
.driver-checkin-modern-page .driver-filters select {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
}

.driver-checkin-modern-page .driver-filters input[type="search"] {
  min-width: 300px;
  padding-left: 14px;
}

.driver-checkin-modern-page .driver-filter-check {
  min-height: 40px;
  border-color: #dbe3ef;
  border-radius: 10px;
  color: #334155;
  font-weight: 850;
}

.driver-checkin-modern-page .driver-export-btn {
  min-height: 40px;
  border-color: #10b981;
  border-radius: 10px;
  background: #ffffff;
  color: #047857;
  box-shadow: none;
}

.driver-checkin-modern-page #driverSummary {
  margin: 0 0 10px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #334155;
  font-weight: 850;
}

.driver-checkin-modern-page .driver-list {
  gap: 8px;
}

.driver-checkin-modern-page .driver-check-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(300px, 1fr) minmax(560px, 1.7fr);
  gap: 14px;
  align-items: center;
  min-height: 94px;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-left: 4px solid #f59e0b;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.driver-checkin-modern-page .driver-check-card:hover {
  background: #f8fbff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
}

.driver-checkin-modern-page .driver-check-card.ready {
  border-left-color: #10b981;
}

.driver-checkin-modern-page .driver-check-card.unresponsive {
  border-left-color: #ef4444;
}

.driver-checkin-modern-page .driver-check-card.called {
  border-left-color: #8b5cf6;
}

.driver-checkin-modern-page .driver-status-mark {
  display: inline-flex;
  min-width: 78px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #d97706;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.driver-checkin-modern-page .driver-check-card.ready .driver-status-mark {
  background: #dcfce7;
  color: #059669;
}

.driver-checkin-modern-page .driver-check-card.unresponsive .driver-status-mark {
  background: #ffe4e6;
  color: #e11d48;
}

.driver-checkin-modern-page .driver-check-card.called .driver-status-mark {
  background: #ede9fe;
  color: #7c3aed;
}

.driver-checkin-modern-page .driver-name-line {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.driver-checkin-modern-page .driver-name-line h3 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.2;
}

.driver-checkin-modern-page .driver-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 4px 12px;
  margin-top: 7px;
  color: #475569;
  font-size: 12px;
}

.driver-checkin-modern-page .driver-info-grid b {
  color: #64748b;
  font-weight: 850;
}

.driver-checkin-modern-page .driver-badge {
  border-radius: 999px;
  padding: 4px 8px;
  background: #fef3c7;
  color: #b45309;
  font-size: 10px;
}

.driver-checkin-modern-page .driver-badge.available {
  background: #dcfce7;
  color: #047857;
}

.driver-checkin-modern-page .driver-badge.unresponsive,
.driver-checkin-modern-page .driver-badge.dns {
  background: #ffe4e6;
  color: #be123c;
}

.driver-checkin-modern-page .driver-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.driver-checkin-modern-page .driver-latest-note,
.driver-checkin-modern-page .driver-notes-empty,
.driver-checkin-modern-page .text-action {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.driver-checkin-modern-page .text-action {
  border: 0;
  background: #eff6ff;
  color: #2563eb;
}

.driver-checkin-modern-page .driver-all-notes {
  flex-basis: 100%;
  border-color: #dbe3ef;
  border-radius: 10px;
  background: #f8fafc;
}

.driver-checkin-modern-page .driver-check-actions {
  min-width: 0;
}

.driver-checkin-modern-page .driver-inline-form {
  display: grid;
  grid-template-columns: 132px 110px minmax(180px, 1fr) repeat(6, auto);
  gap: 8px;
  align-items: end;
  margin: 0;
  padding: 0;
  border: 0;
}

.driver-checkin-modern-page .driver-inline-form label {
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: 11px;
  font-weight: 850;
}

.driver-checkin-modern-page .driver-inline-form input {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  font-size: 12px;
}

.driver-checkin-modern-page .driver-inline-form button,
.driver-checkin-modern-page .driver-call-btn {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.driver-checkin-modern-page .driver-inline-form .primary-action {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
}

.driver-checkin-modern-page .driver-inline-form [data-action="dns"] {
  color: #be123c;
}

.driver-checkin-modern-page .driver-inline-form [data-action="unresponsive"] {
  color: #b45309;
}

.driver-checkin-modern-page .driver-call-btn {
  border-color: #fde68a;
  background: #fef3c7;
  color: #b45309;
}

.driver-checkin-modern-page .driver-call-btn.disabled {
  color: #94a3b8;
  pointer-events: none;
}

.driver-checkin-modern-page .driver-pager {
  justify-content: space-between;
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  color: #475569;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.driver-checkin-modern-page .driver-pager div {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.driver-checkin-modern-page .driver-pager b,
.driver-checkin-modern-page .driver-pager button {
  display: grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
}

.driver-checkin-modern-page .driver-pager b {
  background: #2563eb;
  color: #ffffff;
}

@media (max-width: 1500px) {
  .driver-checkin-modern-page .driver-kpi-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .driver-checkin-modern-page .driver-filters {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }

  .driver-checkin-modern-page .driver-filters input[type="search"] {
    grid-column: span 2;
  }

  .driver-checkin-modern-page .driver-check-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .driver-checkin-modern-page .driver-check-actions {
    grid-column: 2;
  }

  .driver-checkin-modern-page .driver-inline-form {
    grid-template-columns: repeat(3, minmax(120px, 1fr)) repeat(6, auto);
  }
}

/* Settings: active Samsara-to-Planning driver mapping. */
.samsara-mapping-page main {
  max-width: none;
}

.samsara-mapping-topbar {
  align-items: flex-start;
}

.samsara-mapping-topbar .eyebrow {
  margin-bottom: 4px;
}

.samsara-mapping-message {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
}

.samsara-mapping-message.is-success {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.samsara-mapping-message.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b42318;
}

.samsara-mapping-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.samsara-mapping-summary button,
.samsara-mapping-summary article {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid #d9e3f1;
  border-radius: 15px;
  background: #fff;
  color: #334155;
  text-align: left;
}

.samsara-mapping-summary button {
  cursor: pointer;
}

.samsara-mapping-summary button.is-active {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.samsara-mapping-summary strong {
  min-width: 38px;
  color: #0f172a;
  font-size: 26px;
}

.samsara-mapping-summary span {
  font-weight: 800;
}

.samsara-mapping-panel {
  overflow: hidden;
  border: 1px solid #d9e3f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.samsara-mapping-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

.samsara-mapping-toolbar label {
  display: grid;
  flex: 1;
  max-width: 720px;
  gap: 7px;
  font-weight: 800;
}

.samsara-mapping-toolbar input,
.planning-driver-cell select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

.samsara-mapping-toolbar input {
  padding: 0 13px;
}

.samsara-mapping-warning {
  margin: 0 18px 10px;
  padding: 10px 13px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-weight: 700;
}

.samsara-mapping-table-head,
.samsara-mapping-row {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(380px, 1.2fr);
}

.samsara-mapping-table-head {
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #dbe5f1;
  background: linear-gradient(90deg, #fff7db 0 45%, #eaf5ff 45% 100%);
  color: #334155;
  font-weight: 900;
}

.samsara-mapping-table-head span {
  padding: 12px 18px;
}

.samsara-mapping-row {
  min-height: 72px;
  border-bottom: 1px solid #e7edf5;
  background: #fff;
}

.samsara-mapping-row.is-mapped {
  background: #ecfdf3;
}

.samsara-mapping-row.planning-unmapped-row {
  background: #f8fbff;
}

.samsara-driver-cell,
.planning-driver-cell {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
}

.samsara-driver-cell {
  border-right: 1px solid #dbe5f1;
}

.samsara-driver-cell div {
  display: grid;
  gap: 4px;
}

.samsara-driver-cell strong {
  color: #0f172a;
}

.samsara-driver-cell small {
  color: #64748b;
}

.samsara-mapping-status {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  background: #fff;
}

.samsara-mapping-row.is-mapped .samsara-mapping-status {
  border-color: #16a34a;
  background: #22c55e;
  box-shadow: inset 0 0 0 4px #ecfdf3;
}

.planning-driver-cell select {
  padding: 0 12px;
}

.planning-unmapped-state {
  display: grid;
  gap: 4px;
}

.planning-unmapped-state strong {
  color: #1d4ed8;
}

.planning-unmapped-state small {
  color: #64748b;
}

.samsara-mapping-rows .empty-state {
  padding: 28px 18px;
}

@media (max-width: 900px) {
  .samsara-mapping-summary {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .samsara-mapping-table-head {
    display: none;
  }

  .samsara-mapping-row {
    grid-template-columns: 1fr;
  }

  .samsara-driver-cell {
    border-right: 0;
    border-bottom: 1px solid #dbe5f1;
  }
}

/* Settings: read-only LoadStop fleet snapshots and Planning-owned mappings. */
.loadstop-mapping-page main {
  max-width: none;
}

.loadstop-mapping-topbar {
  align-items: flex-start;
}

.loadstop-readonly-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid #86efac;
  border-radius: 14px;
  background: #f0fdf4;
  color: #166534;
}

.loadstop-readonly-banner strong {
  flex: 0 0 auto;
  text-transform: uppercase;
}

.loadstop-mapping-message {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
}

.loadstop-mapping-message.is-success {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.loadstop-mapping-message.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b42318;
}

.loadstop-mapping-audit {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid #d9e3f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.loadstop-audit-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.loadstop-audit-heading h2,
.loadstop-audit-card h3 {
  margin: 0;
}

.loadstop-audit-heading p {
  margin: 3px 0 0;
  color: #64748b;
}

.loadstop-audit-heading button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-weight: 800;
}

.loadstop-audit-status {
  margin: 0 0 12px;
  color: #475569;
  font-weight: 700;
}

.loadstop-audit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.loadstop-audit-card {
  padding: 14px;
  border: 1px solid #dbe5f1;
  border-radius: 14px;
  background: #f8fafc;
}

.loadstop-audit-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.loadstop-audit-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.loadstop-audit-badge.is-ready {
  background: #dcfce7;
  color: #166534;
}

.loadstop-audit-badge.is-in_progress {
  background: #dbeafe;
  color: #1d4ed8;
}

.loadstop-audit-badge.is-needs_attention {
  background: #fee2e2;
  color: #b42318;
}

.loadstop-audit-badge.is-not_started,
.loadstop-audit-badge.is-no_snapshot {
  background: #fef3c7;
  color: #92400e;
}

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

.loadstop-audit-metrics p {
  display: grid;
  margin: 0;
  padding: 9px;
  border-radius: 10px;
  background: #fff;
}

.loadstop-audit-metrics strong {
  color: #0f172a;
  font-size: 20px;
}

.loadstop-audit-metrics span,
.loadstop-audit-detail {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.loadstop-audit-detail {
  margin: 10px 0 0;
  line-height: 1.45;
}

.loadstop-resource-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.loadstop-resource-tabs button {
  min-width: 130px;
  padding: 11px 18px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-weight: 900;
  cursor: pointer;
}

.loadstop-resource-tabs button.is-active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.loadstop-mapping-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.loadstop-mapping-summary > article,
.loadstop-mapping-summary > button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid #d9e3f1;
  border-radius: 15px;
  background: #fff;
}

.loadstop-mapping-summary > button {
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.loadstop-mapping-summary > button:hover,
.loadstop-mapping-summary > button.is-active {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.loadstop-mapping-summary strong {
  color: #0f172a;
  font-size: 26px;
}

.loadstop-mapping-summary span {
  color: #334155;
  font-weight: 800;
}

.loadstop-mapping-panel {
  overflow: hidden;
  border: 1px solid #d9e3f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.loadstop-mapping-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

.loadstop-mapping-toolbar label {
  display: grid;
  flex: 1;
  min-width: 240px;
  gap: 7px;
  font-weight: 800;
}

.loadstop-mapping-toolbar input,
.planning-resource-cell select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

.loadstop-mapping-toolbar input {
  padding: 0 13px;
}

.loadstop-mapping-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.loadstop-refresh-status {
  margin: 0;
  padding: 0 18px 14px;
  color: #64748b;
  font-weight: 700;
}

.loadstop-mapping-table-head,
.loadstop-mapping-row {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(380px, 1.15fr);
}

.loadstop-mapping-table-head {
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #dbe5f1;
  background: linear-gradient(90deg, #fff7db 0 47%, #eaf5ff 47% 100%);
  color: #334155;
  font-weight: 900;
}

.loadstop-mapping-table-head span {
  padding: 12px 18px;
}

.loadstop-mapping-table-head[hidden] {
  display: none;
}

.loadstop-planning-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  padding: 18px;
}

.loadstop-planning-view-card {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}

.loadstop-planning-view-card strong {
  color: #0f172a;
}

.loadstop-planning-view-card small {
  color: #64748b;
}

.loadstop-mapping-row {
  min-height: 76px;
  border-bottom: 1px solid #e7edf5;
}

.loadstop-mapping-row.is-mapped {
  background: #ecfdf3;
}

.loadstop-mapping-row.is-inactive {
  opacity: 0.68;
}

.loadstop-mapping-row.is-pending-unmap {
  background: #fff7ed;
}

.loadstop-resource-cell,
.planning-resource-cell {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
}

.loadstop-resource-cell {
  border-right: 1px solid #dbe5f1;
}

.loadstop-resource-cell div {
  display: grid;
  gap: 4px;
}

.loadstop-resource-cell strong {
  color: #0f172a;
}

.loadstop-resource-cell small {
  color: #64748b;
}

.loadstop-mapping-status {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  background: #fff;
}

.loadstop-mapping-row.is-mapped .loadstop-mapping-status {
  border-color: #16a34a;
  background: #22c55e;
  box-shadow: inset 0 0 0 4px #ecfdf3;
}

.planning-resource-cell select {
  padding: 0 12px;
}

.loadstop-confirmed-cell {
  justify-content: space-between;
}

.loadstop-confirmed-cell > div {
  display: grid;
  gap: 4px;
}

.loadstop-confirmed-cell small {
  color: #64748b;
}

.loadstop-confirmed-cell button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #dc2626;
  border-radius: 9px;
  background: #fff;
  color: #b91c1c;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.loadstop-mapping-rows .empty-state,
.loadstop-planning-unmatched .empty-state {
  padding: 24px 18px;
}

.loadstop-mapping-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid #e2e8f0;
}

.loadstop-mapping-pagination[hidden] {
  display: none;
}

.loadstop-mapping-pagination button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.loadstop-mapping-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.loadstop-mapping-pagination span {
  color: #475569;
  font-weight: 800;
}

.loadstop-planning-unmatched {
  padding: 18px;
  background: #f8fafc;
}

.loadstop-planning-unmatched h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.loadstop-planning-unmatched > p {
  margin: 0 0 12px;
  color: #64748b;
}

#loadstopPlanningUnmatchedList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.loadstop-unmatched-pill {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
}

.loadstop-unmatched-pill small {
  color: #64748b;
}

@media (max-width: 1050px) {
  .loadstop-audit-grid {
    grid-template-columns: 1fr;
  }

  .loadstop-mapping-summary {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .loadstop-mapping-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .loadstop-mapping-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 800px) {
  .loadstop-readonly-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .loadstop-mapping-table-head {
    display: none;
  }

  .loadstop-mapping-row {
    grid-template-columns: 1fr;
  }

  .loadstop-resource-cell {
    border-right: 0;
    border-bottom: 1px solid #dbe5f1;
  }
}

@media (max-width: 980px) {
  .driver-checkin-modern-page .driver-kpi-grid,
  .driver-checkin-modern-page .driver-filters,
  .driver-checkin-modern-page .driver-check-card,
  .driver-checkin-modern-page .driver-inline-form,
  .driver-checkin-modern-page .driver-info-grid {
    grid-template-columns: 1fr;
  }

  .driver-checkin-modern-page .driver-filters input[type="search"],
  .driver-checkin-modern-page .driver-check-actions {
    grid-column: auto;
  }

  .driver-checkin-modern-page .driver-pager {
    align-items: stretch;
    flex-direction: column;
  }
}

.empty-state {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.75);
  color: #53605d;
}

@media (max-width: 1200px) {
  .routing-layout {
    grid-template-columns: 1fr;
  }

  .routing-resource-panel {
    position: static;
    max-height: none;
  }

  .routing-load-card {
    grid-template-columns: 1fr;
  }

  .routing-slots {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 1fr 1fr;
  }

  .routing-load-actions {
    grid-column: auto;
    grid-row: auto;
  }

  .tracking-card {
    grid-template-columns: 1fr;
  }

  .tracking-message {
    grid-column: auto;
  }

  .tracking-grid {
    grid-template-columns: 1fr;
  }

  .tracking-grid section {
    padding: 0;
    border-left: 0;
  }

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

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

  .user-form,
  .reset-request {
    grid-template-columns: 1fr 1fr;
  }

  .user-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .user-toolbar-actions {
    align-items: stretch;
  }

  .user-toolbar-actions input {
    width: 100%;
  }
}

.database-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 130px 150px 150px 90px;
  gap: 8px;
  align-items: center;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  margin-bottom: 8px;
}

.load-db-filters {
  grid-template-columns: minmax(260px, 1fr) minmax(290px, 340px) 110px 110px 180px 90px;
  align-items: end;
}

.load-db-date-range-field {
  display: grid;
  min-width: 290px;
  gap: 5px;
}

.load-db-date-range-field > span {
  color: #45576f;
  font-size: 11px;
  font-weight: 800;
}

.load-db-date-range-field .jitc-calendar-trigger {
  white-space: nowrap;
}

.note-history-filters {
  grid-template-columns: minmax(260px, 1fr) 120px 140px 150px 150px;
}

.user-admin-layout {
  display: grid;
  gap: 8px;
}

.user-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.user-toolbar h2 {
  margin: 0;
  font-size: 18px;
}

.user-toolbar p {
  margin: 3px 0 0;
  color: #596661;
}

.user-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-toolbar-actions input {
  width: min(300px, 32vw);
}

.user-filter-bar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.user-filter {
  min-height: 36px;
  padding: 0 12px;
  font-weight: 800;
}

.user-filter.active {
  color: white;
  background: #174d3a;
  border-color: #174d3a;
}

.user-filter-bar label {
  min-width: 180px;
  margin-left: auto;
}

.user-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 9px 12px;
  background: #f8fbff;
  border: 1px solid #cddbee;
  border-radius: 9px;
}

.user-bulk-summary,
.user-bulk-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-bulk-summary strong {
  color: #123568;
}

.user-bulk-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.user-select-column {
  width: 42px;
  min-width: 42px;
  text-align: center !important;
}

.user-select-column input {
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
}

.user-form {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(180px, 1fr) 140px minmax(180px, 1fr) 90px auto;
  gap: 8px;
  align-items: end;
  padding: 9px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.check-label {
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 36px;
}

.check-label input {
  width: auto;
}

.user-form-actions {
  display: flex;
  gap: 6px;
}

.user-filters {
  grid-template-columns: minmax(240px, 1fr);
}

.user-modal-panel {
  width: min(620px, 96vw);
}

.reset-password-panel {
  width: min(440px, 94vw);
}

.reset-password-panel label + label {
  margin-top: 10px;
}

.user-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.user-active-check {
  align-self: end;
}

.user-force-password-check {
  align-self: end;
  grid-column: span 2;
}

.user-group-badge,
.user-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
}

.user-group-badge {
  color: #1e3329;
  background: #e5eee7;
  border: 1px solid #bdcfc1;
}

.user-profile-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  color: #183d64;
  background: #e8f1ff;
  border: 1px solid #adcaf4;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
}

.user-group-badge.group-dispatch {
  color: #0f5031;
  background: #def5e6;
  border-color: #94d4aa;
}

.user-group-badge.group-accounting {
  color: #16436b;
  background: #deefff;
  border-color: #93c6ef;
}

.user-group-badge.group-tracking {
  color: #46335f;
  background: #eee6fb;
  border-color: #c3addf;
}

.user-group-badge.group-planning {
  color: #644900;
  background: #fff2bd;
  border-color: #dfc765;
}

.user-group-badge.group-admin {
  color: #762020;
  background: #ffe1df;
  border-color: #eba39f;
}

.user-status.active {
  color: #0e5a37;
  background: #dff6e8;
  border: 1px solid #9bd5af;
}

.user-status.inactive {
  color: #744018;
  background: #fff1d7;
  border: 1px solid #dfc184;
}

.user-status.pending {
  margin-top: 4px;
  color: #7a4d00;
  background: #fff4d6;
  border: 1px solid #e6c676;
}

.muted-action {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #6d7872;
  font-size: 12px;
  font-weight: 800;
}

.selected-row {
  background: #eef7f0;
  box-shadow: inset 3px 0 #174d3a;
}

.user-detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 18;
  width: min(420px, 96vw);
  height: 100vh;
  padding: 16px;
  overflow: auto;
  background: #ffffff;
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 45px rgba(0, 0, 0, 0.18);
}

.user-detail-drawer[hidden] {
  display: none;
}

.user-detail-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.user-detail-head h2 {
  margin: 0;
  font-size: 22px;
}

.user-detail-head p:last-child {
  margin: 4px 0 0;
  color: #596661;
}

.user-detail-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.user-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.user-detail-grid div {
  padding: 9px;
  background: #fbfcf8;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.user-detail-grid span {
  display: block;
  margin-bottom: 3px;
  color: #596661;
  font-size: 12px;
  font-weight: 800;
}

.user-detail-grid strong {
  display: block;
  color: #17231e;
}

.user-history {
  display: grid;
  gap: 7px;
}

.user-history h3 {
  margin: 4px 0 0;
  font-size: 16px;
}

.user-history p {
  margin: 0;
  color: #596661;
}

.user-history-item {
  display: grid;
  gap: 2px;
  padding: 9px;
  background: #f8fbf8;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.user-history-item span,
.user-history-item small {
  color: #596661;
  font-size: 12px;
}

.reset-request-panel {
  display: grid;
  gap: 8px;
}

.reset-request-panel:empty {
  display: none;
}

.reset-request-panel h2 {
  margin: 4px 0 0;
  font-size: 16px;
}

.reset-request-list {
  display: grid;
  gap: 6px;
}

.reset-request {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: #fff9e8;
  border: 1px solid #e3c978;
  border-radius: 7px;
}

.reset-request span {
  color: #655b45;
  font-size: 12px;
}

.access-profile-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.access-profile-list,
.access-profile-editor {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(16, 39, 68, 0.08);
}

.access-profile-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.access-profile-list h2,
.access-profile-editor h2 {
  margin: 0;
  font-size: 20px;
}

.access-profile-list p {
  margin: 3px 0 0;
  color: #596661;
}

.access-profile-card {
  display: grid;
  width: 100%;
  gap: 4px;
  margin-bottom: 8px;
  padding: 10px;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: none;
}

.access-profile-card.active {
  color: #ffffff;
  background: #2463ea;
  border-color: #2463ea;
}

.access-profile-card span,
.access-profile-card small {
  color: #596661;
}

.access-profile-card.active span,
.access-profile-card.active small {
  color: rgba(255, 255, 255, 0.86);
}

.access-profile-editor {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.access-profile-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.access-profile-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 10px;
}

.access-profile-fields .wide-field {
  grid-column: 1 / -1;
}

.permission-groups {
  display: grid;
  gap: 12px;
}

.permission-group {
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
}

.permission-group h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

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

.permission-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.permission-check input {
  width: auto;
  margin-top: 2px;
}

.permission-check select {
  width: 132px;
  min-width: 132px;
  padding: 7px 9px;
  border: 1px solid #c9d7e8;
  border-radius: 6px;
  background: #ffffff;
  color: #173a64;
  font-weight: 700;
}

.permission-check strong,
.permission-check small {
  display: block;
}

.permission-check small {
  margin-top: 3px;
  color: #64736d;
  line-height: 1.35;
}

.database-table-wrap {
  max-height: calc(100vh - 220px);
  overflow: auto;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.database-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.database-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e7eee6;
  color: #1c2723;
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #abb9aa;
}

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.sort-button.active {
  color: var(--green);
}

.sort-button span {
  min-width: 12px;
  text-align: center;
}

.database-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.database-table td small {
  display: block;
  margin-top: 2px;
  color: #596661;
}

.database-table tbody tr:hover {
  background: #f5fbf7;
}

.owner-drivers-page .database-filters {
  grid-template-columns: minmax(260px, 1fr) 180px 120px;
}

.owner-driver-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #28518f;
  font-size: 12px;
  font-weight: 900;
}

.owner-driver-status.available {
  background: #e8f8ee;
  color: #137641;
}

.owner-driver-status.on_load,
.owner-driver-status.away_from_home {
  background: #fff4df;
  color: #92600c;
}

.owner-driver-status.dns,
.owner-driver-status.unresponsive {
  background: #ffe9ed;
  color: #a32838;
}

.note-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.note-action {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 5px;
  background: #e9f1ec;
  color: #23473c;
  font-size: 11px;
  font-weight: 800;
}

.note-action.edited {
  background: #fff3cd;
  color: #685100;
}

.note-action.deleted {
  background: #ffe1e1;
  color: #9d1d1d;
}

.flag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.flag-list span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #e9f1ec;
  color: #23473c;
  font-size: 11px;
  font-weight: 700;
}

.row-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

.row-actions button {
  padding: 5px 8px;
  font-size: 12px;
}

.empty-cell {
  text-align: center;
  color: #65706b;
  padding: 24px !important;
}

.owner-preview {
  min-width: 92px;
  max-width: 150px;
  padding: 10px 8px;
  border-radius: 5px;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
}

.owner-nickname-input {
  width: min(260px, 100%);
}

.owner-color-input {
  display: none;
}

.jitc-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  max-width: 250px;
}

.jitc-color-swatch {
  position: relative;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 50%;
  background: var(--jitc-swatch-color);
  box-shadow:
    0 3px 8px rgba(15, 23, 42, 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.56);
  cursor: pointer;
  transition:
    transform 130ms ease,
    box-shadow 130ms ease;
}

.jitc-color-swatch:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 5px 11px rgba(15, 23, 42, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.jitc-color-swatch.active {
  outline: 2px solid #1769e8;
  outline-offset: 2px;
}

.jitc-color-swatch:focus-visible {
  outline: 3px solid #1769e8;
  outline-offset: 3px;
}

.jitc-color-swatch.active::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.58);
  background: rgba(255, 255, 255, 0.68);
}

.jitc-color-swatch:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.schedule-note-color-field {
  align-content: start;
  gap: 7px;
}

.load-status {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  background: #e9f1ec;
  color: #23473c;
  font-size: 11px;
  font-weight: 800;
}

.small-action {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #0a7b5d;
  border-radius: 5px;
  background: #0b8464;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.small-action:disabled {
  opacity: 0.65;
  cursor: wait;
}

.broker-queue-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  background: #eef1ff;
  color: #264288;
  font-size: 12px;
  font-weight: 800;
}

.broker-view-link {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid #4f6db5;
  border-radius: 5px;
  background: #eef3ff;
  color: #24458f;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.broker-view-link:hover {
  background: #dfe9ff;
}

.status-broker-posted {
  background: #fff1c7;
  color: #8a4b00;
}

.panel-load-brokerage-badge,
.open-load-brokerage-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: 1px solid #e8b85d;
  border-radius: 999px;
  background: #fff1c7;
  color: #8a4b00;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.panel-load-brokerage-badge {
  margin-top: 2px;
}

.panel-load-dedicated-badge,
.open-load-dedicated-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: 1px solid #7c5ce8;
  border-radius: 999px;
  background: #ece5ff;
  color: #4a2ea8;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.panel-load-dedicated-badge {
  margin-top: 2px;
}

.onboarding-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.secondary-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: #12332a;
  font-weight: 700;
  text-decoration: none;
}

.secondary-link:hover {
  background: #eef6f0;
}

.onboarding-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 10px;
  align-items: start;
}

.onboarding-archive-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 8px;
}

.onboarding-column {
  min-height: calc(100vh - 190px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.onboarding-column > header {
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  color: #151b18;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

.onboarding-column.pending > header {
  background: #ffd07b;
}

.onboarding-column.negative > header {
  background: #9fceee;
}

.onboarding-column.ready > header {
  background: #9de0b8;
}

.onboarding-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.onboarding-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #d2ddd1;
  border-left: 5px solid var(--green);
  border-radius: 7px;
}

.onboarding-column.pending .onboarding-card {
  border-left-color: #d18816;
}

.onboarding-column.negative .onboarding-card {
  border-left-color: #377caf;
}

.onboarding-card.archived {
  opacity: 0.75;
  background: #f1f1ed;
}

.onboarding-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
}

.onboarding-driver-heading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.onboarding-card strong {
  font-size: 14px;
}

.onboarding-role-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}

.onboarding-role-pill {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 5px;
  border: 1px solid #cfe0dc;
  border-radius: 999px;
  background: #f6fbf8;
  color: #23443a;
  font-size: 11px;
  font-weight: 850;
}

.onboarding-role-pill img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.onboarding-card p {
  margin: 0;
  color: #3f4d48;
  font-size: 12px;
}

.onboarding-meta {
  color: #56635f;
  font-size: 12px;
}

.onboarding-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}

.onboarding-card footer button {
  padding: 5px 8px;
  font-size: 12px;
}

.onboarding-archived {
  white-space: nowrap;
  border-radius: 5px;
  padding: 2px 6px;
  background: #e8e8e8;
  color: #5b625f;
  font-size: 11px;
  font-weight: 800;
}

.onboarding-empty {
  padding: 12px;
  color: #66756f;
  text-align: center;
  background: rgba(255, 255, 255, 0.58);
  border: 1px dashed #cbd6ca;
  border-radius: 7px;
}

.onboarding-small-dialog {
  width: min(620px, 96vw);
}

.onboarding-small-dialog label {
  margin-bottom: 10px;
}

.onboarding-small-dialog textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
}

.onboarding-history-dialog {
  width: min(720px, 96vw);
}

.onboarding-history-list {
  display: grid;
  gap: 7px;
}

.onboarding-history-item {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcf8;
}

.onboarding-history-item span,
.onboarding-history-item small {
  color: #596661;
  font-size: 12px;
}

.onboarding-history-item p {
  margin: 2px 0 0;
  color: #303c37;
  font-size: 13px;
}

.status-open {
  background: #e1f5ec;
  color: #106240;
}

.status-assigned {
  background: #e5efff;
  color: #144f96;
}

.status-brokered,
.status-completed {
  background: #f0eee9;
  color: #6c6258;
}

.status-cancelled {
  background: #ffe0e0;
  color: #9f1f1f;
}

.tracking-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 220px;
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.tracking-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}

.tracking-count {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  border: 1px solid transparent;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

button.tracking-count:hover {
  filter: brightness(0.97);
}

.tracking-count.active {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}

.tracking-count.all {
  background: #eef3ef;
  color: #273a34;
}

.tracking-count.danger {
  background: #f8d9d9;
  color: #a31919;
}

.tracking-count.warning {
  background: #fff1c7;
  color: #875b00;
}

.tracking-count.missing {
  background: #e5efff;
  color: #144f96;
}

.tracking-count.ok {
  background: #e1f5ec;
  color: #106240;
}

.tracking-count.no-next {
  background: #f0eee9;
  color: #5e655f;
}

.tracking-list {
  display: grid;
  gap: 5px;
}

.tracking-card {
  display: grid;
  grid-template-columns: minmax(145px, 0.35fr) minmax(0, 1fr);
  gap: 5px 8px;
  align-items: start;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-left: 4px solid #84908a;
  border-radius: 6px;
}

.tracking-card.danger {
  border-left-color: #c53737;
  background: #fff6f6;
}

.tracking-card.warning {
  border-left-color: #d48a00;
  background: #fffaf0;
}

.tracking-card.missing_eta {
  border-left-color: #2b6fb3;
}

.tracking-card.ok {
  border-left-color: var(--green);
}

.tracking-card.no_next {
  border-left-color: #77837d;
}

.tracking-card-head {
  display: grid;
  gap: 4px;
  align-content: start;
}

.tracking-card-head div {
  display: grid;
  gap: 1px;
}

.tracking-card-head strong {
  font-size: 15px;
}

.tracking-card-head span {
  color: #53605d;
  font-size: 11px;
  line-height: 1.25;
}

.tracking-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  width: fit-content;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.tracking-pill.danger {
  background: #f8d9d9;
  color: #a31919;
}

.tracking-pill.warning {
  background: #fff1c7;
  color: #875b00;
}

.tracking-pill.missing_eta {
  background: #e5efff;
  color: #144f96;
}

.tracking-pill.ok {
  background: #e1f5ec;
  color: #106240;
}

.tracking-pill.no_next {
  background: #f0eee9;
  color: #5e655f;
}

.tracking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.tracking-grid section {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  padding: 0 8px;
  border-left: 1px solid #d8e0d5;
}

.tracking-grid small {
  color: #53605d;
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
}

.tracking-grid b {
  font-size: 12px;
  line-height: 1.2;
}

.tracking-grid span {
  color: #53605d;
  font-size: 11px;
  line-height: 1.25;
}

.tracking-message {
  grid-column: 2;
  font-size: 11px;
  font-weight: 800;
  color: #24332e;
  line-height: 1.25;
}

.empty-tracking {
  color: #65706b;
}

.edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 17, 14, 0.35);
}

.edit-dialog {
  width: min(900px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  padding: 14px;
}

.edit-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.edit-head h2 {
  margin: 2px 0 0;
  font-size: 21px;
}

.mini-kicker {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

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

.edit-grid input,
.edit-grid select,
.edit-grid textarea {
  width: 100%;
}

.note-time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.note-time-row button {
  height: 34px;
  white-space: nowrap;
}

.edit-grid textarea {
  min-height: 84px;
  resize: vertical;
}

.edit-grid .wide-field {
  grid-column: 1 / -1;
}

.check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 14px 0;
}

.check-grid label {
  display: flex;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
  color: #26332f;
}

.edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.primary-action {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: #ffe3a3;
  color: #5c4100;
  font-size: 11px;
  font-weight: 900;
}

.nav-badge[hidden] {
  display: none;
}

.nav-badge.overdue {
  background: #ffd5d5;
  color: #9f1f1f;
}

.nav-badge.due-today {
  background: #fff0aa;
  color: #6d5100;
}

body.sidebar-collapsed .nav-badge {
  position: absolute;
  top: 3px;
  right: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 9px;
}

@media (max-width: 900px) {
  .sidebar .nav-badge {
    position: absolute;
    top: 3px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 9px;
  }
}

.tasks-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.task-board {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  padding: 10px;
}

.task-form-panel {
  width: min(760px, 96vw);
}

.task-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.task-form label {
  min-width: 0;
}

.task-form input,
.task-form select,
.task-form textarea {
  width: 100%;
}

.task-form .check-label {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0;
  line-height: 1.25;
}

.task-form .check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: #1767d4;
}

.task-form select[multiple] {
  min-height: 132px;
}

.task-native-select {
  display: none;
}

.task-assign-field {
  display: grid;
  gap: 4px;
  position: relative;
}

.task-picker {
  position: relative;
}

.task-picker-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #b8c7c1;
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

.task-picker-button.open {
  border-color: #1767d4;
  box-shadow: 0 0 0 2px rgba(23, 103, 212, 0.12);
}

.task-picker-button span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-picker-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  width: min(360px, 100%);
  max-height: 340px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(20, 35, 30, 0.18);
}

.task-picker-menu[hidden] {
  display: none;
}

.task-picker-menu input[type="search"] {
  width: 100%;
  min-height: 34px;
  margin-bottom: 8px;
  border-radius: 0;
  font-weight: 800;
}

.task-picker-select-all,
.task-picker-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 27px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.task-picker-select-all {
  border-bottom: 1px solid #e3ebe7;
  padding-bottom: 7px;
  margin-bottom: 5px;
}

.task-picker-select-all input,
.task-picker-options input {
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: #1767d4;
}

.task-picker-reset {
  display: block;
  width: 100%;
  margin: 2px 0 7px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.task-picker-options {
  display: grid;
  gap: 2px;
}

.task-picker-options label {
  padding: 3px 2px;
}

.task-picker-options label[hidden] {
  display: none;
}

.task-form textarea {
  min-height: 110px;
  resize: vertical;
}

.task-wide,
.task-form-actions {
  grid-column: 1 / -1;
}

.task-form-actions,
.task-toolbar,
.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.task-toolbar {
  justify-content: space-between;
  margin-bottom: 8px;
}

.task-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.task-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-tabs button.active,
.task-view-switch button.active {
  border-color: var(--green);
  background: var(--green);
  color: #ffffff;
}

.task-view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef5f0;
}

.task-view-switch button {
  min-height: 30px;
  padding: 4px 10px;
  border-color: transparent;
  background: transparent;
}

#taskSearch {
  min-width: 240px;
}

.task-list {
  display: grid;
  gap: 4px;
}

.task-card,
.task-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 3px solid #8ba79d;
  border-radius: 6px;
  background: #fbfdfb;
  padding: 4px 6px;
}

.task-card.overdue {
  border-left-color: #ba1d1d;
  background: #fff6f6;
}

.task-card.urgent {
  border-left-color: #d89216;
  background: #fffaf0;
}

.task-card.today {
  border-left-color: #d6aa00;
  background: #fffdf0;
}

.task-card.tomorrow {
  border-left-color: #24769f;
  background: #f2fbff;
}

.task-card.upcoming {
  border-left-color: #7f8a8c;
  background: #f8faf9;
}

.task-card.pending-review {
  border-left-color: #7c4ba8;
  background: #faf5ff;
}

.task-card.completed {
  border-left-color: #6ca36f;
  background: #f3faf4;
  opacity: 0.9;
}

.task-card.archived {
  border-left-color: #6b7280;
  background: #f3f4f6;
  opacity: 0.92;
}

.task-card-main {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 42%);
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.task-card small {
  color: var(--green);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.task-card h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card p {
  margin: 0;
  color: #4f5f59;
  font-size: 11px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  color: #4f5d58;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

.task-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.task-meta-secondary {
  color: #7a8580;
}

.task-actions {
  justify-content: flex-end;
  gap: 5px;
  margin-top: 0;
  flex-wrap: nowrap;
}

.task-actions button {
  min-height: 24px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
}

.task-calendar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 6px 0;
}

.task-calendar-controls strong {
  min-width: 170px;
  color: #182923;
  font-size: 16px;
}

.task-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  gap: 4px;
  align-items: stretch;
}

.task-calendar-weekday {
  padding: 4px 7px;
  border-radius: 5px;
  background: #dfece4;
  color: #39514a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.task-calendar-day {
  min-height: 82px;
  padding: 5px;
  border: 1px solid var(--line);
  border-left: 3px solid #9ab0a7;
  border-radius: 6px;
  background: #fbfdfb;
  cursor: pointer;
}

.task-calendar-day:hover {
  border-color: #83aa9d;
  background: #f5fbf7;
}

.task-calendar-day.outside-month {
  background: #f3f4f2;
  opacity: 0.7;
}

.task-calendar-day.is-today {
  border-left-color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(10, 122, 82, 0.3);
}

.task-calendar-day.has-overdue {
  border-left-color: #ba1d1d;
}

.task-calendar-date {
  width: 23px;
  min-height: 22px;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: #e8f0eb;
  color: #213a32;
  font-size: 12px;
  font-weight: 900;
}

.task-calendar-chips {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}

.task-calendar-chip,
.task-calendar-more {
  display: grid;
  gap: 1px;
  width: 100%;
  min-height: 0;
  padding: 3px 5px;
  border: 1px solid #e0c767;
  border-left: 3px solid #d6aa00;
  border-radius: 5px;
  background: #fff4b8;
  color: #1e2824;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-align: left;
}

.task-calendar-chip span {
  color: #4c5b55;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.task-calendar-chip.overdue {
  border-color: #e5b5b5;
  border-left-color: #ba1d1d;
  background: #ffe1e1;
}

.task-calendar-chip.urgent {
  border-color: #e9c27e;
  border-left-color: #d89216;
  background: #fff0cf;
}

.task-calendar-chip.tomorrow {
  border-color: #a9d6e8;
  border-left-color: #24769f;
  background: #e8f8ff;
}

.task-calendar-chip.pending-review {
  border-color: #d8bee9;
  border-left-color: #7c4ba8;
  background: #f7eaff;
}

.task-calendar-chip.completed {
  border-color: #b9dbbd;
  border-left-color: #6ca36f;
  background: #e9f7ea;
}

.task-calendar-chip.archived {
  border-color: #d4d7dc;
  border-left-color: #6b7280;
  background: #eef0f3;
}

.task-calendar-more {
  border-color: #cfdbd4;
  border-left-color: #8aa098;
  background: #f1f5f2;
  color: #50635c;
}

.task-calendar-note {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8faf9;
  color: #53605d;
  font-size: 13px;
  font-weight: 800;
}

.task-calendar-controls[hidden],
.task-calendar[hidden],
.task-list[hidden] {
  display: none;
}

@media (max-width: 1100px) {
  .task-calendar {
    grid-template-columns: repeat(7, minmax(96px, 1fr));
    overflow-x: auto;
  }

  .task-calendar-day {
    min-width: 96px;
  }
}

@media (max-width: 760px) {
  .task-card,
  .task-empty {
    grid-template-columns: 1fr;
  }

  .task-card-main {
    grid-template-columns: 1fr;
  }

  .task-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .task-toolbar-right,
  #taskSearch {
    width: 100%;
  }

  .task-view-switch {
    width: 100%;
  }

  .task-view-switch button {
    flex: 1;
  }

  .task-calendar {
    grid-template-columns: repeat(7, minmax(88px, 1fr));
  }
}

.task-events {
  margin-top: 8px;
  border-top: 1px solid #e4ebe6;
  padding-top: 7px;
}

.task-events summary {
  cursor: pointer;
  color: #4d635b;
  font-size: 12px;
  font-weight: 900;
}

.task-events div {
  display: grid;
  gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid #edf2ef;
  color: #53605d;
  font-size: 12px;
}

.task-events div:last-child {
  border-bottom: 0;
}

.task-detail-panel {
  width: min(820px, 96vw);
}

.task-detail-panel h2 {
  margin: 0 44px 10px 0;
}

.task-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.task-detail-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 5px;
  background: #edf4ef;
  color: #31443b;
  font-size: 12px;
  font-weight: 800;
}

.task-detail-section {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid #e4ebe6;
}

.task-detail-section h3 {
  margin: 0;
  font-size: 15px;
}

.task-detail-section > p,
.task-muted {
  margin: 0;
  color: #4f5f59;
  white-space: pre-wrap;
}

.task-comment,
.task-event {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid #e1e9e4;
  border-radius: 6px;
  background: #fbfdfb;
}

.task-comment p,
.task-event p {
  margin: 0;
  color: #2d3c35;
  white-space: pre-wrap;
}

.task-comment span,
.task-event span {
  color: #596661;
  font-size: 12px;
}

.task-reply-form {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #e4ebe6;
}

.task-reply-form textarea,
.task-action-panel textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
}

.task-action-panel {
  width: min(520px, 94vw);
}

.task-attachment-preview {
  display: grid;
  gap: 7px;
}

.task-attachment-chip {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid #dce7e0;
  border-radius: 6px;
  background: #f8fbf8;
}

.task-attachment-chip img {
  width: 54px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ccd8d1;
}

.task-attachment-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.task-attachment-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.task-attachment-item {
  display: grid;
  gap: 5px;
  color: #23362f;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.task-attachment-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #d6e1da;
  border-radius: 6px;
  background: #f8fbf8;
}

.open-truck-filters {
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr);
  gap: 8px;
  align-items: end;
  padding: 6px 8px;
  margin-bottom: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.open-truck-filter-left {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: end;
}

.open-truck-filters label {
  display: grid;
  gap: 2px;
  color: #53605d;
  font-size: 11px;
  font-weight: 800;
}

.open-truck-filter-left > label {
  min-width: 126px;
}

.open-truck-filter-left > label > input,
.open-truck-filter-left > label > select,
.open-truck-search-field input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
}

.open-truck-search-field {
  justify-self: stretch;
  min-width: 320px;
}

.open-truck-state-filter {
  position: relative;
  min-width: 145px;
}

.open-truck-state-filter summary {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}

.open-truck-state-filter summary::-webkit-details-marker {
  display: none;
}

.open-truck-state-filter summary::after {
  content: "v";
  margin-left: auto;
  color: #647a73;
  font-size: 10px;
}

.open-truck-state-filter .multi-filter-menu {
  right: auto;
  width: 190px;
  min-width: 190px;
  max-height: 300px;
  padding: 8px;
  overflow-y: auto;
}

.open-truck-state-search {
  width: 100%;
  min-height: 28px;
  margin-bottom: 6px;
  padding: 5px 7px;
  border: 1px solid #b7c8c2;
  border-radius: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.open-truck-state-filter .multi-filter-menu label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.open-truck-state-filter .multi-filter-menu label[hidden] {
  display: none !important;
}

.open-truck-state-filter .multi-filter-menu input[type="checkbox"] {
  width: 13px;
  height: 13px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: #1767d4;
}

.open-truck-state-reset {
  display: block;
  width: 100%;
  margin: 2px 0 6px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.open-truck-state-options {
  display: grid;
  gap: 1px;
}

.open-truck-list {
  display: grid;
  gap: 4px;
}

.open-truck-market-group {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.open-truck-market-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border: 1px solid #c9d7c8;
  border-radius: 5px;
  background: #e8f1e8;
  color: #0f2b22;
  font-size: 12px;
  font-weight: 900;
}

.open-truck-market-header span:last-child {
  color: #52645c;
  font-size: 11px;
  font-weight: 800;
}

.open-truck-card {
  display: grid;
  gap: 3px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--truck-owner-color, var(--green));
  border-radius: 5px;
  background: #ffffff;
}

.open-truck-main {
  display: flex;
  gap: 4px;
  align-items: stretch;
  min-width: 0;
}

.open-truck-main section,
.open-truck-main button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(248, 250, 246, 0.85);
}

.open-truck-main button {
  appearance: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.open-truck-main button:hover {
  border-color: var(--green);
  background: #f0faf4;
}

.open-truck-number {
  flex: 0 0 104px;
}

.open-truck-location {
  flex: 0 1 210px;
  max-width: 260px;
}

.open-truck-last-load {
  flex: 0 1 330px;
  max-width: 450px;
}

.open-truck-next-load {
  flex: 0 1 260px;
  max-width: 360px;
  border-color: #f1b84b !important;
  background: #fff3d4 !important;
}

.open-truck-card.is-connection {
  border-left-color: #d22f2f;
}

.open-truck-card.is-on-hold {
  border-left-color: #d92d20;
  background: #fff5f5;
}

.open-truck-card.is-on-hold .open-truck-number {
  border-color: #f2b8b5;
  background: #fff0f0;
}

.open-truck-card.is-on-hold .open-truck-number strong,
.open-truck-card.is-on-hold .open-truck-number span {
  color: #7a271a;
}

.open-truck-next-load small {
  color: #7a4c00;
}

/* Routing page v1: distinguish "already has a next load" from the amber "needs one" warning */
.open-truck-next-load.open-truck-next-load-confirmed {
  border-color: #86c39a !important;
  background: #eaf7ee !important;
}

.open-truck-next-load-confirmed small {
  color: #1c6b3a;
}

.open-truck-load-link {
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.open-truck-load-link:hover {
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.open-truck-note-card {
  flex: 1 1 240px;
  min-width: 210px;
  background: var(--open-note-color, #d8ecff) !important;
  border-color: rgba(36, 118, 159, 0.35) !important;
}

.open-truck-note-card.is-empty {
  background: #f6f8f4 !important;
}

.open-truck-note-card:not(.is-empty):hover {
  filter: brightness(0.98);
}

.open-truck-main small {
  color: #53605d;
  font-size: 10px;
  font-weight: 900;
  line-height: 12px;
}

.open-truck-main b,
.open-truck-number strong {
  overflow: hidden;
  color: #10201c;
  font-size: 12px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-truck-main span {
  overflow: hidden;
  color: #53605d;
  font-size: 11px;
  line-height: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-truck-main .open-truck-number-link {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.open-truck-main .open-truck-number-link:hover {
  border-color: transparent;
  background: transparent;
}

.open-truck-wait {
  color: #9a6b00 !important;
  font-weight: 900;
}

.open-truck-missing-eta {
  color: #b42318 !important;
  font-weight: 900;
}

.open-truck-hold-line {
  color: #b42318 !important;
  font-weight: 800;
}

.open-truck-hold-line.is-stale {
  font-weight: 950;
}

.open-truck-main .open-truck-hold-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-height: 22px;
  margin-top: 2px;
  padding: 3px 8px;
  border-color: #d0d9e5;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.open-truck-main .open-truck-hold-button:hover {
  border-color: #d92d20;
  background: #fff5f5;
  color: #b42318;
}

.open-truck-main .open-truck-hold-button.is-active {
  border-color: #d92d20;
  background: #d92d20;
  color: #ffffff;
}

.open-truck-number strong {
  font-size: 15px;
  line-height: 18px;
}

.open-truck-note-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
}

.open-truck-note-row textarea {
  width: 100%;
  min-height: 24px;
  height: 24px;
  padding: 3px 5px;
  resize: none;
  font-size: 11px;
  line-height: 15px;
}

.open-truck-note-row button {
  align-self: start;
  min-height: 24px;
  padding: 3px 9px;
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
  font-size: 12px;
}

.open-truck-note-meta {
  color: #65706b;
  font-size: 10px;
  line-height: 12px;
}

.open-truck-note-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #394842;
  font-size: 11px;
  line-height: 14px;
}

.open-truck-note-preview .text-action {
  font-size: 11px;
}

.open-truck-all-notes {
  margin-top: 2px;
}

.open-truck-detail-panel small {
  color: #52605c;
  font-size: 12px;
  line-height: 1.35;
}

.open-truck-note-panel {
  max-width: 720px;
}

.open-truck-note-context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 10px;
}

.open-truck-note-context > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(248, 250, 246, 0.85);
}

.open-truck-note-context small,
.open-truck-note-label span,
.open-truck-note-color-row span {
  color: #53605d;
  font-size: 11px;
  font-weight: 900;
}

.open-truck-note-context b,
.open-truck-note-context span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-truck-note-label {
  display: grid;
  gap: 4px;
}

.open-truck-note-label textarea {
  min-height: 76px;
  resize: vertical;
}

.open-truck-note-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
}

.open-truck-note-panel h3 {
  margin: 10px 0 4px;
  font-size: 15px;
}

.open-truck-note-history {
  display: grid;
  gap: 5px;
  max-height: 260px;
  overflow: auto;
}

.open-truck-note-history-item {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(36, 118, 159, 0.22);
  border-left: 4px solid var(--open-note-color, #d8ecff);
  border-radius: 6px;
  background: color-mix(in srgb, var(--open-note-color, #d8ecff) 26%, #ffffff);
}

.open-truck-note-history-item b {
  color: #31413c;
  font-size: 11px;
}

.open-truck-note-history-item span {
  white-space: pre-wrap;
}

.open-truck-note-history-empty {
  padding: 8px;
  color: #65706b;
}

.open-truck-empty {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: #53605d;
}

@media (max-width: 1200px) {
  .database-filters {
    grid-template-columns: 1fr 1fr;
  }

  .load-db-date-range-field {
    min-width: 0;
  }

  .open-truck-filters {
    grid-template-columns: 1fr;
  }

  .open-truck-filter-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .open-truck-search-field {
    min-width: 0;
  }

  .open-truck-main {
    flex-wrap: wrap;
  }

  .open-truck-number,
  .open-truck-location,
  .open-truck-last-load,
  .open-truck-next-load,
  .open-truck-note-card {
    flex: 1 1 220px;
    max-width: none;
  }
}

/* Modern Schedule Board pilot */
.schedule-modern-page {
  --modern-bg: #f5f7fb;
  --modern-surface: #ffffff;
  --modern-text: #0f172a;
  --modern-muted: #64748b;
  --modern-line: #dbe3ef;
  --modern-blue: #2563eb;
  --modern-blue-dark: #1d4ed8;
  background: var(--modern-bg);
  color: var(--modern-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.schedule-modern-page .sidebar {
  background:
    radial-gradient(circle at 16% 0%, rgba(37, 99, 235, 0.24), transparent 30%),
    linear-gradient(180deg, #08182c 0%, #0b213c 48%, #071426 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08), 8px 0 24px rgba(15, 23, 42, 0.12);
}

.schedule-modern-page .sidebar-brand {
  min-height: 80px;
  padding: 16px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.schedule-modern-page .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #dbeafe 100%);
}

.schedule-modern-page .brand-text strong {
  font-size: 16px;
  letter-spacing: 0;
}

.schedule-modern-page .brand-text span {
  color: rgba(226, 232, 240, 0.8);
  font-size: 11px;
  font-weight: 600;
}

.schedule-modern-page .sidebar-collapse-toggle {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.schedule-modern-page .sidebar-nav {
  padding: 14px 10px;
  gap: 14px;
}

.schedule-modern-page .nav-section + .nav-section {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.schedule-modern-page .nav-section-title {
  padding-left: 8px;
  color: rgba(203, 213, 225, 0.72);
  font-size: 10px;
  letter-spacing: 0.03em;
}

.schedule-modern-page .nav-item {
  min-height: 40px;
  border-radius: 10px;
  border-left: 0;
  color: rgba(241, 245, 249, 0.88);
  font-weight: 650;
}

.schedule-modern-page .nav-item:hover,
.schedule-modern-page .nav-group.open > .nav-group-toggle {
  background: rgba(255, 255, 255, 0.08);
}

.schedule-modern-page .nav-item.active,
.schedule-modern-page .nav-subitem.active {
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}

.schedule-modern-page .nav-icon {
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
}

.schedule-modern-page .nav-item.active .nav-icon {
  background: rgba(255, 255, 255, 0.18);
}

.schedule-modern-page .nav-submenu {
  margin-left: 0;
  border-left: 1px solid rgba(148, 163, 184, 0.2);
}

.schedule-modern-page .nav-subitem {
  min-height: 34px;
  padding-left: 10px;
  border-radius: 8px;
  color: rgba(226, 232, 240, 0.8);
  font-weight: 600;
}

.schedule-modern-page .sidebar-account {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(2, 6, 23, 0.22);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.schedule-modern-page .sidebar-account-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.26);
}

.schedule-modern-page .sidebar-account-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: start;
}

.schedule-modern-page .sidebar-account span {
  color: #ffffff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

.schedule-modern-page .sidebar-account small {
  color: rgba(226, 232, 240, 0.72);
  font-size: 11px;
  font-weight: 500;
}

.schedule-modern-page .sidebar-account button {
  width: 26px;
  height: 26px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(226, 232, 240, 0.78);
  font-size: 0;
}

.schedule-modern-page .sidebar-account button::before {
  content: "v";
  font-size: 13px;
  font-weight: 800;
}

.schedule-modern-page .sidebar-account button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.schedule-modern-main {
  min-width: 0;
  padding: 22px 22px 46px;
  background: var(--modern-bg);
}

.schedule-modern-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.schedule-modern-header h1 {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: 0;
}

.schedule-modern-header p {
  margin: 5px 0 0;
  color: var(--modern-muted);
  font-size: 14px;
}

.schedule-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--modern-line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.view-toggle button,
.new-load-action,
.schedule-modern-page .board-refresh-panel button {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.view-toggle button {
  border: 0;
  background: transparent;
  color: #475569;
}

.view-toggle button.active,
.new-load-action {
  color: #ffffff;
  background: var(--modern-blue);
  border-color: var(--modern-blue);
}

.view-toggle button:disabled {
  cursor: default;
  opacity: 0.65;
}

.new-load-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--modern-blue);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.new-load-action::before {
  content: "+";
  font-size: 16px;
  line-height: 1;
}

.schedule-modern-page .board-refresh-panel {
  margin-left: 0;
  padding: 0;
  gap: 8px;
  color: var(--modern-muted);
  font-size: 12px;
}

.schedule-modern-page .board-refresh-panel button {
  color: #334155;
  background: #ffffff;
  border: 1px solid var(--modern-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.schedule-modern-page .board-refresh-panel span {
  min-width: 92px;
}

.schedule-modern-page .controls.schedule-filter-bar {
  display: grid;
  grid-template-columns: minmax(390px, 1.35fr) repeat(7, minmax(120px, 0.75fr));
  gap: 12px;
  align-items: end;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--modern-surface);
  border: 1px solid var(--modern-line);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.schedule-modern-page .schedule-filter-bar > .jitc-calendar-range-field {
  min-width: 390px;
  grid-template-columns: 42px minmax(290px, 1fr) 42px;
  align-items: end;
}

.schedule-modern-page .schedule-filter-bar .date-range-field {
  min-width: 0;
}

.schedule-modern-page .schedule-filter-bar .date-range-field .jitc-calendar-trigger {
  white-space: nowrap;
}

.schedule-modern-page .controls label {
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.schedule-modern-page .controls label > span {
  color: #475569;
}

.schedule-modern-page input,
.schedule-modern-page select {
  min-height: 38px;
  border-color: var(--modern-line);
  border-radius: 9px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.schedule-modern-page input:focus,
.schedule-modern-page select:focus {
  outline: 2px solid rgba(37, 99, 235, 0.18);
  border-color: #93c5fd;
}

.schedule-modern-page .board-search-field,
.schedule-modern-page .board-search-field input {
  width: auto;
  min-width: 0;
}

.schedule-modern-page .board-filter-group {
  gap: 6px;
  align-content: end;
  padding: 0;
}

.schedule-modern-page .board-filter-group button {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--modern-line);
  border-radius: 9px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.schedule-modern-page .board-filter-group button.active {
  background: var(--modern-blue);
  border-color: var(--modern-blue);
  color: #ffffff;
  box-shadow: 0 9px 18px rgba(37, 99, 235, 0.18);
}

.schedule-modern-page .schedule-changes {
  border-color: #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
}

.schedule-modern-page .dashboard-layout {
  gap: 14px;
}

.schedule-modern-page .board,
.schedule-modern-page .status-footer {
  border: 1px solid var(--modern-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.schedule-modern-page .board {
  max-height: calc(100vh - 234px);
  scrollbar-width: auto;
  scrollbar-color: #94a3b8 #e2e8f0;
}

.schedule-modern-page .board::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.schedule-modern-page .board::-webkit-scrollbar-track {
  background: #e2e8f0;
}

.schedule-modern-page .board::-webkit-scrollbar-thumb {
  border: 3px solid #e2e8f0;
  border-radius: 999px;
  background: #94a3b8;
}

.schedule-modern-page .board::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.schedule-modern-page .grid {
  background: #ffffff;
}

.schedule-modern-page .corner,
.schedule-modern-page .day-header {
  min-height: 44px;
  padding: 9px 10px;
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
}

.schedule-modern-page .day-header.today {
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 0 3px 0 var(--modern-blue);
}

.schedule-modern-page .truck {
  min-height: 88px;
  border-color: #e2e8f0;
  padding: 10px 8px;
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.08);
}

.schedule-modern-page .truck strong {
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0;
}

.schedule-modern-page .truck span {
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
}

.schedule-modern-page .cell {
  min-height: 88px;
  padding: 6px;
  background: #fcfdfb;
  border-color: #e2e8f0;
  contain-intrinsic-size: 88px 170px;
}

.schedule-modern-page .cell.today-cell {
  background: #f8fbff;
  box-shadow: inset 2px 0 0 rgba(37, 99, 235, 0.42), inset -2px 0 0 rgba(37, 99, 235, 0.42);
}

.schedule-modern-page .resource,
.schedule-modern-page .load-card,
.schedule-modern-page .last-location,
.schedule-modern-page .moved-location-marker,
.schedule-modern-page .truck-status-card,
.schedule-modern-page .home-reset-card,
.schedule-modern-page .schedule-note-card {
  border-radius: 8px;
  margin-bottom: 5px;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08);
  text-align: center;
  justify-items: center;
}

.schedule-modern-page .resource {
  min-height: 21px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
  justify-items: center;
}

.schedule-modern-page .resource.driver-resource-pill {
  justify-content: center;
}

.schedule-modern-page .load-card,
.schedule-modern-page .last-location,
.schedule-modern-page .moved-location-marker,
.schedule-modern-page .truck-status-card {
  gap: 3px;
  padding: 7px 8px;
}

.schedule-modern-page .load-card b,
.schedule-modern-page .last-location b,
.schedule-modern-page .moved-location-marker b,
.schedule-modern-page .truck-status-card b,
.schedule-modern-page .home-reset-card b {
  font-size: 11px;
  font-weight: 800;
}

.schedule-modern-page .load-card span,
.schedule-modern-page .last-location span,
.schedule-modern-page .moved-location-marker span,
.schedule-modern-page .truck-status-card span,
.schedule-modern-page .home-reset-card span {
  font-size: 13px;
  line-height: 1.12;
  font-weight: 800;
}

.schedule-modern-page .load-card small,
.schedule-modern-page .last-location small,
.schedule-modern-page .moved-location-marker small,
.schedule-modern-page .truck-status-card small,
.schedule-modern-page .home-reset-card small {
  font-size: 10.5px;
  line-height: 1.2;
}

.schedule-modern-page .load-card:hover,
.schedule-modern-page .last-location:hover,
.schedule-modern-page .moved-location-marker:hover,
.schedule-modern-page .truck-status-card:hover,
.schedule-modern-page .schedule-note-card:hover,
.schedule-modern-page .home-reset-card:hover {
  outline: 2px solid rgba(37, 99, 235, 0.22);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.14);
}

.schedule-modern-page .cell-note-add {
  top: 4px;
  right: 4px;
  border-radius: 7px;
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.schedule-modern-page .home-reset-card .home-reset-remove {
  position: static;
  justify-self: center;
}

.schedule-modern-page .status-footer {
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 10px 14px;
  color: #475569;
  font-size: 12px;
}

.schedule-modern-page .status-footer strong {
  color: #0f172a;
}

@media (min-width: 1181px) {
  .schedule-modern-main {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 16px;
  }

  body.schedule-positioning-empty .schedule-modern-main {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .schedule-modern-page .dashboard-layout {
    height: 100%;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }

  .schedule-modern-page .board {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .schedule-modern-page .status-footer {
    position: static;
  }
}

/* Compact TMS modal system v49 -------------------------------------------
   Keep workflow dialogs readable without covering the operating board. */
body:not(.auth-page) .modal-overlay:has(.tms-modal-panel),
body:not(.auth-page) .tms-edit-overlay {
  padding: clamp(10px, 1.6vw, 24px);
}

body:not(.auth-page) .tms-modal-panel {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  border-radius: 17px;
}

body:not(.auth-page) .tms-modal-panel.tms-modal-compact,
body:not(.auth-page) .tms-modal-panel.tms-modal-form,
body:not(.auth-page) .tms-modal-panel.tms-modal-resource {
  width: min(680px, calc(100vw - 28px));
}

body:not(.auth-page) .tms-modal-panel.tms-modal-action-chooser,
body:not(.auth-page) .tms-modal-panel.tms-modal-connection,
body:not(.auth-page) .tms-modal-panel.tms-modal-load-details,
body:not(.auth-page) .tms-modal-panel.tms-modal-open-truck-note,
body:not(.auth-page) .tms-modal-panel.tms-modal-assignment {
  width: min(780px, calc(100vw - 28px));
}

body:not(.auth-page) .tms-modal-panel.tms-modal-positioning {
  width: min(980px, calc(100vw - 28px));
}

body:not(.auth-page) .tms-modal-header {
  gap: 13px;
  min-height: 76px;
  padding: 15px 20px;
}

body:not(.auth-page) .tms-modal-icon,
body:not(.auth-page) .tms-modal-heading-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}

body:not(.auth-page) .tms-modal-icon svg,
body:not(.auth-page) .tms-modal-heading-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:not(.auth-page) .tms-modal-heading .eyebrow,
body:not(.auth-page) .tms-modal-eyebrow,
body:not(.auth-page) .tms-modal-heading-copy .mini-kicker {
  margin-bottom: 3px;
  font-size: 10px;
}

body:not(.auth-page) .tms-modal-heading h2,
body:not(.auth-page) .tms-modal-heading-copy h2,
body:not(.auth-page) .tms-modal-panel .tms-modal-header h2 {
  gap: 8px;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.025em;
}

body:not(.auth-page) .tms-modal-badge {
  min-height: 27px;
  padding: 3px 9px;
  font-size: 12px;
}

body:not(.auth-page) .tms-modal-close,
body:not(.auth-page) .tms-modal-panel .modal-close.tms-modal-close {
  width: 38px;
  height: 38px;
  min-height: 38px;
}

body:not(.auth-page) .tms-modal-close svg,
body:not(.auth-page) .tms-modal-panel .modal-close.tms-modal-close svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:not(.auth-page) .tms-modal-body {
  padding: 18px 20px;
}

body:not(.auth-page) .tms-modal-lead,
body:not(.auth-page) .tms-modal-lede {
  margin: 0 0 16px;
  color: #53647d;
  font-size: 14px;
  line-height: 1.45;
}

body:not(.auth-page) .tms-modal-footer,
body:not(.auth-page) .tms-modal-panel .modal-actions.tms-modal-footer,
body:not(.auth-page) .tms-modal-panel .edit-actions.tms-modal-footer {
  gap: 9px;
  padding: 12px 20px;
}

body:not(.auth-page) .tms-modal-status-footer {
  padding: 12px 20px;
  font-size: 11px;
}

body:not(.auth-page) .tms-modal-footer button,
body:not(.auth-page) .tms-modal-inline-actions button,
body:not(.auth-page) .tms-primary-action {
  gap: 7px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
}

body:not(.auth-page) .tms-modal-footer button svg,
body:not(.auth-page) .tms-modal-inline-actions button svg,
body:not(.auth-page) .tms-primary-action svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:not(.auth-page) .tms-info-callout,
body:not(.auth-page) .tms-warning-callout {
  gap: 9px;
  margin-bottom: 13px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12px;
}

body:not(.auth-page) .tms-form-grid,
body:not(.auth-page) .tms-modal-panel .detail-grid.tms-form-grid,
body:not(.auth-page) .tms-modal-panel .edit-grid.tms-form-grid {
  gap: 11px 12px;
}

body:not(.auth-page) .tms-form-grid > label,
body:not(.auth-page) .tms-modal-panel .tms-form-grid > label,
body:not(.auth-page) .tms-modal-panel .open-truck-note-label {
  gap: 5px;
  font-size: 11px;
}

body:not(.auth-page) .tms-form-grid input,
body:not(.auth-page) .tms-form-grid select,
body:not(.auth-page) .tms-form-grid textarea,
body:not(.auth-page) .tms-modal-panel :where(input, select, textarea),
body:not(.auth-page) .tms-modal-panel .open-truck-note-label textarea {
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
}

body:not(.auth-page) .tms-form-grid textarea,
body:not(.auth-page) .tms-modal-panel .open-truck-note-label textarea {
  min-height: 84px;
}

body:not(.auth-page) .tms-form-grid .checkbox-field {
  min-height: 44px;
  padding: 8px 11px;
}

body:not(.auth-page) .tms-check-grid,
body:not(.auth-page) .tms-modal-panel .check-grid.tms-check-grid {
  gap: 7px;
  margin-top: 12px;
}

body:not(.auth-page) .tms-check-grid label {
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
}

body:not(.auth-page) .tms-action-tile-grid,
body:not(.auth-page) .tms-modal-panel .modal-actions.tms-action-tile-grid {
  gap: 9px;
}

body:not(.auth-page) .tms-action-tile-grid button,
body:not(.auth-page) .tms-modal-panel .modal-actions.tms-action-tile-grid button {
  gap: 8px;
  min-height: 102px;
  padding: 12px 8px;
  border-radius: 11px;
  font-size: 13px;
}

body:not(.auth-page) .tms-action-tile-grid button svg,
body:not(.auth-page) .tms-action-tile-grid button .jitc-icon {
  display: block;
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:not(.auth-page) .tms-route-summary {
  gap: 13px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 10px;
}

body:not(.auth-page) .tms-route-summary strong,
body:not(.auth-page) .tms-stat-grid strong,
body:not(.auth-page) .open-truck-note-context b {
  font-size: 15px;
}

body:not(.auth-page) .tms-stat-grid > div,
body:not(.auth-page) .tms-modal-panel .connection-detail-grid.tms-stat-grid > div,
body:not(.auth-page) .tms-load-detail-grid > div {
  padding: 11px 12px;
  border-radius: 9px;
}

body:not(.auth-page) .tms-load-detail-grid {
  gap: 9px;
}

body:not(.auth-page) .tms-load-detail-grid span,
body:not(.auth-page) .tms-stat-grid span,
body:not(.auth-page) .tms-route-summary span:not(.tms-route-line) {
  font-size: 10px;
}

body:not(.auth-page) .tms-load-detail-grid strong {
  font-size: 13px;
}

body:not(.auth-page) .open-truck-note-context {
  gap: 11px;
  margin-bottom: 13px;
}

body:not(.auth-page) .open-truck-note-context > div {
  min-height: 78px;
  padding: 12px;
  border-radius: 9px;
}

body:not(.auth-page) .tms-modal-inline-actions {
  gap: 8px;
  margin: 12px 0 0;
}

body:not(.auth-page) .tms-modal-schedule-note .jitc-color-palette,
body:not(.auth-page) .tms-modal-open-truck-note .jitc-color-palette {
  gap: 8px;
}

body:not(.auth-page) .tms-modal-schedule-note .jitc-color-swatch,
body:not(.auth-page) .tms-modal-open-truck-note .jitc-color-swatch {
  width: 32px;
  height: 32px;
}

body:not(.auth-page) .tms-modal-schedule-note .jitc-color-swatch.active::after,
body:not(.auth-page) .tms-modal-open-truck-note .jitc-color-swatch.active::after {
  inset: 8px;
}

@media (max-width: 900px) {
  body:not(.auth-page) .tms-modal-panel,
  body:not(.auth-page) .tms-modal-panel.tms-modal-compact,
  body:not(.auth-page) .tms-modal-panel.tms-modal-action-chooser,
  body:not(.auth-page) .tms-modal-panel.tms-modal-assignment,
  body:not(.auth-page) .tms-modal-panel.tms-modal-connection,
  body:not(.auth-page) .tms-modal-panel.tms-modal-form,
  body:not(.auth-page) .tms-modal-panel.tms-modal-load-details,
  body:not(.auth-page) .tms-modal-panel.tms-modal-open-truck-note,
  body:not(.auth-page) .tms-modal-panel.tms-modal-positioning,
  body:not(.auth-page) .tms-modal-panel.tms-modal-resource {
    width: min(720px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
  }
}

@media (max-width: 640px) {
  body:not(.auth-page) .modal-overlay:has(.tms-modal-panel),
  body:not(.auth-page) .tms-edit-overlay {
    padding: 6px;
  }

  body:not(.auth-page) .tms-modal-panel,
  body:not(.auth-page) .tms-modal-panel.tms-modal-compact,
  body:not(.auth-page) .tms-modal-panel.tms-modal-action-chooser,
  body:not(.auth-page) .tms-modal-panel.tms-modal-assignment,
  body:not(.auth-page) .tms-modal-panel.tms-modal-connection,
  body:not(.auth-page) .tms-modal-panel.tms-modal-form,
  body:not(.auth-page) .tms-modal-panel.tms-modal-load-details,
  body:not(.auth-page) .tms-modal-panel.tms-modal-open-truck-note,
  body:not(.auth-page) .tms-modal-panel.tms-modal-positioning,
  body:not(.auth-page) .tms-modal-panel.tms-modal-resource {
    width: 100%;
    max-height: calc(100dvh - 12px);
  }

  body:not(.auth-page) .tms-modal-header {
    min-height: 66px;
    padding: 11px 12px;
  }

  body:not(.auth-page) .tms-modal-icon,
  body:not(.auth-page) .tms-modal-heading-icon {
    width: 40px;
    height: 40px;
  }

  body:not(.auth-page) .tms-modal-heading h2,
  body:not(.auth-page) .tms-modal-heading-copy h2,
  body:not(.auth-page) .tms-modal-panel .tms-modal-header h2 {
    font-size: 20px;
  }

  body:not(.auth-page) .tms-modal-body {
    padding: 14px 12px;
  }

  body:not(.auth-page) .tms-action-tile-grid,
  body:not(.auth-page) .tms-modal-panel .modal-actions.tms-action-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.auth-page) .tms-action-tile-grid button,
  body:not(.auth-page) .tms-modal-panel .modal-actions.tms-action-tile-grid button {
    min-height: 86px;
  }

  body:not(.auth-page) .tms-modal-footer,
  body:not(.auth-page) .tms-modal-panel .modal-actions.tms-modal-footer,
  body:not(.auth-page) .tms-modal-panel .edit-actions.tms-modal-footer {
    padding: 10px 12px;
  }
}

/* Compact 2030 modal density ------------------------------------------- */
body:not(.auth-page) .tms-modal-panel {
  width: min(760px, calc(100vw - 32px));
  max-height: min(88dvh, 800px);
  border-radius: 16px;
}

body:not(.auth-page) .tms-modal-panel.tms-modal-action-chooser {
  width: min(760px, calc(100vw - 32px));
}

body:not(.auth-page) .tms-modal-panel.tms-modal-connection {
  width: min(800px, calc(100vw - 32px));
}

body:not(.auth-page) .tms-modal-panel.tms-modal-form,
body:not(.auth-page) .tms-modal-panel.tms-modal-open-truck-note {
  width: min(760px, calc(100vw - 32px));
}

body:not(.auth-page) .tms-modal-panel.tms-modal-positioning {
  width: min(960px, calc(100vw - 32px));
}

body:not(.auth-page) .tms-modal-panel.tms-modal-resource {
  width: min(720px, calc(100vw - 32px));
}

body:not(.auth-page) .tms-modal-header {
  min-height: 78px;
  gap: 14px;
  padding: 15px 20px;
}

body:not(.auth-page) .tms-modal-icon,
body:not(.auth-page) .tms-modal-heading-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

body:not(.auth-page) .tms-modal-icon svg,
body:not(.auth-page) .tms-modal-heading-icon svg {
  width: 24px;
  height: 24px;
}

body:not(.auth-page) .tms-modal-heading .eyebrow,
body:not(.auth-page) .tms-modal-eyebrow,
body:not(.auth-page) .tms-modal-heading-copy .mini-kicker {
  margin-bottom: 3px;
  font-size: 10px;
}

body:not(.auth-page) .tms-modal-heading h2,
body:not(.auth-page) .tms-modal-heading-copy h2,
body:not(.auth-page) .tms-modal-panel .tms-modal-header h2 {
  gap: 8px;
  font-size: clamp(23px, 2.1vw, 30px);
}

body:not(.auth-page) .tms-modal-badge {
  min-height: 26px;
  padding: 3px 9px;
  font-size: 12px;
}

body:not(.auth-page) .tms-modal-close,
body:not(.auth-page) .tms-modal-panel .modal-close.tms-modal-close {
  width: 40px;
  height: 40px;
}

body:not(.auth-page) .tms-modal-close svg {
  width: 20px;
  height: 20px;
}

body:not(.auth-page) .tms-modal-body {
  padding: 18px 20px;
}

body:not(.auth-page) .tms-modal-lead {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.45;
}

body:not(.auth-page) .tms-modal-footer,
body:not(.auth-page) .tms-modal-panel .modal-actions.tms-modal-footer,
body:not(.auth-page) .tms-modal-panel .edit-actions.tms-modal-footer {
  gap: 9px;
  padding: 13px 20px;
}

body:not(.auth-page) .tms-modal-status-footer {
  padding: 13px 20px;
  font-size: 11px;
}

body:not(.auth-page) .tms-modal-footer button,
body:not(.auth-page) .tms-modal-inline-actions button,
body:not(.auth-page) .tms-primary-action,
body:not(.auth-page) .tms-load-detail-actions .button-link {
  gap: 7px;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 13px;
}

body:not(.auth-page) .tms-info-callout,
body:not(.auth-page) .tms-warning-callout {
  gap: 9px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
}

body:not(.auth-page) .tms-form-grid,
body:not(.auth-page) .tms-modal-panel .detail-grid.tms-form-grid,
body:not(.auth-page) .tms-modal-panel .edit-grid.tms-form-grid {
  gap: 11px 13px;
}

body:not(.auth-page) .tms-form-grid > label,
body:not(.auth-page) .tms-modal-panel .tms-form-grid > label,
body:not(.auth-page) .tms-modal-panel .open-truck-note-label {
  gap: 5px;
  font-size: 11px;
}

body:not(.auth-page) .tms-modal-panel :where(input, select, textarea) {
  min-height: 44px;
  padding: 9px 12px;
  font-size: 13px;
}

body:not(.auth-page) .tms-modal-panel textarea {
  min-height: 86px;
}

body:not(.auth-page) .tms-action-tile-grid,
body:not(.auth-page) .tms-modal-panel .modal-actions.tms-action-tile-grid {
  gap: 10px;
}

body:not(.auth-page) .tms-action-tile-grid button,
body:not(.auth-page) .tms-modal-panel .modal-actions.tms-action-tile-grid button {
  min-height: 96px;
  padding: 13px 9px;
  font-size: 13px;
}

body:not(.auth-page) .tms-action-tile-grid button svg {
  width: 30px;
  height: 30px;
}

body:not(.auth-page) .tms-modal-panel .connection-detail-grid.tms-stat-grid {
  gap: 9px;
}

body:not(.auth-page) .tms-modal-panel .connection-detail-grid.tms-stat-grid > div {
  min-height: 72px;
  padding: 10px 11px;
}

body:not(.auth-page) .tms-modal-schedule-note .jitc-color-palette,
body:not(.auth-page) .tms-modal-open-truck-note .jitc-color-palette {
  gap: 9px;
}

body:not(.auth-page) .tms-modal-schedule-note .jitc-color-swatch,
body:not(.auth-page) .tms-modal-open-truck-note .jitc-color-swatch {
  width: 34px;
  height: 34px;
}

/* Shared Schedule load detail dialog: regular, assigned, and LoadStop states. */
body:not(.auth-page) .tms-modal-panel.tms-modal-load-details {
  width: min(720px, calc(100vw - 32px));
}

.tms-load-details-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.tms-load-details-body {
  display: grid;
  gap: 14px;
}

.tms-load-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.tms-load-detail-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid #d7e1ee;
  border-radius: 10px;
}

.tms-load-detail-grid > div.wide,
.tms-load-detail-grid > div.detail-grid-wide {
  grid-column: 1 / -1;
}

.tms-load-detail-grid span {
  color: #60718a;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tms-load-detail-grid strong {
  min-width: 0;
  color: #0b1830;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tms-load-detail-actions {
  flex-wrap: wrap;
}

.tms-load-detail-actions .button-link,
.tms-load-detail-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
}

.tms-load-detail-actions .button-link svg,
.tms-load-detail-actions button svg {
  width: 18px;
  height: 18px;
}

.tms-load-detail-actions .danger-action {
  color: #a71d28;
  background: #fff6f7;
  border-color: #efb9bf;
  box-shadow: none;
}

@media (max-width: 640px) {
  body:not(.auth-page) .tms-modal-panel,
  body:not(.auth-page) .tms-modal-panel.tms-modal-action-chooser,
  body:not(.auth-page) .tms-modal-panel.tms-modal-connection,
  body:not(.auth-page) .tms-modal-panel.tms-modal-form,
  body:not(.auth-page) .tms-modal-panel.tms-modal-open-truck-note,
  body:not(.auth-page) .tms-modal-panel.tms-modal-positioning,
  body:not(.auth-page) .tms-modal-panel.tms-modal-resource,
  body:not(.auth-page) .tms-modal-panel.tms-modal-load-details {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  body:not(.auth-page) .tms-modal-header {
    gap: 10px;
    padding: 13px 14px;
  }

  body:not(.auth-page) .tms-modal-body {
    padding: 14px;
  }

  body:not(.auth-page) .tms-modal-footer,
  body:not(.auth-page) .tms-modal-panel .modal-actions.tms-modal-footer,
  body:not(.auth-page) .tms-modal-panel .edit-actions.tms-modal-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px;
  }

  body:not(.auth-page) .tms-modal-footer > :where(button, a) {
    width: 100%;
  }

  .tms-load-detail-grid {
    grid-template-columns: 1fr;
  }

  .tms-load-detail-grid > div.wide,
  .tms-load-detail-grid > div.detail-grid-wide {
    grid-column: auto;
  }
}

/* TMS 2030 modal system -------------------------------------------------- */
body.tms-modal-open {
  overflow: hidden;
}

.modal-overlay:has(.tms-modal-panel),
.tms-edit-overlay {
  z-index: 1200;
  padding: clamp(12px, 2.2vw, 32px);
  background: rgba(13, 28, 49, 0.58);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: tms-modal-backdrop-in 160ms ease-out;
}

.tms-modal-panel {
  --tms-accent: #1769e8;
  --tms-accent-soft: #eaf2ff;
  display: flex;
  flex-direction: column;
  width: min(1040px, calc(100vw - 32px));
  max-height: min(90vh, 900px);
  padding: 0;
  overflow: hidden;
  color: #0b1830;
  background: #fff;
  border: 1px solid #cad5e3;
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(5, 18, 37, 0.3), 0 8px 24px rgba(5, 18, 37, 0.13);
  animation: tms-modal-panel-in 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tms-modal-panel.tms-modal-action-chooser {
  width: min(1180px, calc(100vw - 32px));
}

.tms-modal-panel.tms-modal-connection,
.tms-modal-panel.tms-modal-form,
.tms-modal-panel.tms-modal-open-truck-note,
.tms-modal-panel.tms-modal-positioning {
  width: min(1080px, calc(100vw - 32px));
}

.tms-modal-panel.tms-modal-resource {
  width: min(960px, calc(100vw - 32px));
}

.tms-modal-header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  min-height: 108px;
  padding: 22px 30px;
  background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
  border-bottom: 1px solid #d7e0eb;
}

.tms-modal-icon,
.tms-modal-heading-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--tms-accent);
  background: var(--tms-accent-soft);
  border: 1px solid color-mix(in srgb, var(--tms-accent) 24%, white);
  border-radius: 18px;
}

.tms-modal-icon svg,
.tms-modal-heading-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2;
}

.tms-modal-icon.tone-green,
.tms-tone-green { --tms-accent: #0a8b59; --tms-accent-soft: #e7f7ef; }
.tms-modal-icon.tone-blue,
.tms-tone-blue { --tms-accent: #1769e8; --tms-accent-soft: #eaf2ff; }
.tms-modal-icon.tone-teal,
.tms-tone-teal { --tms-accent: #0d8f98; --tms-accent-soft: #e5f7f7; }
.tms-modal-icon.tone-purple,
.tms-tone-purple { --tms-accent: #6045d6; --tms-accent-soft: #f0edff; }
.tms-modal-icon.tone-red,
.tms-tone-red { --tms-accent: #df2833; --tms-accent-soft: #fdebed; }
.tms-modal-icon.tone-amber,
.tms-tone-amber { --tms-accent: #cc7a00; --tms-accent-soft: #fff4dc; }

.tms-modal-heading,
.tms-modal-heading-copy {
  min-width: 0;
}

.tms-modal-heading .eyebrow,
.tms-modal-eyebrow,
.tms-modal-heading-copy .mini-kicker {
  margin: 0 0 5px;
  color: #07844f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tms-modal-heading h2,
.tms-modal-heading-copy h2,
.tms-modal-panel .tms-modal-header h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  color: #07152d;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.tms-modal-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 11px;
  color: var(--tms-accent, #087b59);
  background: var(--tms-accent-soft, #e8f6ef);
  border: 1px solid color-mix(in srgb, var(--tms-accent, #087b59) 28%, white);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

.tms-modal-badge.tone-green { --tms-accent: #087b59; --tms-accent-soft: #e7f7ef; }
.tms-modal-badge.tone-red { --tms-accent: #d82935; --tms-accent-soft: #fdebed; }

.tms-modal-close,
.tms-modal-panel .modal-close.tms-modal-close {
  position: static;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  color: #24344d;
  background: #fff;
  border: 1px solid #bbc9da;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.tms-modal-close svg {
  width: 24px;
  height: 24px;
}

.tms-modal-close:hover {
  color: #07152d;
  background: #f2f6fa;
  border-color: #8fa1b8;
}

.tms-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 28px 30px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.tms-modal-lead {
  margin: 0 0 24px;
  color: #4d607b;
  font-size: 17px;
  line-height: 1.55;
}

.tms-modal-footer,
.tms-modal-panel .modal-actions.tms-modal-footer,
.tms-modal-panel .edit-actions.tms-modal-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 18px 30px;
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid #d7e0eb;
}

.tms-modal-status-footer {
  padding: 18px 30px;
  color: #53647d;
  background: #fbfcfe;
  border-top: 1px solid #d7e0eb;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tms-modal-footer button,
.tms-modal-inline-actions button,
.tms-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid #c3cfde;
  border-radius: 10px;
  background: #fff;
  color: #0b1830;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.tms-modal-footer button.primary-action,
.tms-modal-inline-actions button.primary-action,
.tms-primary-action {
  color: #fff;
  background: linear-gradient(135deg, #1f6fea, #175be2);
  border-color: #175fdf;
  box-shadow: 0 6px 16px rgba(23, 95, 223, 0.2);
}

.tms-modal-footer button.danger-action,
.tms-modal-panel button.danger-action {
  color: #fff;
  background: linear-gradient(135deg, #ef3540, #da202d);
  border-color: #d8202d;
}

.tms-modal-footer button svg,
.tms-modal-inline-actions button svg,
.tms-primary-action svg {
  width: 20px;
  height: 20px;
}

.tms-info-callout,
.tms-warning-callout,
.tms-inline-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 15px 18px;
  color: #244567;
  background: #f2f8ff;
  border: 1px solid #c9dcf3;
  border-radius: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.tms-warning-callout {
  color: #8a5200;
  background: #fff8e9;
  border-color: #f0c46a;
}

.tms-inline-hint {
  margin: 15px 0 0;
  padding: 0;
  color: #5a6b83;
  background: transparent;
  border: 0;
  font-size: 13px;
}

.tms-info-callout svg,
.tms-warning-callout svg,
.tms-inline-hint svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.tms-form-grid,
.tms-modal-panel .detail-grid.tms-form-grid,
.tms-modal-panel .edit-grid.tms-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.tms-form-grid > label,
.tms-modal-panel .tms-form-grid > label,
.tms-modal-panel .open-truck-note-label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #364861;
  font-size: 13px;
  font-weight: 800;
}

.tms-form-grid > div:not(.empty-location-card),
.tms-form-grid > label,
.tms-modal-resource .tms-check-grid {
  box-sizing: border-box;
}

.tms-form-grid input,
.tms-form-grid select,
.tms-form-grid textarea,
.tms-modal-panel .open-truck-note-label textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  color: #0c1b34;
  background: #fff;
  border: 1px solid #bdcadb;
  border-radius: 10px;
  font: inherit;
  font-weight: 650;
  outline: none;
}

.tms-form-grid textarea,
.tms-modal-panel .open-truck-note-label textarea {
  min-height: 112px;
  resize: vertical;
}

.tms-form-grid input:focus,
.tms-form-grid select:focus,
.tms-form-grid textarea:focus,
.tms-modal-panel .open-truck-note-label textarea:focus {
  border-color: #1769e8;
  box-shadow: 0 0 0 3px rgba(23, 105, 232, 0.14);
}

.tms-form-grid .wide-field,
.tms-form-grid .wide,
.tms-form-grid .checkbox-field {
  grid-column: 1 / -1;
}

.tms-form-grid .checkbox-field {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #d7e0eb;
  border-radius: 11px;
}

.tms-form-grid .checkbox-field input,
.tms-check-grid input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  accent-color: #1769e8;
}

.tms-action-tile-grid,
.tms-modal-panel .modal-actions.tms-action-tile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.tms-action-tile-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 170px;
  padding: 18px 12px;
  color: #1b293e;
  background: #fff;
  border: 1px solid #c8d3e2;
  border-radius: 15px;
  font: inherit;
  font-size: 17px;
  font-weight: 850;
  cursor: pointer;
}

.tms-action-tile-grid button svg {
  width: 42px;
  height: 42px;
}

.tms-action-tile-grid button:hover,
.tms-action-tile-grid button.primary-action {
  color: #145bd3;
  background: #f1f6ff;
  border-color: #1769e8;
  box-shadow: 0 8px 24px rgba(23, 105, 232, 0.15);
}

.tms-action-tile-grid button.danger-action {
  color: #c5222e;
  background: #fff5f6;
  border-color: #ef9ba2;
}

.tms-route-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 18px 20px;
  background: #f9fbfe;
  border: 1px solid #cbd8e8;
  border-radius: 13px;
}

.tms-route-summary > div {
  min-width: 0;
}

.tms-route-summary span:not(.tms-route-line),
.tms-stat-grid span,
.open-truck-note-context small {
  display: block;
  color: #617189;
  font-size: 12px;
  font-weight: 800;
}

.tms-route-summary strong,
.tms-stat-grid strong,
.open-truck-note-context b {
  display: block;
  margin-top: 4px;
  color: #0a1830;
  font-size: 18px;
  line-height: 1.35;
}

.tms-route-line {
  position: relative;
  display: block;
  height: 2px;
  background: #1769e8;
}

.tms-route-line::before,
.tms-route-line::after {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  content: "";
  background: #fff;
  border: 2px solid #1769e8;
  border-radius: 50%;
  transform: translateY(-50%);
}

.tms-route-line::before { left: -1px; }
.tms-route-line::after { right: -1px; }

.tms-stat-grid,
.tms-modal-panel .connection-detail-grid.tms-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tms-stat-grid > div,
.tms-modal-panel .connection-detail-grid.tms-stat-grid > div {
  padding: 17px 18px;
  background: #fbfcfe;
  border: 1px solid #cbd8e8;
  border-radius: 12px;
}

.tms-stat-grid .tms-stat-positive {
  color: #087b59;
  background: #f1fbf6;
  border-color: #9bd5b8;
}

.tms-stat-grid .tms-stat-positive span,
.tms-stat-grid .tms-stat-positive strong {
  color: #087b59;
}

.tms-stat-grid .tms-stat-callout {
  grid-column: 1 / -1;
  color: #8a5200;
  background: #fffaf0;
  border-color: #efc873;
}

.tms-route-form-grid .empty-location-card {
  min-height: 144px;
  padding: 18px;
  background: #fafcfe;
  border: 1px solid #cbd8e8;
  border-radius: 13px;
}

.tms-route-form-grid .empty-location-card span,
.tms-route-form-grid .empty-location-card small,
.tms-route-form-grid .empty-location-card strong {
  display: block;
}

.tms-route-form-grid .empty-location-card strong {
  margin: 10px 0 3px;
  font-size: 20px;
}

.tms-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  color: #0a1830;
  border-bottom: 1px solid #d7e0eb;
  font-size: 15px;
  font-weight: 850;
}

.tms-section-heading small {
  color: #687990;
  font-size: 12px;
  font-weight: 600;
}

.tms-check-grid,
.tms-modal-panel .check-grid.tms-check-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.tms-check-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 14px;
  color: #26374f;
  background: #fafbfd;
  border: 1px solid #ced9e6;
  border-radius: 10px;
  font-weight: 750;
}

.tms-modal-resource .tms-modal-body {
  padding-bottom: 24px;
}

.tms-modal-resource .tms-form-grid label > span {
  color: #53647d;
}

.tms-modal-onboarding .tms-modal-header {
  --tms-accent: #6045d6;
  --tms-accent-soft: #f0edff;
}

.open-truck-note-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.open-truck-note-context > div {
  min-height: 104px;
  padding: 18px;
  background: #f8fcfa;
  border: 1px solid #bed7c9;
  border-radius: 13px;
}

.open-truck-note-context span {
  display: block;
  margin-top: 3px;
  color: #41526a;
}

.open-truck-note-color-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
  font-weight: 800;
}

.tms-modal-inline-actions {
  display: flex;
  justify-content: flex-end;
  margin: 15px 0 20px;
}

.tms-modal-open-truck-note h3 {
  margin: 20px 0 10px;
  padding-top: 18px;
  border-top: 1px solid #d7e0eb;
}

.tms-modal-positioning .tms-modal-body {
  padding-top: 24px;
}

.tms-modal-positioning .positioning-form-grid.tms-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tms-modal-positioning .positioning-derived-summary,
.tms-modal-positioning .positioning-match-preview,
.tms-modal-positioning .positioning-link-row {
  grid-column: 1 / -1;
}

.tms-modal-schedule-note .schedule-note-color-field {
  padding: 14px 0 4px;
}

.tms-modal-panel :where(button, input, select, textarea, a):focus-visible {
  outline: 3px solid rgba(23, 105, 232, 0.3);
  outline-offset: 2px;
}

/* TMS modal icon and palette polish v48. Keep this after the global portal
   button rules so modal-specific colors are not flattened into solid blue. */
body:not(.auth-page) .tms-modal-panel .modal-actions.tms-action-tile-grid button {
  color: #1b293e;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-color: #c8d3e2;
  box-shadow: 0 4px 12px rgba(15, 35, 65, 0.04);
}

body:not(.auth-page) .tms-modal-panel .modal-actions.tms-action-tile-grid button:hover,
body:not(.auth-page) .tms-modal-panel .modal-actions.tms-action-tile-grid button.primary-action {
  color: #145bd3;
  background: linear-gradient(180deg, #f4f8ff 0%, #eaf2ff 100%);
  border-color: #1769e8;
  box-shadow: 0 9px 24px rgba(23, 105, 232, 0.16);
}

body:not(.auth-page) .tms-modal-panel .modal-actions.tms-action-tile-grid button.danger-action {
  color: #b9222d;
  background: linear-gradient(180deg, #fffafa 0%, #fff2f3 100%);
  border-color: #ef9ba2;
}

.tms-action-tile-grid button .jitc-icon {
  width: 46px;
  height: 46px;
  stroke-width: 1.8;
}

.tms-modal-icon.tone-gray,
.tms-modal-panel .tone-gray {
  --tms-accent: #64748b;
  --tms-accent-soft: #f1f5f9;
}

.tms-modal-close,
.tms-modal-panel .modal-close.tms-modal-close {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.tms-modal-close:hover,
.tms-modal-panel .modal-close.tms-modal-close:hover {
  transform: translateY(-1px);
}

.tms-modal-schedule-note .jitc-color-palette,
.tms-modal-open-truck-note .jitc-color-palette {
  max-width: none;
  gap: 12px;
}

.tms-modal-schedule-note .jitc-color-swatch,
.tms-modal-open-truck-note .jitc-color-swatch {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 50%;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition: transform 130ms ease, box-shadow 130ms ease;
}

.tms-modal-schedule-note .jitc-color-swatch:hover,
.tms-modal-open-truck-note .jitc-color-swatch:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.tms-modal-schedule-note .jitc-color-swatch.active,
.tms-modal-open-truck-note .jitc-color-swatch.active {
  outline: 3px solid #1769e8;
  outline-offset: 3px;
}

.tms-modal-schedule-note .jitc-color-swatch.active::after,
.tms-modal-open-truck-note .jitc-color-swatch.active::after {
  inset: 11px;
  border: 2px solid rgba(15, 23, 42, 0.72);
  background: rgba(255, 255, 255, 0.76);
}

@keyframes tms-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tms-modal-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .tms-modal-panel,
  .tms-modal-panel.tms-modal-action-chooser,
  .tms-modal-panel.tms-modal-connection,
  .tms-modal-panel.tms-modal-form,
  .tms-modal-panel.tms-modal-open-truck-note,
  .tms-modal-panel.tms-modal-positioning,
  .tms-modal-panel.tms-modal-resource {
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .tms-action-tile-grid,
  .tms-modal-panel .modal-actions.tms-action-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tms-stat-grid,
  .tms-modal-panel .connection-detail-grid.tms-stat-grid,
  .tms-modal-positioning .positioning-form-grid.tms-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .modal-overlay:has(.tms-modal-panel),
  .tms-edit-overlay {
    place-items: stretch;
    padding: 8px;
  }

  .tms-modal-panel,
  .tms-modal-panel.tms-modal-action-chooser,
  .tms-modal-panel.tms-modal-connection,
  .tms-modal-panel.tms-modal-form,
  .tms-modal-panel.tms-modal-open-truck-note,
  .tms-modal-panel.tms-modal-positioning,
  .tms-modal-panel.tms-modal-resource {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }

  .tms-modal-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    min-height: 86px;
    padding: 15px 16px;
  }

  .tms-modal-icon,
  .tms-modal-heading-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  .tms-modal-icon svg,
  .tms-modal-heading-icon svg {
    width: 24px;
    height: 24px;
  }

  .tms-modal-heading h2,
  .tms-modal-heading-copy h2,
  .tms-modal-panel .tms-modal-header h2 {
    font-size: 23px;
  }

  .tms-modal-close,
  .tms-modal-panel .modal-close.tms-modal-close {
    width: 42px;
    height: 42px;
  }

  .tms-modal-body {
    padding: 20px 16px;
  }

  .tms-form-grid,
  .tms-modal-panel .detail-grid.tms-form-grid,
  .tms-modal-panel .edit-grid.tms-form-grid,
  .tms-stat-grid,
  .tms-modal-panel .connection-detail-grid.tms-stat-grid,
  .tms-modal-positioning .positioning-form-grid.tms-form-grid,
  .open-truck-note-context {
    grid-template-columns: 1fr;
  }

  .tms-action-tile-grid,
  .tms-modal-panel .modal-actions.tms-action-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tms-action-tile-grid button {
    min-height: 118px;
    font-size: 14px;
  }

  .tms-route-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tms-route-line {
    width: 2px;
    height: 38px;
    margin-left: 18px;
  }

  .tms-route-line::before,
  .tms-route-line::after {
    left: 50%;
    transform: translate(-50%, 0);
  }

  .tms-route-line::before { top: -1px; }
  .tms-route-line::after { top: auto; right: auto; bottom: -1px; }

  .tms-modal-footer,
  .tms-modal-panel .modal-actions.tms-modal-footer,
  .tms-modal-panel .edit-actions.tms-modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    padding: 14px 16px;
  }

  .tms-modal-footer button {
    width: 100%;
  }

  .tms-modal-status-footer {
    padding: 14px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay:has(.tms-modal-panel),
  .tms-edit-overlay,
  .tms-modal-panel {
    animation: none;
  }
}

/* Authentication 2030 — shared by login, password reset, and MFA. */
body.auth-page {
  --auth-navy: #0b1930;
  --auth-blue: #145fa8;
  --auth-green: #087b59;
  --auth-green-dark: #066c4e;
  --auth-ink: #102033;
  --auth-muted: #66727d;
  --auth-border: #cbd5d1;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: 1fr;
  place-items: center;
  margin: 0;
  padding: 28px;
  overflow-x: hidden;
  color: var(--auth-ink);
  background-color: #f3f6f4;
  background-image:
    radial-gradient(circle at 75% 12%, rgba(20, 95, 168, 0.055), transparent 31%),
    linear-gradient(rgba(112, 134, 125, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 134, 125, 0.038) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.auth-page .auth-shell-2030 {
  display: grid;
  grid-template-columns: minmax(390px, 43fr) minmax(520px, 57fr);
  width: min(1160px, calc(100vw - 56px));
  min-height: 650px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #c8d2d0;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 65px rgba(21, 39, 49, 0.13), 0 3px 12px rgba(21, 39, 49, 0.06);
}

.auth-page.auth-mfa-active .auth-shell-2030 {
  grid-template-columns: minmax(390px, 39fr) minmax(650px, 61fr);
  width: min(1240px, calc(100vw - 56px));
  min-height: 760px;
}

.auth-page jitc-auth-brand,
.auth-page jitc-auth-security-badge,
.auth-page jitc-auth-footer {
  display: block;
}

.auth-page .auth-brand-panel {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 43px 46px 38px;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 35%, rgba(18, 129, 228, 0.3), transparent 38%),
    linear-gradient(145deg, #0b1930 0%, #073d74 54%, #075aa3 115%);
}

.auth-page .auth-brand-panel::before,
.auth-page .auth-brand-panel::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.auth-page .auth-brand-panel::before {
  inset: 0;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(114, 188, 246, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 188, 246, 0.12) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(520px) rotateX(58deg) translateY(235px) scale(1.45);
  transform-origin: center bottom;
}

.auth-page .auth-brand-panel::after {
  right: -125px;
  bottom: -180px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(87, 178, 246, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(87, 178, 246, 0.025), 0 0 0 146px rgba(87, 178, 246, 0.02);
}

.auth-page .auth-brand-wordmark {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 24px;
  letter-spacing: 0.025em;
}

.auth-page .auth-brand-wordmark strong {
  font-size: inherit;
  font-weight: 850;
}

.auth-page .auth-brand-wordmark span {
  font-weight: 400;
}

.auth-page .auth-brand-copy {
  position: relative;
  z-index: 3;
  margin-top: 80px;
}

.auth-page .auth-brand-copy h2 {
  max-width: 450px;
  margin: 0 0 15px;
  color: #ffffff;
  white-space: nowrap;
  font-size: 35px;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.auth-page .auth-brand-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.79);
  font-size: 20px;
  line-height: 1.45;
}

.auth-page .auth-route-visual {
  position: absolute;
  z-index: 1;
  inset: 225px -38px 60px -30px;
  pointer-events: none;
}

.auth-page .auth-route-map {
  position: absolute;
  inset: 18px -2px auto;
  width: calc(100% + 4px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 28px rgba(0, 38, 87, 0.22));
}

.auth-page .auth-route-map .map-outline,
.auth-page .auth-route-map .map-detail {
  fill: rgba(9, 70, 132, 0.11);
  stroke: rgba(92, 183, 247, 0.27);
  stroke-width: 1;
}

.auth-page .auth-route-map .map-detail {
  fill: none;
  stroke-width: 0.7;
  opacity: 0.55;
}

.auth-page .auth-route-map .route-line {
  fill: none;
  stroke: #39a9ff;
  stroke-width: 1.8;
  opacity: 0.86;
}

.auth-page .auth-route-map .route-two,
.auth-page .auth-route-map .route-three {
  opacity: 0.46;
  stroke-width: 1.1;
}

.auth-page .auth-route-map .route-nodes circle {
  fill: #dff5ff;
  stroke: #31a9ff;
  stroke-width: 3;
  filter: drop-shadow(0 0 7px #4bb9ff);
}

.auth-page .auth-shipment-card {
  position: absolute;
  z-index: 3;
  left: 25%;
  top: 57%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  width: 280px;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(104, 185, 245, 0.42);
  border-radius: 8px;
  background: rgba(5, 38, 80, 0.9);
  box-shadow: 0 18px 36px rgba(0, 23, 55, 0.28);
  color: rgba(255, 255, 255, 0.76);
}

.auth-page .auth-shipment-card div {
  display: grid;
  gap: 7px;
}

.auth-page .auth-shipment-card span,
.auth-page .auth-shipment-card strong,
.auth-page .auth-shipment-card em {
  display: block;
}

.auth-page .auth-shipment-card span {
  font-size: 14px;
  letter-spacing: 0.03em;
}

.auth-page .auth-shipment-card strong {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 500;
}

.auth-page .auth-shipment-card strong b {
  padding: 0 6px;
  color: #86c9f7;
}

.auth-page .auth-shipment-card em {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(18, 112, 196, 0.34);
  color: #67bdff;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.auth-page .auth-truck-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 7px;
  color: #3aa9ff;
  background: rgba(43, 132, 218, 0.18);
}

.auth-page .auth-truck-icon svg {
  width: 34px;
  fill: currentColor;
}

.auth-page .auth-system-status {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  color: rgba(255, 255, 255, 0.77);
  font-size: 14px;
}

.auth-page .auth-system-status i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4bc684;
  box-shadow: 0 0 0 4px rgba(75, 198, 132, 0.08);
}

.auth-page .auth-form-panel {
  min-width: 0;
  padding: 44px 56px 30px;
  background: #fffefd;
}

.auth-page .auth-form-inner {
  display: flex;
  width: min(100%, 550px);
  min-height: 100%;
  flex-direction: column;
  margin: 0 auto;
}

.auth-page.auth-mfa-active .auth-form-inner {
  width: min(100%, 660px);
}

.auth-page .auth-security-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 8px;
  background: #e8f4ed;
  color: #0d684c;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.auth-page .auth-security-badge svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.auth-page .auth-heading {
  margin: 26px 0 27px;
}

.auth-page .auth-heading h1 {
  margin: 0 0 8px;
  color: var(--auth-ink);
  font-size: clamp(33px, 3.1vw, 43px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.auth-page .auth-heading p {
  margin: 0;
  color: var(--auth-muted);
  font-size: 18px;
  line-height: 1.42;
}

.auth-page .auth-form {
  display: grid;
  gap: 10px;
}

.auth-page .auth-form[hidden] {
  display: none;
}

.auth-page .auth-form > label:not(.auth-check-row),
.auth-page .mfa-key-panel > label {
  margin-top: 6px;
  color: var(--auth-ink);
  font-size: 14px;
  font-weight: 650;
}

.auth-page .auth-input-shell {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 52px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--auth-border);
  border-radius: 9px;
  background: #ffffff;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.auth-page .auth-input-shell:focus-within {
  border-color: #2477b8;
  box-shadow: 0 0 0 3px rgba(36, 119, 184, 0.14);
}

.auth-page .auth-input-shell > svg,
.auth-page .auth-password-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #6d7a84;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.auth-page .auth-input-shell input {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--auth-ink);
  font-size: 16px;
}

.auth-page .auth-password-toggle {
  display: grid;
  width: 36px;
  min-height: 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
}

.auth-page .auth-password-toggle:hover,
.auth-page .auth-password-toggle:focus-visible {
  background: #eef4f7;
}

.auth-page .auth-standalone-input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--auth-border);
  border-radius: 9px;
  outline: 0;
  background: #ffffff;
  color: var(--auth-ink);
  font-size: 16px;
}

.auth-page .auth-standalone-input:focus {
  border-color: #2477b8;
  box-shadow: 0 0 0 3px rgba(36, 119, 184, 0.14);
}

.auth-page .auth-turnstile-frame {
  display: flex;
  min-height: 67px;
  align-items: center;
  margin-top: 8px;
  overflow: visible;
  border-radius: 9px;
}

.auth-page .turnstile-container {
  min-height: 65px;
  max-width: 100%;
}

.auth-page .auth-primary-action {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 52px;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  justify-content: initial;
  margin-top: 7px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: var(--auth-green);
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(8, 123, 89, 0.16);
  font-size: 17px;
  font-weight: 650;
}

.auth-page .auth-primary-action span {
  grid-column: 2;
}

.auth-page .auth-primary-action b {
  grid-column: 3;
  font-size: 25px;
  font-weight: 350;
}

.auth-page .auth-primary-action:hover:not(:disabled) {
  background: var(--auth-green-dark);
}

.auth-page .auth-primary-action:active:not(:disabled) {
  background: #055f45;
  transform: translateY(1px);
}

.auth-page .auth-primary-action:disabled {
  cursor: not-allowed;
  background: #9ab8ad;
  box-shadow: none;
}

.auth-page .auth-message {
  position: relative;
  min-height: 0;
  margin: 2px 0 0;
  padding: 10px 12px 10px 36px;
  border: 1px solid #dbe4df;
  border-radius: 9px;
  background: #f5f8f6;
  color: #4f625a;
  font-size: 13px;
  line-height: 1.4;
}

.auth-page .auth-message:empty {
  display: none;
}

.auth-page .auth-message::before {
  position: absolute;
  top: 9px;
  left: 12px;
  content: "i";
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: #d9e8e1;
  color: #315f4e;
  font-size: 11px;
  font-weight: 900;
}

.auth-page .auth-message[data-kind="success"] {
  border-color: #a8d9bd;
  background: #edf8f1;
  color: #14643f;
}

.auth-page .auth-message[data-kind="success"]::before {
  content: "✓";
  background: #168a55;
  color: #ffffff;
}

.auth-page .auth-message[data-kind="error"] {
  border-color: #edb8b2;
  background: #fff0ef;
  color: #9a2d24;
}

.auth-page .auth-message[data-kind="error"]::before {
  content: "!";
  background: #c9483c;
  color: #ffffff;
}

.auth-page .auth-message[data-kind="warning"] {
  border-color: #ecd399;
  background: #fff8e8;
  color: #815b08;
}

.auth-page .auth-reset-link,
.auth-page .auth-back-link {
  align-self: center;
  margin: 20px auto 0;
  color: #263844;
  font-size: 14px;
  font-weight: 650;
  text-underline-offset: 3px;
}

.auth-page .auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration-thickness: 1px;
}

.auth-page .auth-back-link span {
  font-size: 20px;
  text-decoration: none;
}

.auth-page .auth-footer {
  width: 100%;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid #d9e0dd;
  color: #83908c;
  font-size: 13px;
  text-align: center;
}

.auth-page .auth-reset-link + .auth-footer,
.auth-page .auth-back-link + .auth-footer {
  margin-top: 28px;
}

.auth-page .auth-help {
  margin: 0;
  color: var(--auth-muted);
  font-size: 12px;
  line-height: 1.45;
}

.auth-page .auth-mfa-form {
  gap: 9px;
}

.auth-page .mfa-setup {
  display: grid;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid #bdd3ea;
  border-radius: 9px;
  background: #f8fbff;
}

.auth-page .mfa-setup[hidden],
.auth-page .mfa-qr-panel[hidden] {
  display: none;
}

.auth-page .mfa-setup-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.auth-page .mfa-setup-title svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #1652a0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.auth-page .mfa-setup h2 {
  margin: 0;
  color: #17365f;
  font-size: 17px;
}

.auth-page .mfa-setup ol {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 26px;
  color: #4f5f70;
  font-size: 12.5px;
  line-height: 1.4;
}

.auth-page .mfa-enrollment-grid {
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.auth-page .mfa-qr-panel {
  display: grid;
  gap: 6px;
  justify-items: center;
  margin: 0;
  padding: 9px;
  border: 1px solid #d2e0ee;
  border-radius: 8px;
  background: #ffffff;
}

.auth-page .mfa-qr-canvas {
  display: block;
  width: min(176px, 100%);
  height: auto;
  aspect-ratio: 1;
  image-rendering: pixelated;
}

.auth-page .mfa-qr-panel figcaption {
  color: #4f5f70;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.auth-page .mfa-key-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.auth-page .mfa-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
}

.auth-page .mfa-manual-key {
  display: flex;
  min-height: 46px;
  align-items: center;
  padding: 9px 11px;
  overflow-wrap: anywhere;
  border: 1px solid #b7c9df;
  border-radius: 7px;
  background: #ffffff;
  color: #17365f;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.auth-page .secondary-action {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #b7c9df;
  border-radius: 7px;
  background: #ffffff;
  color: #17365f;
  font-weight: 750;
}

.auth-page .auth-external-link {
  color: #17365f;
  font-size: 13px;
  font-weight: 650;
  text-underline-offset: 3px;
}

.auth-page .auth-external-link::before {
  margin-right: 8px;
  content: "↗";
  font-size: 17px;
}

.auth-page .auth-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #31424d;
  font-size: 13px;
  font-weight: 500;
}

.auth-page .auth-check-row input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #1265b2;
}

@media (max-width: 960px) {
  body.auth-page {
    padding: 22px;
  }

  .auth-page .auth-shell-2030,
  .auth-page.auth-mfa-active .auth-shell-2030 {
    grid-template-columns: minmax(300px, 38fr) minmax(470px, 62fr);
    width: min(1040px, calc(100vw - 44px));
  }

  .auth-page .auth-brand-panel {
    padding: 34px 30px;
  }

  .auth-page .auth-brand-copy {
    margin-top: 66px;
  }

  .auth-page .auth-brand-copy h2 {
    font-size: 34px;
    white-space: normal;
  }

  .auth-page .auth-form-panel {
    padding: 38px 38px 28px;
  }

  .auth-page .auth-shipment-card {
    left: 14%;
    width: 260px;
  }

  .auth-page .mfa-enrollment-grid {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 760px) {
  body.auth-page {
    display: block;
    min-height: 100dvh;
    padding: 14px;
  }

  .auth-page .auth-shell-2030,
  .auth-page.auth-mfa-active .auth-shell-2030 {
    display: block;
    width: min(100%, 600px);
    min-height: 0;
    margin: 0 auto;
    border-radius: 16px;
  }

  .auth-page jitc-auth-brand {
    display: none;
  }

  .auth-page .auth-form-panel {
    min-height: calc(100dvh - 30px);
    padding: 27px 24px 22px;
  }

  .auth-page .auth-form-inner,
  .auth-page.auth-mfa-active .auth-form-inner {
    width: 100%;
  }

  .auth-page .auth-heading {
    margin: 20px 0 22px;
  }

  .auth-page .auth-heading h1 {
    font-size: 32px;
  }

  .auth-page .auth-heading p {
    font-size: 16px;
  }

  .auth-page .mfa-enrollment-grid {
    grid-template-columns: 1fr;
  }

  .auth-page .mfa-qr-panel {
    width: min(230px, 100%);
    justify-self: center;
  }

  .auth-page .auth-footer {
    margin-top: 30px;
  }
}

@media (max-width: 380px) {
  body.auth-page {
    padding: 8px;
  }

  .auth-page .auth-form-panel {
    min-height: calc(100dvh - 16px);
    padding: 23px 16px 18px;
  }

  .auth-page .mfa-key-row {
    grid-template-columns: 1fr;
  }
}

.schedule-modern-page .sync-running {
  color: #0f766e;
}

@media (max-width: 1480px) {
  .schedule-modern-page .controls.schedule-filter-bar {
    grid-template-columns: minmax(390px, 1.5fr) repeat(3, minmax(140px, 1fr));
  }
}

@media (max-width: 1180px) {
  .status-kpi-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

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

  .schedule-modern-header {
    display: grid;
  }

  .schedule-header-actions {
    justify-content: flex-start;
  }

}

/* Global modern portal polish */
body:not(.auth-page) {
  --portal-bg: #f5f7fb;
  --portal-surface: #ffffff;
  --portal-line: #dbe3ef;
  --portal-text: #0f172a;
  --portal-muted: #64748b;
  --portal-blue: #2563eb;
  --portal-blue-dark: #1d4ed8;
  --portal-green: #0f8a64;
  --portal-yellow: #f59e0b;
  --portal-red: #dc2626;
  background: var(--portal-bg);
  color: var(--portal-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body:not(.auth-page) main {
  min-width: 0;
  padding: 22px;
  background: var(--portal-bg);
}

body:not(.auth-page) .sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(37, 99, 235, 0.24), transparent 32%),
    linear-gradient(180deg, #08182c 0%, #0b213c 52%, #071426 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08), 8px 0 24px rgba(15, 23, 42, 0.12);
}

body:not(.auth-page) .sidebar-brand {
  min-height: 80px;
  padding: 16px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body:not(.auth-page) .brand-mark,
body:not(.auth-page) .sidebar .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #dbeafe 100%);
}

body:not(.auth-page) .brand-text strong {
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
}

body:not(.auth-page) .brand-text span {
  color: rgba(226, 232, 240, 0.8);
  font-size: 11px;
  font-weight: 600;
}

body:not(.auth-page) .sidebar-collapse-toggle {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

body:not(.auth-page) .sidebar-nav {
  padding: 14px 10px;
  gap: 14px;
}

body:not(.auth-page) .nav-section + .nav-section {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body:not(.auth-page) .nav-section-title {
  padding-left: 8px;
  color: rgba(203, 213, 225, 0.72);
  font-size: 10px;
  letter-spacing: 0.03em;
}

body:not(.auth-page) .nav-item {
  min-height: 40px;
  border-left: 0;
  border-radius: 10px;
  color: rgba(241, 245, 249, 0.88);
  font-weight: 650;
}

body:not(.auth-page) .nav-item:hover,
body:not(.auth-page) .nav-group.open > .nav-group-toggle {
  background: rgba(255, 255, 255, 0.08);
}

body:not(.auth-page) .nav-item.active,
body:not(.auth-page) .nav-subitem.active {
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}

body:not(.auth-page) .nav-icon {
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
}

body:not(.auth-page) .nav-item.active .nav-icon {
  background: rgba(255, 255, 255, 0.18);
}

body:not(.auth-page) .nav-submenu {
  margin-left: 0;
  border-left: 1px solid rgba(148, 163, 184, 0.2);
}

body:not(.auth-page) .nav-subitem {
  min-height: 34px;
  padding-left: 10px;
  border-radius: 8px;
  color: rgba(226, 232, 240, 0.8);
  font-weight: 600;
}

body:not(.auth-page) .sidebar-account {
  margin-top: auto;
  padding: 14px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(2, 6, 23, 0.22);
}

body:not(.auth-page) .sidebar-account-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.26);
}

body:not(.auth-page) .sidebar-account-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body:not(.auth-page) .sidebar-account span {
  color: #ffffff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

body:not(.auth-page) .sidebar-account small {
  color: rgba(226, 232, 240, 0.72);
  font-size: 11px;
  font-weight: 500;
}

body:not(.auth-page) .sidebar-account button {
  width: 26px;
  height: 26px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(226, 232, 240, 0.78);
  font-size: 0;
}

body:not(.auth-page) .sidebar-account button::before {
  content: "v";
  font-size: 13px;
  font-weight: 800;
}

body:not(.auth-page) .sidebar-account button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

body.sidebar-collapsed:not(.auth-page) .sidebar-account {
  grid-template-columns: 1fr;
}

body.sidebar-collapsed:not(.auth-page) .sidebar-account-avatar {
  width: 34px;
  height: 34px;
}

body.sidebar-collapsed:not(.auth-page) .sidebar-account::before {
  display: none;
}

body:not(.auth-page) .sidebar-account {
  position: relative;
  display: block;
  padding: 12px;
}

body:not(.auth-page) .sidebar-account-toggle {
  width: 100%;
  height: auto;
  min-height: 54px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  overflow: visible;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ffffff;
  text-align: left;
  font-size: inherit;
}

body:not(.auth-page) .sidebar-account-toggle::before,
body:not(.auth-page) .sidebar-account-menu button::before {
  content: none;
}

body:not(.auth-page) .sidebar-account-toggle:hover,
body:not(.auth-page) .sidebar-account-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
}

body:not(.auth-page) .sidebar-account-chevron {
  width: 8px;
  height: 8px;
  justify-self: center;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

body:not(.auth-page) .sidebar-account-toggle[aria-expanded="true"] .sidebar-account-chevron {
  margin-top: 5px;
  transform: rotate(-135deg);
}

body:not(.auth-page) .sidebar-account-menu {
  position: absolute;
  right: 12px;
  bottom: 76px;
  left: 12px;
  z-index: 30;
  display: grid;
  gap: 4px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.24);
}

body:not(.auth-page) .sidebar-account-menu[hidden] {
  display: none;
}

body:not(.auth-page) .sidebar-account-menu a,
body:not(.auth-page) .sidebar-account-menu button {
  width: 100%;
  height: auto;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #17231e;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

body:not(.auth-page) .sidebar-account-menu a:hover,
body:not(.auth-page) .sidebar-account-menu button:hover {
  background: #eef5f1;
  color: #174d3a;
}

body:not(.auth-page) .sidebar-account-menu button[data-sign-out] {
  color: #b42318;
}

body.sidebar-collapsed:not(.auth-page) .sidebar-account {
  padding: 10px 7px;
}

body.sidebar-collapsed:not(.auth-page) .sidebar-account-toggle {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 44px;
  padding: 5px;
}

body.sidebar-collapsed:not(.auth-page) .sidebar-account .sidebar-account-avatar {
  display: grid;
}

body.sidebar-collapsed:not(.auth-page) .sidebar-account-copy,
body.sidebar-collapsed:not(.auth-page) .sidebar-account-chevron,
body.sidebar-collapsed:not(.auth-page) .sidebar-account-menu {
  display: none;
}

body:not(.auth-page) .sidebar-account {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
}

body:not(.auth-page) .sidebar-account-link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 10px;
}

body:not(.auth-page) .sidebar-account-link:hover,
body:not(.auth-page) .sidebar-account-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

body:not(.auth-page) .sidebar-account .sidebar-account-logout {
  width: 100%;
  height: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  margin: 0;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 800;
}

body:not(.auth-page) .sidebar-account .sidebar-account-logout::before {
  content: none;
}

body:not(.auth-page) .sidebar-account .sidebar-account-logout:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

body.sidebar-collapsed:not(.auth-page) .sidebar-account {
  padding: 10px 7px;
}

body.sidebar-collapsed:not(.auth-page) .sidebar-account-link {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 44px;
  padding: 5px;
}

body.sidebar-collapsed:not(.auth-page) .sidebar-account .sidebar-account-logout {
  display: none;
}

body:not(.auth-page) .topbar {
  align-items: flex-start;
  margin-bottom: 14px;
}

body:not(.auth-page) .topbar h1,
body:not(.auth-page) h1 {
  color: #0f172a;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: 0;
}

body:not(.auth-page) .topbar p,
body:not(.auth-page) p {
  color: var(--portal-muted);
}

body:not(.auth-page) button,
body:not(.auth-page) .secondary-link,
body:not(.auth-page) .primary-action,
body:not(.auth-page) .danger-action {
  min-height: 36px;
  border-radius: 9px;
  border: 1px solid var(--portal-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-weight: 700;
}

body:not(.auth-page) button:hover,
body:not(.auth-page) .secondary-link:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

body:not(.auth-page) .primary-action,
body:not(.auth-page) .resource-tabs button.active,
body:not(.auth-page) .user-filter.active,
body:not(.auth-page) .task-tabs button.active,
body:not(.auth-page) .task-view-switch button.active {
  color: #ffffff;
  background: var(--portal-blue);
  border-color: var(--portal-blue);
}

body:not(.auth-page) .danger-action {
  color: #ffffff;
  background: var(--portal-red);
  border-color: var(--portal-red);
}

body:not(.auth-page) input,
body:not(.auth-page) select,
body:not(.auth-page) textarea,
body:not(.auth-page) summary {
  border-color: var(--portal-line);
  border-radius: 9px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

body:not(.auth-page) input:focus,
body:not(.auth-page) select:focus,
body:not(.auth-page) textarea:focus {
  outline: 2px solid rgba(37, 99, 235, 0.18);
  border-color: #93c5fd;
}

body:not(.auth-page) .status,
body:not(.auth-page) .controls,
body:not(.auth-page) .board,
body:not(.auth-page) .database-filters,
body:not(.auth-page) .database-table-wrap,
body:not(.auth-page) .tracking-filters,
body:not(.auth-page) .tracking-summary,
body:not(.auth-page) .tracking-card,
body:not(.auth-page) .task-board,
body:not(.auth-page) .task-card,
body:not(.auth-page) .task-empty,
body:not(.auth-page) .task-form-panel,
body:not(.auth-page) .task-toolbar,
body:not(.auth-page) .task-calendar-controls,
body:not(.auth-page) .user-toolbar,
body:not(.auth-page) .user-filter-bar,
body:not(.auth-page) .user-bulk-actions,
body:not(.auth-page) .user-detail-drawer,
body:not(.auth-page) .routing-controls,
body:not(.auth-page) .routing-loads-panel,
body:not(.auth-page) .routing-resource-panel,
body:not(.auth-page) .driver-filters,
body:not(.auth-page) .open-truck-filters,
body:not(.auth-page) .open-truck-row,
body:not(.auth-page) .onboarding-toolbar,
body:not(.auth-page) .onboarding-column,
body:not(.auth-page) .settings-link-card,
body:not(.auth-page) .broker-out-panel {
  border: 1px solid var(--portal-line);
  border-radius: 14px;
  background: var(--portal-surface);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

body:not(.auth-page) .controls,
body:not(.auth-page) .database-filters,
body:not(.auth-page) .tracking-filters,
body:not(.auth-page) .driver-filters,
body:not(.auth-page) .open-truck-filters,
body:not(.auth-page) .onboarding-toolbar,
body:not(.auth-page) .routing-controls {
  padding: 14px;
}

body:not(.auth-page) .database-table {
  border-collapse: separate;
  border-spacing: 0;
}

body:not(.auth-page) .database-table th {
  background: #f8fafc;
  color: #64748b;
  border-bottom: 1px solid var(--portal-line);
  font-size: 12px;
  text-transform: none;
}

body:not(.auth-page) .database-table td {
  border-bottom: 1px solid #edf2f7;
}

body:not(.auth-page) .database-table tbody tr:hover {
  background: #f8fbff;
}

body:not(.auth-page) .routing-load-card,
body:not(.auth-page) .routing-resource-card,
body:not(.auth-page) .tracking-card,
body:not(.auth-page) .task-card,
body:not(.auth-page) .onboarding-card,
body:not(.auth-page) .open-truck-row,
body:not(.auth-page) .settings-link-card {
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
}

body:not(.auth-page) .modal-overlay {
  z-index: 80;
  padding: 28px;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(2px);
}

body:not(.auth-page) .modal-panel {
  border: 1px solid rgba(219, 227, 239, 0.95);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
  padding: 22px;
}

body:not(.auth-page) .modal-close {
  top: 16px;
  right: 16px;
  min-height: 34px;
  border-radius: 9px;
}

body:not(.auth-page) .eyebrow {
  color: var(--portal-green);
  letter-spacing: 0.02em;
}

body:not(.auth-page) .modal-panel h2 {
  color: #0f172a;
  letter-spacing: 0;
}

body:not(.auth-page) .detail-grid {
  gap: 10px;
}

body:not(.auth-page) .detail-grid div,
body:not(.auth-page) .empty-move-form .detail-grid label,
body:not(.auth-page) .truck-status-form .detail-grid label,
body:not(.auth-page) .truck-status-eta-form .detail-grid label,
body:not(.auth-page) .truck-ready-form .detail-grid label {
  border-color: var(--portal-line);
  border-radius: 12px;
  background: #f8fafc;
}

body:not(.auth-page) .detail-grid span {
  color: #64748b;
}

body:not(.auth-page) .detail-grid strong {
  color: #0f172a;
}

body:not(.auth-page) .modal-actions,
body:not(.auth-page) .broker-modal-actions > div,
body:not(.auth-page) .task-actions,
body:not(.auth-page) .row-actions {
  gap: 8px;
}

@media (max-width: 900px) {
  body:not(.auth-page) main {
    padding: 14px;
  }

  body:not(.auth-page) .topbar {
    display: grid;
  }
}

/* Brighter sidebar refinement */
body:not(.auth-page) .sidebar,
.schedule-modern-page .sidebar {
  background:
    radial-gradient(circle at 14% 0%, rgba(125, 184, 255, 0.26), transparent 34%),
    linear-gradient(180deg, #1b497a 0%, #173f6c 44%, #11365f 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.14), 8px 0 24px rgba(15, 23, 42, 0.1);
}

body:not(.auth-page) .sidebar-brand,
.schedule-modern-page .sidebar-brand {
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  min-height: 76px;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.07);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

body:not(.auth-page) .brand-wordmark,
.schedule-modern-page .brand-wordmark {
  display: grid;
  grid-column: 2;
  align-content: center;
  justify-items: center;
  color: #ffffff;
  line-height: 1;
  text-align: center;
}

body:not(.auth-page) .brand-wordmark strong,
.schedule-modern-page .brand-wordmark strong {
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0;
}

body:not(.auth-page) .brand-wordmark span,
.schedule-modern-page .brand-wordmark span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.38em;
  padding-left: 0.38em;
}

body:not(.auth-page) .brand-mark,
.schedule-modern-page .brand-mark {
  display: none;
}

body:not(.auth-page) .brand-text strong,
.schedule-modern-page .brand-text strong {
  display: none;
}

body:not(.auth-page) .brand-text span,
.schedule-modern-page .brand-text span {
  display: none;
}

body:not(.auth-page) .nav-section-title,
.schedule-modern-page .nav-section-title {
  color: rgba(219, 234, 254, 0.86);
}

body:not(.auth-page) .nav-item,
.schedule-modern-page .nav-item,
body:not(.auth-page) .nav-subitem,
.schedule-modern-page .nav-subitem {
  color: rgba(248, 250, 252, 0.94);
}

body:not(.auth-page) .nav-icon,
.schedule-modern-page .nav-icon {
  background: rgba(219, 234, 254, 0.13);
  border: 1px solid rgba(191, 219, 254, 0.26);
  color: #dbeafe;
  box-shadow: none;
}

body:not(.auth-page) .nav-icon .icon-line,
.schedule-modern-page .nav-icon .icon-line {
  stroke: #dbeafe;
}

body:not(.auth-page) .nav-icon .icon-fill,
body:not(.auth-page) .nav-icon .icon-accent,
body:not(.auth-page) .nav-icon .icon-soft,
.schedule-modern-page .nav-icon .icon-fill,
.schedule-modern-page .nav-icon .icon-accent,
.schedule-modern-page .nav-icon .icon-soft {
  fill: none;
  stroke: #bfdbfe;
}

body:not(.auth-page) .nav-item:hover,
body:not(.auth-page) .nav-group.open > .nav-group-toggle,
.schedule-modern-page .nav-item:hover,
.schedule-modern-page .nav-group.open > .nav-group-toggle {
  background: rgba(255, 255, 255, 0.11);
}

body:not(.auth-page) .nav-item.active,
body:not(.auth-page) .nav-subitem.active,
.schedule-modern-page .nav-item.active,
.schedule-modern-page .nav-subitem.active {
  background: linear-gradient(135deg, #2f6df6 0%, #1f5cdf 100%);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

body:not(.auth-page) .nav-item.active .nav-icon,
.schedule-modern-page .nav-item.active .nav-icon {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.34);
}

body:not(.auth-page) .nav-item.active .nav-icon .icon-line,
.schedule-modern-page .nav-item.active .nav-icon .icon-line {
  stroke: #ffffff;
}

body:not(.auth-page) .nav-item.active .nav-icon .icon-fill,
body:not(.auth-page) .nav-item.active .nav-icon .icon-accent,
body:not(.auth-page) .nav-item.active .nav-icon .icon-soft,
.schedule-modern-page .nav-item.active .nav-icon .icon-fill,
.schedule-modern-page .nav-item.active .nav-icon .icon-accent,
.schedule-modern-page .nav-item.active .nav-icon .icon-soft {
  fill: none;
  stroke: #ffffff;
}

body:not(.auth-page) .sidebar-account,
.schedule-modern-page .sidebar-account {
  background: rgba(255, 255, 255, 0.07);
  border-top-color: rgba(255, 255, 255, 0.14);
}

body.sidebar-collapsed:not(.auth-page) .sidebar-brand {
  grid-template-columns: 1fr;
}

body.sidebar-collapsed:not(.auth-page) .brand-wordmark {
  display: none;
}

/* Schedule board readability polish */
.schedule-modern-page .board-filter-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.schedule-modern-page .board-density-field {
  display: flex;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.schedule-modern-page .board-density-field > span {
  padding-bottom: 10px;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}

.schedule-modern-page .board-density-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--modern-line);
  border-radius: 11px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.schedule-modern-page .board-density-toggle button {
  min-height: 32px;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  box-shadow: none;
  font-size: 12px;
  font-weight: 750;
}

.schedule-modern-page .board-density-toggle button.active {
  color: #ffffff;
  background: var(--modern-blue);
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.18);
}

.schedule-modern-page .day-header.today {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.11), rgba(37, 99, 235, 0.045));
}

.schedule-modern-page .cell.today-cell {
  background: rgba(37, 99, 235, 0.035);
  box-shadow: inset 2px 0 0 rgba(37, 99, 235, 0.24), inset -2px 0 0 rgba(37, 99, 235, 0.18);
}

.schedule-modern-page .load-card,
.schedule-modern-page .last-location,
.schedule-modern-page .moved-location-marker,
.schedule-modern-page .truck-status-card,
.schedule-modern-page .home-reset-card,
.schedule-modern-page .schedule-note-card {
  transition: transform 120ms ease, box-shadow 120ms ease, outline-color 120ms ease;
}

.schedule-modern-page .load-card b,
.schedule-modern-page .last-location b,
.schedule-modern-page .moved-location-marker b,
.schedule-modern-page .truck-status-card b,
.schedule-modern-page .home-reset-card b {
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.05;
}

.schedule-modern-page .load-card span,
.schedule-modern-page .last-location span,
.schedule-modern-page .moved-location-marker span,
.schedule-modern-page .truck-status-card span,
.schedule-modern-page .home-reset-card span {
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.12;
}

.schedule-modern-page .load-card small,
.schedule-modern-page .last-location small,
.schedule-modern-page .moved-location-marker small,
.schedule-modern-page .truck-status-card small,
.schedule-modern-page .home-reset-card small {
  font-size: 10px;
  font-weight: 650;
  line-height: 1.18;
  opacity: 0.9;
}

.schedule-modern-page .load-card:hover,
.schedule-modern-page .last-location:hover,
.schedule-modern-page .moved-location-marker:hover,
.schedule-modern-page .truck-status-card:hover,
.schedule-modern-page .schedule-note-card:hover,
.schedule-modern-page .home-reset-card:hover {
  transform: translateY(-1px);
  outline: 2px solid rgba(37, 99, 235, 0.18);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
  cursor: pointer;
}

.schedule-modern-page .status-footer strong,
.schedule-modern-page .status-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.schedule-modern-page .status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.schedule-modern-page .status-dot-ok {
  background: #16a34a;
}

.schedule-modern-page .status-dot-idle {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}

body.board-density-compact.schedule-modern-page .corner,
body.board-density-compact.schedule-modern-page .day-header {
  min-height: 38px;
  padding: 7px 8px;
}

body.board-density-compact.schedule-modern-page .truck,
body.board-density-compact.schedule-modern-page .cell {
  min-height: 76px;
}

body.board-density-compact.schedule-modern-page .cell {
  padding: 4px;
  contain-intrinsic-size: 76px 150px;
}

body.board-density-compact.schedule-modern-page .resource {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 10px;
}

body.board-density-compact.schedule-modern-page .load-card,
body.board-density-compact.schedule-modern-page .last-location,
body.board-density-compact.schedule-modern-page .moved-location-marker,
body.board-density-compact.schedule-modern-page .truck-status-card {
  gap: 2px;
  padding: 5px 6px;
}

body.board-density-compact.schedule-modern-page .load-card b,
body.board-density-compact.schedule-modern-page .last-location b,
body.board-density-compact.schedule-modern-page .moved-location-marker b,
body.board-density-compact.schedule-modern-page .truck-status-card b {
  font-size: 10.5px;
}

body.board-density-compact.schedule-modern-page .load-card span,
body.board-density-compact.schedule-modern-page .last-location span,
body.board-density-compact.schedule-modern-page .moved-location-marker span,
body.board-density-compact.schedule-modern-page .truck-status-card span {
  font-size: 11.5px;
}

body.board-density-compact.schedule-modern-page .load-card small,
body.board-density-compact.schedule-modern-page .last-location small,
body.board-density-compact.schedule-modern-page .moved-location-marker small,
body.board-density-compact.schedule-modern-page .truck-status-card small {
  font-size: 9.5px;
}

body.board-view-loads-only.schedule-modern-page .cell > .resource {
  display: none;
}

body.board-view-loads-only.schedule-modern-page .truck,
body.board-view-loads-only.schedule-modern-page .cell {
  min-height: 54px;
}

body.board-view-loads-only.schedule-modern-page .cell {
  contain-intrinsic-size: 54px 150px;
}

/* Modern Tracking page layout */
.tracking-modern-page main {
  background: var(--portal-bg);
}

.tracking-modern-page .topbar {
  align-items: center;
  margin-bottom: 14px;
}

.tracking-modern-page .topbar button {
  min-width: 96px;
  border-color: var(--portal-line);
  background: #ffffff;
  color: #0f172a;
}

.tracking-modern-page .tracking-filters {
  display: grid;
  grid-template-columns: minmax(360px, 1fr);
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--portal-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.tracking-modern-page .tracking-filters input,
.tracking-modern-page .tracking-filters select {
  min-height: 42px;
  border-radius: 10px;
  font-size: 14px;
}

.tracking-modern-page .tracking-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr)) auto;
  gap: 10px;
  align-items: stretch;
  padding: 0;
  margin-bottom: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tracking-modern-page .tracking-count {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--portal-line);
  border-radius: 13px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
  text-align: left;
}

.tracking-modern-page .tracking-count::before {
  display: none;
}

.tracking-modern-page .tracking-count-icon {
  grid-row: 1 / span 2;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

.tracking-modern-page .tracking-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracking-modern-page .tracking-count strong {
  font-size: 18px;
  line-height: 1;
}

.tracking-modern-page .tracking-count span {
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.tracking-modern-page .tracking-count.active {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1), 0 10px 24px rgba(15, 23, 42, 0.075);
}

.tracking-modern-page .tracking-count.all .tracking-count-icon {
  background: #eff6ff;
  color: #2563eb;
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

.tracking-modern-page .tracking-count.danger .tracking-count-icon {
  background: #fff1f2;
  color: #ef4444;
  box-shadow: inset 0 0 0 1px #fecdd3;
}

.tracking-modern-page .tracking-count.warning .tracking-count-icon {
  background: #fffbeb;
  color: #f59e0b;
  box-shadow: inset 0 0 0 1px #fde68a;
}

.tracking-modern-page .tracking-count.missing .tracking-count-icon {
  background: #eff6ff;
  color: #60a5fa;
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

.tracking-modern-page .tracking-count.ok .tracking-count-icon {
  background: #ecfdf5;
  color: #10b981;
  box-shadow: inset 0 0 0 1px #bbf7d0;
}

.tracking-modern-page .tracking-count.no-next .tracking-count-icon {
  background: #f8fafc;
  color: #94a3b8;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.tracking-modern-page .tracking-count.danger strong {
  color: #be123c;
}

.tracking-modern-page .tracking-count.warning strong {
  color: #b45309;
}

.tracking-modern-page .tracking-count.missing strong {
  color: #2563eb;
}

.tracking-modern-page .tracking-count.ok strong {
  color: #047857;
}

.tracking-modern-page .tracking-count.no-next strong {
  color: #64748b;
}

.tracking-modern-page .last-refresh {
  align-self: center;
  justify-self: end;
  color: #64748b;
  font-size: 12px;
  white-space: nowrap;
}

.tracking-modern-page .tracking-list {
  display: grid;
  gap: 8px;
}

.tracking-modern-page .tracking-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) minmax(250px, 1.45fr) minmax(210px, 1.05fr) minmax(210px, 1.05fr) minmax(250px, 1.35fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--portal-line);
  border-left: 6px solid #94a3b8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
  transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.tracking-modern-page .tracking-card:hover {
  background: #fbfdff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

.tracking-modern-page .tracking-card.danger {
  border-left-color: #ef4444;
  background: #fffafa;
}

.tracking-modern-page .tracking-card.warning {
  border-left-color: #f59e0b;
  background: #fffdf5;
}

.tracking-modern-page .tracking-card.missing_eta {
  border-left-color: #3b82f6;
}

.tracking-modern-page .tracking-card.ok {
  border-left-color: #10b981;
}

.tracking-modern-page .tracking-card.no_next {
  border-left-color: #94a3b8;
}

.tracking-modern-page .tracking-card-head,
.tracking-modern-page .tracking-column {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border-left: 1px solid #edf2f7;
}

.tracking-modern-page .tracking-card-head {
  border-left: 0;
}

.tracking-modern-page .tracking-card-head strong {
  color: #0f172a;
  font-size: 19px;
  line-height: 1.05;
}

.tracking-modern-page .tracking-card-head span,
.tracking-modern-page .tracking-column span {
  color: #475569;
  font-size: 12px;
  line-height: 1.3;
}

.tracking-modern-page .tracking-column small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tracking-modern-page .tracking-column b {
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
}

.tracking-modern-page .tracking-load-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tracking-modern-page .tracking-pill {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 11.5px;
}

.tracking-modern-page .tracking-pill.danger {
  background: #ffe4e6;
  color: #be123c;
}

.tracking-modern-page .tracking-pill.warning {
  background: #fef3c7;
  color: #92400e;
}

.tracking-modern-page .tracking-pill.missing_eta {
  background: #dbeafe;
  color: #1d4ed8;
}

.tracking-modern-page .tracking-pill.ok {
  background: #d1fae5;
  color: #047857;
}

.tracking-modern-page .tracking-pill.no_next {
  background: #f1f5f9;
  color: #475569;
}

.tracking-modern-page .tracking-progress-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.tracking-modern-page .tracking-progress-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: #e2e8f0;
}

.tracking-modern-page .tracking-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 18px;
  border-radius: inherit;
  background: #94a3b8;
}

.tracking-modern-page .tracking-progress-truck {
  position: absolute;
  top: 50%;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #0f172a;
  transform: translate(-50%, -50%);
}

.tracking-modern-page .tracking-progress-truck .tracking-icon {
  width: 17px;
  height: 17px;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.2));
}

.tracking-modern-page .tracking-progress-fill.danger {
  background: #ef4444;
}

.tracking-modern-page .tracking-progress-fill.warning {
  background: #f59e0b;
}

.tracking-modern-page .tracking-progress-fill.missing {
  background: #3b82f6;
}

.tracking-modern-page .tracking-progress-fill.ok {
  background: #10b981;
}

.tracking-modern-page .tracking-message {
  color: #1e293b;
  font-size: 12px;
  font-weight: 750;
}

.tracking-modern-page .tracking-buffer {
  color: #047857;
  font-weight: 800;
}

.tracking-modern-page .empty-tracking {
  display: block;
  padding: 22px;
  color: #64748b;
}

@media (max-width: 1500px) {
  .tracking-modern-page .tracking-summary {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .tracking-modern-page .last-refresh {
    justify-self: start;
  }

  .tracking-modern-page .tracking-card {
    grid-template-columns: minmax(170px, 0.8fr) minmax(230px, 1.25fr) minmax(190px, 1fr) minmax(190px, 1fr) minmax(230px, 1.15fr);
  }
}

@media (max-width: 1100px) {
  .tracking-modern-page .tracking-filters {
    grid-template-columns: 1fr;
  }

  .tracking-modern-page .tracking-card {
    grid-template-columns: 1fr;
  }

  .tracking-modern-page .tracking-card-head,
  .tracking-modern-page .tracking-column {
    border-left: 0;
    border-top: 1px solid #edf2f7;
  }

  .tracking-modern-page .tracking-card-head {
    border-top: 0;
  }
}

/* Modern Tasks page layout */
.tasks-modern-page main {
  background: #f6f8fb;
}

.tasks-modern-page .topbar {
  align-items: flex-start;
  margin-bottom: 18px;
}

.tasks-modern-page .topbar h1 {
  color: #0f172a;
  font-size: 28px;
  letter-spacing: 0;
}

.tasks-modern-page .topbar p {
  color: #64748b;
  font-size: 15px;
}

.tasks-modern-page #newTaskButton {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  background: #2563eb;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.tasks-modern-page .task-board {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tasks-modern-page .task-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.tasks-modern-page .task-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 16px 18px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.tasks-modern-page .task-kpi-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
}

.tasks-modern-page .task-kpi-card strong {
  display: block;
  color: #0f172a;
  font-size: 22px;
  line-height: 1;
}

.tasks-modern-page .task-kpi-card span:last-child {
  display: block;
  margin-top: 5px;
  color: #334155;
  font-size: 13px;
  font-weight: 750;
}

.tasks-modern-page .task-kpi-card.blue .task-kpi-icon {
  background: #dbeafe;
  color: #2563eb;
}

.tasks-modern-page .task-kpi-card.amber .task-kpi-icon {
  background: #fef3c7;
  color: #d97706;
}

.tasks-modern-page .task-kpi-card.red .task-kpi-icon {
  background: #ffe4e6;
  color: #e11d48;
}

.tasks-modern-page .task-kpi-card.purple .task-kpi-icon {
  background: #ede9fe;
  color: #7c3aed;
}

.tasks-modern-page .task-kpi-card.green .task-kpi-icon {
  background: #dcfce7;
  color: #059669;
}

.tasks-modern-page .task-toolbar {
  display: grid;
  grid-template-columns: auto minmax(680px, 1fr);
  gap: 14px 28px;
  align-items: end;
  margin: 0;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.tasks-modern-page .task-tabs {
  gap: 6px;
}

.tasks-modern-page .task-tabs button {
  min-height: 38px;
  padding: 0 14px;
  border-color: #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
}

.tasks-modern-page .task-tabs button.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
}

.tasks-modern-page .task-toolbar-right {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(450px, 2fr);
  gap: 10px;
  align-items: end;
}

.tasks-modern-page .task-filter-select {
  display: grid;
  gap: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.tasks-modern-page .task-filter-select select,
.tasks-modern-page #taskSearch {
  min-height: 40px;
  border-radius: 10px;
}

.tasks-modern-page #taskSearch {
  min-width: 0;
  padding-left: 14px;
}

.tasks-modern-page #taskSummary {
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #64748b;
  font-size: 13px;
}

.tasks-modern-page .task-content-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.tasks-modern-page .task-today-panel,
.tasks-modern-page .task-calendar-panel {
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.tasks-modern-page .task-today-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 640px;
  padding: 14px;
}

.tasks-modern-page .task-today-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.tasks-modern-page .task-today-header b {
  display: grid;
  min-width: 25px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
}

.tasks-modern-page .task-today-list {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px 0;
}

.tasks-modern-page .task-today-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 96px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #2563eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  cursor: pointer;
}

.tasks-modern-page .task-today-card::before {
  content: "";
  position: absolute;
  left: 45px;
  top: 54px;
  bottom: -17px;
  width: 1px;
  background: #e2e8f0;
}

.tasks-modern-page .task-today-card:last-child::before {
  display: none;
}

.tasks-modern-page .task-today-card:hover {
  background: #f8fbff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.tasks-modern-page .task-today-card time {
  color: #ef4444;
  font-size: 13px;
  font-weight: 900;
}

.tasks-modern-page .task-today-card h3 {
  margin: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-modern-page .task-today-card p,
.tasks-modern-page .task-today-card span {
  margin: 4px 0 0;
  color: #475569;
  font-size: 12px;
}

.tasks-modern-page .task-today-card b {
  align-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 10px;
}

.tasks-modern-page .task-category-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 6px;
  margin-top: 7px;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}

.tasks-modern-page .task-category-pill i {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.tasks-modern-page .task-category-pill.usps i,
.tasks-modern-page .task-category-pill.planning i {
  background: #dbeafe;
  color: #2563eb;
}

.tasks-modern-page .task-category-pill.dispatch i {
  background: #dcfce7;
  color: #047857;
}

.tasks-modern-page .task-category-pill.driver i {
  background: #ede9fe;
  color: #6d28d9;
}

.tasks-modern-page .task-category-pill.truck i,
.tasks-modern-page .task-category-pill.maintenance i {
  background: #ffedd5;
  color: #c2410c;
}

.tasks-modern-page .task-category-pill.payroll i,
.tasks-modern-page .task-category-pill.accounting i,
.tasks-modern-page .task-category-pill.completed i {
  background: #dcfce7;
  color: #047857;
}

.tasks-modern-page .task-category-pill.review i,
.tasks-modern-page .task-category-pill.admin i {
  background: #fef3c7;
  color: #b45309;
}

.tasks-modern-page .task-today-card.overdue,
.tasks-modern-page .task-today-card.urgent {
  border-left-color: #f43f5e;
}

.tasks-modern-page .task-today-card.completed {
  border-left-color: #10b981;
}

.tasks-modern-page .task-today-card.pending-review {
  border-left-color: #8b5cf6;
}

.tasks-modern-page .task-today-empty,
.tasks-modern-page .task-view-all {
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
}

.tasks-modern-page .task-today-empty {
  display: grid;
  gap: 9px;
  padding: 22px;
  color: #64748b;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.tasks-modern-page .task-today-empty-label {
  color: #2563eb;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tasks-modern-page .task-today-empty strong {
  color: #0f172a;
  font-size: 15px;
}

.tasks-modern-page .task-today-empty span {
  color: #64748b;
  font-size: 13px;
}

.tasks-modern-page .task-next-reminder {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.tasks-modern-page .task-next-reminder span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.tasks-modern-page .task-next-reminder b {
  color: #0f172a;
  font-size: 13px;
}

.tasks-modern-page .task-next-reminder small {
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.tasks-modern-page .task-view-all {
  min-height: 40px;
  justify-content: flex-start;
  margin-bottom: 16px;
  padding: 0 14px;
  border-color: transparent;
  background: transparent;
  color: #1e3a8a;
  font-weight: 850;
  text-align: left;
  box-shadow: none;
}

.tasks-modern-page .task-view-all::before {
  content: "->";
  margin-right: 8px;
}

.tasks-modern-page .task-view-all:hover {
  background: #f8fbff;
  color: #2563eb;
}

.tasks-modern-page .task-calendar-panel {
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03), 0 12px 30px rgba(15, 23, 42, 0.05);
}

.tasks-modern-page .task-calendar-controls {
  display: grid;
  grid-template-columns: 42px auto 42px auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  border-radius: 14px 14px 0 0;
  background: #ffffff;
  box-shadow: none;
}

.tasks-modern-page .task-calendar-controls strong {
  min-width: 0;
  color: #0f172a;
  font-size: 22px;
  text-align: center;
}

.tasks-modern-page .task-calendar-controls strong::before {
  content: "CAL";
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 22px;
  margin-right: 8px;
  border-radius: 7px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 9px;
  vertical-align: middle;
}

.tasks-modern-page .task-calendar-controls > button {
  min-height: 38px;
  border-radius: 10px;
}

.tasks-modern-page .task-view-switch {
  justify-self: end;
  gap: 0;
  padding: 3px;
  border-color: #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
}

.tasks-modern-page .task-view-switch button {
  min-height: 34px;
  padding: 0 15px;
  border-radius: 8px;
  color: #334155;
  font-weight: 850;
}

.tasks-modern-page .task-view-switch button.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

.tasks-modern-page .task-calendar {
  grid-template-columns: repeat(7, minmax(118px, 1fr));
  gap: 0;
  border-top: 0;
  background: #dbe4f0;
}

.tasks-modern-page .task-calendar-weekday {
  padding: 9px 10px;
  border-right: 1px solid #dbe4f0;
  border-bottom: 1px solid #dbe4f0;
  border-radius: 0;
  background: #f8fafc;
  color: #334155;
  text-align: center;
}

.tasks-modern-page .task-calendar-day {
  min-height: 136px;
  padding: 13px;
  border: 0;
  border-right: 1px solid #dbe4f0;
  border-bottom: 1px solid #dbe4f0;
  border-radius: 0;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}

.tasks-modern-page .task-calendar.task-calendar-week .task-calendar-day {
  min-height: 430px;
}

.tasks-modern-page .task-calendar-day.is-weekend {
  background: #f4f7fb;
}

.tasks-modern-page .task-calendar-day.outside-month {
  background: #f3f6fa;
  color: #94a3b8;
  opacity: 1;
}

.tasks-modern-page .task-calendar-day.has-tasks {
  background: #ffffff;
}

.tasks-modern-page .task-calendar-day.is-today {
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.22);
}

.tasks-modern-page .task-calendar-day:hover {
  background: #f8fbff;
}

.tasks-modern-page .task-calendar-date {
  display: inline-grid;
  gap: 2px;
  width: auto;
  min-width: 26px;
  min-height: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: transparent;
  color: #0f172a;
}

.tasks-modern-page .task-calendar-day.is-today .task-calendar-date {
  border-radius: 9px;
  background: transparent;
  color: #2563eb;
}

.tasks-modern-page .task-calendar-date > span:last-child {
  line-height: 1.1;
}

.tasks-modern-page .task-calendar-today-label {
  color: #2563eb;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tasks-modern-page .task-calendar-chips {
  gap: 4px;
  margin-top: 8px;
}

.tasks-modern-page .task-calendar-chip,
.tasks-modern-page .task-calendar-more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid #bfdbfe;
  border-left: 0;
  border-radius: 6px;
  background: #dbeafe;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  white-space: normal;
}

.tasks-modern-page .task-calendar-chip span {
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  text-transform: none;
}

.tasks-modern-page .task-calendar-chip b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-modern-page .task-calendar-chip.usps {
  border-color: #bfdbfe;
  background: #dbeafe;
  color: #1d4ed8;
}

.tasks-modern-page .task-calendar-chip.dispatch,
.tasks-modern-page .task-calendar-chip.planning {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #047857;
}

.tasks-modern-page .task-calendar-chip.driver {
  border-color: #ddd6fe;
  background: #ede9fe;
  color: #6d28d9;
}

.tasks-modern-page .task-calendar-chip.truck,
.tasks-modern-page .task-calendar-chip.maintenance {
  border-color: #fed7aa;
  background: #ffedd5;
  color: #c2410c;
}

.tasks-modern-page .task-calendar-chip.payroll,
.tasks-modern-page .task-calendar-chip.accounting {
  border-color: #a7f3d0;
  background: #d1fae5;
  color: #047857;
}

.tasks-modern-page .task-calendar-chip.overdue,
.tasks-modern-page .task-calendar-chip.urgent {
  border-color: #fecdd3;
  background: #ffe4e6;
  color: #be123c;
}

.tasks-modern-page .task-calendar-chip.today,
.tasks-modern-page .task-calendar-chip.tomorrow {
  border-color: #fed7aa;
  background: #ffedd5;
  color: #c2410c;
}

.tasks-modern-page .task-calendar-chip.pending-review {
  border-color: #ddd6fe;
  background: #ede9fe;
  color: #6d28d9;
}

.tasks-modern-page .task-calendar-chip.completed {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #047857;
}

.tasks-modern-page .task-calendar-more {
  border-color: transparent;
  background: transparent;
  color: #64748b;
}

.tasks-modern-page .task-calendar-note {
  margin: 12px;
  border-color: #dbe3ef;
  border-radius: 10px;
  background: #f8fafc;
}

.tasks-modern-page .task-list {
  padding: 14px;
}

.tasks-modern-page .task-card,
.tasks-modern-page .task-empty {
  min-height: 72px;
  padding: 10px 12px;
  border-color: #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
}

.tasks-modern-page .task-empty {
  display: grid;
  gap: 6px;
  color: #64748b;
}

.tasks-modern-page .task-empty strong {
  color: #0f172a;
}

.tasks-modern-page .task-card h2 {
  font-size: 15px;
}

@media (max-width: 1400px) {
  .tasks-modern-page .task-kpi-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .tasks-modern-page .task-toolbar,
  .tasks-modern-page .task-toolbar-right {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .tasks-modern-page .task-content-grid {
    grid-template-columns: 1fr;
  }

  .tasks-modern-page .task-today-panel {
    min-height: 0;
  }
}

@media (max-width: 780px) {
  .tasks-modern-page .task-kpi-grid {
    grid-template-columns: 1fr;
  }

  .tasks-modern-page .task-toolbar-right {
    grid-template-columns: 1fr;
  }

  .tasks-modern-page .task-calendar-controls {
    grid-template-columns: auto 1fr auto;
  }

  .tasks-modern-page #taskCalendarToday,
  .tasks-modern-page .task-view-switch {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .tasks-modern-page .task-calendar {
    grid-template-columns: repeat(7, minmax(92px, 1fr));
    overflow-x: auto;
  }
}

/* Routing audit */
.routing-audit-page main {
  background: #f5f7fb;
  min-height: 100vh;
  padding: 24px;
}

.routing-audit-page .modern-page-header,
.routing-audit-page .audit-filter-panel,
.routing-audit-page .audit-panel {
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.routing-audit-page .modern-page-header {
  padding: 18px 20px;
  margin-bottom: 14px;
}

.routing-audit-page .modern-page-header h1 {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.1;
}

.routing-audit-page .modern-page-header p {
  margin: 6px 0 0;
  color: #64748b;
}

.audit-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.audit-card {
  min-height: 82px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.audit-card span,
.audit-card small {
  display: block;
  color: #64748b;
  font-size: 12px;
}

.audit-card strong {
  display: block;
  margin: 5px 0 2px;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.1;
}

.audit-card-blue { border-left: 4px solid #2563eb; }
.audit-card-green { border-left: 4px solid #059669; }
.audit-card-amber { border-left: 4px solid #f59e0b; }
.audit-card-red { border-left: 4px solid #ef4444; }

.audit-filter-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(150px, 0.8fr));
  gap: 12px;
  align-items: end;
  padding: 14px;
  margin-bottom: 14px;
}

.audit-filter-panel label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.audit-filter-panel input,
.audit-filter-panel select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  padding: 0 12px;
  font: inherit;
}

.audit-page-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.36fr) minmax(520px, 1fr);
  gap: 14px;
  align-items: start;
}

.audit-panel {
  padding: 14px;
}

.audit-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.audit-panel-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}

.audit-panel-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.audit-list {
  display: grid;
  gap: 10px;
}

.audit-mismatch-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid #fecaca;
  border-left: 4px solid #ef4444;
  border-radius: 10px;
  background: #fff7f7;
}

.audit-mismatch-row strong,
.audit-mismatch-row span,
.audit-mismatch-row small {
  display: block;
}

.audit-mismatch-row strong {
  color: #991b1b;
}

.audit-mismatch-row span {
  margin-top: 4px;
  color: #0f172a;
}

.audit-mismatch-row small {
  margin-top: 4px;
  color: #64748b;
}

.audit-table-wrap {
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.audit-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.audit-table th,
.audit-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e2e8f0;
  color: #0f172a;
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
}

.audit-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.audit-table tr:hover td {
  background: #f8fbff;
}

.audit-table td:nth-child(5) strong,
.audit-table td:nth-child(5) span {
  display: block;
}

.audit-table td:nth-child(5) span {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.audit-source-pill,
.audit-event-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.audit-source-pill.planning {
  color: #1d4ed8;
  background: #dbeafe;
}

.audit-source-pill.loadstop {
  color: #047857;
  background: #d1fae5;
}

.audit-event-pill.blue {
  color: #1d4ed8;
  background: #dbeafe;
}

.audit-event-pill.green {
  color: #047857;
  background: #d1fae5;
}

.audit-event-pill.warning {
  color: #92400e;
  background: #fef3c7;
}

.audit-event-pill.danger {
  color: #991b1b;
  background: #fee2e2;
}

@media (max-width: 1180px) {
  .audit-kpi-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }

  .audit-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .routing-audit-page main {
    padding: 14px;
  }

  .audit-kpi-grid,
  .audit-filter-panel {
    grid-template-columns: 1fr;
  }
}

/* Modern Open Trucks page */
.open-trucks-page main {
  background: #f4f7fb;
}

.open-trucks-page .topbar {
  align-items: flex-start;
  margin-bottom: 18px;
}

.open-trucks-page .topbar h1 {
  color: #0f172a;
  font-size: 28px;
  line-height: 1.12;
}

.open-trucks-page .topbar p {
  margin-top: 4px;
  color: #536681;
}

.open-trucks-page #refreshOpenTrucks {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.open-trucks-page #refreshOpenTrucks:hover {
  border-color: #b9c8dd;
  background: #f8fbff;
}

.open-truck-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.open-truck-kpi-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 16px;
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.open-truck-kpi-icon {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #eaf2ff;
}

.open-truck-kpi-icon::before {
  content: "";
  width: 17px;
  height: 17px;
  border: 2px solid #2563eb;
  border-radius: 5px;
}

.open-truck-kpi-card.is-purple .open-truck-kpi-icon {
  background: #f1eaff;
}

.open-truck-kpi-card.is-purple .open-truck-kpi-icon::before {
  border-color: #7c3aed;
}

.open-truck-kpi-card.is-pink .open-truck-kpi-icon {
  background: #ffeaf1;
}

.open-truck-kpi-card.is-pink .open-truck-kpi-icon::before {
  border-color: #db2777;
  border-radius: 50%;
}

.open-truck-kpi-card.is-cyan .open-truck-kpi-icon {
  background: #e7f8ff;
}

.open-truck-kpi-card.is-cyan .open-truck-kpi-icon::before {
  border-color: #0284c7;
  border-radius: 50%;
}

.open-truck-kpi-card.is-amber .open-truck-kpi-icon {
  background: #fff3d6;
}

.open-truck-kpi-card.is-amber .open-truck-kpi-icon::before {
  border-color: #d97706;
}

.open-truck-kpi-card strong,
.open-truck-kpi-card span,
.open-truck-kpi-card small {
  display: block;
}

.open-truck-kpi-card strong {
  color: #0f172a;
  font-size: 22px;
  line-height: 1;
}

.open-truck-kpi-card span {
  margin-top: 5px;
  color: #1e293b;
  font-size: 13px;
  font-weight: 850;
}

.open-truck-kpi-card small {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.open-trucks-page .open-truck-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 16px;
  align-items: end;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.open-trucks-page .open-truck-filter-left {
  gap: 12px;
}

.open-trucks-page .open-truck-filters label {
  gap: 7px;
  color: #42526e;
  font-size: 12px;
  font-weight: 800;
}

.open-trucks-page .open-truck-filter-left > label {
  min-width: 160px;
}

.open-trucks-page .open-truck-filter-left > label > input,
.open-trucks-page .open-truck-filter-left > label > select,
.open-trucks-page .open-truck-search-field input,
.open-trucks-page .open-truck-state-filter summary {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d6e0ed;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 750;
  box-shadow: none;
}

.open-trucks-page .open-truck-search-field {
  min-width: 180px;
}

.open-trucks-page .open-truck-state-filter .multi-filter-menu {
  border: 1px solid #d6e0ed;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.open-trucks-page #openTruckSummary {
  min-height: 0;
  margin: 0 0 10px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 750;
  box-shadow: none;
}

.open-trucks-page .open-truck-list {
  gap: 12px;
}

.open-trucks-page .open-truck-market-group {
  overflow: hidden;
  gap: 0;
  margin: 0 0 14px;
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.open-trucks-page .open-truck-market-header {
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid #d7e6da;
  border-radius: 0;
  background: #ecf4ee;
  color: #102a1f;
  font-size: 14px;
}

.open-trucks-page .open-truck-market-header span:last-child {
  color: #52645c;
  font-size: 12px;
}

.open-trucks-page .open-truck-card {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-left: 0;
  border-radius: 0;
  background: #ffffff;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.open-trucks-page .open-truck-card + .open-truck-card {
  border-top: 1px solid #e7edf5;
}

.open-trucks-page .open-truck-card::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 4px;
  border-radius: 0 6px 6px 0;
  background: var(--truck-owner-color, #10b981);
}

.open-trucks-page .open-truck-card.is-connection::before,
.open-trucks-page .open-truck-card.is-on-hold::before {
  background: #dc2626;
}

.open-trucks-page .open-truck-card:hover {
  background: #fbfdff;
  box-shadow: inset 0 0 0 999px rgba(37, 99, 235, 0.015);
}

.open-trucks-page .open-truck-main {
  display: grid;
  grid-template-columns: 126px minmax(180px, 0.95fr) minmax(230px, 1.2fr) minmax(220px, 1.1fr) minmax(190px, 0.95fr);
  gap: 0;
  align-items: stretch;
  min-height: 94px;
  padding: 10px 12px 10px 16px;
}

.open-trucks-page .open-truck-main section,
.open-trucks-page .open-truck-main button {
  min-width: 0;
  min-height: 0;
  padding: 8px 12px;
  border: 0;
  border-left: 1px solid #edf2f7;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.open-trucks-page .open-truck-main > :first-child {
  border-left: 0;
}

.open-trucks-page .open-truck-number,
.open-trucks-page .open-truck-location,
.open-trucks-page .open-truck-last-load,
.open-trucks-page .open-truck-next-load,
.open-trucks-page .open-truck-note-card {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.open-trucks-page .open-truck-number {
  gap: 7px;
  flex: initial;
}

.open-trucks-page .open-truck-main .open-truck-number-link {
  width: auto;
  padding: 0;
  border: 0;
}

.open-trucks-page .open-truck-number strong {
  color: #0f172a;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0;
}

.open-trucks-page .open-truck-card.is-on-hold .open-truck-number {
  background: transparent;
}

.open-trucks-page .open-truck-card.is-on-hold .open-truck-number strong {
  color: #991b1b;
}

.open-trucks-page .open-truck-card.is-dfw-ready-team::before {
  background: #d97706;
}

.open-trucks-page .open-truck-ready-team-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff1c2;
  color: #9a3412;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.03em;
}

.open-trucks-page .open-truck-ready-team-status b {
  color: #c22718;
}

.open-trucks-page .open-truck-location,
.open-trucks-page .open-truck-last-load,
.open-trucks-page .open-truck-next-load {
  flex: initial;
  max-width: none;
}

.open-trucks-page .open-truck-next-load {
  border-left: 1px solid #f6d89f !important;
  background: #fff8e7 !important;
}

.open-trucks-page .open-truck-main small {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: none;
}

.open-trucks-page .open-truck-main b,
.open-trucks-page .open-truck-main span {
  max-width: 100%;
  white-space: normal;
}

.open-trucks-page .open-truck-main b {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.open-trucks-page .open-truck-main span {
  color: #475569;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.open-trucks-page .open-truck-wait {
  font-weight: 900;
}

.open-trucks-page .open-truck-wait.is-ok {
  color: #047857 !important;
}

.open-trucks-page .open-truck-wait.is-warning {
  color: #b45309 !important;
}

.open-trucks-page .open-truck-wait.is-critical {
  color: #b42318 !important;
}

.open-trucks-page .open-truck-main .open-truck-hold-button {
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid #d7e1ed;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.open-trucks-page .open-truck-main .open-truck-hold-button.is-active {
  border-color: #dc2626;
  background: #dc2626;
  color: #ffffff;
}

.open-trucks-page .open-truck-note-card {
  flex: initial;
  min-width: 0;
  border-left: 1px solid #edf2f7 !important;
  background: color-mix(in srgb, var(--open-note-color, #d8ecff) 42%, #ffffff) !important;
}

.open-trucks-page .open-truck-note-card.is-empty {
  background: transparent !important;
}

.open-trucks-page .open-truck-load-link:hover,
.open-trucks-page .open-truck-note-card:hover,
.open-trucks-page .open-truck-number-link:hover {
  background: #f8fbff;
}

.open-trucks-page .open-truck-empty {
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

@media (max-width: 1350px) {
  .open-truck-kpis {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .open-trucks-page .open-truck-main {
    grid-template-columns: 110px minmax(170px, 1fr) minmax(220px, 1fr) minmax(210px, 1fr);
  }

  .open-trucks-page .open-truck-note-card {
    grid-column: 2 / -1;
    border-top: 1px solid #edf2f7 !important;
  }
}

@media (max-width: 900px) {
  .open-truck-kpis,
  .open-trucks-page .open-truck-filters {
    grid-template-columns: 1fr;
  }

  .open-trucks-page .open-truck-main {
    grid-template-columns: 1fr;
    padding: 8px 12px 8px 16px;
  }

  .open-trucks-page .open-truck-main section,
  .open-trucks-page .open-truck-main button {
    border-left: 0;
    border-top: 1px solid #edf2f7;
  }

  .open-trucks-page .open-truck-main > :first-child {
    border-top: 0;
  }
}

/* Open Trucks polish v84 */
.open-trucks-page .open-truck-filters {
  grid-template-columns: 1fr;
}

.open-trucks-page .open-truck-filter-left {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(380px, 430px) minmax(150px, 170px) minmax(150px, 170px);
  align-items: end;
}

.open-trucks-page .open-truck-date-range-field {
  min-width: 290px;
}

.open-trucks-page .open-truck-date-nav {
  display: grid;
  grid-template-columns: 38px minmax(290px, 1fr) 38px;
  align-items: end;
  gap: 8px;
}

.open-trucks-page .open-truck-date-nav > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 42px;
  padding: 0;
  border: 1px solid #cdd9e8;
  border-radius: 9px;
  background: #ffffff;
  color: #174879;
  cursor: pointer;
}

.open-trucks-page .open-truck-date-nav > button svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.open-trucks-page .open-truck-date-nav > button:hover,
.open-trucks-page .open-truck-date-nav > button:focus-visible {
  border-color: #2563eb;
  background: #eff6ff;
  outline: none;
}

.open-trucks-page .open-truck-date-range-field .jitc-calendar-trigger {
  white-space: nowrap;
}

.open-trucks-page .open-truck-search-field {
  min-width: 0;
}

.open-truck-kpi-card {
  position: relative;
  grid-template-columns: 58px 1fr;
  min-height: 92px;
  overflow: hidden;
}

.open-truck-kpi-card::before {
  content: "";
  position: absolute;
  inset: 16px auto 16px 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: #2563eb;
}

.open-truck-kpi-card.is-purple::before {
  background: #7c3aed;
}

.open-truck-kpi-card.is-pink::before {
  background: #db2777;
}

.open-truck-kpi-card.is-cyan::before {
  background: #0284c7;
}

.open-truck-kpi-card.is-amber::before {
  background: #d97706;
}

.open-truck-kpi-icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  background: linear-gradient(135deg, #eaf2ff, #dbeafe);
}

.open-truck-kpi-card.is-purple .open-truck-kpi-icon {
  background: linear-gradient(135deg, #f5efff, #ede3ff);
}

.open-truck-kpi-card.is-pink .open-truck-kpi-icon {
  background: linear-gradient(135deg, #ffeaf1, #ffd7e4);
}

.open-truck-kpi-card.is-cyan .open-truck-kpi-icon {
  background: linear-gradient(135deg, #e7f8ff, #d6f1ff);
}

.open-truck-kpi-card.is-amber .open-truck-kpi-icon {
  background: linear-gradient(135deg, #fff3d6, #ffe4ad);
}

.open-truck-kpi-icon::before {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 0;
  background: #2563eb;
  mask: var(--kpi-icon) center / contain no-repeat;
  -webkit-mask: var(--kpi-icon) center / contain no-repeat;
}

.open-truck-kpi-card.is-purple .open-truck-kpi-icon::before {
  background: #7c3aed;
}

.open-truck-kpi-card.is-pink .open-truck-kpi-icon::before {
  background: #db2777;
}

.open-truck-kpi-card.is-cyan .open-truck-kpi-icon::before {
  background: #0284c7;
}

.open-truck-kpi-card.is-amber .open-truck-kpi-icon::before {
  background: #d97706;
}

.open-truck-kpi-icon.icon-truck {
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M14 17h1m4 0h3v-6l-3-4h-5'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-calendar {
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-pin {
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-clock {
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-flag {
  --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V4'/%3E%3Cpath d='M5 4h13l-2 5 2 5H5'/%3E%3C/svg%3E");
}

.open-trucks-page .open-truck-market-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
}

.open-trucks-page .open-truck-market-header span:first-child {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.open-trucks-page .open-truck-market-header span:last-child {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.open-trucks-page .open-truck-card {
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.open-trucks-page .open-truck-card:hover {
  background: #f8fbff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06), inset 0 0 0 999px rgba(37, 99, 235, 0.018);
}

.open-trucks-page .open-truck-main {
  grid-template-columns: 132px minmax(190px, 0.95fr) minmax(230px, 1.12fr) minmax(220px, 1.05fr) minmax(190px, 0.9fr);
  min-height: 102px;
  align-items: stretch;
}

.open-trucks-page .open-truck-number,
.open-trucks-page .open-truck-location,
.open-trucks-page .open-truck-last-load,
.open-trucks-page .open-truck-next-load,
.open-trucks-page .open-truck-note-card {
  align-content: center;
  justify-content: center;
  justify-items: center;
}

.open-trucks-page .open-truck-number {
  gap: 8px;
  border-radius: 10px;
}

.open-truck-mini-icon {
  width: 24px;
  height: 24px;
  border-radius: 9px;
  background: #eff6ff;
  position: relative;
}

.open-truck-mini-icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: #2563eb;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M14 17h1m4 0h3v-6l-3-4h-5'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M14 17h1m4 0h3v-6l-3-4h-5'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.open-trucks-page .open-truck-number strong {
  font-size: 28px;
}

.open-trucks-page .open-truck-time-stack {
  display: grid;
  gap: 3px;
  margin-top: 2px;
}

.open-trucks-page .open-truck-time-stack span {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.open-trucks-page .open-truck-time-stack small {
  color: #64748b;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.open-trucks-page .open-truck-wait-card {
  display: grid;
  gap: 3px;
  margin-top: 3px;
  justify-items: center;
}

.open-trucks-page .open-truck-wait-card small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #64748b;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.open-trucks-page .open-truck-wait-card b {
  font-size: 15px;
}

.open-truck-dot,
.open-truck-note-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.open-truck-wait-card.is-warning .open-truck-dot {
  background: #f59e0b;
}

.open-truck-wait-card.is-critical .open-truck-dot {
  background: #ef4444;
}

.open-trucks-page .open-truck-hold-line {
  display: grid;
  gap: 3px;
  margin-top: 4px;
  color: #991b1b;
  text-align: center;
}

.open-trucks-page .open-truck-hold-line small {
  color: #991b1b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.open-trucks-page .open-truck-hold-line span {
  color: #991b1b;
  font-size: 12px;
  font-weight: 850;
}

.open-trucks-page .open-truck-hold-line.is-stale span {
  font-size: 13px;
  font-weight: 950;
}

.open-truck-note-dot {
  background: #7c3aed;
}

.open-trucks-page .open-truck-note-card small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.open-trucks-page .open-truck-note-card.is-empty {
  color: #2563eb;
}

.open-trucks-page .open-truck-note-card.is-empty b {
  color: #2563eb;
  font-size: 13px;
}

@media (max-width: 1350px) {
  .open-trucks-page .open-truck-filter-left {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}

@media (max-width: 900px) {
  .open-trucks-page .open-truck-filter-left {
    grid-template-columns: 1fr;
  }
}

/* Open Trucks visual calm-down v85 */
.open-trucks-page {
  font-weight: 500;
}

.open-trucks-page .topbar h1,
.open-trucks-page h1 {
  font-weight: 800;
}

.open-truck-kpis {
  gap: 14px;
}

.open-truck-kpi-card {
  grid-template-columns: 44px 1fr;
  min-height: 74px;
  padding: 14px 18px 14px 20px;
}

.open-truck-kpi-card::before {
  inset: 14px auto 14px 0;
  width: 3px;
}

.open-truck-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 14px;
}

.open-truck-kpi-icon::before {
  width: 19px;
  height: 19px;
}

.open-truck-kpi-card strong {
  font-size: 21px;
  font-weight: 750;
}

.open-truck-kpi-card span {
  font-size: 13px;
  font-weight: 650;
}

.open-truck-kpi-card small {
  font-size: 11px;
  font-weight: 500;
}

.open-trucks-page .open-truck-market {
  margin-bottom: 16px;
}

.open-trucks-page .open-truck-market-header {
  min-height: 36px;
  padding: 7px 14px;
}

.open-trucks-page .open-truck-market-header span:first-child {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.open-trucks-page .open-truck-market-header span:last-child {
  font-size: 11px;
  font-weight: 650;
}

.open-trucks-page .open-truck-card {
  background: #fff;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.open-trucks-page .open-truck-card:hover {
  background: #fbfdff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.045);
}

.open-trucks-page .open-truck-main {
  grid-template-columns: 120px minmax(175px, 0.95fr) minmax(220px, 1.1fr) minmax(210px, 1.05fr) minmax(175px, 0.9fr);
  min-height: 82px;
}

.open-trucks-page .open-truck-number,
.open-trucks-page .open-truck-location,
.open-trucks-page .open-truck-last-load,
.open-trucks-page .open-truck-next-load,
.open-trucks-page .open-truck-note-card {
  padding: 9px 12px;
}

.open-trucks-page .open-truck-number {
  gap: 5px;
}

.open-truck-mini-icon {
  width: 18px;
  height: 18px;
  border-radius: 7px;
}

.open-truck-mini-icon::before {
  inset: 4px;
}

.open-trucks-page .open-truck-number strong {
  font-size: 22px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0;
}

.open-trucks-page .open-truck-number .button-small {
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 650;
}

.open-trucks-page .open-truck-location small,
.open-trucks-page .open-truck-last-load small,
.open-trucks-page .open-truck-next-load small,
.open-trucks-page .open-truck-note-card small {
  font-size: 10px;
  font-weight: 650;
  color: #64748b;
}

.open-trucks-page .open-truck-location strong,
.open-trucks-page .open-truck-last-load strong,
.open-trucks-page .open-truck-next-load strong,
.open-trucks-page .open-truck-note-card strong {
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 700;
}

.open-trucks-page .open-truck-location span,
.open-trucks-page .open-truck-last-load span,
.open-trucks-page .open-truck-next-load span,
.open-trucks-page .open-truck-note-card span {
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 500;
}

.open-trucks-page .open-truck-time-stack {
  gap: 1px;
  margin-top: 1px;
}

.open-trucks-page .open-truck-time-stack span {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 5px;
  font-size: 11.5px;
  font-weight: 650;
}

.open-trucks-page .open-truck-time-stack small {
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

.open-trucks-page .open-truck-wait-card {
  gap: 1px;
  margin-top: 2px;
}

.open-trucks-page .open-truck-wait-card small {
  gap: 4px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

.open-trucks-page .open-truck-wait-card b {
  font-size: 13px;
  font-weight: 750;
}

.open-truck-dot,
.open-truck-note-dot {
  width: 6px;
  height: 6px;
}

.open-trucks-page .open-truck-hold-line {
  gap: 1px;
  margin-top: 2px;
}

.open-trucks-page .open-truck-hold-line span {
  font-size: 11px;
  font-weight: 650;
}

.open-trucks-page .open-truck-hold-line.is-stale span {
  font-size: 11.5px;
  font-weight: 750;
}

.open-trucks-page .open-truck-note-card {
  min-height: 0;
  background: #f8fafc;
}

.open-trucks-page .open-truck-note-card:not(.is-empty) {
  background: #f6f9ff;
}

.open-trucks-page .open-truck-note-card.is-empty {
  background: transparent;
}

.open-trucks-page .open-truck-note-card.is-empty b {
  font-size: 12px;
  font-weight: 650;
}

.open-trucks-page .open-truck-card b,
.open-trucks-page .open-truck-card strong {
  letter-spacing: 0;
}

.open-trucks-page .open-truck-card .is-danger,
.open-trucks-page .open-truck-card .is-warning {
  font-weight: 700;
}

/* Open Trucks filled KPI icons v86 */
.open-truck-kpi-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: visible;
}

.open-truck-kpi-icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  width: auto;
  height: auto;
  border-radius: 50%;
  background: #2563eb;
  mask: none;
  -webkit-mask: none;
}

.open-truck-kpi-icon::after {
  content: "";
  position: relative;
  width: 18px;
  height: 18px;
  background: #fff;
  mask: var(--kpi-icon) center / contain no-repeat;
  -webkit-mask: var(--kpi-icon) center / contain no-repeat;
}

.open-truck-kpi-card.is-purple .open-truck-kpi-icon::before {
  background: #7c3aed;
}

.open-truck-kpi-card.is-pink .open-truck-kpi-icon::before {
  background: #db2777;
}

.open-truck-kpi-card.is-cyan .open-truck-kpi-icon::before {
  background: #0284c7;
}

.open-truck-kpi-card.is-amber .open-truck-kpi-icon::before {
  background: #f59e0b;
}

.open-truck-kpi-card.is-purple .open-truck-kpi-icon::after,
.open-truck-kpi-card.is-pink .open-truck-kpi-icon::after,
.open-truck-kpi-card.is-cyan .open-truck-kpi-icon::after,
.open-truck-kpi-card.is-amber .open-truck-kpi-icon::after {
  background: #fff;
}

.open-truck-kpi-icon.icon-truck::after,
.open-truck-kpi-icon.icon-calendar::after,
.open-truck-kpi-icon.icon-pin::after,
.open-truck-kpi-icon.icon-clock::after,
.open-truck-kpi-icon.icon-flag::after {
  background-color: transparent;
  mask: none;
  -webkit-mask: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.open-truck-kpi-icon.icon-truck::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M14 17h1m4 0h3v-6l-3-4h-5'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-calendar::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2.5'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-pin::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-clock::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-flag::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V4' fill='none'/%3E%3Cpath d='M5 4h13l-2 5 2 5H5Z'/%3E%3C/svg%3E");
}

/* Open Trucks density and line-icon polish v87 */
.open-trucks-page .topbar {
  margin-bottom: 12px;
}

.open-truck-kpi-card {
  grid-template-columns: 42px 1fr;
  min-height: 68px;
  padding: 12px 16px 12px 20px;
}

.open-truck-kpi-card::before {
  inset: 12px auto 12px 0;
}

.open-truck-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.open-truck-kpi-icon::before {
  inset: 0;
  border-radius: 50%;
  opacity: 0.16;
}

.open-truck-kpi-icon::after {
  width: 21px;
  height: 21px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  mask: none;
  -webkit-mask: none;
}

.open-truck-kpi-icon.icon-truck::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M14 17h1m4 0h3v-6l-3-4h-5'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-calendar::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2.5'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='m8 15 2 2 4-5'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-pin::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23db2777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-clock::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E");
}

.open-truck-kpi-icon.icon-flag::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V4'/%3E%3Cpath d='M5 4h13l-2 5 2 5H5'/%3E%3C/svg%3E");
}

.open-truck-kpi-card strong {
  font-size: 20px;
  line-height: 1;
}

.open-truck-kpi-card span {
  font-size: 12.5px;
}

.open-truck-kpi-card small {
  font-size: 10.5px;
}

.open-trucks-page .open-truck-filters {
  margin-bottom: 10px;
  padding: 14px 16px;
}

.open-trucks-page .open-truck-filter-left {
  gap: 12px;
}

.open-trucks-page .open-truck-list {
  gap: 12px;
}

.open-trucks-page .open-truck-market {
  margin-bottom: 12px;
}

.open-trucks-page .open-truck-market-header {
  min-height: 34px;
  padding: 6px 13px;
}

.open-trucks-page .open-truck-card:hover {
  background: #f8fbff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.055);
}

.open-trucks-page .open-truck-main {
  min-height: 68px;
  grid-template-columns: 112px minmax(165px, 0.9fr) minmax(210px, 1.08fr) minmax(205px, 1.02fr) minmax(165px, 0.86fr);
}

.open-trucks-page .open-truck-number,
.open-trucks-page .open-truck-location,
.open-trucks-page .open-truck-last-load,
.open-trucks-page .open-truck-next-load,
.open-trucks-page .open-truck-note-card {
  padding: 7px 11px;
}

.open-trucks-page .open-truck-number {
  gap: 4px;
}

.open-trucks-page .open-truck-number strong {
  font-size: 22px;
}

.open-trucks-page .open-truck-location strong,
.open-trucks-page .open-truck-last-load strong,
.open-trucks-page .open-truck-next-load strong,
.open-trucks-page .open-truck-note-card strong {
  font-size: 12.5px;
  line-height: 1.15;
}

.open-trucks-page .open-truck-location span,
.open-trucks-page .open-truck-last-load span,
.open-trucks-page .open-truck-next-load span,
.open-trucks-page .open-truck-note-card span {
  font-size: 11.5px;
  line-height: 1.15;
}

.open-trucks-page .open-truck-location small,
.open-trucks-page .open-truck-last-load small,
.open-trucks-page .open-truck-next-load small,
.open-trucks-page .open-truck-note-card small {
  font-size: 9.5px;
  line-height: 1.1;
}

.open-trucks-page .open-truck-time-stack {
  gap: 0;
  margin-top: 0;
}

.open-trucks-page .open-truck-time-stack span {
  font-size: 11px;
  line-height: 1.15;
}

.open-trucks-page .open-truck-wait-card {
  gap: 0;
  margin-top: 0;
}

.open-trucks-page .open-truck-wait-card b {
  font-size: 12px;
  line-height: 1.1;
}

.open-trucks-page .open-truck-note-card {
  min-height: 48px;
}

.open-trucks-page .open-truck-note-card:not(.is-empty) {
  background: #f7fbff;
}

.open-trucks-page .open-truck-note-card.is-empty {
  min-height: 40px;
}

.open-trucks-page .open-truck-note-card.is-empty b {
  font-size: 11.5px;
}

.ca-departures-page {
  --ca-bg: #f5f7fb;
  --ca-surface: #ffffff;
  --ca-line: #dde6f2;
  --ca-ink: #0f2238;
  --ca-muted: #64748b;
  --ca-blue: #2563eb;
  --ca-blue-soft: #eef5ff;
  --ca-green: #16a34a;
  --ca-green-soft: #eaf8ee;
  background: var(--ca-bg);
  color: var(--ca-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ca-departures-page main {
  padding: 22px 26px;
}

.ca-departures-page .ca-departures-header {
  margin-bottom: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ca-departures-page .ca-departures-header h1 {
  margin: 0 0 4px;
  color: var(--ca-ink);
  font-size: 29px;
  font-weight: 850;
  letter-spacing: 0;
}

.ca-departures-page .ca-departures-header p {
  color: var(--ca-muted);
  font-size: 15px;
}

.ca-departures-page .routing-controls {
  display: flex;
  align-items: center;
  gap: 34px;
  min-height: 88px;
  margin-bottom: 14px;
  padding: 18px 20px;
  border-color: var(--ca-line);
  border-radius: 14px;
  background: var(--ca-surface);
  box-shadow: 0 12px 32px rgba(15, 34, 56, 0.07);
}

.ca-departures-page .routing-date-field {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.ca-departures-page .routing-date-field input {
  width: 154px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--ca-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ca-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(15, 34, 56, 0.03);
}

.ca-departures-page .routing-window {
  min-height: 42px;
  max-width: 620px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid #ccebd7;
  border-radius: 10px;
  background: var(--ca-green-soft);
  color: #14532d;
  font-size: 14px;
  font-weight: 850;
  box-shadow: none;
}

.ca-departures-page .routing-window .jitc-icon {
  width: 21px;
  height: 21px;
  color: #168449;
  stroke-width: 2.2;
}

.ca-departures-page .routing-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: 12px;
}

.ca-departures-page .routing-loads-panel,
.ca-departures-page .routing-resource-panel {
  border-color: var(--ca-line);
  border-radius: 14px;
  background: var(--ca-surface);
  box-shadow: 0 12px 32px rgba(15, 34, 56, 0.07);
}

.ca-departures-page .routing-loads-panel {
  padding: 16px 14px;
  min-width: 0;
}

.ca-departures-page .routing-resource-panel {
  top: 14px;
  gap: 10px;
  padding: 14px;
  min-width: 0;
  max-height: calc(100vh - 28px);
}

.ca-departures-page .routing-panel-head {
  margin: 0 2px 12px;
  align-items: start;
}

.ca-departures-page .routing-panel-head h2 {
  color: var(--ca-ink);
  font-size: 19px;
  font-weight: 850;
}

.ca-departures-page .routing-panel-head span {
  padding-top: 4px;
  color: #40546c;
  font-size: 14px;
  font-weight: 850;
}

.ca-departures-page .routing-group {
  gap: 8px;
  margin-bottom: 10px;
}

.ca-departures-page .routing-group > h3 {
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ca-blue);
  font-size: 13px;
  font-weight: 850;
}

.ca-departures-page .routing-load-list {
  gap: 8px;
}

.ca-departures-page .routing-load-card {
  grid-template-columns: 44px minmax(0, 1fr) minmax(132px, 150px);
  gap: 8px 12px;
  min-height: 68px;
  padding: 11px 10px;
  min-width: 0;
  border: 1px solid var(--ca-line);
  border-left: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(15, 34, 56, 0.05);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.ca-departures-page .routing-load-card:hover {
  border-color: #c7d6ea;
  box-shadow: 0 9px 24px rgba(15, 34, 56, 0.08);
  transform: translateY(-1px);
}

.ca-departures-page .routing-load-card.ready-confirm,
.ca-departures-page .routing-load-card.split-yard-leg {
  border-color: var(--ca-line);
  background: #ffffff;
}

.ca-departures-page .routing-load-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1 / span 3;
  border-radius: 50%;
  background: var(--ca-blue-soft);
  color: var(--ca-blue);
}

.ca-departures-page .routing-load-icon .jitc-icon {
  width: 23px;
  height: 23px;
  stroke-width: 2.15;
}

.ca-departures-page .routing-load-main {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
}

.ca-departures-page .routing-load-main strong {
  display: inline-flex;
  min-width: 68px;
  color: var(--ca-blue);
  font-size: 15px;
  font-weight: 900;
}

.ca-departures-page .routing-load-card h3 {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ca-ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.ca-departures-page .routing-load-meta {
  grid-column: 2;
  grid-row: 2;
  gap: 4px 7px;
  color: var(--ca-muted);
  font-size: 11.5px;
  font-weight: 650;
}

.ca-departures-page .routing-load-meta span:not(:last-child)::after {
  content: "|";
  margin-left: 7px;
  color: #9aacbd;
}

.ca-departures-page .routing-load-customer {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  max-width: 150px;
  overflow-wrap: anywhere;
  text-align: right;
  color: #334767;
  font-size: 11.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.ca-departures-page .routing-slots {
  grid-column: 2;
  grid-row: 3;
  grid-template-columns: repeat(4, minmax(86px, 1fr));
  gap: 7px;
  min-width: 0;
}

.ca-departures-page .routing-slot {
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid var(--ca-line);
  border-radius: 9px;
  background: #ffffff;
  color: #40546c;
  font-size: 12px;
  font-weight: 750;
}

.ca-departures-page .routing-slot.filled {
  border-color: #b7d9c6;
  background: #f0fbf4;
  color: #173b2f;
}

.ca-departures-page .routing-slot.drag-over {
  outline: 2px solid rgba(37, 99, 235, 0.32);
  border-color: var(--ca-blue);
  background: #eef5ff;
}

.dfw-departures-page .topbar {
  align-items: center;
}

.dfw-ready-message {
  margin: 10px 16px 0;
  border: 1px solid #9bc7aa;
  border-radius: 7px;
  background: #eaf8ef;
  color: #174c2b;
  padding: 9px 12px;
  font-weight: 700;
}

.dfw-ready-message.error {
  border-color: #e3a1a1;
  background: #fff0f0;
  color: #8d1f1f;
}

.dfw-ready-team-list {
  display: grid;
  gap: 10px;
}

.dfw-ready-team-card {
  display: grid;
  gap: 10px;
  border: 1px solid #d8b575;
  border-left: 5px solid #b56a12;
  border-radius: 9px;
  background: #fff8e8;
  padding: 12px;
}

.dfw-ready-team-card.status-draft {
  border-color: #a9b7c4;
  border-left-color: #657786;
  background: #f5f7f9;
}

.dfw-ready-team-card.status-assigned {
  border-color: #9d87c8;
  border-left-color: #6846a2;
  background: #f4efff;
}

.dfw-ready-team-card.status-assigned.dispatch-confirmed {
  border-color: #82c99a;
  border-left-color: #218246;
  background: #edf9f1;
}

.dfw-ready-team-card > header,
.dfw-ready-team-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dfw-ready-team-card h3,
.dfw-ready-team-card p {
  margin: 2px 0 0;
}

.dfw-ready-status {
  display: inline-flex;
  border-radius: 999px;
  background: #9a4f08;
  color: #fff;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.status-draft .dfw-ready-status {
  background: #657786;
}

.status-assigned .dfw-ready-status {
  background: #6846a2;
}

.status-assigned.dispatch-confirmed .dfw-ready-status {
  background: #218246;
}

.dfw-ready-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 7px;
}

.dfw-ready-slots .routing-slot {
  min-height: 56px;
}

.dfw-ready-slots .routing-slot > span {
  display: grid;
  gap: 2px;
}

.dfw-ready-slots .routing-slot small {
  color: #607080;
  font-size: 10px;
  text-transform: uppercase;
}

.dfw-ready-slots .routing-slot.pending-checkin,
.ca-departures-page .routing-slot.pending-checkin {
  border-color: #8bb7e8;
  background: #eef6ff;
}

.ready-driver-pending {
  display: block;
  margin-top: 3px;
  color: #175a9c;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.ready-driver-attention {
  display: block;
  margin-top: 3px;
  color: #b91c1c;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
}

.dfw-ready-team-card .routing-slot.driver-attention {
  border-color: #ef4444;
  background: #fff1f2;
}

.dfw-departures-page .routing-resource-card.future-driver,
.ca-departures-page .routing-resource-card.future-driver {
  border-color: #9fc4eb;
  border-left-color: #2774bd;
  background: #f1f7ff;
}

.driver-future-availability,
.driver-current-availability {
  width: fit-content;
  margin: 2px 0;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px !important;
  font-weight: 900;
}

.driver-future-availability {
  background: #dbeeff;
  color: #14558f !important;
}

.driver-current-availability {
  background: #dcf7e7;
  color: #17623b !important;
}

.routing-ready-team-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 2px 0;
  padding: 3px 8px;
  border: 1px solid #9adcb9;
  border-radius: 999px;
  background: #dcf7e7;
  color: #17623b;
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
}

.dfw-ready-slots .routing-slot.locked {
  cursor: default;
}

.dfw-departures-page .routing-resource-card {
  width: 100%;
  text-align: left;
}

.dfw-departures-page .routing-resource-card.selected {
  outline: 3px solid rgba(52, 125, 94, 0.3);
  border-color: #347d5e;
  background: #e8f6ef;
}

@media (max-width: 1050px) {
  .dfw-ready-slots {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

@media (max-width: 680px) {
  .dfw-ready-slots {
    grid-template-columns: 1fr;
  }

  .dfw-ready-team-card > header,
  .dfw-ready-team-card > footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.ca-departures-page .routing-slot button {
  border-color: #cbd8e8;
  background: #f8fbff;
  color: #53657c;
}

.ca-departures-page .routing-load-actions {
  grid-column: 3;
  grid-row: 3;
  align-self: stretch;
  flex-direction: column;
  justify-content: stretch;
  gap: 8px;
  min-width: 0;
}

.ca-departures-page .routing-load-actions button {
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 900;
}

.ca-departures-page .routing-load-actions .primary-action {
  border-color: #6b95ee;
  background: #7ca0ef;
  color: #ffffff;
}

.ca-departures-page .routing-load-actions .primary-action:hover:not(:disabled) {
  background: #5d86e4;
}

.ca-departures-page .routing-load-actions button:not(.primary-action) {
  border-color: var(--ca-line);
  background: #ffffff;
  color: #0f2238;
}

.ca-departures-page .routing-load-badge {
  border-color: #bde5ce;
  border-radius: 999px;
  background: #ecfdf3;
  color: #166534;
}

.ca-departures-page .routing-load-dedicated-badge {
  border-color: #c3b3f7;
  background: #ece5ff;
  color: #4a2ea8;
}

.ca-departures-page .routing-resource-panel .resource-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.ca-departures-page .routing-resource-panel .resource-tabs button {
  min-height: 32px;
  padding: 6px 3px;
  border: 1px solid var(--ca-line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ca-ink);
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}

.ca-departures-page .routing-resource-panel .resource-tabs button.active {
  border-color: var(--ca-blue);
  background: var(--ca-blue);
  color: #ffffff;
}

.ca-departures-page #routingResourceSearch {
  min-height: 40px;
  border: 1px solid var(--ca-line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--ca-ink);
  font-size: 13px;
}

.ca-departures-page #routingResourceSearch::placeholder {
  color: #94a3b8;
}

.ca-departures-page #routingResourceSummary {
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 9px;
  background: #eff8f2;
  color: #25533b;
  font-size: 12px;
  font-weight: 900;
}

.ca-departures-page #routingResourceSummary .jitc-icon {
  width: 15px;
  height: 15px;
  color: #7890a9;
}

.ca-departures-page .routing-resource-list {
  gap: 7px;
}

.ca-departures-page .routing-resource-card {
  position: relative;
  gap: 3px;
  padding: 10px 11px 10px 14px;
  border: 1px solid var(--ca-line);
  border-left: 0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 34, 56, 0.05);
}

.ca-departures-page .routing-resource-card strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ca-ink);
  font-size: 12.5px;
  font-weight: 900;
}

.ca-departures-page .routing-resource-card strong .jitc-icon {
  width: 15px;
  height: 15px;
  color: var(--ca-blue);
}

.ca-departures-page .routing-availability-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  background: #16c46b;
  box-shadow: 0 0 0 3px rgba(22, 196, 107, 0.12);
}

.ca-departures-page .routing-resource-card span,
.ca-departures-page .routing-resource-card small {
  color: var(--ca-muted);
  font-size: 11px;
  line-height: 1.25;
}

@media (max-width: 1280px) {
  .ca-departures-page .routing-layout {
    grid-template-columns: 1fr;
  }

  .ca-departures-page .routing-resource-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 980px) {
  .ca-departures-page main {
    padding: 16px;
  }

  .ca-departures-page .routing-controls {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .ca-departures-page .routing-load-card {
    grid-template-columns: 42px 1fr;
  }

  .ca-departures-page .routing-load-icon {
    width: 38px;
    height: 38px;
  }

  .ca-departures-page .routing-load-main,
  .ca-departures-page .routing-load-meta,
  .ca-departures-page .routing-load-customer,
  .ca-departures-page .routing-slots,
  .ca-departures-page .routing-load-actions {
    grid-column: 2;
    grid-row: auto;
  }

  .ca-departures-page .routing-slots {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .ca-departures-page .routing-load-actions {
    justify-content: flex-start;
  }
}

.broker-out-page {
  --broker-bg: #f5f7fb;
  --broker-surface: #ffffff;
  --broker-line: #dde6f2;
  --broker-ink: #0f2238;
  --broker-muted: #64748b;
  --broker-blue: #2563eb;
  --broker-blue-soft: #eef5ff;
  --broker-green: #16a34a;
  --broker-green-soft: #eaf8ee;
  background: var(--broker-bg);
  color: var(--broker-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.broker-out-page main {
  padding: 22px 26px;
}

.broker-out-page .broker-out-header {
  margin-bottom: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.broker-out-page .broker-out-header h1 {
  margin: 0 0 4px;
  color: var(--broker-ink);
  font-size: 29px;
  font-weight: 850;
  letter-spacing: 0;
}

.broker-out-page .broker-out-header p {
  color: var(--broker-muted);
  font-size: 15px;
}

.broker-out-page .routing-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 88px;
  margin-bottom: 14px;
  padding: 18px 20px;
  border-color: var(--broker-line);
  border-radius: 14px;
  background: var(--broker-surface);
  box-shadow: 0 12px 32px rgba(15, 34, 56, 0.07);
}

.broker-out-page .broker-filter-field {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.broker-out-page .broker-filter-field input,
.broker-out-page .broker-filter-field select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--broker-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--broker-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(15, 34, 56, 0.03);
}

.broker-out-page .broker-filter-field input {
  width: 154px;
}

.broker-out-page .broker-filter-field select {
  width: 170px;
}

.broker-out-page .routing-window {
  min-height: 42px;
  max-width: 900px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid #ccebd7;
  border-radius: 10px;
  background: var(--broker-green-soft);
  color: #14532d;
  font-size: 14px;
  font-weight: 850;
  box-shadow: none;
}

.broker-out-page .routing-window .jitc-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #168449;
  stroke-width: 2.2;
}

.broker-out-page .broker-out-panel {
  margin-top: 0;
  padding: 16px 14px 20px;
  border-color: var(--broker-line);
  border-radius: 14px;
  background: var(--broker-surface);
  box-shadow: 0 12px 32px rgba(15, 34, 56, 0.07);
}

.broker-out-page .routing-panel-head {
  margin: 0 2px 18px;
  align-items: start;
}

.broker-out-page .routing-panel-head h2 {
  color: var(--broker-ink);
  font-size: 19px;
  font-weight: 850;
}

.broker-out-page .routing-panel-head span {
  padding-top: 4px;
  color: #40546c;
  font-size: 14px;
  font-weight: 850;
}

.broker-out-page .broker-load-list {
  display: grid;
  justify-items: stretch;
  gap: 18px;
  overflow-x: auto;
}

.broker-out-page .broker-load-list .routing-group {
  width: 100%;
  max-width: 100%;
  gap: 0;
}

.broker-out-page .routing-group > h3 {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #dce9e4;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, #eff8f2, #f8fbff);
  color: var(--broker-ink);
  font-size: 17px;
  font-weight: 900;
}

.broker-out-page .broker-date-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--broker-blue);
  background: var(--broker-blue-soft);
}

.broker-out-page .broker-date-icon .jitc-icon {
  width: 15px;
  height: 15px;
}

.broker-out-page .broker-main-table {
  width: 100%;
  min-width: 1080px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--broker-line);
  border-radius: 0 0 12px 12px;
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(15, 34, 56, 0.05);
}

.broker-out-page .broker-main-head,
.broker-out-page .broker-main-row {
  display: grid;
  grid-template-columns: minmax(145px, 0.7fr) minmax(185px, 1fr) minmax(185px, 1fr) minmax(220px, 1.05fr) minmax(220px, 1fr) minmax(145px, 0.72fr);
}

.broker-out-page .broker-main-head {
  min-height: 40px;
  border-bottom: 1px solid var(--broker-line);
  background: #fbfcff;
  color: #60718a;
  font-size: 13px;
  font-weight: 850;
}

.broker-out-page .broker-main-head div,
.broker-out-page .broker-main-row > div {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: 8px 12px;
  border-right: 1px solid #edf2f7;
  text-align: center;
}

.broker-out-page .broker-main-head div:last-child,
.broker-out-page .broker-main-row > div:last-child {
  border-right: 0;
}

.broker-out-page .broker-main-item {
  border-bottom: 1px solid #edf2f7;
  background: #ffffff;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease;
}

.broker-out-page .broker-main-item:hover {
  background: #f8fbff;
  box-shadow: inset 3px 0 0 var(--broker-blue);
}

.broker-out-page .broker-main-item:last-child {
  border-bottom: 0;
}

.broker-out-page .broker-main-row {
  min-height: 68px;
  color: var(--broker-ink);
  font-size: 12.5px;
  line-height: 1.18;
}

.broker-out-page .broker-load-link {
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: center;
  justify-items: center !important;
  gap: 8px;
  text-align: center !important;
}

.broker-out-page .broker-load-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--broker-blue-soft);
  color: var(--broker-blue);
}

.broker-out-page .broker-load-icon .jitc-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.15;
}

.broker-out-page .broker-load-link button {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--broker-blue);
  font: inherit;
  font-size: 13.5px;
  font-weight: 850;
  text-decoration: underline;
  cursor: pointer;
}

.broker-out-page .broker-load-link small {
  display: block;
  margin-top: 6px;
  color: var(--broker-muted);
  font-size: 12px;
  font-weight: 800;
}

.broker-out-page .broker-main-pickup,
.broker-out-page .broker-main-delivery {
  gap: 4px;
  justify-items: center !important;
  text-align: center !important;
  color: var(--broker-ink);
  font-weight: 800;
  line-height: 1.18;
}

.broker-out-page .broker-stop-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #60718a;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.broker-out-page .broker-stop-label .jitc-icon {
  width: 13px;
  height: 13px;
  color: var(--broker-blue);
}

.broker-out-page .broker-main-pickup > strong,
.broker-out-page .broker-main-delivery > strong {
  display: block;
  color: var(--broker-ink);
  font-size: 12.5px;
  font-weight: 800;
}

.broker-out-page .broker-main-requirements .broker-requirements {
  gap: 2px;
  color: #162334;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.18;
}

.broker-out-page .broker-main-requirements .broker-requirements strong {
  color: #0f2238;
  font-size: 12px;
  font-weight: 850;
}

.broker-out-page .broker-main-note button {
  min-height: 34px;
  width: auto;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--broker-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--broker-blue);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(15, 34, 56, 0.03);
}

.broker-out-page .broker-main-note button:hover {
  border-color: #c7d6ea;
  background: #f8fbff;
}

.broker-out-page .broker-icon-button {
  min-height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.1;
  white-space: normal;
}

.broker-out-page .broker-icon-button .jitc-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.broker-out-page .broker-main-action .broker-icon-button span {
  display: inline;
}

.broker-out-page .broker-source-pill {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--broker-line);
  border-radius: 8px;
  background: #f8fbff;
  color: #35506c;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
}

.broker-out-page .broker-source-pill .jitc-icon {
  width: 15px;
  height: 15px;
  color: var(--broker-blue);
}

.broker-out-page .broker-note,
.broker-out-page .broker-note-empty {
  border-color: var(--broker-line);
  border-radius: 8px;
  background: #ffffff;
  color: #48566a;
}

.broker-out-page .broker-detail-modal {
  width: min(920px, 100%);
  border-radius: 14px;
}

.broker-out-page .broker-modal-actions textarea {
  border-radius: 10px;
}

.broker-out-page .broker-modal-actions .broker-icon-button span {
  display: inline;
}

@media (max-width: 1280px) {
  .broker-out-page .broker-main-table {
    min-width: 980px;
  }

  .broker-out-page .broker-main-head,
  .broker-out-page .broker-main-row {
    grid-template-columns: 135px 175px 175px 205px 205px 135px;
  }
}

@media (max-width: 980px) {
  .broker-out-page main {
    padding: 16px;
  }

  .broker-out-page .routing-controls {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .broker-out-page .broker-filter-field input,
  .broker-out-page .broker-filter-field select,
  .broker-out-page .routing-window {
    width: 100%;
    max-width: none;
  }
}

/* Shared JITC icon system v88 */
.jitc-icon {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.open-trucks-page .open-truck-kpi-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #2563eb;
  background: #dbeafe;
}

.open-trucks-page .open-truck-kpi-icon::before,
.open-trucks-page .open-truck-kpi-icon::after {
  content: none !important;
}

.open-trucks-page .open-truck-kpi-icon .jitc-icon {
  width: 21px;
  height: 21px;
}

.open-trucks-page .open-truck-kpi-card.is-purple .open-truck-kpi-icon {
  color: #7c3aed;
  background: #ede9fe;
}

.open-trucks-page .open-truck-kpi-card.is-pink .open-truck-kpi-icon {
  color: #db2777;
  background: #fce7f3;
}

.open-trucks-page .open-truck-kpi-card.is-cyan .open-truck-kpi-icon {
  color: #0284c7;
  background: #e0f2fe;
}

.open-trucks-page .open-truck-kpi-card.is-amber .open-truck-kpi-icon {
  color: #d97706;
  background: #fef3c7;
}

/* Shared KPI icon sizing v91 */
.tracking-modern-page .tracking-count-icon .jitc-icon,
.tracking-modern-page .tracking-progress-truck .jitc-icon,
.tasks-modern-page .task-kpi-icon .jitc-icon,
.driver-checkin-modern-page .driver-kpi-icon .jitc-icon {
  width: 20px;
  height: 20px;
}

/* Open Trucks compact row density v92 */
.open-trucks-page .open-truck-filters {
  align-items: center;
  justify-content: space-between;
}

.open-trucks-page .open-truck-toolbar-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  align-self: end;
  margin-right: auto;
}

.open-trucks-page .open-truck-show-control,
.open-trucks-page .open-truck-density-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.open-trucks-page .open-truck-show-control span,
.open-trucks-page .open-truck-density-control span {
  padding: 0 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.open-trucks-page .open-truck-show-control button,
.open-trucks-page .open-truck-density-control button {
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.open-trucks-page .open-truck-show-control button.active,
.open-trucks-page .open-truck-density-control button.active {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.22);
}

.open-trucks-page.open-truck-density-compact .open-truck-list {
  gap: 8px;
}

.open-trucks-page.open-truck-density-compact .open-truck-market-group {
  border-radius: 13px;
  overflow: hidden;
}

.open-trucks-page.open-truck-density-compact .open-truck-market-header {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 12.5px;
}

.open-trucks-page.open-truck-density-compact .open-truck-market-header span:first-child {
  letter-spacing: 0.01em;
}

.open-trucks-page.open-truck-density-compact .open-truck-market-header span:last-child {
  font-size: 11.5px;
}

.open-trucks-page.open-truck-density-compact .open-truck-card {
  min-height: 0;
  background: #fff;
  transition: background 150ms ease, box-shadow 150ms ease;
}

.open-trucks-page.open-truck-density-compact .open-truck-card:hover {
  background: #f8fbff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.055);
}

.open-trucks-page.open-truck-density-compact .open-truck-card::before {
  top: 8px;
  bottom: 8px;
  width: 4px;
}

.open-trucks-page.open-truck-density-compact .open-truck-main {
  min-height: 60px;
  grid-template-columns: 92px minmax(155px, 0.9fr) minmax(220px, 1.25fr) minmax(220px, 1.12fr) minmax(150px, 0.78fr);
  align-items: stretch;
}

.open-trucks-page.open-truck-density-compact .open-truck-number,
.open-trucks-page.open-truck-density-compact .open-truck-location,
.open-trucks-page.open-truck-density-compact .open-truck-last-load,
.open-trucks-page.open-truck-density-compact .open-truck-next-load,
.open-trucks-page.open-truck-density-compact .open-truck-note-card {
  min-height: 60px;
  padding: 5px 9px;
  gap: 2px;
  justify-content: center;
  text-align: center;
}

.open-trucks-page.open-truck-density-compact .open-truck-number {
  gap: 3px;
}

.open-trucks-page.open-truck-density-compact .open-truck-mini-icon {
  width: 16px;
  height: 16px;
  margin-bottom: 0;
}

.open-trucks-page.open-truck-density-compact .open-truck-number strong {
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0;
}

.open-trucks-page.open-truck-density-compact .open-truck-main .open-truck-hold-button {
  min-height: 21px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
}

.open-trucks-page.open-truck-density-compact .open-truck-location > small,
.open-trucks-page.open-truck-density-compact .open-truck-last-load > small,
.open-trucks-page.open-truck-density-compact .open-truck-next-load > small,
.open-trucks-page.open-truck-density-compact .open-truck-note-card > small {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.05;
}

.open-trucks-page.open-truck-density-compact .open-truck-location b,
.open-trucks-page.open-truck-density-compact .open-truck-last-load b,
.open-trucks-page.open-truck-density-compact .open-truck-next-load b,
.open-trucks-page.open-truck-density-compact .open-truck-note-card b {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.12;
}

.open-trucks-page.open-truck-density-compact .open-truck-last-load b,
.open-trucks-page.open-truck-density-compact .open-truck-next-load b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-trucks-page.open-truck-density-compact .open-truck-location span,
.open-trucks-page.open-truck-density-compact .open-truck-last-load span,
.open-trucks-page.open-truck-density-compact .open-truck-next-load span,
.open-trucks-page.open-truck-density-compact .open-truck-note-card span {
  max-width: 100%;
  font-size: 10.8px;
  line-height: 1.1;
}

.open-trucks-page.open-truck-density-compact .open-truck-time-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px 10px;
  margin-top: 0;
}

.open-trucks-page.open-truck-density-compact .open-truck-time-stack span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 10.8px;
  line-height: 1.1;
}

.open-trucks-page.open-truck-density-compact .open-truck-time-stack small {
  font-size: 9px;
  line-height: 1;
}

.open-trucks-page.open-truck-density-compact .open-truck-wait-card {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.open-trucks-page.open-truck-density-compact .open-truck-wait-card small,
.open-trucks-page.open-truck-density-compact .open-truck-wait-card b {
  font-size: 10.8px;
  line-height: 1.05;
}

.open-trucks-page.open-truck-density-compact .open-truck-hold-line {
  margin-top: 0;
  gap: 1px;
}

.open-trucks-page.open-truck-density-compact .open-truck-hold-line small {
  font-size: 9.5px;
}

.open-trucks-page.open-truck-density-compact .open-truck-hold-line span {
  font-size: 10.8px;
  line-height: 1.08;
}

.open-trucks-page.open-truck-density-compact .open-truck-note-card {
  min-height: 44px;
  border-radius: 0;
}

.open-trucks-page.open-truck-density-compact .open-truck-note-card:not(.is-empty) {
  padding: 4px 9px;
  background: color-mix(in srgb, var(--open-note-color, #d8ecff) 54%, #fff 46%);
}

.open-trucks-page.open-truck-density-compact .open-truck-note-card.is-empty {
  min-height: 32px;
  padding: 4px 8px;
  background: transparent;
}

.open-trucks-page.open-truck-density-compact .open-truck-note-card.is-empty b {
  color: #2563eb;
  font-size: 11px;
}

.open-trucks-page.open-truck-density-comfortable .open-truck-density-control button[data-open-truck-density="comfortable"] {
  background: #2563eb;
  color: #fff;
}

@media (max-width: 1200px) {
  .open-trucks-page .open-truck-toolbar-controls {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Brokered Loads board v136 */
.brokered-loads-page main {
  display: grid;
  gap: 14px;
}

.brokered-loads-page .modern-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brokered-loads-page .modern-page-header h1 {
  margin: 0;
  color: #0f172a;
  font-size: 30px;
  line-height: 1.08;
}

.brokered-loads-page .modern-page-header p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 15px;
}

.brokered-loads-toolbar {
  display: grid;
  grid-template-columns: 145px 145px minmax(260px, 1fr) minmax(180px, 240px);
  gap: 10px;
  align-items: end;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.brokered-loads-toolbar label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.brokered-loads-toolbar span {
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.brokered-loads-toolbar input,
.brokered-loads-toolbar select {
  min-height: 42px;
  border-radius: 9px;
  border-color: #d5dfec;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
}

.brokered-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
}

.brokered-kpi {
  display: grid;
  gap: 7px;
  min-height: 86px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.brokered-kpi span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.brokered-kpi strong {
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
}

.brokered-kpi-blue {
  border-left: 4px solid #2563eb;
}

.brokered-kpi-green {
  border-left: 4px solid #16a34a;
}

.brokered-kpi-amber {
  border-left: 4px solid #d97706;
}

.brokered-day-board {
  display: grid;
  gap: 12px;
}

.brokered-day-card,
.brokered-empty {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}

.brokered-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(90deg, #eef7f1 0%, #f8fbff 100%);
  border-bottom: 1px solid #dbe3ef;
}

.brokered-day-head div {
  display: grid;
  gap: 4px;
}

.brokered-day-date {
  color: #2563eb;
  font-size: 15px;
  font-weight: 1000;
}

.brokered-day-head strong {
  color: #334155;
  font-size: 13px;
}

.brokered-day-pay {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  color: #065f46;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 1000;
}

.brokered-load-head,
.brokered-load-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.05fr) minmax(170px, 1.1fr) minmax(170px, 1.1fr) minmax(160px, 0.9fr) minmax(110px, 0.55fr);
  gap: 12px;
  align-items: center;
}

.brokered-load-head {
  padding: 10px 16px;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e5edf7;
  font-size: 12px;
  font-weight: 1000;
}

.brokered-load-list {
  display: grid;
}

.brokered-load-row {
  min-height: 78px;
  padding: 12px 16px;
  border-bottom: 1px solid #e8eef7;
}

.brokered-load-row:last-child {
  border-bottom: 0;
}

.brokered-load-row:hover {
  background: #f8fbff;
}

.brokered-load-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.brokered-load-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: #eaf2ff;
  border-radius: 50%;
}

.brokered-load-icon .jitc-icon {
  width: 20px;
  height: 20px;
}

.brokered-load-number {
  color: #2563eb;
  font-size: 16px;
  font-weight: 1000;
  text-decoration: none;
}

.brokered-load-number:hover {
  text-decoration: underline;
}

.brokered-load-main small,
.brokered-route small,
.brokered-carrier span,
.brokered-pay span,
.brokered-empty span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.brokered-route strong,
.brokered-carrier strong,
.brokered-pay strong,
.brokered-empty strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 14px;
  font-weight: 1000;
}

.brokered-carrier strong {
  color: #064e3b;
}

.brokered-pay strong {
  color: #854d0e;
}

.brokered-empty {
  display: grid;
  gap: 4px;
  padding: 18px;
}

@media (max-width: 1200px) {
  .brokered-load-head,
  .brokered-load-row {
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(130px, 0.9fr) minmax(95px, 0.55fr);
  }
}

@media (max-width: 900px) {
  .brokered-loads-page .modern-page-header,
  .brokered-day-head {
    align-items: stretch;
    flex-direction: column;
  }

  .brokered-loads-toolbar,
  .brokered-kpis {
    grid-template-columns: 1fr;
  }

  .brokered-load-head {
    display: none;
  }

  .brokered-load-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Brokered Loads 7-day calendar v137 */
.brokered-loads-page .brokered-loads-toolbar {
  grid-template-columns: 150px minmax(280px, 1fr) minmax(180px, 240px) 100px;
}

.brokered-week-note {
  display: grid;
  gap: 6px;
  min-height: 42px;
  align-self: end;
  padding: 7px 10px;
  color: #0f172a;
  background: #f8fbff;
  border: 1px solid #d5dfec;
  border-radius: 9px;
}

.brokered-week-note span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.brokered-week-note strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1;
}

.brokered-loads-page .brokered-day-board {
  overflow-x: auto;
  padding-bottom: 8px;
}

.brokered-calendar-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(230px, 1fr));
  gap: 10px;
  min-width: 1680px;
  align-items: start;
}

.brokered-calendar-day {
  min-height: 520px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
}

.brokered-calendar-day.is-empty {
  background: rgba(255, 255, 255, 0.72);
}

.brokered-calendar-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 64px;
  padding: 12px;
  background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
  border-bottom: 1px solid #dbe3ef;
}

.brokered-calendar-day-head div {
  display: grid;
  gap: 3px;
}

.brokered-calendar-day-head strong {
  color: #1d4ed8;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.05;
}

.brokered-calendar-day-head span {
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.brokered-calendar-day-head small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 26px;
  padding: 4px 8px;
  color: #075985;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
}

.brokered-calendar-day-total {
  min-height: 36px;
  padding: 8px 12px;
  color: #065f46;
  background: #ecfdf5;
  border-bottom: 1px solid #d1fae5;
  font-size: 14px;
  font-weight: 1000;
  text-align: right;
}

.brokered-calendar-loads {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.brokered-calendar-load {
  display: grid;
  gap: 7px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-left: 4px solid #16a34a;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.brokered-calendar-load-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.brokered-calendar-load .brokered-load-icon {
  width: 28px;
  height: 28px;
  color: #2563eb;
}

.brokered-calendar-load .brokered-load-icon .jitc-icon {
  width: 15px;
  height: 15px;
}

.brokered-calendar-load .brokered-load-number {
  min-width: 0;
  overflow: hidden;
  color: #1d4ed8;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brokered-calendar-route {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brokered-calendar-route strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brokered-calendar-route span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.brokered-calendar-carrier {
  min-height: 30px;
  padding: 6px 8px;
  color: #064e3b;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 1000;
  overflow-wrap: anywhere;
}

.brokered-calendar-pay {
  min-height: 30px;
  padding: 6px 8px;
  color: #854d0e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 1000;
  text-align: right;
}

.brokered-calendar-empty {
  min-height: 96px;
  display: grid;
  place-items: center;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 1200px) {
  .brokered-calendar-board {
    min-width: 1540px;
    grid-template-columns: repeat(7, minmax(210px, 1fr));
  }
}

@media (max-width: 900px) {
  .brokered-loads-page .brokered-loads-toolbar {
    grid-template-columns: 1fr;
  }

  .brokered-calendar-board {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .brokered-calendar-day {
    min-height: auto;
  }
}

/* Brokered Loads compact density v138 */
.brokered-loads-page .brokered-kpis {
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 8px;
}

.brokered-loads-page .brokered-kpi {
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 10px;
}

.brokered-loads-page .brokered-kpi strong {
  font-size: 22px;
}

.brokered-loads-page .brokered-loads-toolbar {
  padding: 10px;
  border-radius: 10px;
}

.brokered-loads-page .brokered-loads-toolbar input,
.brokered-loads-page .brokered-loads-toolbar select,
.brokered-loads-page .brokered-week-note {
  min-height: 36px;
}

.brokered-loads-page .brokered-day-board {
  padding-bottom: 4px;
}

.brokered-loads-page .brokered-calendar-board {
  grid-template-columns: repeat(7, minmax(190px, 1fr));
  gap: 8px;
  min-width: 1340px;
}

.brokered-loads-page .brokered-calendar-day {
  min-height: 440px;
  border-radius: 10px;
}

.brokered-loads-page .brokered-calendar-day-head {
  min-height: 50px;
  padding: 8px 10px;
}

.brokered-loads-page .brokered-calendar-day-head strong {
  font-size: 14px;
}

.brokered-loads-page .brokered-calendar-day-head span {
  font-size: 11px;
}

.brokered-loads-page .brokered-calendar-day-head small {
  min-width: 44px;
  min-height: 22px;
  padding: 3px 7px;
  font-size: 10px;
}

.brokered-loads-page .brokered-calendar-day-total {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
}

.brokered-loads-page .brokered-calendar-loads {
  gap: 6px;
  padding: 7px;
}

.brokered-loads-page .brokered-calendar-load {
  gap: 5px;
  padding: 7px 8px;
  border-left-width: 3px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.brokered-compact-head {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.brokered-loads-page .brokered-calendar-load .brokered-load-icon {
  width: 20px;
  height: 20px;
}

.brokered-loads-page .brokered-calendar-load .brokered-load-icon .jitc-icon {
  width: 12px;
  height: 12px;
}

.brokered-loads-page .brokered-calendar-load .brokered-load-number {
  font-size: 13px;
}

.brokered-compact-pay {
  min-height: 22px;
  padding: 3px 6px;
  color: #854d0e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.1;
  white-space: nowrap;
}

.brokered-compact-route {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.brokered-compact-route strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brokered-compact-route span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.brokered-compact-carrier {
  min-height: 24px;
  padding: 4px 6px;
  overflow: hidden;
  color: #064e3b;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brokered-loads-page .brokered-calendar-empty {
  min-height: 72px;
  font-size: 12px;
}

@media (max-width: 1200px) {
  .brokered-loads-page .brokered-calendar-board {
    grid-template-columns: repeat(7, minmax(180px, 1fr));
    min-width: 1260px;
  }
}

@media (max-width: 900px) {
  .brokered-loads-page .brokered-calendar-board {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .brokered-compact-route strong,
  .brokered-compact-carrier {
    white-space: normal;
  }
}

/* Brokered Loads compact lane cards v139 */
.brokered-loads-page button.brokered-calendar-load {
  width: 100%;
  min-height: 0;
  padding: 6px 8px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-left: 3px solid #16a34a;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon number rate"
    "icon carrier carrier"
    "icon lane time";
  gap: 1px 7px;
  text-align: left;
  font: inherit;
  color: #06142e;
  cursor: pointer;
}

.brokered-loads-page button.brokered-calendar-load:hover,
.brokered-loads-page button.brokered-calendar-load:focus-visible {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.13);
  outline: none;
  transform: translateY(-1px);
}

.brokered-state-load .brokered-load-icon {
  grid-area: icon;
  width: 20px;
  height: 20px;
  align-self: center;
}

.brokered-mini-load-number {
  grid-area: number;
  color: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.brokered-mini-rate {
  grid-area: rate;
  justify-self: end;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.brokered-mini-carrier {
  grid-area: carrier;
  min-width: 0;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.08;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brokered-mini-lane {
  grid-area: lane;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brokered-mini-time {
  grid-area: time;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.05;
  white-space: nowrap;
  justify-self: end;
  opacity: 0.86;
}

.brokered-loads-page button.brokered-calendar-load.load-usps {
  border-color: #c79600;
  border-left-color: #c79600;
  background: #ffc000;
  color: #111111;
}

.brokered-loads-page button.brokered-calendar-load.load-dhl {
  border-color: #8db376;
  border-left-color: #8db376;
  background: #c6e0b4;
  color: #10210f;
}

.brokered-loads-page button.brokered-calendar-load.load-other-customer {
  border-color: #0088ba;
  border-left-color: #0088ba;
  background: #00b0f0;
  color: #051b24;
}

.brokered-loads-page button.brokered-calendar-load.load-usps .brokered-load-icon,
.brokered-loads-page button.brokered-calendar-load.load-dhl .brokered-load-icon,
.brokered-loads-page button.brokered-calendar-load.load-other-customer .brokered-load-icon {
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
}

.brokered-load-modal[hidden] {
  display: none;
}

.brokered-load-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
}

.brokered-load-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 46, 0.48);
  backdrop-filter: blur(3px);
}

.brokered-load-dialog {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.26);
}

.brokered-load-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.brokered-load-dialog-head span {
  display: block;
  margin-bottom: 3px;
  color: #008061;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.brokered-load-dialog-head h2 {
  margin: 0;
  color: #06142e;
  font-size: 1.35rem;
}

.brokered-load-dialog-head button {
  min-width: 78px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 10px;
  background: #ffffff;
  color: #06142e;
  font-weight: 900;
  padding: 10px 14px;
  cursor: pointer;
}

.brokered-load-dialog-body {
  padding: 18px 20px 20px;
}

.brokered-detail-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 14px;
}

.brokered-detail-summary > div {
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-radius: 12px;
  background: #ecfdf3;
  padding: 11px 12px;
}

.brokered-detail-summary span,
.brokered-detail-row span {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.brokered-detail-summary strong {
  display: block;
  margin-top: 3px;
  color: #005f49;
  font-size: 1.05rem;
  font-weight: 950;
}

.brokered-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.brokered-detail-row {
  min-height: 62px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: #f8fbff;
  padding: 10px 12px;
}

.brokered-detail-row strong {
  display: block;
  margin-top: 4px;
  color: #06142e;
  font-size: 0.94rem;
  line-height: 1.2;
}

@media (max-width: 620px) {
  .brokered-detail-summary,
  .brokered-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Brokered Loads sheet redesign v141 */
.brokered-loads-page .brokered-loads-toolbar {
  grid-template-columns: 150px minmax(260px, 1fr) minmax(180px, 240px) minmax(120px, auto);
  margin-bottom: 12px;
  background: #ffffff;
}

.brokered-week-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(100px, 1fr));
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.brokered-week-tab {
  min-height: 54px;
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: center;
  padding: 8px 6px;
  background: #ffffff;
  border: 1px solid #d5dfec;
  border-radius: 9px;
  color: #06142e;
  cursor: pointer;
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.brokered-week-tab span {
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1;
}

.brokered-week-tab small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

.brokered-week-tab.active {
  border-color: #06142e;
  box-shadow: inset 0 0 0 1px #06142e, 0 6px 16px rgba(15, 23, 42, 0.08);
}

.brokered-week-tab:hover,
.brokered-week-tab:focus-visible {
  border-color: #64748b;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.brokered-tracking-refresh-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid #cfe0f5;
  border-radius: 12px;
  background: #f3f8ff;
  color: #17375e;
}

.brokered-tracking-refresh-status > div {
  display: grid;
  gap: 3px;
}

.brokered-tracking-refresh-status strong {
  color: #06142e;
  font-size: 0.9rem;
  font-weight: 950;
}

.brokered-tracking-refresh-status span {
  color: #4b6280;
  font-size: 0.8rem;
  font-weight: 750;
}

.brokered-tracking-refresh-status.ready {
  border-color: #bfe5ce;
  background: #f0faf4;
}

.brokered-tracking-refresh-status button {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid #1f64e5;
  border-radius: 9px;
  background: #2368e8;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
}

.brokered-tracking-refresh-status button:disabled {
  border-color: #cbd5e1;
  background: #e8edf4;
  color: #7a899d;
  cursor: not-allowed;
}

.brokered-eta-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.brokered-filter-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  min-height: 70px;
  padding: 12px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
  color: #06142e;
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.brokered-filter-card:hover,
.brokered-filter-card:focus-visible {
  border-color: #93c5fd;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.09);
  outline: none;
  transform: translateY(-1px);
}

.brokered-filter-card.active {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1), 0 10px 24px rgba(15, 23, 42, 0.075);
}

.brokered-filter-icon {
  grid-row: 1 / span 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

.brokered-filter-svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brokered-filter-card strong {
  color: #06142e;
  font-size: 1.28rem;
  font-weight: 1000;
  line-height: 1;
}

.brokered-filter-card > span:last-child {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.1;
}

.brokered-filter-card.late .brokered-filter-icon {
  background: #fff1f2;
  color: #ef4444;
  box-shadow: inset 0 0 0 1px #fecdd3;
}

.brokered-filter-card.tight .brokered-filter-icon {
  background: #fffbeb;
  color: #f59e0b;
  box-shadow: inset 0 0 0 1px #fde68a;
}

.brokered-filter-card.missing .brokered-filter-icon {
  background: #eff6ff;
  color: #60a5fa;
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

.brokered-filter-card.ok .brokered-filter-icon {
  background: #ecfdf5;
  color: #10b981;
  box-shadow: inset 0 0 0 1px #bbf7d0;
}

.brokered-filter-card.late strong {
  color: #be123c;
}

.brokered-filter-card.tight strong {
  color: #b45309;
}

.brokered-filter-card.missing strong {
  color: #2563eb;
}

.brokered-filter-card.ok strong {
  color: #047857;
}

.brokered-filter-card.team .brokered-filter-icon {
  background: #f1edff;
  color: #6d4aff;
  box-shadow: inset 0 0 0 1px #ddd3ff;
}

.brokered-filter-card.team strong {
  color: #5b3ce6;
}

.brokered-filter-card.dedicated .brokered-filter-icon {
  background: #d9f7f4;
  color: #08706e;
  box-shadow: inset 0 0 0 1px #a9e8e2;
}

.brokered-filter-card.dedicated strong {
  color: #08706e;
}

.brokered-filter-card.is-exclude .brokered-filter-icon {
  background: #f1f5f9;
  color: #64748b;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}

.brokered-filter-card.is-exclude strong {
  color: #475569;
}

.brokered-filter-card.issues .brokered-filter-icon {
  background: #fff1f2;
  color: #ef4444;
  box-shadow: inset 0 0 0 1px #fecdd3;
}

.brokered-filter-card.issues strong {
  color: #be123c;
}

.brokered-loads-page .brokered-day-board {
  overflow-x: visible;
}

.brokered-sheet-panel {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.08);
}

.brokered-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.brokered-sheet-head h2 {
  margin: 0;
  color: #06142e;
  font-size: 1.25rem;
}

.brokered-sheet-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-weight: 750;
}

.brokered-sheet-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #06142e;
  white-space: nowrap;
}

.brokered-sheet-summary span,
.brokered-sheet-summary strong {
  padding: 7px 10px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  font-weight: 950;
}

.brokered-sheet-table-wrap {
  overflow-x: auto;
}

.brokered-sheet-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
}

.brokered-sheet-table th,
.brokered-sheet-table td {
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 9px 10px;
  color: #06142e;
  text-align: center;
  vertical-align: middle;
}

.brokered-sheet-table th:last-child,
.brokered-sheet-table td:last-child {
  border-right: 0;
}

.brokered-sheet-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffffff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.brokered-sheet-table tbody tr {
  background: #ffffff;
}

.brokered-sheet-table tbody tr:hover {
  background: #f8fafc;
}

.brokered-sheet-table td {
  font-size: 0.86rem;
  font-weight: 780;
  line-height: 1.25;
}

.brokered-sheet-table td strong {
  display: block;
  color: #06142e;
  font-weight: 950;
  text-align: center;
}

.brokered-sheet-table td span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.brokered-table-load-cell {
  width: 92px;
}

.brokered-load-number-chip {
  min-width: 74px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  color: #06142e;
  cursor: pointer;
  font: inherit;
  font-weight: 1000;
  line-height: 1;
}

.brokered-load-number-chip.load-usps {
  border-color: #c79600;
  background: #ffc000;
  color: #111111;
}

.brokered-load-number-chip.load-dhl {
  border-color: #8db376;
  background: #c6e0b4;
  color: #10210f;
}

.brokered-load-number-chip.load-other-customer {
  border-color: #0088ba;
  background: #00b0f0;
  color: #051b24;
}

.brokered-load-number-chip:hover,
.brokered-load-number-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.brokered-rate-cell {
  white-space: nowrap;
  font-weight: 950;
}

.brokered-eta-cell {
  min-width: 132px;
}

.brokered-eta-stack {
  display: grid;
  gap: 5px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.brokered-eta-stack strong {
  font-weight: 950;
  white-space: nowrap;
}

.brokered-eta-tag,
.brokered-coming-soon {
  display: inline-flex !important;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  line-height: 1;
}

.brokered-eta-tag.tight {
  border: 1px solid #f4c542;
  background: #fff4c2;
  color: #7a4b00 !important;
}

.brokered-eta-tag.late {
  border: 1px solid #fda4af;
  background: #ffe4e8;
  color: #a10f2b !important;
}

.brokered-coming-soon {
  border: 1px solid #dbe3ef;
  background: #f8fafc;
  color: #64748b !important;
}

.brokered-driver-ping-list {
  display: grid;
  min-width: 190px;
  gap: 5px;
  justify-items: center;
  text-align: center;
}

.brokered-driver-ping-line,
.brokered-driver-no-tracking {
  color: #334155 !important;
  font-size: 0.78rem !important;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.brokered-driver-ping-line.is-stale {
  color: #c1122f !important;
  font-weight: 950;
}

.brokered-driver-no-tracking {
  color: #c1122f !important;
  font-weight: 950;
}

.brokered-inline-alert-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  vertical-align: -1px;
  margin-right: 3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brokered-driver-ping-line,
.brokered-driver-no-tracking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brokered-complete-cell {
  text-align: center;
  color: #334155 !important;
}

.brokered-complete-cell span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid #d7dee9;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155 !important;
  font-size: 0.78rem !important;
  font-weight: 950;
}

.brokered-sheet-empty {
  height: 180px;
  color: #94a3b8 !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-weight: 950 !important;
}

@media (max-width: 1200px) {
  .brokered-week-tabs {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
  }

  .brokered-eta-filters {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

@media (max-width: 900px) {
  .brokered-loads-page .brokered-loads-toolbar,
  .brokered-week-tabs {
    grid-template-columns: 1fr;
  }

  .brokered-eta-filters {
    grid-template-columns: 1fr;
  }

  .brokered-sheet-head {
    align-items: stretch;
    flex-direction: column;
  }

  .brokered-sheet-summary {
    justify-content: space-between;
  }

  .brokered-tracking-refresh-status {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Reset Location Settings */
.reset-location-manager {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--portal-line, #dbe3ef);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.reset-location-manager-head,
.reset-location-editor-head,
.reset-location-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.reset-location-manager-head h2,
.reset-location-editor h3 {
  margin: 0;
}

.reset-location-manager-head p:not(.eyebrow),
.reset-location-editor p:not(.eyebrow) {
  margin: 6px 0 0;
  color: #64748b;
  line-height: 1.5;
}

.reset-location-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
  padding: 6px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #f1f5f9;
}

.reset-location-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #475569;
  background: transparent;
  box-shadow: none;
}

.reset-location-tabs button span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.reset-location-tabs button.active {
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
}

.reset-location-editor {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
}

.reset-location-editor[hidden] {
  display: none;
}

.reset-location-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(110px, 180px) auto;
  gap: 12px;
  align-items: end;
}

.reset-location-fields label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 850;
}

.reset-location-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 10px;
  max-height: 560px;
  overflow-y: auto;
  padding: 2px 4px 4px 2px;
}

.reset-location-card {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.reset-location-card.inactive {
  opacity: 0.68;
  background: #f8fafc;
}

.reset-location-card > div {
  display: grid;
  gap: 2px;
}

.reset-location-card span,
.reset-location-card small,
.reset-location-protected {
  color: #64748b;
  font-size: 0.74rem;
}

.reset-location-protected {
  white-space: nowrap;
  font-weight: 850;
}

@media (max-width: 1000px) {
  .reset-location-list {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .reset-location-fields {
    grid-template-columns: 1fr 120px;
  }

  .reset-location-fields .primary-action {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .reset-location-manager-head,
  .reset-location-editor-head {
    align-items: stretch;
    flex-direction: column;
  }

  .reset-location-tabs,
  .reset-location-fields,
  .reset-location-list {
    grid-template-columns: 1fr;
  }

  .reset-location-fields .primary-action {
    grid-column: auto;
  }
}

.planning-activity-page main {
  background: #f3f7fc;
}

.activity-mode-tabs button[hidden],
.activity-filter-panel label[hidden],
.activity-diagnostic[hidden],
.activity-load-more[hidden] {
  display: none !important;
}

.activity-mode-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 5px;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid #d8e2ef;
  border-radius: 13px;
  background: #eaf0f7;
}

.activity-mode-tabs button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #475569;
  font-weight: 850;
}

.activity-mode-tabs button.active {
  background: #fff;
  color: #1557d5;
  box-shadow: 0 2px 9px rgba(20, 50, 90, 0.12);
}

.activity-filter-panel {
  display: grid;
  grid-template-columns: repeat(6, minmax(135px, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbe5f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(34, 65, 105, 0.07);
}

.activity-filter-panel label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 850;
}

.activity-filter-panel input,
.activity-filter-panel select {
  min-width: 0;
  width: 100%;
}

.activity-coverage {
  margin: 12px 0;
  padding: 10px 13px;
  border: 1px solid #c9daf1;
  border-radius: 11px;
  background: #edf5ff;
  color: #48627f;
  font-size: 0.82rem;
}

.activity-diagnostic {
  margin: 14px 0;
  padding: 18px;
  border: 1px solid #b9d2f4;
  border-left: 5px solid #2465de;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(34, 65, 105, 0.08);
}

.activity-diagnostic-not_needed,
.activity-diagnostic-empty_move,
.activity-diagnostic-home_reset,
.activity-diagnostic-same_location {
  border-left-color: #e49b16;
}

.activity-diagnostic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.activity-diagnostic-head span,
.activity-diagnostic-route small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.activity-diagnostic-head h2 {
  margin: 2px 0 0;
}

.activity-diagnostic > p {
  margin: 10px 0;
  color: #52677f;
}

.activity-diagnostic-route {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 11px;
  background: #f5f8fc;
}

.activity-diagnostic-route div {
  display: grid;
  gap: 2px;
}

.activity-diagnostic-route b {
  color: #2b66c8;
  font-size: 1.4rem;
}

.activity-diagnostic-route em {
  color: #64748b;
  font-size: 0.75rem;
  font-style: normal;
}

.activity-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.activity-history-panel {
  padding: 18px;
  border: 1px solid #dbe5f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(34, 65, 105, 0.07);
}

.activity-event-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.activity-event-row {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr) 130px;
  gap: 16px;
  padding: 14px;
  border: 1px solid #e1e8f0;
  border-radius: 12px;
  background: #fbfdff;
}

.activity-event-time,
.activity-event-source {
  display: grid;
  align-content: start;
  gap: 7px;
  color: #64748b;
  font-size: 0.76rem;
}

.activity-actor {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e8f1ff;
  color: #1f5fc4;
  font-weight: 850;
}

.activity-actor.system {
  background: #edf1f5;
  color: #536273;
}

.activity-event-main > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #60738a;
  font-size: 0.78rem;
}

.activity-action-pill {
  padding: 4px 8px;
  border-radius: 7px;
  background: #e7f5ed;
  color: #157446;
  font-weight: 850;
}

.activity-event-main h3 {
  margin: 7px 0 3px;
  color: #102a4f;
  font-size: 0.95rem;
}

.activity-event-main p,
.activity-event-main small {
  display: block;
  margin: 3px 0 0;
  color: #60738a;
}

.activity-event-source {
  justify-items: end;
  text-align: right;
}

.activity-load-more {
  display: block;
  margin: 15px auto 0;
}

@media (max-width: 1100px) {
  .activity-filter-panel {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .activity-kpi-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

@media (max-width: 720px) {
  .activity-mode-tabs,
  .activity-filter-panel,
  .activity-kpi-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .activity-diagnostic-head,
  .activity-diagnostic-route {
    align-items: flex-start;
    flex-direction: column;
  }

  .activity-event-row {
    grid-template-columns: 1fr;
  }

  .activity-event-source {
    justify-items: start;
    text-align: left;
  }
}

/* USPS Master */
.usps-master-main {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 28px 32px 52px;
}

.usps-master-topbar {
  align-items: flex-start;
  margin-bottom: 18px;
}

.page-kicker {
  display: block;
  margin-bottom: 5px;
  color: #178551;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.usps-memory-badge,
.usps-result-badge,
.usps-history-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 850;
  white-space: nowrap;
}

.usps-memory-badge {
  padding: 9px 14px;
  border: 1px solid #a7d9bd;
  background: #eaf8f0;
  color: #126d40;
  font-size: 0.82rem;
}

.usps-rule-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid #d6e2ef;
  border-radius: 14px;
  background: #d6e2ef;
  box-shadow: 0 10px 28px rgba(20, 52, 85, 0.06);
}

.usps-rule-card > div {
  display: grid;
  gap: 5px;
  padding: 17px 19px;
  background: #ffffff;
}

.usps-rule-card strong {
  color: #12345b;
  font-size: 0.9rem;
}

.usps-rule-card span {
  color: #61758d;
  font-size: 0.8rem;
  line-height: 1.45;
}

.dhl-period-card {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #cbdced;
  border-radius: 14px;
  background: #f8fbff;
  box-shadow: 0 10px 28px rgba(20, 52, 85, 0.06);
}

.dhl-period-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.dhl-period-heading h2 {
  margin: 3px 0 0;
  color: #102a4f;
  font-size: 1.12rem;
}

.dhl-period-heading p {
  margin: 5px 0 0;
  color: #61758d;
  font-size: 0.82rem;
}

.dhl-period-suggested {
  padding: 7px 11px;
  border-radius: 999px;
  background: #e8f1ff;
  color: #205bc3;
  font-size: 0.76rem;
  font-weight: 850;
}

.dhl-period-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(260px, 1.6fr);
  gap: 14px;
  margin-top: 17px;
  align-items: end;
}

.dhl-period-controls label {
  display: grid;
  gap: 6px;
}

.dhl-period-controls label > span {
  color: #49647f;
  font-size: 0.76rem;
  font-weight: 800;
}

.dhl-period-controls select,
.dhl-period-controls input {
  min-height: 42px;
  width: 100%;
  padding: 0 11px;
  border: 1px solid #c9d8e8;
  border-radius: 9px;
  background: #ffffff;
  color: #17375e;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
}

.dhl-period-controls input:read-only {
  background: #f1f5f9;
  color: #45627e;
}

.dhl-period-status {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #a7d9bd;
  border-radius: 9px;
  background: #eaf8f0;
  color: #126d40;
  font-size: 0.8rem;
  font-weight: 800;
}

.dhl-period-warnings {
  margin: 16px 0;
  padding: 15px 18px;
  border: 1px solid #efcf8b;
  border-radius: 12px;
  background: #fff8e7;
  color: #704d00;
}

.dhl-period-warnings > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.dhl-period-warnings ul {
  margin: 10px 0 0 20px;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.55;
}

.usps-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.usps-upload-card,
.usps-results,
.usps-history-panel {
  border: 1px solid #d7e2ee;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(20, 52, 85, 0.08);
}

.usps-upload-card {
  position: relative;
  padding: 24px;
}

.usps-upload-card h2,
.usps-results h2,
.usps-history-panel h2 {
  margin: 0;
  color: #102a4f;
}

.usps-upload-card h2 {
  padding-right: 46px;
  font-size: 1.18rem;
}

.usps-upload-card p,
.usps-panel-head p,
.usps-results-head p {
  margin: 6px 0 0;
  color: #677b91;
  line-height: 1.45;
}

.usps-upload-card p {
  min-height: 2.3em;
  font-size: 0.85rem;
}

.usps-step {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e8f1ff;
  color: #205bc3;
  font-weight: 900;
}

.usps-drop-zone {
  min-height: 155px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border: 2px dashed #aac4e1;
  border-radius: 13px;
  background: #f6faff;
  color: #61758d;
  cursor: pointer;
  text-align: center;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.usps-drop-zone:hover,
.usps-drop-zone.dragging {
  border-color: #2765d4;
  background: #edf5ff;
  transform: translateY(-1px);
}

.usps-upload-card.has-file .usps-drop-zone {
  border-style: solid;
  border-color: #65bd89;
  background: #f1fbf5;
}

.usps-drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.usps-drop-zone strong {
  color: #174f92;
  font-size: 0.95rem;
}

.usps-drop-zone span:not(.usps-upload-icon) {
  font-size: 0.8rem;
}

.usps-upload-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #2d68d5;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
}

.usps-file-selection {
  min-height: 20px;
  margin-top: 12px;
  color: #6a7d91;
  font-size: 0.8rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.usps-upload-card.has-file .usps-file-selection {
  color: #147547;
}

.usps-action-bar,
.usps-download-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.usps-action-bar {
  margin: 18px 0;
  padding: 17px 20px;
  border: 1px solid #d7e2ee;
  border-radius: 13px;
  background: #ffffff;
}

.usps-action-bar > div,
.usps-download-panel > div {
  display: grid;
  gap: 4px;
}

.usps-action-bar strong,
.usps-download-panel strong {
  color: #17375e;
}

.usps-action-bar span,
.usps-download-panel span {
  color: #6b7e93;
  font-size: 0.8rem;
}

.usps-action-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.usps-reset-button {
  min-height: 43px;
  padding: 0 18px;
  border: 1px solid #c7d4e2;
  border-radius: 10px;
  background: #ffffff;
  color: #34516f;
  font-weight: 850;
}

.usps-reset-button:hover:not(:disabled) {
  border-color: #8fa8c1;
  background: #f3f7fb;
}

.usps-reset-button:disabled {
  color: #9aa9b9;
  background: #f4f6f8;
  cursor: not-allowed;
}

.usps-primary-button {
  min-height: 43px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: #2864d7;
  color: #ffffff;
  font-weight: 850;
  box-shadow: 0 7px 16px rgba(40, 100, 215, 0.2);
}

.usps-primary-button:hover:not(:disabled) {
  background: #1f53ba;
}

.usps-primary-button:disabled {
  background: #aab8ca;
  box-shadow: none;
  cursor: not-allowed;
}

.usps-message {
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid #bdd2ea;
  border-radius: 11px;
  background: #edf5ff;
  color: #1d518b;
  font-weight: 700;
}

.usps-message.success {
  border-color: #a9d8bc;
  background: #edf9f2;
  color: #116c40;
}

.usps-message.danger {
  border-color: #efb3b3;
  background: #fff0f0;
  color: #a42b2b;
}

.usps-results,
.usps-history-panel {
  margin-top: 20px;
  padding: 24px;
}

.usps-results-head,
.usps-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.usps-results-head h2,
.usps-history-panel h2 {
  font-size: 1.3rem;
}

.usps-result-badge {
  padding: 8px 12px;
  background: #eaf8f0;
  color: #137044;
  font-size: 0.78rem;
}

.usps-result-badge.warning {
  background: #fff4d8;
  color: #8a5b00;
}

.usps-result-badge.danger {
  background: #ffe7e7;
  color: #a02727;
}

.usps-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 11px;
  margin-top: 20px;
}

.usps-kpi {
  min-height: 100px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 15px;
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #f8fafc;
}

.usps-kpi span,
.usps-kpi small {
  color: #667a91;
  font-size: 0.76rem;
  font-weight: 750;
}

.usps-kpi strong {
  color: #15355c;
  font-size: 1.55rem;
}

.usps-kpi.success {
  border-color: #bde1cb;
  background: #f2fbf6;
}

.usps-kpi.warning {
  border-color: #ead29a;
  background: #fffaec;
}

.usps-kpi.danger {
  border-color: #efbaba;
  background: #fff3f3;
}

.usps-issue-panel {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #e1e8f0;
}

.usps-panel-head h3 {
  margin: 0;
  color: #17375e;
}

.usps-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 24px;
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff2d7;
  color: #8b5b00;
  font-size: 0.75rem;
  vertical-align: middle;
}

.usps-count-badge.danger {
  background: #ffe5e5;
  color: #a32929;
}

.usps-table-wrap {
  margin-top: 13px;
  overflow: auto;
  border: 1px solid #dde6ef;
  border-radius: 11px;
}

.usps-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.usps-review-table th,
.usps-review-table td {
  padding: 11px 13px;
  border-bottom: 1px solid #e5ebf2;
  text-align: left;
  vertical-align: top;
}

.usps-review-table th {
  background: #f3f7fb;
  color: #425b77;
  font-size: 0.73rem;
  text-transform: uppercase;
}

.usps-review-table td strong,
.usps-review-table td span {
  display: block;
}

.usps-review-table td span {
  margin-top: 3px;
  color: #8c5050;
  font-size: 0.75rem;
}

.usps-empty-row td {
  padding: 22px;
  color: #6a7d92;
  text-align: center;
}

.usps-table-note {
  margin: 10px 2px 0;
  color: #6a7d92;
  font-size: 0.78rem;
}

.usps-download-panel {
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 18px;
  border-radius: 12px;
  background: #eff6ff;
}

.usps-reconciliation-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #d9e4ef;
  border-radius: 12px;
  background: #f8fafc;
}

.usps-reconciliation-panel h3,
.usps-reconciliation-panel p {
  margin: 0;
}

.usps-reconciliation-panel p {
  margin-top: 5px;
  color: #667a91;
  font-size: 0.84rem;
}

.usps-report-button {
  flex: 0 0 auto;
}

.usps-acknowledge {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d0def0;
  color: #3f5874;
  cursor: pointer;
}

.usps-acknowledge input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.usps-history-list {
  margin-top: 16px;
  border: 1px solid #dde6ef;
  border-radius: 12px;
  overflow: hidden;
}

.usps-history-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid #e4ebf2;
}

.usps-history-row:last-child {
  border-bottom: 0;
}

.usps-history-row > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.usps-history-row strong {
  color: #18395f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usps-history-row span {
  color: #6c7f93;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usps-history-status {
  padding: 6px 9px;
  background: #eaf8f0;
  color: #147446 !important;
}

.usps-history-status.failed {
  background: #ffeaea;
  color: #a32929 !important;
}

.usps-history-empty {
  padding: 22px;
  color: #6a7d92;
  text-align: center;
}

@media (max-width: 1100px) {
  .usps-rule-card {
    grid-template-columns: 1fr;
  }

  .usps-kpi-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .usps-history-row {
    grid-template-columns: 1fr 1fr;
  }

  .dhl-period-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .usps-master-main {
    padding: 20px 16px 40px;
  }

  .usps-upload-grid,
  .usps-kpi-grid {
    grid-template-columns: 1fr;
  }

  .dhl-period-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .dhl-period-suggested {
    align-self: flex-start;
  }

  .dhl-period-controls {
    grid-template-columns: 1fr;
  }

  .usps-action-bar,
  .usps-download-panel,
  .usps-reconciliation-panel,
  .usps-results-head,
  .usps-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .usps-primary-button {
    width: 100%;
  }

  .usps-action-buttons {
    width: 100%;
    flex-direction: column-reverse;
  }

  .usps-reset-button {
    width: 100%;
  }

  .usps-history-row {
    grid-template-columns: 1fr;
  }
}

/* Open Trucks: additive regional view of the same Open Loads feed used on the main board. */
.open-trucks-page .open-truck-market-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
  align-items: stretch;
  min-width: 0;
}

.open-trucks-page .open-truck-market-trucks {
  min-width: 0;
  border-right: 1px solid #dfe7f2;
}

.open-trucks-page .open-truck-market-loads-slot {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.open-trucks-page .open-truck-regional-loads {
  position: static;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: visible;
  background: #f8fbff;
}

.open-trucks-page .open-truck-regional-loads-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 11px;
  border-bottom: 1px solid #dfe7f2;
  background: #eef5ff;
}

.open-trucks-page .open-truck-regional-loads-head div {
  display: grid;
  gap: 1px;
}

.open-trucks-page .open-truck-regional-loads-head strong {
  color: #163b7a;
  font-size: 13px;
}

.open-trucks-page .open-truck-regional-loads-head small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
}

.open-trucks-page .open-truck-regional-cutoff {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: #42526e;
  font-size: 10.5px;
  font-weight: 800;
}

.open-trucks-page .open-truck-regional-cutoff select {
  min-width: 92px;
  height: 27px;
  padding: 3px 22px 3px 7px;
  border: 1px solid #bdd0eb;
  border-radius: 7px;
  background: #fff;
  color: #173c72;
  font: inherit;
  cursor: pointer;
}

.open-trucks-page .open-truck-regional-loads-head > span {
  display: inline-grid;
  min-width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.open-trucks-page .open-truck-regional-load-list {
  display: grid;
  flex: 1 1 auto;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 7px;
  min-height: 0;
  padding: 9px;
  max-height: 720px;
  overflow: auto;
}

/* A region's Open Loads panel always scrolls within its own fixed height,
   whether or not a truck search is active - it used to switch to
   overflow:visible during search while still carrying a leftover
   viewport-relative max-height from an older rule below, so content past
   that height had no internal scrollbar and no room in the page layout to
   fall back on. Fixed height + its own scrollbar avoids that trap. */
.open-trucks-page .open-truck-market-group.is-truck-search-active .open-truck-market-loads-slot {
  min-height: max-content;
}

.open-trucks-page .open-truck-regional-load-card {
  display: grid;
  width: 100%;
  overflow: hidden;
  border: 1px solid #d8e3f1;
  border-left: 4px solid #2563eb;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  text-align: left;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.open-trucks-page .open-truck-regional-load-card[draggable="true"] {
  cursor: grab;
}

.open-trucks-page .open-truck-regional-load-card[draggable="true"]:active {
  cursor: grabbing;
}

.open-trucks-page .open-truck-regional-load-card.is-dragging {
  opacity: 0.5;
}

.open-trucks-page .open-truck-regional-load-card:hover {
  border-color: #93b4e7;
  background: #f7faff;
}

.open-trucks-page .open-truck-regional-load-details {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 9px 10px 7px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.open-trucks-page .open-truck-regional-load-card b {
  overflow: hidden;
  color: #14213d;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-trucks-page .open-truck-regional-load-details > span,
.open-trucks-page .open-truck-regional-load-details em {
  overflow: hidden;
  color: #64748b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-trucks-page .open-truck-regional-load-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.open-trucks-page .open-truck-regional-load-topline strong {
  color: #173f91;
  font-size: 14px;
}

.open-trucks-page .open-truck-regional-load-meta {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.open-trucks-page .open-truck-regional-load-meta .open-load-brokerage-badge {
  overflow: visible;
  color: #8a4b00;
  font-size: 8px;
  font-weight: 900;
  text-overflow: clip;
}

.open-trucks-page .open-truck-regional-load-topline small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 800;
}

.open-trucks-page .open-truck-regional-load-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px 7px 10px;
  border-top: 1px solid #edf2f8;
}

.open-trucks-page .open-truck-regional-load-actions > span {
  color: #7b8799;
  font-size: 9.5px;
  font-weight: 800;
}

.open-trucks-page .open-truck-regional-load-actions > button {
  min-height: 27px;
  padding: 4px 10px;
  border: 1px solid #b9cff2;
  border-radius: 7px;
  background: #eef5ff;
  color: #1d4ed8;
  font-size: 10.5px;
  font-weight: 900;
  cursor: pointer;
}

.open-trucks-page .open-truck-card.is-load-drop-zone {
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.open-trucks-page .open-truck-card.is-load-drop-target {
  z-index: 2;
  background: #e7f1ff;
  box-shadow: inset 0 0 0 3px #2563eb, 0 8px 18px rgba(37, 99, 235, 0.18);
  transform: translateY(-1px);
}

.open-truck-assignment-panel {
  width: min(620px, calc(100vw - 28px));
}

.open-truck-assignment-lane {
  margin: -4px 0 16px;
  color: #475569;
  font-weight: 800;
}

.open-truck-assignment-select {
  display: grid;
  gap: 7px;
}

.open-truck-assignment-select > span {
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.open-truck-assignment-select select {
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

.open-truck-assignment-help {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 12px;
}

.open-truck-assignment-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.open-truck-assignment-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dce6f2;
  border-radius: 9px;
  background: #f8fafc;
}

.open-truck-assignment-summary span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.open-truck-assignment-summary strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-truck-assignment-summary strong.is-missing {
  color: #9a3412;
}

.open-truck-assignment-notice {
  margin: 10px 0 16px;
  padding: 11px 12px;
  border: 1px solid #bbddc8;
  border-radius: 9px;
  background: #effaf3;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
}

.open-truck-assignment-notice.is-error {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b42318;
}

.open-trucks-page .open-truck-regional-load-empty {
  padding: 20px 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.open-trucks-page .open-truck-regional-load-empty.is-error {
  color: #b42318;
}

@media (max-width: 1500px) {
  .open-trucks-page .open-truck-market-columns {
    grid-template-columns: 1fr;
  }

  .open-trucks-page .open-truck-market-trucks {
    border-right: 0;
    border-bottom: 1px solid #dfe7f2;
  }

  .open-trucks-page .open-truck-market-loads-slot {
    position: static;
  }

  .open-trucks-page .open-truck-regional-loads {
    position: static;
    overflow: visible;
  }

  .open-trucks-page .open-truck-regional-load-list {
    flex: 0 1 auto;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-height: 720px;
  }
}

/* Open Trucks: mapped Samsara HOS is informational and does not affect eligibility. */
.open-trucks-page .open-truck-main {
  grid-template-columns: 96px minmax(150px, 0.78fr) minmax(150px, 0.82fr) minmax(205px, 1.08fr) minmax(195px, 1fr) minmax(150px, 0.78fr);
}

.open-trucks-page .open-truck-card:not(.is-connection) .open-truck-note-card {
  grid-column: span 2;
}

.open-trucks-page .open-truck-drivers-hos {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 7px 10px;
  border-right: 1px solid #e2e8f0;
  background: #fbfdff;
}

.open-trucks-page .open-truck-driver-hos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 7px;
  min-width: 0;
  padding-bottom: 4px;
  border-bottom: 1px dashed #dbe5f1;
  text-align: left;
}

.open-trucks-page .open-truck-driver-hos:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.open-trucks-page .open-truck-driver-hos strong {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #13213b;
  font-size: 11px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-trucks-page .open-truck-driver-hos span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.open-trucks-page .open-truck-driver-hos span b {
  color: #64748b;
  font-size: 9.5px;
  text-transform: uppercase;
}

.open-trucks-page .open-truck-driver-hos em {
  color: #059669;
  font-size: 14px;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.open-trucks-page .open-truck-driver-hos em.is-zero {
  color: #e11d48;
}

.open-trucks-page .open-truck-driver-hos.is-unavailable {
  grid-template-columns: 1fr;
}

.open-trucks-page .open-truck-driver-hos.is-unavailable span {
  color: #94a3b8;
}

.open-trucks-page .open-truck-detail-hos {
  margin-top: 7px;
}

.open-trucks-page.open-truck-density-compact .open-truck-main {
  grid-template-columns: 78px minmax(138px, 0.72fr) minmax(145px, 0.78fr) minmax(205px, 1.12fr) minmax(195px, 1.02fr) minmax(140px, 0.7fr);
}

.open-trucks-page.open-truck-density-compact .open-truck-drivers-hos {
  min-height: 60px;
  padding: 5px 8px;
  gap: 3px;
}

.open-trucks-page.open-truck-density-compact .open-truck-driver-hos {
  gap: 0 5px;
  padding-bottom: 2px;
}

.open-trucks-page.open-truck-density-compact .open-truck-driver-hos strong {
  font-size: 9.5px;
}

.open-trucks-page.open-truck-density-compact .open-truck-driver-hos span {
  font-size: 10px;
}

.open-trucks-page.open-truck-density-compact .open-truck-driver-hos span b {
  font-size: 8.5px;
}

.open-trucks-page.open-truck-density-compact .open-truck-driver-hos em {
  font-size: 12px;
}

/* Open Trucks v195: make connection travel timing visible inside the next-load card. */
.open-trucks-page .open-truck-next-load-travel {
  display: grid;
  width: 100%;
  gap: 3px;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid #efd69f;
}

.open-trucks-page .open-truck-next-load-travel > span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
}

.open-trucks-page .open-truck-next-load-travel small {
  color: #8a5a10;
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
}

.open-trucks-page .open-truck-next-load-travel strong {
  color: #7c2d12;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.open-trucks-page.open-truck-density-compact .open-truck-next-load-travel {
  gap: 2px;
  margin-top: 2px;
  padding-top: 3px;
}

.open-trucks-page.open-truck-density-compact .open-truck-next-load-travel small {
  font-size: 8.5px;
}

.open-trucks-page.open-truck-density-compact .open-truck-next-load-travel strong {
  font-size: 10px;
}

@media (max-width: 1100px) {
  .open-trucks-page .open-truck-main,
  .open-trucks-page.open-truck-density-compact .open-truck-main {
    grid-template-columns: 90px minmax(150px, 1fr) minmax(170px, 1fr);
  }

  .open-trucks-page .open-truck-card:not(.is-connection) .open-truck-note-card {
    grid-column: auto;
  }
}

/* Preloaded trailers Phase 1 */
.preload-main { min-width: 0; }
.preload-topbar { align-items: center; gap: 24px; }
.preload-topbar p { margin: 6px 0 0; color: #5a6b85; }
.preload-message { margin: 0 24px 14px; padding: 14px 18px; border-radius: 14px; font-weight: 700; }
.preload-message.warning { background: #fff7d6; color: #775a00; border: 1px solid #f0d56b; }
.preload-message.error { background: #fff0f0; color: #9d2020; border: 1px solid #f0aaaa; }
.preload-safety-note { margin: 0 24px 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; background: #eef7ff; border: 1px solid #c7ddf6; border-radius: 16px; color: #234a75; }
.preload-source-tabs { display: flex; gap: 10px; margin: 0 24px 16px; overflow-x: auto; }
.preload-source-tabs button { min-width: 190px; padding: 14px 18px; border: 1px solid #d8e1ed; border-radius: 14px; background: #fff; text-align: left; cursor: pointer; }
.preload-source-tabs button.is-active { border-color: #2865e8; box-shadow: inset 0 0 0 1px #2865e8; background: #f2f7ff; }
.preload-source-tabs span { display: block; font-weight: 900; font-size: 18px; color: #13243d; }
.preload-source-tabs small { display: block; margin-top: 4px; text-transform: capitalize; color: #66758b; }
.preload-source-tabs .source-ok { color: #0d8a4b; }
.preload-source-tabs .source-error { color: #bd2d2d; }
.preload-kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; margin: 0 24px 16px; }
.preload-kpis button { padding: 16px; display: flex; align-items: center; gap: 12px; border: 1px solid #d8e1ed; border-radius: 16px; background: #fff; cursor: pointer; color: #263750; }
.preload-kpis button.is-active { border-color: #2865e8; background: #f2f7ff; }
.preload-kpis strong { font-size: 26px; color: #11243f; }
.preload-kpis span { font-weight: 800; }
.preload-panel { margin: 0 24px 28px; background: #fff; border: 1px solid #d8e1ed; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 28px rgba(30,57,91,.06); }
.preload-toolbar { padding: 16px 18px; display: flex; justify-content: space-between; gap: 20px; align-items: end; border-bottom: 1px solid #e5ebf2; }
.preload-toolbar label { display: flex; flex-direction: column; gap: 6px; flex: 1; max-width: 620px; font-weight: 800; color: #42536b; }
.preload-toolbar input { padding: 12px 14px; border: 1px solid #cad6e4; border-radius: 12px; font: inherit; }
.preload-last-check { display: flex; flex-direction: column; text-align: right; color: #607089; }
.preload-last-check strong { color: #2a3c56; }
.preload-table-wrap { overflow: auto; }
.preload-table { width: 100%; min-width: 1300px; border-collapse: collapse; }
.preload-table th { padding: 13px 14px; text-align: left; font-size: 13px; color: #5c6c82; background: #f7f9fc; border-bottom: 1px solid #dde5ef; white-space: nowrap; }
.preload-table td { padding: 14px; vertical-align: middle; border-bottom: 1px solid #e8edf3; color: #1e2f47; }
.preload-table td small { display: block; color: #718097; margin-top: 3px; }
.preload-state { display: inline-block; padding: 7px 10px; border-radius: 999px; font-weight: 900; font-size: 12px; white-space: nowrap; }
.preload-state.loading { background: #fff2a8; color: #6e5500; }
.preload-state.ready { background: #d9f7e7; color: #087240; }
.preload-state.matched { background: #dce9ff; color: #164fa8; }
.preload-state.review { background: #ffe1d1; color: #9a3f0a; }
.preload-state.complete { background: #f0e8ff; color: #6541a5; }
.preload-state.missing { background: #e6e9ee; color: #556174; }

/* Open Trucks 2030 layout v236
   Frontend-only presentation layer over the existing Open Trucks data and handlers. */
.open-trucks-page {
  /* Shared with the other 2030 pages via operations-2030.css'''s --ops-*
     tokens, loaded ahead of this file on open-trucks.html and
     routing-board.html. Fallbacks keep this page working unchanged even if
     that file is ever missing on a page that reuses this class. */
  --ot-ink: var(--ops-ink, #10213f);
  --ot-muted: var(--ops-muted, #61728d);
  --ot-border: var(--ops-line, #dce5f1);
  --ot-border-strong: var(--ops-line-strong, #ccd9e9);
  --ot-surface: var(--ops-surface-solid, #ffffff);
  --ot-mist: var(--ops-page, #f4f7fb);
  --ot-blue: var(--ops-blue, #1463f3);
  --ot-green: var(--ops-green, #0b8b4b);
  --ot-amber: var(--ops-amber, #e67e00);
  --ot-shadow: var(--ops-shadow-sm, 0 8px 24px rgba(27, 50, 82, 0.055));
  color: var(--ot-ink);
}

.open-trucks-page main {
  min-width: 0;
  padding-bottom: 40px;
  background: var(--ot-mist);
}

.open-trucks-page .open-truck-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.open-trucks-page .open-truck-page-heading {
  min-width: 0;
}

.open-trucks-page .open-truck-page-heading .eyebrow {
  margin: 0 0 5px;
  color: var(--ot-green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.open-trucks-page .open-truck-page-heading h1 {
  margin: 0;
  color: var(--ot-ink);
  font-size: clamp(26px, 2.1vw, 34px);
  font-weight: 850;
  letter-spacing: -0.025em;
}

.open-trucks-page .open-truck-page-heading > p:last-child {
  margin: 5px 0 0;
  color: var(--ot-muted);
  font-size: 14px;
}

.open-trucks-page .open-truck-header-date {
  flex: 0 0 auto;
}

.open-trucks-page .open-truck-header-date .open-truck-date-nav {
  display: grid;
  grid-template-columns: 42px minmax(250px, 320px) 42px;
  align-items: center;
  gap: 8px;
}

.open-trucks-page .open-truck-header-date .open-truck-date-range-field {
  min-width: 0;
}

.open-trucks-page .open-truck-header-date .open-truck-date-range-field > span:not(.jitc-calendar-field) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.open-trucks-page .open-truck-header-date .open-truck-date-nav > button {
  width: 42px;
  height: 42px;
  align-self: center;
  border: 1px solid var(--ot-border-strong);
  border-radius: 10px;
  background: var(--ot-surface);
  color: var(--ot-ink);
  box-shadow: 0 2px 7px rgba(15, 36, 68, 0.04);
}

.open-trucks-page .open-truck-header-date .jitc-calendar-trigger {
  min-height: 42px;
  border-color: var(--ot-border-strong);
  border-radius: 10px;
  background: var(--ot-surface);
  color: var(--ot-ink);
  font-weight: 800;
}

.open-trucks-page .open-truck-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 12px;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid var(--ot-border);
  border-radius: 13px;
  background: var(--ot-surface);
  box-shadow: var(--ot-shadow);
}

.open-trucks-page .open-truck-kpi-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  gap: 11px;
  padding: 5px 20px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.open-trucks-page .open-truck-kpi-card + .open-truck-kpi-card {
  border-left: 1px solid #e4eaf2;
}

.open-trucks-page .open-truck-kpi-card::before,
.open-trucks-page .open-truck-kpi-icon::before,
.open-trucks-page .open-truck-kpi-icon::after {
  content: none;
}

.open-trucks-page .open-truck-kpi-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  background: #eaf2ff;
  color: var(--ot-blue);
}

.open-trucks-page .open-truck-kpi-card.is-purple .open-truck-kpi-icon {
  background: #f2ebff;
  color: #7c3aed;
}

.open-trucks-page .open-truck-kpi-card.is-pink .open-truck-kpi-icon {
  background: #fff0f4;
  color: #db2777;
}

.open-trucks-page .open-truck-kpi-card.is-cyan .open-truck-kpi-icon {
  background: #e8f8ff;
  color: #0284c7;
}

.open-trucks-page .open-truck-kpi-card.is-amber .open-truck-kpi-icon {
  background: #fff5dc;
  color: #d97706;
}

.open-trucks-page .open-truck-kpi-icon .jitc-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.open-trucks-page .open-truck-kpi-card > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.open-trucks-page .open-truck-kpi-card strong {
  color: var(--ot-ink);
  font-size: 20px;
  font-weight: 850;
}

.open-trucks-page .open-truck-kpi-card span {
  margin: 0;
  color: #33445f;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.open-trucks-page .open-truck-kpi-card small {
  grid-column: 1 / -1;
  margin: 0;
  color: #7a879a;
  font-size: 9.5px;
  font-weight: 650;
  white-space: nowrap;
}

.open-trucks-page .open-truck-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--ot-border);
  border-radius: 13px;
  background: var(--ot-surface);
  box-shadow: var(--ot-shadow);
}

.open-trucks-page .open-truck-filter-left {
  display: grid;
  flex: 1 1 520px;
  grid-template-columns: minmax(210px, 1fr) minmax(140px, 180px) minmax(140px, 180px);
  gap: 9px;
  align-items: center;
}

.open-trucks-page .open-truck-filters label {
  display: block;
  min-width: 0;
}

.open-trucks-page .open-truck-filters label > span:not(.jitc-calendar-field) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.open-trucks-page .open-truck-filter-left > label {
  min-width: 0;
}

.open-trucks-page .open-truck-filter-left > label > input,
.open-trucks-page .open-truck-filter-left > label > select,
.open-trucks-page .open-truck-search-field input,
.open-trucks-page .open-truck-state-filter summary {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--ot-border-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ot-ink);
  font-size: 12px;
  font-weight: 750;
}

.open-trucks-page .open-truck-search-field {
  position: relative;
  min-width: 0;
}

.open-trucks-page .open-truck-search-field input {
  padding-left: 36px;
}

/* Earlier equal-specificity `padding` shorthand rules elsewhere in this file
   keep clobbering the line above, leaving typed text under the search icon.
   ID selector guarantees this wins regardless of load order. */
#openTruckSearch {
  padding-left: 36px;
}

.open-trucks-page .open-truck-search-field::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 13px;
  width: 14px;
  height: 14px;
  border: 2px solid #7f91aa;
  border-radius: 50%;
  pointer-events: none;
}

.open-trucks-page .open-truck-search-field::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 26px;
  left: 26px;
  width: 7px;
  height: 2px;
  background: #7f91aa;
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
}

.open-trucks-page .open-truck-toolbar-controls {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.open-trucks-page .open-truck-show-control,
.open-trucks-page .open-truck-density-control {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, auto);
  gap: 0;
  padding: 3px;
  border: 1px solid var(--ot-border);
  border-radius: 9px;
  background: #f7f9fc;
}

.open-trucks-page .open-truck-density-control {
  grid-auto-columns: minmax(92px, auto);
}

.open-trucks-page .open-truck-show-control > span,
.open-trucks-page .open-truck-density-control > span {
  display: none;
}

.open-trucks-page .open-truck-show-control button,
.open-trucks-page .open-truck-density-control button {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 7px;
  font-size: 11px;
  white-space: nowrap;
}

.open-trucks-page .open-truck-show-control button.active,
.open-trucks-page .open-truck-density-control button.active {
  background: var(--ot-blue);
  color: #fff;
  box-shadow: 0 5px 12px rgba(20, 99, 243, 0.18);
}

.open-trucks-page .positioning-needs-panel {
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--ot-border);
  border-radius: 13px;
  background: var(--ot-surface);
  box-shadow: var(--ot-shadow);
}

.open-trucks-page .positioning-needs-head {
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid #e5ebf3;
}

.open-trucks-page .positioning-needs-head > div {
  display: grid;
  gap: 2px;
}

.open-trucks-page .positioning-needs-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ot-ink);
  font-size: 14px;
  font-weight: 850;
}

.open-trucks-page .positioning-needs-title-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #eef4ff;
  color: var(--ot-blue);
  font-size: 17px;
}

.open-trucks-page .positioning-needs-head [data-positioning-summary] {
  color: var(--ot-muted);
  font-size: 10.5px;
  font-weight: 650;
}

.open-trucks-page .positioning-needs-head .primary-action {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--ot-blue);
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 6px 13px rgba(20, 99, 243, 0.18);
}

.open-trucks-page .positioning-needs-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 9px 12px 10px;
}

.open-trucks-page .positioning-need-card {
  border-radius: 9px;
  border-left: 3px solid var(--ot-amber);
  box-shadow: none;
}

.open-trucks-page .open-truck-board-shell {
  overflow: visible;
  border: 1px solid var(--ot-border);
  border-radius: 13px;
  background: var(--ot-surface);
  box-shadow: var(--ot-shadow);
}

.open-trucks-page .open-truck-board-head {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ot-border);
}

.open-trucks-page .open-truck-board-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.open-trucks-page .open-truck-board-head h2 {
  margin: 0;
  color: var(--ot-ink);
  font-size: 15px;
  font-weight: 850;
}

.open-trucks-page #openTruckSummary {
  margin: 0;
  padding: 0;
  color: var(--ot-muted);
  font-size: 10.5px;
  font-weight: 650;
}

.open-trucks-page .open-truck-board-help {
  color: #7b889b;
  font-size: 10.5px;
  font-weight: 700;
}

.open-trucks-page .open-truck-list {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.open-trucks-page .open-truck-market-group,
.open-trucks-page.open-truck-density-compact .open-truck-market-group {
  margin: 0;
  overflow: visible;
  border: 1px solid var(--ot-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.open-trucks-page .open-truck-market-header,
.open-trucks-page.open-truck-density-compact .open-truck-market-header {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 11px;
  border-bottom: 1px solid #d7e6db;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #f2f8f3 0%, #edf6ef 100%);
  color: #183527;
}

.open-trucks-page .open-truck-market-header span:first-child {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.open-trucks-page .open-truck-market-header span:last-child {
  color: #5a6e63;
  font-size: 10px;
  font-weight: 750;
}

.open-trucks-page .open-truck-market-columns {
  display: grid;
  grid-template-columns: minmax(0, 74fr) minmax(300px, 26fr);
  align-items: start;
  min-width: 0;
}

.open-trucks-page .open-truck-market-trucks {
  min-width: 0;
  overflow-x: auto;
  border-right: 1px solid var(--ot-border);
}

.open-trucks-page .open-truck-column-head,
.open-trucks-page .open-truck-main,
.open-trucks-page.open-truck-density-compact .open-truck-main {
  grid-template-columns: minmax(72px, 0.58fr) minmax(150px, 1.2fr) minmax(145px, 1.15fr) minmax(165px, 1.35fr) minmax(170px, 1.4fr) minmax(94px, 0.76fr);
}

.open-trucks-page .open-truck-column-head {
  display: grid;
  min-width: 900px;
  align-items: center;
  padding: 7px 12px 7px 16px;
  border-bottom: 1px solid var(--ot-border);
  background: #f8fafc;
}

.open-trucks-page .open-truck-column-head span {
  min-width: 0;
  padding: 0 9px;
  color: #718096;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-align: left;
  text-transform: uppercase;
}

.open-trucks-page .open-truck-card,
.open-trucks-page.open-truck-density-compact .open-truck-card {
  min-width: 900px;
}

.open-trucks-page .open-truck-card::before {
  top: 8px;
  bottom: 8px;
  width: 4px;
}

.open-trucks-page .open-truck-card.is-connection::before {
  background: #10a45e;
}

.open-trucks-page .open-truck-card.is-on-hold::before {
  background: #e11d48;
}

.open-trucks-page .open-truck-main,
.open-trucks-page.open-truck-density-compact .open-truck-main {
  display: grid;
  min-height: 68px;
  padding: 0 10px 0 14px;
}

.open-trucks-page .open-truck-main section,
.open-trucks-page .open-truck-main button,
.open-trucks-page.open-truck-density-compact .open-truck-main section,
.open-trucks-page.open-truck-density-compact .open-truck-main button {
  min-height: 68px;
  padding: 7px 9px;
}

.open-trucks-page .open-truck-number,
.open-trucks-page .open-truck-location,
.open-trucks-page .open-truck-last-load,
.open-trucks-page .open-truck-next-load,
.open-trucks-page .open-truck-note-card,
.open-trucks-page.open-truck-density-compact .open-truck-number,
.open-trucks-page.open-truck-density-compact .open-truck-location,
.open-trucks-page.open-truck-density-compact .open-truck-last-load,
.open-trucks-page.open-truck-density-compact .open-truck-next-load,
.open-trucks-page.open-truck-density-compact .open-truck-note-card {
  align-content: center;
  justify-items: start;
  text-align: left;
}

.open-trucks-page .open-truck-drivers-hos {
  min-height: 68px;
  padding: 7px 9px;
  background: #fff;
}

.open-trucks-page .open-truck-number {
  justify-items: center;
  text-align: center;
}

.open-trucks-page .open-truck-mini-icon {
  display: none;
}

.open-trucks-page .open-truck-number strong,
.open-trucks-page.open-truck-density-compact .open-truck-number strong {
  font-size: 17px;
  font-weight: 850;
}

.open-trucks-page .open-truck-main .open-truck-hold-button,
.open-trucks-page.open-truck-density-compact .open-truck-main .open-truck-hold-button {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #b9c7da;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 9.5px;
  font-weight: 800;
  box-shadow: none;
}

.open-trucks-page .open-truck-main .open-truck-hold-button.is-active {
  border-color: #be123c;
  background: #fff1f4;
  color: #be123c;
}

.open-trucks-page .open-truck-next-load {
  border-left: 1px solid #d9eadf !important;
  background: #eff9f2 !important;
}

.open-trucks-page .open-truck-next-load-needed {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  margin: 7px 8px;
  min-height: 52px !important;
  padding: 7px 10px !important;
  border: 1px dashed #f1a33c !important;
  border-radius: 8px !important;
  background: #fffaf1 !important;
  text-align: center;
}

.open-trucks-page .open-truck-next-load-needed b {
  color: #b65f00;
  font-size: 11px;
}

.open-trucks-page .open-truck-next-load-needed span {
  color: #8b6a3e;
  font-size: 8.5px;
}

.open-trucks-page .open-truck-note-card,
.open-trucks-page.open-truck-density-compact .open-truck-note-card,
.open-trucks-page .open-truck-card:not(.is-connection) .open-truck-note-card {
  grid-column: auto;
  justify-items: center;
  border-left: 1px solid #edf2f7 !important;
  text-align: center;
}

.open-trucks-page .open-truck-regional-loads {
  position: static;
  height: auto;
  min-height: 480px;
  max-height: 720px;
  overflow: hidden auto;
  border-radius: 0 0 9px 0;
  background: #fbfcfe;
}

.open-trucks-page .open-truck-regional-loads-head {
  min-height: 64px;
  padding: 9px 11px;
  background: #fff;
}

.open-trucks-page .open-truck-regional-loads-head strong {
  color: var(--ot-ink);
  font-size: 13px;
}

.open-trucks-page .open-truck-regional-loads-head > span {
  min-width: 25px;
  height: 25px;
  background: var(--ot-blue);
}

.open-trucks-page .open-truck-regional-cutoff {
  margin-top: 4px;
}

.open-trucks-page .open-truck-regional-load-list {
  max-height: calc(100vh - 104px);
  padding: 9px;
  gap: 8px;
}

.open-trucks-page .open-truck-regional-load-card {
  border-radius: 9px;
  border-left-color: var(--ot-blue);
  box-shadow: 0 3px 9px rgba(19, 43, 76, 0.04);
}

.open-trucks-page .open-truck-regional-load-details {
  gap: 4px;
  padding: 9px 10px 7px;
}

.open-trucks-page .open-truck-regional-load-topline strong {
  color: #154fc2;
}

.open-trucks-page .open-truck-regional-load-actions > button {
  border-color: #b9cdf6;
  background: #fff;
  color: #1557dc;
}

.open-trucks-page button:focus-visible,
.open-trucks-page input:focus-visible,
.open-trucks-page select:focus-visible,
.open-trucks-page summary:focus-visible {
  outline: 3px solid rgba(20, 99, 243, 0.24);
  outline-offset: 2px;
}

@media (max-width: 1500px) and (min-width: 1361px) {
  .open-trucks-page .open-truck-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .open-trucks-page .open-truck-filter-left {
    flex: 0 0 auto;
  }

  .open-trucks-page .open-truck-toolbar-controls {
    width: 100%;
  }
}

@media (max-width: 1360px) {
  .open-trucks-page .open-truck-page-head {
    align-items: flex-start;
  }

  .open-trucks-page .open-truck-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .open-trucks-page .open-truck-filter-left {
    flex: 0 0 auto;
  }

  .open-trucks-page .open-truck-toolbar-controls {
    width: 100%;
    flex-wrap: wrap;
  }

  .open-trucks-page .open-truck-market-columns {
    grid-template-columns: 1fr;
  }

  .open-trucks-page .open-truck-market-trucks {
    border-right: 0;
    border-bottom: 1px solid var(--ot-border);
  }

  .open-trucks-page .open-truck-regional-loads {
    position: static;
    max-height: none;
    overflow: visible;
    border-radius: 0 0 9px 9px;
  }

  .open-trucks-page .open-truck-regional-load-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-height: none;
  }
}

@media (max-width: 980px) {
  .open-trucks-page .open-truck-page-head {
    flex-direction: column;
  }

  .open-trucks-page .open-truck-header-date {
    width: 100%;
  }

  .open-trucks-page .open-truck-header-date .open-truck-date-nav {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }

  .open-trucks-page .open-truck-kpis {
    grid-template-columns: repeat(5, minmax(145px, 1fr));
    overflow-x: auto;
  }

  .open-trucks-page .open-truck-filter-left {
    grid-template-columns: 1fr;
  }

  .open-trucks-page .open-truck-show-control,
  .open-trucks-page .open-truck-density-control {
    flex: 1 1 auto;
    grid-auto-columns: 1fr;
  }

  .open-trucks-page .positioning-needs-list {
    grid-template-columns: 1fr;
  }

  .open-trucks-page .open-truck-board-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  .open-trucks-page .open-truck-kpis {
    margin-right: -4px;
    margin-left: -4px;
    padding-right: 4px;
    padding-left: 4px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .open-trucks-page .open-truck-toolbar-controls {
    display: grid;
  }

  .open-trucks-page .open-truck-show-control,
  .open-trucks-page .open-truck-density-control {
    width: 100%;
  }

  .open-trucks-page .positioning-needs-head {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .open-trucks-page .positioning-needs-head .primary-action {
    width: 100%;
  }

  .open-trucks-page .open-truck-board-help {
    display: none;
  }
}
.preload-progress { width: 90px; height: 9px; overflow: hidden; border-radius: 999px; background: #e9eef4; margin-bottom: 4px; }
.preload-progress span { display: block; height: 100%; background: #60b348; border-radius: inherit; }
.preload-empty { padding: 35px !important; text-align: center !important; color: #69788e !important; }
.muted { color: #758399; }
@media (max-width: 1050px) {
  .preload-kpis { grid-template-columns: repeat(2,minmax(150px,1fr)); }
  .preload-toolbar { align-items: stretch; flex-direction: column; }
  .preload-last-check { text-align: left; }
}

/* Preloaded trailers Phase 2 — informational cards only */
.schedule-modern-page .load-card.preload-temporary-card,
.schedule-modern-page .panel-card.preload-temporary-card {
  border: 1px solid #dca900;
  border-left: 5px solid #d18b00;
  background: linear-gradient(135deg, #fff7bf, #ffe576);
  color: #3f3100;
  cursor: default;
  box-shadow: 0 5px 14px rgba(151, 105, 0, .15);
}

.schedule-modern-page .load-card.preload-temporary-card b,
.schedule-modern-page .panel-card.preload-temporary-card b {
  color: #795400;
  font-size: 10px;
  letter-spacing: .02em;
}

.schedule-modern-page .load-card.preload-temporary-card span,
.schedule-modern-page .panel-card.preload-temporary-card span {
  color: #2d2507;
  font-weight: 900;
}

.schedule-modern-page .load-card.preload-temporary-card small,
.schedule-modern-page .panel-card.preload-temporary-card small,
.schedule-modern-page .panel-card.preload-temporary-card em {
  color: #6b5410;
}
.dedicated-route-strip {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #d6c45a;
  border-radius: 12px;
  background: #fffceb;
}

.dedicated-route-strip-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #544700;
}

.dedicated-route-strip-heading span {
  font-size: 12px;
}

.dedicated-route-strip-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.dedicated-route-pending-card,
.dedicated-route-card {
  border: 2px dashed #b79b00 !important;
  background: #fff9c9 !important;
  color: #413800 !important;
  text-align: left;
}

.dedicated-route-pending-card {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
}

.dedicated-route-pending-card span,
.dedicated-route-pending-card small,
.dedicated-route-card span,
.dedicated-route-card small {
  display: block;
}

.dedicated-route-pending-card.matched,
.dedicated-route-card.matched {
  border-color: #16885b !important;
  background: #e8fff3 !important;
  color: #064d32 !important;
}

.dedicated-route-pending-card.conflict,
.dedicated-route-card.conflict {
  border-color: #c73535 !important;
  background: #fff0f0 !important;
  color: #721c24 !important;
}

.dedicated-route-actions {
  flex-wrap: wrap;
}

/* Dedicated route workspace */
.dedicated-route-summary {
  min-height: 42px;
  margin: 0 0 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #d8e1ed;
  border-left: 5px solid #c59c00;
  border-radius: 10px;
  background: #fffdf3;
  color: #47566d;
  font-size: 12px;
}

.dedicated-route-summary div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.dedicated-route-summary strong { color: #1b2f4a; font-size: 14px; }
.dedicated-route-summary .to-dispatch { color: #6545ad; font-weight: 900; }
.dedicated-route-summary a { color: #1458c4; font-weight: 900; white-space: nowrap; }

.dedicated-routes-main { min-width: 0; }
.dedicated-routes-header { align-items: center; }
.dedicated-routes-header p { margin: 5px 0 0; color: #64748b; }

.dedicated-route-explainer {
  margin: 0 24px 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #d5c9f0;
  border-left: 5px solid #7a57c8;
  border-radius: 14px;
  background: #f6f1ff;
  color: #4f3b78;
}

.dedicated-route-explainer strong { color: #402b70; white-space: nowrap; }
.dedicated-route-lane-tabs {
  margin: 0 24px 12px;
  padding: 5px;
  display: flex;
  width: fit-content;
  gap: 5px;
  border: 1px solid #dbe3ed;
  border-radius: 12px;
  background: #fff;
}
.dedicated-route-lane-tabs button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: #52627a; font-weight: 900; }
.dedicated-route-lane-tabs button.active { background: #1458c4; color: #fff; box-shadow: 0 4px 10px rgba(20, 88, 196, .2); }
.brokered-dedicated-badge { display: block; width: fit-content; margin-top: 5px; padding: 3px 6px; border-radius: 999px; background: #d9f7f4; color: #08706e; font-size: 10px; font-weight: 900; white-space: nowrap; }
.dedicated-route-controls {
  margin: 0 24px 16px;
  padding: 14px 16px;
  display: flex;
  align-items: end;
  gap: 14px;
  border: 1px solid #dbe3ed;
  border-radius: 14px;
  background: #fff;
}

.dedicated-route-controls label {
  display: grid;
  gap: 6px;
  color: #52627a;
  font-size: 12px;
  font-weight: 900;
}

.dedicated-route-controls input,
.dedicated-route-controls select,
.dedicated-route-table select {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cbd6e3;
  border-radius: 9px;
  background: #fff;
  color: #1d2d44;
  font: inherit;
}

.dedicated-route-controls select { min-width: 220px; }
.dedicated-route-kpis {
  margin: 0 24px 16px;
  display: grid;
  grid-template-columns: repeat(6, minmax(135px, 1fr));
  gap: 10px;
}

.dedicated-route-kpis article {
  min-height: 76px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #dbe3ed;
  border-radius: 13px;
  background: #fff;
  color: #52627a;
  font-weight: 800;
}

.dedicated-route-kpis strong { color: #172b47; font-size: 28px; }
.dedicated-route-kpis .waiting { border-left: 5px solid #c3a200; }
.dedicated-route-kpis .needs-truck { border-left: 5px solid #e28116; }
.dedicated-route-kpis .carrier-confirmed { border-left: 5px solid #0f8b8d; }
.dedicated-route-kpis .to-dispatch { border-left: 5px solid #7a57c8; }
.dedicated-route-kpis .dispatched { border-left: 5px solid #178a56; }
.dedicated-route-kpis .closed { border-left: 5px solid #8995a5; }

.dedicated-route-workspace {
  margin: 0 24px 28px;
  overflow: hidden;
  border: 1px solid #dbe3ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(27, 52, 88, .07);
}

.dedicated-route-panel-head {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #e4eaf1;
}

.dedicated-route-panel-head h2,
.dedicated-route-panel-head p { margin: 0; }
.dedicated-route-panel-head p,
.dedicated-route-panel-head > span { margin-top: 4px; color: #728097; font-size: 12px; }
.dedicated-route-message { margin: 12px 18px 0; padding: 10px 12px; border-radius: 9px; background: #e8f8ef; color: #096b3d; font-weight: 800; }
.dedicated-route-message.error { background: #fff0f0; color: #a22626; }
.dedicated-route-table-wrap { overflow: auto; }
.dedicated-route-table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.dedicated-route-table th { padding: 12px 14px; text-align: left; background: #f7f9fc; color: #5e6d82; font-size: 12px; white-space: nowrap; }
.dedicated-route-table td { padding: 13px 14px; vertical-align: middle; border-top: 1px solid #e8edf3; color: #1d2d44; }
.dedicated-route-table td strong,
.dedicated-route-table td span,
.dedicated-route-table td small { display: block; }
.dedicated-route-table td span,
.dedicated-route-table td small { margin-top: 3px; color: #718097; font-size: 12px; }
.dedicated-route-table select { width: 160px; }
.dedicated-route-status { display: inline-block !important; width: fit-content; padding: 7px 10px; border-radius: 999px; font-size: 11px !important; font-weight: 900; text-transform: uppercase; }
.dedicated-route-status.waiting { background: #fff5bd; color: #715900; }
.dedicated-route-status.needs-truck { background: #ffe7cc; color: #914a00; }
.dedicated-route-status.to-dispatch { background: #eadfff; color: #5e3da7; }
.dedicated-route-status.dispatched { background: #d9f7e7; color: #087240; }
.dedicated-route-status.carrier-confirmed { background: #d9f7f4; color: #08706e; }
.dedicated-route-status.closed { background: #e9edf2; color: #5d6979; }
.dedicated-route-status.error { background: #ffe0e0; color: #a12323; }
.dedicated-route-warning { color: #b12626 !important; font-weight: 800; }
.dedicated-route-row-actions { white-space: nowrap; }
.dedicated-route-row-actions button { margin: 2px 4px 2px 0; }
.dedicated-route-empty { padding: 34px !important; text-align: center; color: #738197 !important; }

@media (max-width: 1050px) {
  .dedicated-route-kpis { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
  .dedicated-route-controls { align-items: stretch; flex-direction: column; }
  .dedicated-route-controls input,
  .dedicated-route-controls select { width: 100%; }
  .dedicated-route-explainer { align-items: flex-start; flex-direction: column; gap: 5px; }
}

.dedicated-rotation-weeks { padding: 0 18px 18px; }
.dedicated-carrier-group { margin-top: 16px; overflow: hidden; border: 1px solid #cfe0e2; border-radius: 14px; background: #fff; }
.dedicated-carrier-group > header { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #eef9f8; border-bottom: 1px solid #d5e9e7; }
.dedicated-carrier-group > header h3 { margin: 3px 0 0; color: #153e4a; }
.dedicated-carrier-group > header span { color: #0f7779; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.dedicated-carrier-group > header > strong { color: #0b686a; }
.dedicated-carrier-list { display: grid; }
.dedicated-carrier-leg { padding: 12px 14px; display: grid; grid-template-columns: 130px 1fr 150px minmax(210px, 1fr) 175px auto; align-items: center; gap: 12px; border-top: 1px solid #e4eeee; }
.dedicated-carrier-leg:first-child { border-top: 0; }
.dedicated-carrier-leg > div { min-width: 0; }
.dedicated-carrier-leg strong,
.dedicated-carrier-leg span { display: block; }
.dedicated-carrier-leg > div > span:not(.dedicated-route-status) { margin-top: 3px; color: #718097; font-size: 11px; }
.dedicated-rotation-week { padding-top: 16px; }
.dedicated-rotation-week + .dedicated-rotation-week { margin-top: 18px; border-top: 2px solid #e5ebf2; }
.dedicated-rotation-week h3 { margin: 0 0 10px; color: #253a56; }
.dedicated-rotation-grid { display: grid; grid-template-columns: repeat(2, minmax(420px, 1fr)); gap: 14px; }
.dedicated-rotation-card { overflow: hidden; border: 1px solid #d8e1ec; border-radius: 14px; background: #fbfcfe; }
.dedicated-rotation-card.is-filtered,
.dedicated-rotation-leg.is-filtered { display: none; }
.dedicated-rotation-card > header { padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #dfe6ef; background: #f3f7fc; }
.dedicated-rotation-card > header > div:first-child { display: grid; gap: 3px; }
.dedicated-rotation-name { color: #1e5eaf; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.dedicated-rotation-card header small { color: #6c7b90; }
.dedicated-rotation-assignment { display: flex; align-items: end; gap: 8px; }
.dedicated-rotation-assignment label,
.dedicated-rotation-leg-truck label { display: grid; gap: 4px; color: #596981; font-size: 11px; font-weight: 900; }
.dedicated-rotation-assignment select,
.dedicated-rotation-leg-truck select { min-height: 36px; padding: 7px 9px; border: 1px solid #cbd6e3; border-radius: 8px; background: #fff; color: #1d2d44; }
.dedicated-rotation-leg-list { display: grid; }
.dedicated-rotation-leg { padding: 11px 12px; display: grid; grid-template-columns: 82px minmax(135px, .8fr) minmax(360px, 2fr) minmax(125px, .7fr) auto; align-items: center; gap: 10px; border-top: 1px solid #e5eaf1; background: #fff; }
.dedicated-rotation-leg:first-child { border-top: 0; }
.dedicated-rotation-leg-time,
.dedicated-rotation-leg-route,
.dedicated-rotation-leg-truck,
.dedicated-rotation-leg-status { min-width: 0; }
.dedicated-rotation-leg-time strong,
.dedicated-rotation-leg-time span,
.dedicated-rotation-leg-route strong,
.dedicated-rotation-leg-route span,
.dedicated-rotation-leg-truck strong,
.dedicated-rotation-leg-truck span,
.dedicated-rotation-leg-status small { display: block; }
.dedicated-rotation-leg-time span,
.dedicated-rotation-leg-route span,
.dedicated-rotation-leg-truck span,
.dedicated-rotation-leg-status small { margin-top: 3px; color: #718097; font-size: 11px; }
.dedicated-rotation-leg-truck { display: flex; align-items: end; flex-wrap: wrap; gap: 5px; }
.dedicated-leg-resource-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 6px; }
.dedicated-rotation-leg-truck .dedicated-leg-resource-grid select { width: 100%; }
.dedicated-rotation-leg-truck button { min-height: 34px; padding: 6px 8px; font-size: 11px; }

@media (max-width: 1500px) {
  .dedicated-rotation-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .dedicated-rotation-card > header { align-items: stretch; flex-direction: column; }
  .dedicated-rotation-assignment { align-items: stretch; flex-direction: column; }
  .dedicated-rotation-leg { grid-template-columns: 90px 1fr; }
  .dedicated-rotation-leg-truck,
  .dedicated-rotation-leg-status,
  .dedicated-rotation-leg .dedicated-route-row-actions { grid-column: 2; }
  .dedicated-leg-resource-grid { grid-template-columns: 1fr; }
  .dedicated-carrier-leg { grid-template-columns: 1fr 1fr; }
  .dedicated-route-lane-tabs { width: auto; overflow-x: auto; }
}

/* Final Schedule alignment: keep every cell card readable and centered. */
body.schedule-modern-page .cell > .load-card,
body.schedule-modern-page .cell > .last-location,
body.schedule-modern-page .cell > .moved-location-marker,
body.schedule-modern-page .cell > .truck-status-card,
body.schedule-modern-page .cell > .home-reset-card,
body.schedule-modern-page .cell > .schedule-note-card {
  text-align: center;
  justify-items: center;
}

body.schedule-modern-page .cell > .load-card > b,
body.schedule-modern-page .cell > .load-card > span,
body.schedule-modern-page .cell > .load-card > small,
body.schedule-modern-page .cell > .last-location > b,
body.schedule-modern-page .cell > .last-location > span,
body.schedule-modern-page .cell > .last-location > small,
body.schedule-modern-page .cell > .moved-location-marker > b,
body.schedule-modern-page .cell > .moved-location-marker > span,
body.schedule-modern-page .cell > .moved-location-marker > small,
body.schedule-modern-page .cell > .truck-status-card > b,
body.schedule-modern-page .cell > .truck-status-card > span,
body.schedule-modern-page .cell > .truck-status-card > small,
body.schedule-modern-page .cell > .home-reset-card > b,
body.schedule-modern-page .cell > .home-reset-card > span,
body.schedule-modern-page .cell > .home-reset-card > small {
  width: 100%;
  text-align: center;
}

body.schedule-modern-page .cell > .resource {
  text-align: center;
  justify-content: center;
  justify-items: center;
}

body.schedule-modern-page .cell > .resource .resource-driver-name {
  text-align: center;
}

/* Shared JITC calendar standard */
.jitc-calendar-native,
input[data-calendar-range-end] { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }
.jitc-calendar-field { display: block; min-width: 150px; }
.jitc-calendar-range-field { display: grid; grid-template-columns: 42px minmax(150px, 1fr) 42px; gap: 8px; align-items: center; }
.jitc-calendar-shift { width: 42px; height: 42px; padding: 0; border: 1px solid #cbd8e7; border-radius: 11px; background: #fff; color: #174f9e; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(18,44,78,.04); }
.jitc-calendar-shift svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.jitc-calendar-shift:hover,.jitc-calendar-shift:focus-visible { border-color: #2870e8; box-shadow: 0 0 0 3px rgba(40,112,232,.13); outline: none; }
.jitc-calendar-trigger { width: 100%; min-height: 42px; padding: 10px 42px 10px 13px; border: 1px solid #cbd8e7; border-radius: 11px; background: #fff; color: #6b7a90; font: inherit; font-weight: 700; text-align: left; cursor: pointer; position: relative; box-shadow: 0 1px 2px rgba(18,44,78,.04); }
.jitc-calendar-trigger::after { content: "▦"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #57749a; font-size: 17px; }
.jitc-calendar-trigger:hover,.jitc-calendar-trigger:focus-visible { border-color: #2870e8; box-shadow: 0 0 0 3px rgba(40,112,232,.13); outline: none; }
.jitc-calendar-trigger.has-value { color: #12243d; }
.jitc-calendar-trigger:disabled { cursor: not-allowed; opacity: .72; background: #f3f6fa; box-shadow: none; }
.jitc-calendar-popover { position: fixed; z-index: 10050; max-width: calc(100vw - 24px); border: 1px solid #d5e0ec; border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(20,45,78,.22); backdrop-filter: blur(18px); overflow: hidden; }
.jitc-calendar-popover[hidden] { display: none !important; }
.jitc-calendar-head { min-height: 48px; padding: 10px 14px 9px 20px; border-bottom: 1px solid #e6edf5; display: flex; align-items: center; justify-content: space-between; color: #132640; }
.jitc-calendar-head strong { font-size: 14px; letter-spacing: .01em; }
.jitc-calendar-head button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: #5b6d85; font-size: 24px; cursor: pointer; }
.jitc-calendar-head button:hover { background: #edf3fb; }
.jitc-calendar-body { display: grid; grid-template-columns: minmax(0,1fr) 168px; }
.jitc-calendar-main { position: relative; padding: 18px 42px 22px; min-width: 0; }
.jitc-calendar-months { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
.jitc-calendar-month h3 { margin: 0 0 13px; color: #132640; text-align: center; font-size: 14px; }
.jitc-calendar-weekdays,.jitc-calendar-days { display: grid; grid-template-columns: repeat(7,minmax(28px,1fr)); }
.jitc-calendar-weekdays span { padding: 5px 0 8px; color: #7a8799; font-size: 11px; font-weight: 800; text-align: center; }
.jitc-calendar-days button { height: 35px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #283a53; font: inherit; font-size: 12px; cursor: pointer; position: relative; }
.jitc-calendar-days button:hover { background: #eaf2ff; border-radius: 9px; }
.jitc-calendar-days button.outside { color: #a9b3c1; }
.jitc-calendar-days button.today { box-shadow: inset 0 0 0 1px #2b6ee8; border-radius: 9px; }
.jitc-calendar-days button.in-range { background: #dce9ff; color: #164eaa; }
.jitc-calendar-days button.selected { background: #1768dd; color: #fff; font-weight: 900; border-radius: 9px; box-shadow: 0 5px 12px rgba(23,104,221,.22); }
.jitc-calendar-nav { position: absolute; top: 15px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #23415f; display: inline-flex; align-items: center; justify-content: center; font-size: 25px; line-height: 1; text-align: center; cursor: pointer; }
.jitc-calendar-nav:hover { background: #edf3fb; }
.jitc-calendar-nav.previous { left: 8px; }
.jitc-calendar-nav.next { right: 8px; }
.jitc-calendar-presets { padding: 14px 10px; border-left: 1px solid #e6edf5; background: #f8fafd; display: flex; flex-direction: column; gap: 4px; }
.jitc-calendar-presets button { padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: #365475; font: inherit; font-size: 13px; font-weight: 750; text-align: left; cursor: pointer; }
.jitc-calendar-presets button:hover { background: #e7f0ff; color: #1657b8; }
@media (max-width: 720px) {
  .jitc-calendar-body { grid-template-columns: 1fr; }
  .jitc-calendar-main { padding: 15px 35px 18px; }
  .jitc-calendar-months { grid-template-columns: 1fr; }
  .jitc-calendar-months .jitc-calendar-month:nth-child(2) { display: none; }
  .jitc-calendar-presets { border-left: 0; border-top: 1px solid #e6edf5; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .jitc-calendar-presets button { text-align: center; }
}
.positioning-needs-panel {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #d7e1ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 44, 78, 0.06);
}

.positioning-schedule-panel {
  margin: 8px 0;
  padding: 10px 14px;
}

.positioning-schedule-panel .positioning-needs-head {
  margin-bottom: 8px;
}

.positioning-schedule-panel .positioning-needs-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
}

.positioning-needs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.positioning-needs-head h2 {
  margin: 0 0 3px;
  color: #071a3a;
  font-size: 18px;
}

.positioning-needs-head span {
  color: #52647c;
  font-size: 13px;
}

.positioning-needs-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.positioning-need-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
  border: 1px solid #e0a227;
  border-left: 5px solid #e28a00;
  border-radius: 12px;
  background: #fff7df;
  color: #071a3a;
  text-align: left;
  cursor: pointer;
}

.positioning-need-card:hover,
.positioning-need-card:focus-visible {
  border-color: #2563eb;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.14);
  outline: none;
}

.positioning-need-card.priority-high {
  border-left-color: #ef6c00;
}

.positioning-need-card.priority-urgent {
  border-color: #ef4444;
  border-left-color: #c81e1e;
  background: #fff0f0;
}

.positioning-need-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.positioning-need-badges b {
  padding: 3px 7px;
  border-radius: 999px;
  background: #dbeafe;
  color: #174ea6;
  font-size: 10px;
}

.positioning-need-badges .needs-load {
  background: #fee2e2;
  color: #b91c1c;
}

.positioning-need-badges .booked {
  background: #dcfce7;
  color: #16733b;
}

.positioning-need-card strong,
.positioning-need-card small,
.positioning-need-card em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.positioning-need-card small {
  color: #354a66;
}

.positioning-need-card em {
  color: #7a4d00;
  font-size: 12px;
  font-style: normal;
}

.positioning-candidate {
  font-weight: 700;
  color: #0b63ce !important;
}

.positioning-warning {
  color: #b91c1c !important;
  font-weight: 800;
}

.positioning-need-modal {
  width: min(920px, calc(100vw - 32px));
}

.positioning-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.positioning-form-grid label,
.positioning-link-row label {
  display: grid;
  gap: 5px;
  color: #31445e;
  font-size: 12px;
  font-weight: 700;
}

.positioning-form-grid input,
.positioning-form-grid select,
.positioning-form-grid textarea,
.positioning-link-row input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cad7e8;
  border-radius: 8px;
  background: #fff;
  color: #071a3a;
}

.positioning-form-grid textarea {
  min-height: 78px;
  resize: vertical;
}

.positioning-form-grid .wide {
  grid-column: span 2;
}

.positioning-next-load-lookup {
  display: flex;
  align-items: end;
  gap: 10px;
  grid-column: 1 / -1 !important;
}

.positioning-next-load-lookup label {
  flex: 1;
}

.positioning-next-load-lookup button,
.positioning-link-row button,
.positioning-match-preview button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #1d5fd1;
  border-radius: 9px;
  background: #2563eb;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.positioning-form-grid input[readonly] {
  background: #edf4fb;
  color: #27415f;
}

.positioning-form-grid .positioning-repeat-week {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid #cfe0f2;
  border-radius: 10px;
  background: #f6faff;
}

.positioning-form-grid .positioning-repeat-week input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

.positioning-repeat-week span {
  display: grid;
  gap: 2px;
}

.positioning-repeat-week small {
  color: #56708f;
  font-weight: 500;
}

.positioning-derived-summary,
.positioning-match-preview {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #b9d8ff;
  border-radius: 10px;
  background: #eef7ff;
  color: #27415f;
  font-size: 12px;
}

.positioning-derived-summary {
  grid-column: 1 / -1 !important;
}

.positioning-derived-summary b,
.positioning-match-preview b,
.positioning-match-preview strong {
  color: #071a3a;
}

.positioning-departure-deadline {
  color: #9a4d00;
  font-weight: 800;
}

.positioning-match-preview {
  margin-top: 12px;
  border-color: #7ed3a2;
  background: #effbf4;
}

.positioning-match-preview[hidden] {
  display: none;
}

.positioning-match-valid {
  color: #08783c;
  font-weight: 800;
}

.positioning-match-preview button {
  justify-self: start;
  border-color: #118347;
  background: #159653;
}

.positioning-current-status,
.positioning-link-row {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: #f3f7fc;
}

.positioning-current-status {
  align-items: center;
  flex-wrap: wrap;
}

.positioning-current-status b {
  color: #174ea6;
}

.positioning-current-status span {
  color: #52647c;
}

.positioning-link-row label {
  flex: 1;
}

.load-card.positioning-schedule-card {
  border-color: #e28a00;
  background: #ffe1a6;
  color: #201000;
}

.load-card.positioning-schedule-card .needs-load {
  color: #bd1717;
}

.load-card.positioning-schedule-card.move-empty {
  border-color: #7690a8;
  background: #dfe9f2;
  color: #10283c;
}

body.staging-environment {
  padding-top: 42px !important;
}

.staging-environment-banner {
  align-items: center;
  background: #9f1239;
  border-bottom: 3px solid #fda4af;
  color: #fff;
  display: flex;
  font-size: 14px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  left: 0;
  letter-spacing: 0.04em;
  position: fixed;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  z-index: 100000;
}

@media (max-width: 900px) {
  .positioning-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .positioning-needs-head,
  .positioning-link-row,
  .positioning-next-load-lookup {
    align-items: stretch;
    flex-direction: column;
  }

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

  .positioning-form-grid .wide {
    grid-column: auto;
  }
}

.nav-access-badge {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(191, 219, 254, 0.32);
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.12);
  color: #bfdbfe;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.sidebar-collapsed .nav-access-badge {
  display: none;
}

/* Schedule truck-conflict warnings and USPS pickup search (v22). */
.schedule-modern-page .truck-conflict-summary {
  align-items: center;
  background: linear-gradient(135deg, #fff8e8, #fffdf8);
  border: 1px solid #f2bd51;
  border-left: 5px solid #dc7a00;
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(127, 73, 0, 0.1);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 12px 14px;
}

.schedule-modern-page .truck-conflict-summary > div,
.schedule-modern-page .truck-conflict-details-title {
  align-items: center;
  display: flex;
  gap: 11px;
}

.schedule-modern-page .truck-conflict-summary-icon {
  align-items: center;
  background: #dc7a00;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 30px;
  font-size: 17px;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.schedule-modern-page .truck-conflict-summary strong,
.schedule-modern-page .truck-conflict-summary span {
  display: block;
}

.schedule-modern-page .truck-conflict-summary strong {
  color: #7c2d12;
  font-size: 14px;
}

.schedule-modern-page .truck-conflict-summary div > span {
  color: #7b5a2f;
  font-size: 12px;
  margin-top: 2px;
}

.schedule-modern-page .truck-conflict-summary button {
  background: #fff;
  border: 1px solid #dc7a00;
  border-radius: 9px;
  color: #9a4f00;
  font-weight: 800;
  min-height: 36px;
  padding: 7px 13px;
  white-space: nowrap;
}

.schedule-modern-page .truck-conflict-summary button.active {
  background: #9a4f00;
  color: #fff;
}

.schedule-modern-page .truck .truck-conflict-count {
  background: #fff3cd;
  border: 1px solid #d97706;
  border-radius: 999px;
  color: #9a3412;
  font-size: 10px;
  font-weight: 900;
  margin-top: 4px;
  padding: 2px 7px;
}

.schedule-modern-page .load-card.truck-conflict {
  border: 2px solid #dc2626;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.32), 0 5px 14px rgba(127, 29, 29, 0.16);
}

.schedule-modern-page .load-card .schedule-usps-pickup {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(30, 64, 175, 0.24);
  border-radius: 999px;
  color: #1e3a8a;
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.025em;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-modern-page .load-card .schedule-truck-conflict-badge {
  background: #991b1b;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-modern-page .load-card .loadstop-queue-badge {
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-modern-page .load-card .loadstop-queue-badge-failed {
  background: #b45309;
}

.schedule-modern-page .load-card .loadstop-queue-badge-pending {
  background: #475569;
}

.loadstop-queue-summary {
  background: #b45309;
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  margin-left: 10px;
  padding: 3px 10px;
}

.open-trucks-page .loadstop-queue-summary {
  display: inline-block;
  margin-left: 12px;
  vertical-align: middle;
}

.loadstop-queue-report-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.loadstop-queue-report-list li {
  align-items: center;
  border: 1px solid #e6d3b8;
  border-radius: 8px;
  background: #fff8ee;
  display: grid;
  gap: 4px 12px;
  grid-template-columns: 1fr auto;
  padding: 10px 12px;
}

.loadstop-queue-report-list strong {
  grid-column: 1 / -1;
}

.loadstop-queue-report-list span {
  color: #64514f;
  font-size: 12px;
}

.loadstop-queue-report-actions {
  display: flex;
  gap: 6px;
}

body:not(.auth-page) .truck-conflict-details {
  background: #fff8e8;
  border: 1px solid #f2bd51;
  border-left: 5px solid #dc2626;
  border-radius: 12px;
  margin-top: 14px;
  padding: 13px;
}

body:not(.auth-page) .truck-conflict-details-title > span {
  align-items: center;
  background: #dc2626;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 30px;
  height: 30px;
  justify-content: center;
  width: 30px;
}

body:not(.auth-page) .truck-conflict-details-title strong,
body:not(.auth-page) .truck-conflict-details-title small {
  display: block;
}

body:not(.auth-page) .truck-conflict-details-title strong {
  color: #7f1d1d;
}

body:not(.auth-page) .truck-conflict-details-title small {
  color: #78532a;
  margin-top: 2px;
}

body:not(.auth-page) .truck-conflict-details ul {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 11px 0 0;
  padding: 0;
}

body:not(.auth-page) .truck-conflict-details li {
  background: #fff;
  border: 1px solid #f5d895;
  border-radius: 9px;
  display: grid;
  gap: 2px;
  padding: 9px 10px;
}

body:not(.auth-page) .truck-conflict-details li span,
body:not(.auth-page) .truck-conflict-details li small {
  color: #5f4a2e;
}

body:not(.auth-page) .truck-conflict-details.reviewed {
  background: #f0fdf4;
  border-color: #86efac;
  border-left-color: #16a34a;
}

body:not(.auth-page) .truck-conflict-details.reviewed .truck-conflict-details-title > span {
  background: #16a34a;
}

body:not(.auth-page) .truck-conflict-details.reviewed .truck-conflict-details-title strong {
  color: #166534;
}

body:not(.auth-page) .truck-conflict-details li.reviewed {
  background: #f7fff9;
  border-color: #bbf7d0;
}

body:not(.auth-page) .truck-conflict-details .truck-conflict-reviewed-by {
  color: #166534;
  font-weight: 800;
}

body:not(.auth-page) .truck-conflict-review-action {
  justify-self: start;
  margin-top: 7px;
  min-height: 34px;
  padding: 7px 11px;
}

body:not(.auth-page) .schedule-assignment-warning {
  background: #fff8e8;
  border: 1px solid #f2bd51;
  border-left: 5px solid #dc7a00;
  border-radius: 12px;
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 12px;
}

body:not(.auth-page) .schedule-assignment-warning > strong {
  color: #9a3412;
}

body:not(.auth-page) .schedule-assignment-warning > span {
  color: #78532a;
  font-size: 12px;
}

body:not(.auth-page) .schedule-assignment-warning ul {
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
}

body:not(.auth-page) .schedule-assignment-warning li {
  align-items: center;
  background: #fff;
  border: 1px solid #f5d895;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  padding: 7px 9px;
}

body:not(.auth-page) .schedule-assignment-warning li small {
  color: #78532a;
}

@media (max-width: 1280px) {
  .schedule-modern-page .controls.schedule-filter-bar {
    grid-template-columns: minmax(320px, 1.3fr) repeat(4, minmax(120px, 1fr));
  }
}

@media (max-width: 720px) {
  .schedule-modern-page .truck-conflict-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-modern-page .truck-conflict-summary button {
    width: 100%;
  }
}
.planning-action-pending {
  opacity: 0.78;
  pointer-events: none;
  animation: planning-action-pulse 1.15s ease-in-out infinite alternate;
}

.planning-action-confirmed {
  outline: 2px solid rgba(18, 143, 88, 0.42);
  outline-offset: -2px;
}

@keyframes planning-action-pulse {
  from {
    filter: saturate(0.82);
  }

  to {
    filter: saturate(1.08);
  }
}

/* Keep Schedule-wide controls outside the horizontally scrolling date grid. */
.schedule-modern-page .schedule-board-shell {
  display: flex;
  flex-direction: column;
  height: max(360px, calc(100vh - 234px));
  max-height: max(360px, calc(100vh - 234px));
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.schedule-modern-page .schedule-board-shell > .board {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow-x: scroll;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.schedule-modern-page .schedule-board-control-rail {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
}

.schedule-modern-page .schedule-board-control-rail[hidden] {
  display: none;
}

.schedule-modern-page .schedule-board-control-rail > .dedicated-route-summary,
.schedule-modern-page .schedule-board-control-rail > .truck-conflict-summary {
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1181px) {
  .schedule-modern-page .dashboard-layout {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .schedule-modern-page .schedule-board-shell {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    max-height: none;
    min-height: 0;
  }

  .schedule-modern-page .dashboard-layout > .status-footer {
    grid-column: 1 / -1;
    grid-row: 2;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    position: static;
  }
}

/* Compact TMS modal system v49 - final cascade precedence.
   This block intentionally follows all legacy portal modal rules. */
body:not(.auth-page) .modal-overlay:has(.modal-panel.tms-modal-panel),
body:not(.auth-page) .edit-overlay.tms-edit-overlay {
  box-sizing: border-box;
  padding: clamp(10px, 1.6vw, 24px);
}

body:not(.auth-page) .modal-panel.tms-modal-panel,
body:not(.auth-page) .edit-dialog.tms-modal-panel {
  border-radius: 17px;
  box-sizing: border-box;
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 0 !important;
  width: min(760px, calc(100vw - 28px));
}

body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-compact,
body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-form,
body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-resource,
body:not(.auth-page) .edit-dialog.tms-modal-panel.tms-modal-resource {
  width: min(680px, calc(100vw - 28px));
}

body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-action-chooser,
body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-assignment,
body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-connection,
body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-load-details,
body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-open-truck-note {
  width: min(780px, calc(100vw - 28px));
}

body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-positioning {
  width: min(980px, calc(100vw - 28px));
}

body:not(.auth-page) .modal-panel.tms-modal-panel .tms-modal-header,
body:not(.auth-page) .edit-dialog.tms-modal-panel .tms-modal-header {
  gap: 12px;
  min-height: 76px;
  padding: 15px 20px;
}

body:not(.auth-page) .modal-panel.tms-modal-panel .tms-modal-icon,
body:not(.auth-page) .edit-dialog.tms-modal-panel .tms-modal-icon {
  border-radius: 13px;
  flex: 0 0 46px;
  height: 46px;
  width: 46px;
}

body:not(.auth-page) .modal-panel.tms-modal-panel .tms-modal-icon .jitc-icon,
body:not(.auth-page) .edit-dialog.tms-modal-panel .tms-modal-icon .jitc-icon {
  height: 24px;
  width: 24px;
}

body:not(.auth-page) .modal-panel.tms-modal-panel .tms-modal-heading h2,
body:not(.auth-page) .edit-dialog.tms-modal-panel .tms-modal-heading h2 {
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.05;
}

body:not(.auth-page) .modal-panel.tms-modal-panel .modal-close.tms-modal-close,
body:not(.auth-page) .edit-dialog.tms-modal-panel .modal-close.tms-modal-close {
  flex: 0 0 38px;
  height: 38px;
  padding: 0;
  width: 38px;
}

body:not(.auth-page) .modal-panel.tms-modal-panel .modal-close.tms-modal-close .jitc-icon,
body:not(.auth-page) .edit-dialog.tms-modal-panel .modal-close.tms-modal-close .jitc-icon {
  height: 19px;
  width: 19px;
}

body:not(.auth-page) .modal-panel.tms-modal-panel .tms-modal-body,
body:not(.auth-page) .edit-dialog.tms-modal-panel .tms-modal-body {
  padding: 18px 20px;
}

body:not(.auth-page) .modal-panel.tms-modal-panel .tms-modal-footer,
body:not(.auth-page) .edit-dialog.tms-modal-panel .tms-modal-footer {
  gap: 9px;
  padding: 12px 20px;
}

body:not(.auth-page) .modal-panel.tms-modal-panel :where(input, select, textarea),
body:not(.auth-page) .edit-dialog.tms-modal-panel :where(input, select, textarea) {
  min-height: 42px;
}

body:not(.auth-page) .modal-panel.tms-modal-panel .tms-action-tile-grid button {
  min-height: 102px;
}

@media (max-width: 640px) {
  body:not(.auth-page) .modal-panel.tms-modal-panel,
  body:not(.auth-page) .edit-dialog.tms-modal-panel,
  body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-compact,
  body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-form,
  body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-resource,
  body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-action-chooser,
  body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-assignment,
  body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-connection,
  body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-load-details,
  body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-open-truck-note,
  body:not(.auth-page) .modal-panel.tms-modal-panel.tms-modal-positioning {
    border-radius: 14px;
    max-height: calc(100dvh - 16px);
    width: 100%;
  }

  body:not(.auth-page) .modal-panel.tms-modal-panel .tms-modal-header,
  body:not(.auth-page) .edit-dialog.tms-modal-panel .tms-modal-header {
    min-height: 66px;
    padding: 12px 14px;
  }

  body:not(.auth-page) .modal-panel.tms-modal-panel .tms-modal-body,
  body:not(.auth-page) .edit-dialog.tms-modal-panel .tms-modal-body,
  body:not(.auth-page) .modal-panel.tms-modal-panel .tms-modal-footer,
  body:not(.auth-page) .edit-dialog.tms-modal-panel .tms-modal-footer {
    padding: 12px 14px;
  }
}
/* JITC asynchronous dialog system v57. */
.jitc-dialog-open { overflow: hidden; }
/* 2030 glass pass — shared modal/dialog shell (see 2030-DESIGN-ROLLOUT-PLAN.md).
   This is the single highest-leverage piece of the rollout: ui-dialogs.js is
   loaded on 16 pages and also overrides window.alert(), so every popup and
   every plain alert() across the whole app renders through these classes.
   Values here intentionally mirror the operations-2030.css palette (--ops-*)
   rather than referencing those variables directly — this file loads on
   every page, including the ~20 that don't load operations-2030.css, so the
   tokens wouldn't be defined there. One backdrop-filter here is fine: the
   overlay is a single element, not a repeated one (see the load-card /
   truck-cell comments elsewhere in this file for why that distinction
   matters for scroll performance). */
.jitc-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(11, 31, 58, 0.55);
  backdrop-filter: blur(6px);
}
.jitc-dialog-panel {
  width: min(520px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(21, 94, 239, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 24px 60px rgba(11, 31, 58, 0.22), 0 2px 8px rgba(11, 31, 58, 0.08);
  color: #0b1f3a;
}
.jitc-dialog-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 18px;
  background: linear-gradient(180deg, rgba(21, 94, 239, 0.05) 0%, rgba(21, 94, 239, 0) 100%);
  border-bottom: 1px solid #e7edf6;
}
.jitc-dialog-symbol {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: #155eef;
  background: #eaf1ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jitc-dialog-warning .jitc-dialog-symbol { color: #b45309; background: #fff5e5; }
.jitc-dialog-danger .jitc-dialog-symbol,
.jitc-dialog-error .jitc-dialog-symbol { color: #dc3545; background: #fff0f1; }
.jitc-dialog-icon { width: 24px; height: 24px; }
.jitc-dialog-heading { min-width: 0; }
.jitc-dialog-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #079669;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.jitc-dialog-heading h2 { margin: 0; font-size: 22px; line-height: 1.15; }
.jitc-dialog-close {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #d8e3f1;
  border-radius: 50%;
  background: #fff;
  color: #334155;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.jitc-dialog-close:hover { background: #f4f8fe; border-color: #c6d5e8; }
.jitc-dialog-body { padding: 22px 24px; }
.jitc-dialog-message { margin: 0; white-space: pre-line; color: #475569; font-size: 15px; line-height: 1.55; }
.jitc-dialog-field { display: grid; gap: 8px; margin-top: 18px; color: #334155; font-size: 13px; font-weight: 700; }
.jitc-dialog-field input,
.jitc-dialog-field textarea {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid #d8e3f1;
  border-radius: 10px;
  padding: 11px 13px;
  background: #fff;
  color: #0b1f3a;
  font: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.jitc-dialog-field textarea { min-height: 96px; resize: vertical; }
.jitc-dialog-field input:focus,
.jitc-dialog-field textarea:focus { border-color: #155eef; outline: none; box-shadow: 0 0 0 3px rgba(21, 94, 239, .14); }
.jitc-dialog-field [aria-invalid="true"] { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, .12); }
.jitc-dialog-field-error { color: #b91c1c; font-size: 12px; font-weight: 700; }
.jitc-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #e7edf6;
  background: #f8fbff;
}
.jitc-dialog-button {
  min-height: 42px;
  border: 1px solid #d8e3f1;
  border-radius: 10px;
  padding: 9px 18px;
  background: #fff;
  color: #0b1f3a;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.jitc-dialog-button:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(11, 31, 58, 0.1); }
.jitc-dialog-primary { border-color: #0f49c7; background: #155eef; color: #fff; }
.jitc-dialog-primary:hover { background: #0f49c7; }
.jitc-dialog-primary.is-danger { border-color: #b91c1c; background: #dc3545; }
.jitc-dialog-primary.is-danger:hover { background: #b91c1c; }
@media (max-width: 640px) {
  .jitc-dialog-overlay { align-items: end; padding: 12px; }
  .jitc-dialog-panel { width: 100%; border-radius: 16px; }
  .jitc-dialog-header { grid-template-columns: 42px minmax(0, 1fr) 36px; gap: 10px; padding: 18px; }
  .jitc-dialog-symbol { width: 42px; height: 42px; border-radius: 12px; }
  .jitc-dialog-heading h2 { font-size: 19px; }
  .jitc-dialog-body { padding: 18px; }
  .jitc-dialog-footer { padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .jitc-dialog-overlay, .jitc-dialog-panel { animation: none !important; transition: none !important; }
}

/* Open Trucks v103 — regional preload visibility */
.open-trucks-page .open-truck-regional-loads {
  overflow-y: auto;
}

.open-trucks-page .open-truck-regional-load-section {
  display: grid;
  gap: 8px;
  padding: 10px 10px 0;
}

.open-trucks-page .open-truck-regional-load-section .open-truck-regional-load-list {
  max-height: none;
  padding: 0;
  overflow: visible;
}

.open-trucks-page .open-truck-regional-load-section.is-preloads {
  padding-bottom: 10px;
  border-top: 1px solid #d9e3f2;
}

.open-trucks-page .open-truck-regional-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #17345d;
  font-size: 12px;
}

.open-trucks-page .open-truck-regional-section-head > span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1458cf;
  font-weight: 900;
}

.open-trucks-page .open-truck-regional-preload-list {
  display: grid;
  gap: 8px;
}

.open-trucks-page .open-truck-regional-preload-card {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border: 1px solid #dca900;
  border-left: 5px solid #d18b00;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff7bf, #ffe576);
  color: #3f3100;
  box-shadow: 0 5px 14px rgba(151, 105, 0, .15);
}

.open-trucks-page .open-truck-regional-preload-card > b {
  color: #795400;
  font-size: 10px;
  letter-spacing: .03em;
}

.open-trucks-page .open-truck-regional-preload-card > strong {
  color: #2d2507;
  font-size: 15px;
}

.open-trucks-page .open-truck-regional-preload-card > span,
.open-trucks-page .open-truck-regional-preload-card > small,
.open-trucks-page .open-truck-regional-preload-card > em {
  color: #6b5410;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

/* Open Trucks v105 - centered arrival-first board */
.open-trucks-page .positioning-needs-panel.is-empty {
  display: grid;
  grid-template-columns: 1fr;
}

.open-trucks-page .positioning-needs-panel.is-empty .positioning-needs-head {
  min-height: 46px;
  border-bottom: 0;
}

.open-trucks-page .positioning-needs-panel.is-empty .positioning-needs-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.open-trucks-page .positioning-needs-panel.is-empty .positioning-needs-list {
  display: none;
}

.open-trucks-page .open-truck-column-head,
.open-trucks-page .open-truck-main,
.open-trucks-page.open-truck-density-compact .open-truck-main {
  grid-template-columns:
    minmax(76px, 0.54fr)
    minmax(150px, 1.08fr)
    minmax(185px, 1.28fr)
    minmax(145px, 1fr)
    minmax(165px, 1.16fr)
    minmax(165px, 1.16fr)
    minmax(105px, 0.76fr);
}

.open-trucks-page .open-truck-column-head,
.open-trucks-page .open-truck-card,
.open-trucks-page.open-truck-density-compact .open-truck-card {
  min-width: 1080px;
}

.open-trucks-page .open-truck-column-head span {
  display: grid;
  min-height: 22px;
  place-items: center;
  padding: 0 8px;
  text-align: center;
}

.open-trucks-page .open-truck-main > section,
.open-trucks-page .open-truck-main > button,
.open-trucks-page.open-truck-density-compact .open-truck-main > section,
.open-trucks-page.open-truck-density-compact .open-truck-main > button {
  display: grid;
  align-content: center;
  justify-content: stretch;
  justify-items: center;
  text-align: center;
}

.open-trucks-page .open-truck-main > section *,
.open-trucks-page .open-truck-main > button * {
  text-align: center;
}

.open-trucks-page .open-truck-arrival {
  gap: 4px;
  border-left: 1px solid #edf2f7 !important;
  background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%) !important;
}

.open-trucks-page .open-truck-arrival > small {
  color: #52657f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.055em;
}

.open-trucks-page .open-truck-arrival-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  align-items: end;
}

.open-trucks-page .open-truck-arrival-times > span {
  display: grid;
  min-width: 0;
  gap: 1px;
  justify-items: center;
}

.open-trucks-page .open-truck-arrival-times small {
  color: #64748b;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.open-trucks-page .open-truck-arrival-times strong {
  color: #145ff5;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.open-trucks-page .open-truck-arrival-times .is-appointment strong {
  color: #7c3aed;
}

.open-trucks-page .open-truck-arrival-status {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #64748b;
  font-size: 8.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.open-trucks-page .open-truck-arrival-status.is-early,
.open-trucks-page .open-truck-arrival-status.is-on-time {
  background: #e7f8ed;
  color: #08783f;
}

.open-trucks-page .open-truck-arrival-status.is-late {
  background: #fff0f0;
  color: #c52222;
}

.open-trucks-page .open-truck-arrival-status.is-check {
  background: #fff3d6;
  color: #a95600;
}

.open-trucks-page .open-truck-number,
.open-trucks-page .open-truck-arrival,
.open-trucks-page .open-truck-drivers-hos,
.open-trucks-page .open-truck-location,
.open-trucks-page .open-truck-last-load,
.open-trucks-page .open-truck-next-load,
.open-trucks-page .open-truck-note-card,
.open-trucks-page.open-truck-density-compact .open-truck-number,
.open-trucks-page.open-truck-density-compact .open-truck-arrival,
.open-trucks-page.open-truck-density-compact .open-truck-drivers-hos,
.open-trucks-page.open-truck-density-compact .open-truck-location,
.open-trucks-page.open-truck-density-compact .open-truck-last-load,
.open-trucks-page.open-truck-density-compact .open-truck-next-load,
.open-trucks-page.open-truck-density-compact .open-truck-note-card {
  justify-items: center;
  text-align: center;
}

.open-trucks-page .open-truck-driver-hos,
.open-trucks-page .open-truck-driver-hos span {
  justify-items: center;
  text-align: center;
}

.open-trucks-page .open-truck-wait-card,
.open-trucks-page .open-truck-hold-line,
.open-trucks-page .open-truck-time-stack,
.open-trucks-page .open-truck-time-stack span {
  justify-items: center;
  text-align: center;
}

.open-trucks-page .open-truck-regional-load-card,
.open-trucks-page .open-truck-regional-preload-card,
.open-trucks-page .open-truck-regional-load-details,
.open-trucks-page .open-truck-regional-load-actions,
.open-trucks-page .open-truck-regional-load-topline {
  text-align: center;
}

.open-trucks-page .open-truck-regional-load-topline,
.open-trucks-page .open-truck-regional-load-actions {
  justify-content: center;
}

@media (max-width: 1360px) {
  .open-trucks-page .open-truck-column-head,
  .open-trucks-page .open-truck-card,
  .open-trucks-page.open-truck-density-compact .open-truck-card {
    min-width: 1020px;
  }
}
.owner-driver-actions {
  position: relative;
  display: inline-flex;
  justify-content: center;
}

.owner-driver-action-trigger {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #bfd0e4;
  border-radius: 10px;
  background: #fff;
  color: #0b2d58;
  font-size: 22px;
  line-height: 1;
}

.owner-driver-action-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 170px;
  padding: 6px;
  border: 1px solid #c8d7e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 32px rgb(15 42 75 / 18%);
}

.owner-driver-action-menu.is-portal {
  position: fixed;
  top: auto;
  right: auto;
  z-index: 4000;
}

.owner-driver-action-menu button {
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0b2d58;
  text-align: left;
  white-space: nowrap;
}

.owner-driver-action-menu button:hover,
.owner-driver-action-menu button:focus-visible {
  background: #edf5ff;
}

.owner-driver-action-blocked {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff1df;
  color: #8a4b00;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.owner-driver-action-menu .owner-driver-action-blocked {
  width: 100%;
  margin-bottom: 4px;
  border-radius: 8px;
  white-space: normal;
}
.user-profile-memberships {
  grid-column: 1 / -1;
  border: 1px solid var(--border-color, #d8dee8);
  border-radius: 12px;
  padding: 12px 14px;
}

.user-profile-memberships legend { font-weight: 700; }
.user-profile-memberships p { margin: 0 0 10px; color: var(--muted, #5d6878); font-size: 0.88rem; }
.user-profile-memberships > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 14px; }

/* Open Trucks v132r8: make unassigned country split continuations impossible to overlook. */
.open-trucks-page .open-load-split-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid #d79312;
  border-radius: 999px;
  background: #fff3c4;
  color: #7a4600;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* Dedicated route assignment workspace v132r35. */
.dedicated-routes-page { background: #f4f7fb; }
.dedicated-routes-main { min-width: 0; padding-bottom: 40px; }
.dedicated-routes-header { align-items: center; padding-bottom: 16px; }
.dedicated-routes-header h1 { margin: 3px 0 4px; color: #10223d; font-size: clamp(26px, 2.2vw, 36px); }
.dedicated-routes-header p { margin: 0; color: #61728d; }
.dedicated-page-eyebrow { color: #07895c; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.dedicated-header-actions { display: flex; align-items: center; gap: 12px; }
.dedicated-header-actions span { color: #718097; font-size: 12px; }
.dedicated-header-actions button,
.dedicated-route-controls button { min-width: 42px; min-height: 40px; border: 1px solid #d6dfeb; border-radius: 10px; background: #fff; color: #17304f; font-weight: 900; }

.dedicated-workflow-line { display: flex; align-items: center; gap: 10px; margin: 0 18px 12px; padding: 11px 15px; border: 1px solid #cae8dc; border-radius: 12px; background: #f4fcf8; color: #173a31; }
.dedicated-workflow-line > span { color: #0a9868; font-size: 18px; }
.dedicated-workflow-line small { margin-left: auto; color: #60766f; }

.dedicated-route-lane-tabs { display: flex; gap: 8px; margin: 0 18px 12px; padding: 6px; overflow-x: auto; border: 1px solid #dfe6ef; border-radius: 12px; background: #fff; }
.dedicated-route-lane-tabs button { flex: 0 0 auto; min-height: 38px; padding: 0 15px; border: 0; border-radius: 9px; background: transparent; color: #52637e; font-weight: 900; }
.dedicated-route-lane-tabs button.active { background: #075ee8; color: #fff; box-shadow: 0 5px 14px rgba(7, 94, 232, .2); }

.dedicated-route-controls { display: flex; align-items: end; gap: 9px; margin: 0 18px 12px; padding: 12px; border: 1px solid #dfe6ef; border-radius: 12px; background: #fff; }
.dedicated-route-controls label { display: grid; gap: 5px; color: #5f6f86; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.dedicated-route-controls input { min-height: 40px; padding: 8px 11px; border: 1px solid #ced9e7; border-radius: 9px; background: #fff; color: #142944; }
.dedicated-route-controls .dedicated-search { flex: 1; min-width: 250px; }
.dedicated-route-controls .dedicated-search input { width: 100%; }
/* This page already has its own week-stepping arrows (#dedicatedPreviousWeek/#dedicatedNextWeek).
   Hide the calendar picker's auto-generated range-shift arrows so there's only one pair,
   and it's the one that actually steps by a week instead of a single day. */
.dedicated-route-controls .jitc-calendar-shift { display: none; }
/* .jitc-calendar-range-field normally reserves a 42px grid column on each side for those
   arrows; with them hidden here, let the date field itself use the full width instead of
   getting squeezed into a leftover 42px column. */
.dedicated-route-controls .jitc-calendar-range-field { grid-template-columns: minmax(150px, 1fr); }

.dedicated-queue-tabs { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); margin: 0 18px 12px; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 13px; background: #fff; }
.dedicated-queue-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border: 0; border-right: 1px solid #e3e9f1; border-bottom: 3px solid transparent; background: transparent; color: #52627a; font-weight: 900; }
.dedicated-queue-tabs button:last-child { border-right: 0; }
.dedicated-queue-tabs button strong { display: grid; min-width: 28px; height: 28px; place-items: center; border-radius: 999px; background: #edf2fa; color: #263d5f; }
.dedicated-queue-tabs button.active { border-bottom-color: #075ee8; color: #102a4f; background: #f8fbff; }
.dedicated-queue-tabs button[data-queue="attention"].active { border-bottom-color: #ef4b37; }

.dedicated-route-workspace { margin: 0 18px; overflow: visible; border: 1px solid #dfe6ef; border-radius: 14px; background: #fff; box-shadow: 0 12px 35px rgba(39, 62, 91, .07); }
.dedicated-route-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #e4eaf2; }
.dedicated-route-panel-head h2 { margin: 0; color: #10243f; font-size: 20px; }
.dedicated-route-panel-head p,
.dedicated-route-panel-head > span { margin: 4px 0 0; color: #728097; font-size: 12px; }
.dedicated-route-message,
.dedicated-live-notice { margin: 12px 16px 0; padding: 10px 12px; border-radius: 9px; background: #e8f8ef; color: #096b3d; font-weight: 800; }
.dedicated-route-message.error { background: #fff0f0; color: #a22626; }
.dedicated-live-notice { background: #eef5ff; color: #1756a5; }
.dedicated-route-table-wrap { overflow-x: auto; }
.dedicated-route-list-head,
.dedicated-assignment-row { display: grid; grid-template-columns: minmax(230px, 1.45fr) minmax(240px, 1.4fr) minmax(120px, .72fr) minmax(190px, 1.08fr) minmax(135px, .72fr) minmax(190px, 1fr); gap: 14px; align-items: center; min-width: 1180px; }
.dedicated-route-list-head { padding: 11px 16px; background: #f6f8fb; color: #5f6f86; font-size: 11px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.dedicated-assignment-list { min-width: 1180px; }
.dedicated-assignment-group > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border-top: 1px solid #e5ebf3; background: #fbfcfe; }
.dedicated-assignment-group:first-child > header { border-top: 0; }
.dedicated-assignment-group > header span { color: #718097; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.dedicated-assignment-group > header h3 { margin: 3px 0 0; color: #16304f; font-size: 15px; }
.dedicated-default-strip { display: flex; align-items: center; gap: 10px; min-width: 380px; padding: 9px 11px; border: 1px solid #d7e2ef; border-radius: 10px; background: #fff; }
.dedicated-default-strip strong { color: #075ee8; }
.dedicated-default-strip span { color: #223b5c; font-size: 12px; text-transform: none; letter-spacing: normal; }
.dedicated-default-strip small { color: #7a879a; }
.dedicated-default-strip button { margin-left: auto; border: 0; background: transparent; color: #075ee8; font-weight: 900; }
.dedicated-assignment-row { position: relative; padding: 14px 16px; border-top: 1px solid #e7ecf3; border-left: 4px solid transparent; background: #fff; }
.dedicated-assignment-row:hover { background: #fbfdff; }
.dedicated-assignment-row.is-selected { border-left-color: #075ee8; background: #f3f8ff; }
.dedicated-assignment-row > div { min-width: 0; }
.dedicated-assignment-row strong,
.dedicated-assignment-row span,
.dedicated-assignment-row small { display: block; }
.dedicated-assignment-row strong { color: #142b48; font-size: 13px; }
.dedicated-assignment-row span,
.dedicated-assignment-row small { margin-top: 3px; color: #718097; font-size: 11px; }
.dedicated-leg-cell > span { color: #566985; font-weight: 800; }
.dedicated-team-cell em { display: block; margin-top: 5px; color: #bd2c21; font-size: 11px; font-style: normal; font-weight: 900; }
.dedicated-source-badge { display: inline-flex !important; width: fit-content; padding: 6px 9px; border-radius: 999px; background: #edf2f8; color: #53657e !important; font-weight: 900; }
.dedicated-source-badge.route-default { background: #edf5ff; color: #165db1 !important; }
.dedicated-source-badge.leg-override { background: #fff3d9; color: #8a5600 !important; }
.dedicated-source-badge.loadstop { background: #e2f8ed; color: #087043 !important; }
.dedicated-source-badge.explicitly-unassigned { background: #ffe9e6; color: #a22b20 !important; }
.dedicated-route-status { display: inline-flex !important; width: fit-content; padding: 6px 9px; border-radius: 999px; font-size: 11px !important; font-weight: 900; }
.dedicated-route-status.attention { background: #ffe9e4; color: #b13120; }
.dedicated-route-status.waiting { background: #fff2cb; color: #835900; }
.dedicated-route-status.ready { background: #e8f4ff; color: #0757b5; }
.dedicated-route-status.dispatched { background: #dff7ea; color: #087342; }
.dedicated-route-status.done { background: #e9edf2; color: #5d6979; }
.dedicated-rate-cell strong { overflow-wrap: anywhere; color: #0b7451; }
.dedicated-rate-cell button { width: fit-content; margin-top: 6px; padding: 3px 8px; border: 1px solid #b9d4c9; border-radius: 7px; background: #f2fbf7; color: #08724f; font-size: 10px; font-weight: 900; }
.dedicated-route-row-actions { display: flex; align-items: center; justify-content: flex-start; gap: 7px; white-space: nowrap; }
.dedicated-route-row-actions button,
.dedicated-route-row-actions .button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 35px; padding: 7px 11px; border: 1px solid #ced9e7; border-radius: 9px; background: #fff; color: #203853; font-size: 12px; font-weight: 900; text-decoration: none; }
.dedicated-route-row-actions .primary-action { border-color: #075ee8; background: #075ee8; color: #fff; }
.dedicated-locked-action { color: #69788d !important; font-weight: 800; }
.dedicated-row-menu { position: relative; }
.dedicated-row-menu summary { display: grid; width: 36px; height: 35px; place-items: center; border: 1px solid #ced9e7; border-radius: 9px; background: #fff; color: #203853; cursor: pointer; font-weight: 900; list-style: none; }
.dedicated-row-menu summary::-webkit-details-marker { display: none; }
.dedicated-row-menu > div { position: absolute; z-index: 20; top: 40px; right: 0; display: grid; width: 220px; padding: 6px; border: 1px solid #d8e0eb; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(25, 44, 71, .18); }
.dedicated-row-menu > div button { justify-content: flex-start; border: 0; }
.dedicated-route-empty { padding: 42px; text-align: center; color: #708097; }

.dedicated-drawer-backdrop { position: fixed; z-index: 1190; inset: 0; background: rgba(15, 28, 48, .38); backdrop-filter: blur(2px); }
.dedicated-assignment-drawer { position: fixed; z-index: 1200; top: 0; right: 0; bottom: 0; width: min(490px, calc(100vw - 34px)); overflow-y: auto; border-left: 1px solid #d5deea; background: #fff; box-shadow: -20px 0 60px rgba(24, 42, 68, .22); }
.dedicated-assignment-drawer > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 18px; border-bottom: 1px solid #e2e8f0; }
.dedicated-assignment-drawer h2 { margin: 4px 0; color: #10233e; font-size: 25px; }
.dedicated-assignment-drawer header p { margin: 0; color: #667791; }
.dedicated-assignment-drawer header button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #d4deeb; border-radius: 12px; background: #fff; color: #263d5a; font-size: 25px; }
.dedicated-assignment-drawer form { display: grid; gap: 19px; padding: 20px 24px 26px; }
.dedicated-assignment-drawer fieldset { display: grid; gap: 8px; padding: 0; border: 0; }
.dedicated-assignment-drawer legend { margin-bottom: 8px; color: #263e5e; font-weight: 900; }
.dedicated-assignment-drawer fieldset label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border: 1px solid #d7e0eb; border-radius: 10px; }
.dedicated-assignment-drawer fieldset input { margin-top: 3px; }
.dedicated-assignment-drawer fieldset span strong,
.dedicated-assignment-drawer fieldset span small { display: block; }
.dedicated-assignment-drawer fieldset span small { margin-top: 3px; color: #728097; }
.dedicated-drawer-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 12px; }
.dedicated-copy-previous { grid-column: 1 / -1; justify-self: start; color: #1559c9; border-color: #b8cdf4; background: #f7faff; }
.dedicated-drawer-fields label,
.dedicated-rate-field { display: grid; gap: 6px; color: #263e5e; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.dedicated-drawer-fields label > span,
.dedicated-rate-field > span { color: #7c899b; font-weight: 700; text-transform: none; }
.dedicated-drawer-fields select,
.dedicated-rate-field input { min-width: 0; min-height: 44px; padding: 9px 11px; border: 1px solid #ced9e7; border-radius: 10px; background: #fff; color: #142944; font-weight: 700; }
.dedicated-rate-field small { color: #728097; font-weight: 500; text-transform: none; }
.dedicated-drawer-warning,
.dedicated-drawer-error { padding: 11px 12px; border-radius: 9px; background: #fff3d8; color: #7f5600; font-weight: 800; }
.dedicated-drawer-error { background: #fff0ef; color: #aa3025; }
.dedicated-drawer-summary { display: grid; gap: 3px; padding: 14px; border: 1px solid #cddcf2; border-radius: 10px; background: #f5f9ff; }
.dedicated-drawer-summary strong { color: #174d91; }
.dedicated-drawer-summary span { color: #6a7d98; font-size: 12px; }
.dedicated-assignment-drawer footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }
.dedicated-assignment-drawer footer button { min-height: 45px; padding: 9px 18px; border: 1px solid #ced9e7; border-radius: 10px; background: #fff; color: #203853; font-weight: 900; }
.dedicated-assignment-drawer footer .primary-action { border-color: #075ee8; background: #075ee8; color: #fff; }
.dedicated-assignment-drawer footer button:disabled { opacity: .55; cursor: not-allowed; }

.dedicated-view-tabs { display: flex; gap: 8px; margin: 0 18px 12px; padding: 6px; border: 1px solid #dfe6ef; border-radius: 12px; background: #fff; width: fit-content; }
.dedicated-view-tabs button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: #52627a; font-weight: 900; }
.dedicated-view-tabs button.active { background: #075ee8; color: #fff; box-shadow: 0 4px 10px rgba(7, 94, 232, .2); }

.dedicated-setup-section { margin: 0 18px 24px; padding: 18px; border: 1px solid #dfe6ef; border-radius: 13px; background: #fff; }
.dedicated-setup-section .dedicated-route-panel-head { padding: 0 0 14px; }
.dedicated-setup-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.dedicated-setup-table th { padding: 10px 12px; border-bottom: 1px solid #e3e9f1; color: #7c899b; font-size: 11px; font-weight: 900; text-align: left; text-transform: uppercase; }
.dedicated-setup-table td { padding: 12px; border-bottom: 1px solid #eef2f7; color: #263e5e; font-weight: 700; vertical-align: top; }
.dedicated-setup-table tr.dedicated-setup-row-inactive td { color: #9aa7ba; }
.dedicated-setup-table button { min-height: 36px; padding: 0 14px; border: 1px solid #ced9e7; border-radius: 8px; background: #fff; color: #142944; font-weight: 900; }
.dedicated-setup-status { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.dedicated-setup-status.is-active { background: #ecfdf3; color: #166534; }
.dedicated-setup-status.is-inactive { background: #f1f3f6; color: #6a7688; }

#dedicatedRuleForm > label { display: grid; gap: 6px; color: #263e5e; font-size: 12px; font-weight: 900; text-transform: uppercase; }
#dedicatedRuleForm > label > span { color: #7c899b; font-weight: 700; text-transform: none; }
#dedicatedRuleForm > label > input,
#dedicatedRuleForm > label > select { min-width: 0; min-height: 44px; padding: 9px 11px; border: 1px solid #ced9e7; border-radius: 10px; background: #fff; color: #142944; font-weight: 700; }
.dedicated-rule-mode { display: grid; gap: 8px; }
.dedicated-rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 12px; }
.dedicated-rule-grid label { display: grid; gap: 6px; color: #263e5e; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.dedicated-rule-grid input,
.dedicated-rule-grid select { min-width: 0; min-height: 44px; padding: 9px 11px; border: 1px solid #ced9e7; border-radius: 10px; background: #fff; color: #142944; font-weight: 700; }
.dedicated-rule-weekdays { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; }
.dedicated-rule-weekdays legend { width: 100%; margin-bottom: 4px; color: #263e5e; font-weight: 900; }
.dedicated-rule-weekdays label { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #d7e0eb; border-radius: 999px; font-weight: 800; color: #33455f; }
.dedicated-rule-contract-search { position: relative; }
.dedicated-rule-contract-results { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; border: 1px solid #ced9e7; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(24, 42, 68, .18); }
.dedicated-rule-contract-results button { display: grid; width: 100%; gap: 2px; padding: 10px 12px; border: 0; border-bottom: 1px solid #eef2f7; background: #fff; text-align: left; }
.dedicated-rule-contract-results button:hover { background: #f5f9ff; }
.dedicated-rule-contract-results button strong { color: #10233e; }
.dedicated-rule-contract-results button span { color: #52627a; font-size: 12px; font-weight: 600; text-transform: none; }
.dedicated-rule-contract-results button small { color: #7c899b; font-weight: 500; text-transform: none; }
.dedicated-rule-contract-empty { padding: 12px; color: #7c899b; font-weight: 600; }
.dedicated-rule-contract-picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #cddcf2; border-radius: 10px; background: #f5f9ff; color: #174d91; font-weight: 800; }
.dedicated-rule-contract-picked button { min-height: 30px; padding: 0 10px; border: 1px solid #b8cdf4; border-radius: 8px; background: #fff; color: #1559c9; font-weight: 900; }

@media (max-width: 900px) {
  .dedicated-workflow-line { align-items: flex-start; flex-wrap: wrap; }
  .dedicated-workflow-line small { width: 100%; margin-left: 0; }
  .dedicated-route-controls { align-items: stretch; flex-wrap: wrap; }
  .dedicated-route-controls .dedicated-search { flex-basis: 100%; }
  .dedicated-queue-tabs { grid-template-columns: repeat(2, 1fr); }
  .dedicated-assignment-group > header { align-items: stretch; flex-direction: column; }
  .dedicated-default-strip { min-width: 0; }
  .dedicated-drawer-fields { grid-template-columns: 1fr; }
  .dedicated-rule-grid { grid-template-columns: 1fr; }
}
.driver-refresh-delayed {
  color: #9a6700;
  font-weight: 700;
  margin-left: 0.45rem;
}

/* Routing page v1: search, state filter, and date range collapse onto one line.
   Scoped to body[data-truck-view="all"] so Open Trucks' own layout is untouched. */
body[data-truck-view="all"].open-trucks-page .open-truck-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 16px;
}

body[data-truck-view="all"].open-trucks-page .open-truck-filter-left {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

body[data-truck-view="all"].open-trucks-page .open-truck-search-field {
  flex: 0 1 170px;
  min-width: 130px;
}

body[data-truck-view="all"].open-trucks-page .open-truck-header-date {
  flex: 0 0 auto;
}

body[data-truck-view="all"].open-trucks-page .open-truck-date-nav {
  white-space: nowrap;
}

body[data-truck-view="all"].open-trucks-page .open-truck-toolbar-controls {
  flex: 0 0 auto;
}

/* Glass state picker: shared by Open Trucks and Routing (only pages using .multi-filter),
   replacing the old native <details>/<summary> multi-select with a draft/apply popover. */
.jitc-state-picker {
  position: relative;
  display: inline-flex;
}

.jitc-state-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #cbd8e7;
  border-radius: 11px;
  background: #fff;
  color: #12243d;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(18, 44, 78, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.jitc-state-trigger:hover,
.jitc-state-trigger:focus-visible {
  border-color: #2870e8;
  box-shadow: 0 0 0 3px rgba(40, 112, 232, 0.13);
  outline: none;
}

.jitc-state-trigger[aria-expanded="true"] {
  border-color: #2870e8;
  box-shadow: 0 0 0 3px rgba(40, 112, 232, 0.13);
}

.jitc-state-pin {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: #2870e8;
}

.jitc-state-trigger span:not(.jitc-state-chevron) {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jitc-state-chevron {
  flex: 0 0 auto;
  font-size: 10px;
  color: #57749a;
}

.jitc-state-popover {
  position: fixed;
  z-index: 2400;
  max-height: min(480px, calc(100vh - 32px));
  overflow-y: auto;
  background: rgba(248, 252, 255, 0.78);
  border: 1px solid rgba(130, 170, 225, 0.38);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(38, 90, 160, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jitc-state-popover[hidden] {
  display: none;
}

.jitc-state-search-field {
  display: block;
}

.jitc-state-search-field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.jitc-state-search {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(130, 170, 225, 0.38);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #12243d;
}

.jitc-state-search::placeholder {
  color: #7c8fac;
  font-weight: 600;
}

.jitc-state-search:focus-visible {
  outline: none;
  border-color: #2870e8;
  box-shadow: 0 0 0 3px rgba(40, 112, 232, 0.13);
}

.jitc-state-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jitc-state-toolbar-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(130, 170, 225, 0.38);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
  color: #23415f;
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.jitc-state-toolbar-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.95);
  border-color: #2870e8;
}

.jitc-state-toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.jitc-state-count-badge {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(40, 112, 232, 0.12);
  color: #1a4fb4;
  font-size: 11px;
  font-weight: 800;
}

.jitc-state-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.jitc-state-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  border: 1px solid rgba(130, 170, 225, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: #23415f;
  font: inherit;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.jitc-state-option:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #9fb8dc;
}

.jitc-state-option:active {
  transform: scale(0.97);
}

.jitc-state-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 112, 232, 0.18);
}

.jitc-state-option.is-selected {
  background: rgba(40, 112, 232, 0.14);
  border-color: #2870e8;
  color: #12356f;
}

.jitc-state-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #2870e8;
  color: #fff;
  font-size: 9px;
  line-height: 1;
}

.jitc-state-option:not(.is-selected) .jitc-state-option-check {
  display: none;
}

.jitc-state-empty {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding: 10px;
  text-align: center;
  color: #57749a;
  font-weight: 600;
  font-size: 13px;
}

.jitc-state-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(130, 170, 225, 0.28);
  color: #57749a;
  font-size: 12px;
  font-weight: 700;
}

.jitc-state-footer-actions {
  display: flex;
  gap: 8px;
}

.jitc-state-cancel,
.jitc-state-apply {
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.jitc-state-cancel {
  border: 1px solid rgba(130, 170, 225, 0.38);
  background: rgba(255, 255, 255, 0.7);
  color: #23415f;
}

.jitc-state-cancel:hover {
  background: rgba(255, 255, 255, 0.95);
}

.jitc-state-apply {
  border: none;
  background: #2870e8;
  color: #fff;
  box-shadow: 0 8px 18px rgba(40, 112, 232, 0.28);
}

.jitc-state-apply:hover {
  background: #1f5fd0;
}

@media (max-width: 640px) {
  .jitc-state-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 420px) {
  .jitc-state-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile navigation drawer (phone widths only) - v1 mobile-nav-drawer.
   Desktop and tablet layout/behavior above 768px is untouched; this
   supersedes the existing 900px icon-only collapse for phone widths
   because it's declared later in the cascade. */
.mobile-nav-toggle,
.mobile-nav-backdrop {
  display: none;
}

@media (max-width: 768px) {
  body {
    display: block;
  }

  main {
    padding: 16px 12px 24px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(84vw, 300px);
    min-height: 0;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 200;
    overflow-y: auto;
  }

  .sidebar.mobile-nav-open {
    transform: translateX(0);
    box-shadow: 12px 0 32px rgba(4, 12, 24, 0.35);
  }

  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 14px;
    left: 14px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: #124a7c;
    color: #fff;
    box-shadow: 0 6px 16px rgba(4, 12, 24, 0.3);
    z-index: 201;
    cursor: pointer;
  }

  .mobile-nav-toggle svg {
    width: 22px;
    height: 22px;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 12, 24, 0.45);
    z-index: 199;
  }

  .mobile-nav-backdrop.is-visible {
    display: block;
  }

  body.mobile-nav-locked {
    overflow: hidden;
  }
}

/* Mobile Schedule Board (phone widths only) - v1 mobile-schedule-board.
   One truck at a time, or one day at a time, instead of the full
   truck x day grid - reuses the exact same cell/load-card markup the
   desktop grid renders, just laid out as a single stacked column. */
.mobile-schedule-board {
  display: none;
}

@media (max-width: 768px) {
  .schedule-modern-page .controls.schedule-filter-bar,
  .schedule-modern-page .dashboard-layout {
    display: none;
  }

  .mobile-schedule-board {
    display: block;
  }

  .mobile-schedule-modeswitch {
    display: flex;
    background: var(--line);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
    margin-bottom: 10px;
  }

  .mobile-schedule-modeswitch button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px 6px;
    font-size: 14px;
    font-weight: 700;
    color: #5b6b78;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
  }

  .mobile-schedule-modeswitch button.active {
    background: #fff;
    color: #101820;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  }

  .mobile-schedule-chiprow {
    display: flex;
    gap: 8px;
    padding-bottom: 10px;
    overflow-x: auto;
  }

  .mobile-schedule-chip {
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: #fff;
    color: #101820;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
  }

  .mobile-schedule-chip.active {
    background: #155eef;
    border-color: #155eef;
    color: #fff;
  }

  .mobile-schedule-chip.today:not(.active) {
    border-color: #155eef;
    color: #155eef;
  }

  .mobile-schedule-entry {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }

  .mobile-schedule-entry.today {
    border-color: #155eef;
    box-shadow: 0 0 0 1px #155eef;
  }

  .mobile-schedule-entry-label {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #5b6b78;
    background: #f3f5f7;
    border-bottom: 1px solid var(--line);
  }

  .mobile-schedule-entry .cell {
    border: 0;
    min-height: 0;
  }

  .mobile-schedule-gridnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
  }

  .mobile-schedule-gridnav button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: #101820;
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .mobile-schedule-gridnav button:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .mobile-schedule-gridnav span {
    font-size: 12px;
    font-weight: 700;
    color: #5b6b78;
    text-align: center;
  }

  .mobile-schedule-grid-header,
  .mobile-schedule-grid-row {
    display: grid;
    grid-template-columns: 42px repeat(3, 1fr);
    gap: 6px;
    align-items: stretch;
  }

  .mobile-schedule-grid-header {
    padding-bottom: 6px;
  }

  .mobile-schedule-grid-header-cell {
    font-size: 10px;
    font-weight: 800;
    color: #5b6b78;
    text-transform: uppercase;
    text-align: center;
  }

  .mobile-schedule-grid-header-cell.today {
    color: #155eef;
  }

  .mobile-schedule-grid-row {
    margin-bottom: 6px;
  }

  .mobile-schedule-grid-trucklabel {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #101820;
  }

  .mobile-schedule-grid-cellstack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .mobile-schedule-grid-chip {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 4px 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: #101820;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-schedule-grid-chip.reset {
    background: #fff4e0;
    border-color: #f0c98a;
    color: #92600c;
  }

  .mobile-schedule-grid-chip.empty {
    background: #f3f5f7;
    color: #93a2ae;
    font-weight: 600;
  }
}

/* v315: Open Trucks manual "Ready" marker - green glassy glow on the truck number,
   toggled independently of On Hold, plus the toggle button itself. */
.open-trucks-page .open-truck-main .open-truck-ready-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-height: 22px;
  margin-top: 2px;
  padding: 3px 8px;
  border: 1px solid #b9c7da;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

.open-trucks-page .open-truck-main .open-truck-ready-button:hover {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
}

.open-trucks-page .open-truck-main .open-truck-ready-button.is-active {
  border-color: #10b981;
  background: #10b981;
  color: #ffffff;
}

.open-trucks-page .open-truck-main .open-truck-number-link.is-ready {
  border-radius: 8px;
  padding: 2px 6px;
  background: linear-gradient(160deg, rgba(52, 211, 153, 0.4), rgba(16, 185, 129, 0.14));
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.6),
    0 0 16px rgba(16, 185, 129, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.open-trucks-page .open-truck-main .open-truck-number-link.is-ready strong {
  color: #047857;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* v316: CA Departures On-Hold Backup Teams - pinned above the real SoCal
   Departures list, own header color and divider so it never reads as a real load. */
.routing-backup-hold-group > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdf1da;
  border-color: #eecf98;
  color: #7a5310;
}

.routing-backup-hold-group > h3 small {
  color: #9a7222;
  font-weight: 700;
}

.routing-backup-hold-create {
  margin-left: auto;
  border: 1px solid #c98f1c;
  border-radius: 6px;
  background: #ffffff;
  color: #7a5310;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
  cursor: pointer;
}

.routing-backup-hold-create:hover {
  background: #fdf1da;
}

.routing-backup-hold-divider {
  height: 1px;
  margin: 4px 2px 12px;
  background: var(--line, #d9dfe4);
}

.routing-load-card.is-backup-hold {
  border-left: 4px solid #c98f1c;
  background: #fffdf7;
}

/* v317: Ops Assistant chat UI. */
/* Ops Assistant — glassy 2030 dark chat surface (v322). Shared by the
   floating widget (nav.js, .oaw-panel) and the docked full-page instance
   (assistant.js, .oaw-panel--docked) - same tokens, same component classes,
   two different containers. Kept as its own token namespace (--oaw-*) rather
   than the light jitc-dialog-* system, because this is a deliberately dark
   glass surface floating over full-color pages, not a modal on white. */
:root {
  --oaw-bg: rgba(8, 22, 48, 0.72);
  --oaw-bg-grad: linear-gradient(165deg, rgba(15, 36, 74, 0.86) 0%, rgba(7, 17, 38, 0.82) 100%);
  --oaw-border: rgba(130, 190, 255, 0.22);
  --oaw-border-strong: rgba(130, 190, 255, 0.4);
  --oaw-assistant-bubble: rgba(255, 255, 255, 0.08);
  --oaw-user-grad: linear-gradient(135deg, #1f6feb 0%, #2563eb 100%);
  --oaw-accent: #4ea3ff;
  --oaw-accent-2: #5de1ff;
  --oaw-text: #f5faff;
  --oaw-text-muted: #a8b8d4;
  --oaw-shadow: 0 24px 80px rgba(0, 14, 40, 0.35);
}

/* v318: floating Ops Assistant widget - injected by nav.js on every page,
   super-admin only. Fixed positioning keeps it out of normal page flow so it
   never disturbs any existing page layout underneath. */
#opsAssistantWidget {
  position: fixed;
  inset: auto;
  z-index: 2000;
}

.oaw-header-icon-btn,
.oaw-icon-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--oaw-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease, transform 120ms ease;
}
/* The sitewide `button { padding: 8px 12px; }` / `body:not(.auth-page)
   button { min-height: 36px; border: 1px solid ...; }` resets both have
   higher specificity than a plain `.oaw-icon-btn` and otherwise leak
   through: min-height stretches these to 36px tall and 24px of horizontal
   padding leaves almost no room for the 15px icon inside a 28px button,
   so it renders shrunk to a couple of pixels. Nesting under .oaw-panel
   pushes this past both resets. */
.oaw-panel .oaw-icon-btn {
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: none;
  box-shadow: none;
}
.oaw-icon-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.oaw-icon-btn:hover { background: rgba(255, 255, 255, 0.18); }
.oaw-icon-btn:active { transform: scale(0.92); }
.oaw-icon-btn:focus-visible { outline: 2px solid var(--oaw-accent-2); outline-offset: 2px; }

.oaw-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--oaw-accent), var(--oaw-accent-2));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.oaw-avatar svg { width: 14px; height: 14px; stroke: #04101f; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.oaw-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 6px rgba(61, 220, 132, 0.9);
  margin-left: 6px;
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .oaw-status-dot { animation: oaw-status-pulse 2.4s ease-in-out infinite; }
}
@keyframes oaw-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.oaw-day-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
  color: var(--oaw-text-muted);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.oaw-day-divider::before,
.oaw-day-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--oaw-border);
}

/* -------------------------------------------------------------------- */
/* Bubble, floating widget (.oaw-panel) and docked page (.oaw-panel--docked)
   share every rule below - only positioning/sizing differs between them. */

.oaw-bubble {
  position: fixed;
  right: 26px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--oaw-accent) 0%, var(--oaw-accent-2) 100%);
  border: none;
  box-shadow: 0 10px 30px rgba(20, 90, 200, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2000;
  transition: transform 160ms ease, opacity 160ms ease;
}

.oaw-bubble svg { stroke: #04101f; width: 24px; height: 24px; flex-shrink: 0; }
/* Same sitewide button reset problem as .oaw-icon-btn/.oaw-send above. */
#opsAssistantWidget .oaw-bubble {
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: none;
  box-shadow: 0 10px 30px rgba(20, 90, 200, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.oaw-bubble:hover { transform: translateY(-2px); }
.oaw-bubble:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

.oaw-bubble.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
}

.oaw-panel {
  /* display:none here is load-bearing, not decoration. Visibility is controlled
     entirely by the .is-visible class below (never the [hidden] attribute - an
     explicit display value on ANY rule matching this element overrides the
     browser's native [hidden] behavior regardless of selector specificity, so
     mixing the two silently breaks). Without this line the element falls back
     to its normal display:block, staying rendered - and clickable, sitting on
     top of the bubble - even when "closed". */
  display: none;
  position: fixed;
  right: 26px;
  bottom: 24px;
  width: min(440px, calc(100vw - 24px));
  max-height: 75vh;
  background: var(--oaw-bg-grad);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--oaw-border);
  border-radius: 24px;
  box-shadow: var(--oaw-shadow), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  color: var(--oaw-text);
  flex-direction: column;
  overflow: hidden;
  z-index: 2001;
  transform-origin: bottom right;
  transform: scale(0.94) translateY(10px);
  opacity: 0;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.3, 1), opacity 160ms ease, max-height 220ms ease;
}

.oaw-panel.is-visible { display: flex; }
.oaw-panel.is-open { transform: scale(1) translateY(0); opacity: 1; }

.oaw-panel.is-minimized { max-height: 62px; }
.oaw-panel.is-minimized .oaw-messages,
.oaw-panel.is-minimized .oaw-input-row,
.oaw-panel.is-minimized .oaw-footnote { display: none; }

/* Docked variant: the same glass card, embedded in the Ops Assistant page
   instead of floating - always visible, no open/close transform, no minimize.
   Fills the page (not capped to a narrow chat-width column like the floating
   widget) so long answers - tables of loads, multi-line lists - have real
   room and are easy to read and copy without scrolling. */
.oaw-panel--docked {
  position: static;
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
  max-height: none;
  transform: none;
  opacity: 1;
}
/* Prose still wraps at a comfortable reading width even though the bubble
   itself is wide - only paragraphs are capped; tables/lists use the full
   bubble width, which is the whole point of widening the page. */
.oaw-panel--docked .oaw-bubble-msg p { max-width: 68ch; }
.oaw-panel--docked .oaw-msg-col { max-width: min(86%, 900px); }

.oaw-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 14px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 1px solid var(--oaw-border);
  flex-shrink: 0;
  cursor: default;
}

.oaw-head-icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--oaw-accent), var(--oaw-accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

.oaw-head-icon svg { width: 17px; height: 17px; stroke: #04101f; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.oaw-head-text { flex: 1; min-width: 0; }
.oaw-head-text strong { display: block; font-size: 13.5px; font-weight: 700; }
.oaw-head-text small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--oaw-text-muted);
  margin-top: 2px;
}

.oaw-head-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.oaw-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oaw-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .oaw-msg-row { animation: oaw-msg-in 220ms ease; }
}
@keyframes oaw-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.oaw-msg-user { justify-content: flex-end; }
.oaw-msg-col { display: flex; flex-direction: column; min-width: 0; max-width: 86%; }
.oaw-msg-user .oaw-msg-col { align-items: flex-end; }
.oaw-msg-assistant .oaw-msg-col { align-items: flex-start; }

.oaw-bubble-msg {
  max-width: 100%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.oaw-bubble-user {
  background: var(--oaw-user-grad);
  color: #ffffff;
  border-top-right-radius: 5px;
  box-shadow: 0 6px 18px rgba(31, 111, 235, 0.35);
}

.oaw-bubble-assistant {
  background: var(--oaw-assistant-bubble);
  border: 1px solid var(--oaw-border);
  color: var(--oaw-text);
  border-top-left-radius: 5px;
}

.oaw-bubble-user b, .oaw-bubble-user strong { color: #ffffff; }
.oaw-bubble-assistant b, .oaw-bubble-assistant strong { color: var(--oaw-accent-2); font-weight: 700; }

/* .oaw-panel prefix is load-bearing: the sitewide `p { color: #53605d; }`
   / `body:not(.auth-page) p { color: var(--portal-muted); }` resets target
   <p> directly (marked.parse() wraps every paragraph in one), and a direct
   match on the element always beats an inherited color regardless of the
   ancestor bubble's own specificity - text renders muted-gray-on-dark
   without this. */
.oaw-panel .oaw-bubble-msg p { color: inherit; }
.oaw-bubble-msg p { margin: 0 0 8px; }
.oaw-bubble-msg p:last-child { margin-bottom: 0; }
.oaw-bubble-msg ul, .oaw-bubble-msg ol {
  margin: 6px 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.oaw-bubble-msg ul:last-child, .oaw-bubble-msg ol:last-child { margin-bottom: 0; }
.oaw-bubble-msg li {
  position: relative;
  padding: 5px 10px 5px 12px;
  border-left: 2px solid var(--oaw-accent);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 8px 8px 0;
}
.oaw-bubble-user li { border-left-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.1); }
.oaw-bubble-msg ol { counter-reset: oaw-ol; }
.oaw-bubble-msg ol li { counter-increment: oaw-ol; padding-left: 8px; }
.oaw-bubble-msg ol li::before { content: counter(oaw-ol) "."; margin-right: 6px; font-weight: 700; color: var(--oaw-accent-2); }
.oaw-bubble-user ol li::before { color: #ffffff; }
.oaw-bubble-msg a { color: var(--oaw-accent-2); text-decoration: underline; text-underline-offset: 2px; }
.oaw-bubble-user a { color: #ffffff; }
.oaw-bubble-msg code {
  background: rgba(255, 255, 255, 0.12);
  padding: 1px 5px;
  border-radius: 5px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11.5px;
}
.oaw-bubble-msg pre {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--oaw-border);
  border-radius: 10px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 8px 0;
}
.oaw-bubble-msg pre code { background: none; padding: 0; }
.oaw-table-wrap { position: relative; overflow-x: auto; margin: 8px 0; border-radius: 10px; border: 1px solid var(--oaw-border); max-width: 100%; }
.oaw-copy-btn {
  position: sticky;
  float: right;
  top: 6px;
  right: 6px;
  margin: 6px 6px 0 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid var(--oaw-border);
  background: rgba(8, 22, 48, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
/* Same sitewide button reset problem as .oaw-icon-btn/.oaw-send/.oaw-bubble
   (see those rules) - button { padding: 8px 12px } and body:not(.auth-page)
   button { min-height: 36px; border: ... } both beat a plain .oaw-copy-btn
   and were silently stretching this to 26x36px with the icon squished flat. */
.oaw-table-wrap .oaw-copy-btn {
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--oaw-border);
  box-shadow: none;
}
.oaw-copy-btn:hover { background: rgba(78, 163, 255, 0.22); }
.oaw-copy-btn svg { width: 12px; height: 12px; stroke: var(--oaw-text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oaw-copy-btn .oaw-copy-check { display: none; }
.oaw-copy-btn.is-copied .oaw-copy-icon { display: none; }
.oaw-copy-btn.is-copied .oaw-copy-check { display: block; }
.oaw-copy-btn.is-copied svg { stroke: #3ddc84; }
.oaw-bubble-msg table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.oaw-bubble-msg th, .oaw-bubble-msg td { padding: 6px 10px; border-bottom: 1px solid var(--oaw-border); text-align: left; white-space: nowrap; }
.oaw-bubble-msg th { background: rgba(255, 255, 255, 0.07); font-weight: 700; color: var(--oaw-accent-2); }
.oaw-bubble-msg tr:last-child td { border-bottom: none; }

.oaw-msg-time {
  margin-top: 4px;
  font-size: 10px;
  color: var(--oaw-text-muted);
  padding: 0 3px;
}

.oaw-typing .oaw-bubble-msg { display: flex; align-items: center; gap: 4px; padding: 12px 15px; }
.oaw-typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--oaw-accent-2);
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .oaw-typing-dot { animation: oaw-typing-bounce 1.1s infinite ease-in-out; }
  .oaw-typing-dot:nth-child(2) { animation-delay: 0.15s; }
  .oaw-typing-dot:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes oaw-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.oaw-error-msg .oaw-bubble-msg { border-color: rgba(255, 120, 120, 0.4); }

.oaw-context-line,
.assistant-context-line {
  align-self: center;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--oaw-text-muted);
  margin: 2px 0 4px;
}

.oaw-empty {
  margin: auto;
  max-width: 280px;
  text-align: center;
  color: var(--oaw-text-muted);
  font-size: 12.5px;
}

.oaw-panel .oaw-empty p {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--oaw-text);
}

.oaw-empty ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.oaw-empty li {
  border: 1px solid var(--oaw-border);
  border-radius: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.05);
}

.oaw-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--oaw-border);
  flex-shrink: 0;
}

/* .oaw-panel prefix (not just .oaw-input-row) is load-bearing here, not
   stylistic - the sitewide `body:not(.auth-page) textarea { background:
   #ffffff; ... }` reset (see styles.css ~line 12619) has specificity (0,1,2),
   which beats a plain `.oaw-input-row textarea` (0,1,1) and silently forces
   the composer back to a solid white box on a dark panel. Two classes here
   push this to (0,2,1), which wins regardless of source order. */
.oaw-panel .oaw-input-row textarea {
  flex: 1;
  resize: none;
  max-height: 120px;
  min-height: 22px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--oaw-border);
  border-radius: 16px;
  padding: 10px 14px;
  color: var(--oaw-text);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.oaw-panel .oaw-input-row textarea::placeholder { color: var(--oaw-text-muted); }
.oaw-panel .oaw-input-row textarea:focus {
  border-color: var(--oaw-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(78, 163, 255, 0.2);
}

.oaw-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--oaw-accent), var(--oaw-accent-2));
  color: #04101f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms ease, opacity 120ms ease;
}
/* Same sitewide button reset problem as .oaw-icon-btn above - without this,
   36px of min-height is harmless here (already 36px) but 24px of padding
   and a light gray border would still leak through and crush the icon. */
.oaw-panel .oaw-send {
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: none;
  box-shadow: none;
}
.oaw-send svg { width: 17px; height: 17px; stroke: #04101f; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.oaw-send:not(:disabled):hover { transform: translateY(-1px); }
.oaw-send:disabled { opacity: 0.35; cursor: not-allowed; }
.oaw-send:focus-visible { outline: 2px solid var(--oaw-accent-2); outline-offset: 2px; }

.oaw-footnote {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--oaw-text-muted);
  padding: 0 14px 12px;
  flex-shrink: 0;
}

/* Inline "save this as a memory?" chip - appears once, right after a live
   answer where the model detected a correction/definition (see
   extractMemorySuggestion in server.js). Never persisted or re-shown on
   reload; approving or dismissing just removes it from the DOM. */
.oaw-suggestion {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 86%;
  margin-left: 34px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(78, 163, 255, 0.1);
  border: 1px solid var(--oaw-border-strong);
}
.oaw-suggestion-glyph {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--oaw-accent), var(--oaw-accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.oaw-suggestion-glyph svg { width: 12px; height: 12px; stroke: #04101f; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oaw-suggestion-body { flex: 1; min-width: 0; }
.oaw-suggestion-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oaw-accent-2);
  margin-bottom: 3px;
}
.oaw-suggestion-text { font-size: 12px; color: var(--oaw-text); line-height: 1.45; }
.oaw-suggestion-text b { color: var(--oaw-accent-2); }
.oaw-suggestion-actions { display: flex; gap: 6px; margin-top: 8px; }
.oaw-suggestion-actions button {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
}
.oaw-suggestion-approve { background: var(--oaw-accent-2); color: #04101f; }
.oaw-suggestion-dismiss { background: rgba(255, 255, 255, 0.08); color: var(--oaw-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .oaw-msg-row, .oaw-typing-dot, .oaw-status-dot { animation: none !important; }
  .oaw-panel { transition: opacity 120ms ease !important; }
}

@media (max-width: 480px) {
  .oaw-panel:not(.oaw-panel--docked) {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
  }
  .oaw-bubble { right: 16px; bottom: 16px; }
}

/* Docked (dedicated /assistant.html) page shell - a soft light-blue gradient
   field for the dark glass card to sit on, so the translucency/blur actually
   reads instead of just showing flat page-white through it. Scoped to this
   one page only via .assistant-page. */
.assistant-page .assistant-layout {
  height: calc(100vh - 150px);
  min-height: 480px;
  padding: 20px;
  background: radial-gradient(130% 150% at 15% -15%, #dce9fb 0%, #eef4fc 45%, #f7fafd 100%);
  border-radius: 22px;
  display: flex;
}

/* Assistant Memory admin page - a normal light "2030" glass card, matching
   .jitc-dialog-panel elsewhere, not the dark chat surface above. */
.memory-layout { padding: 20px 24px 32px; max-width: 760px; }
.memory-card {
  background: #ffffff;
  border: 1px solid rgba(21, 94, 239, 0.16);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(11, 31, 58, 0.1), 0 2px 8px rgba(11, 31, 58, 0.05);
  overflow: hidden;
}
.memory-card-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e2eaf5;
  background: linear-gradient(180deg, rgba(21, 94, 239, 0.04) 0%, rgba(21, 94, 239, 0) 100%);
}
.memory-card-head h2 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; color: #0b1f3a; }
.memory-card-head .sub { margin: 0; font-size: 12.5px; color: #5b6773; line-height: 1.55; max-width: 56ch; }
.memory-rows { display: flex; flex-direction: column; }
.memory-row {
  display: grid;
  grid-template-columns: minmax(0, 190px) 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid #e2eaf5;
}
.memory-row:hover { background: #fbfdff; }
.memory-term { font-size: 13px; font-weight: 700; color: #0b1f3a; }
.memory-term span {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #155eef;
}
.memory-definition { font-size: 13px; color: #5b6773; line-height: 1.5; }
.memory-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #e2eaf5;
  background: #fff;
  color: #93a1b5;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.memory-delete-btn:hover { border-color: #f3b4b4; color: #dc3545; background: #fff5f5; }
.memory-empty { padding: 26px 22px; text-align: center; color: #93a1b5; font-size: 13px; }
.memory-new-row {
  display: grid;
  grid-template-columns: minmax(0, 190px) 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 22px;
  background: #fbfdff;
}
.memory-new-row input {
  font: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid #dfe6f0;
  border-radius: 9px;
  background: #fff;
  color: #0b1f3a;
}
.memory-new-row input:focus { outline: 2px solid rgba(21, 94, 239, 0.18); border-color: #93c5fd; }
.memory-save {
  padding: 9px 16px;
  border-radius: 9px;
  border: none;
  background: #155eef;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 640px) {
  .memory-row, .memory-new-row { grid-template-columns: 1fr; gap: 6px; }
}

/* Notifications admin page - same glass-card language as Assistant Memory
   above, with a richer row/form shape for the extra rule fields. */
.notif-layout { padding: 20px 24px 32px; max-width: 880px; }
.notif-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid #e2eaf5;
}
.notif-row:hover { background: #fbfdff; }
.notif-name { font-size: 13px; font-weight: 700; color: #0b1f3a; }
.notif-name span {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #155eef;
}
.notif-detail { font-size: 12.5px; color: #5b6773; line-height: 1.5; }
.notif-detail div + div { margin-top: 2px; }
.notif-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #5b6773;
  cursor: pointer;
  user-select: none;
}
.notif-toggle input { margin: 0; }
.notif-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #e2eaf5;
  background: #fff;
  color: #93a1b5;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.notif-delete-btn:hover { border-color: #f3b4b4; color: #dc3545; background: #fff5f5; }
.notif-edit-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e2eaf5;
  background: #fff;
  color: #155eef;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.notif-edit-btn:hover { border-color: #93c5fd; background: #f2f7ff; }
.notif-empty { padding: 26px 22px; text-align: center; color: #93a1b5; font-size: 13px; }
.notif-new-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding: 18px 22px;
  background: #fbfdff;
}
.notif-new-row .notif-field-full { grid-column: 1 / -1; }
.notif-new-row label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #5b6773;
}
.notif-new-row input,
.notif-new-row select {
  font: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid #dfe6f0;
  border-radius: 9px;
  background: #fff;
  color: #0b1f3a;
}
.notif-new-row input:focus,
.notif-new-row select:focus { outline: 2px solid rgba(21, 94, 239, 0.18); border-color: #93c5fd; }
.notif-threshold-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#notifFormTitle {
  font-size: 12.5px;
  font-weight: 800;
  color: #155eef;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#notifFormTitle:empty { display: none; }
.notif-form-actions { display: flex; align-items: center; gap: 10px; }
.notif-save {
  padding: 9px 16px;
  border-radius: 9px;
  border: none;
  background: #155eef;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  justify-self: start;
}
.notif-cancel-edit {
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid #dfe6f0;
  background: #fff;
  color: #5b6773;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.notif-cancel-edit:hover { border-color: #93a1b5; }

@media (max-width: 720px) {
  .notif-row { grid-template-columns: 1fr; gap: 6px; }
  .notif-new-row { grid-template-columns: 1fr; }
}