:root {
  --navy: #0d1b2a;
  --navy-2: #13283d;
  --line: #d9e0e8;
  --text: #18212b;
  --muted: #697586;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --accent: #2b6cb0;
  --danger: #b42318;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
}
button, input, select, textarea {
  font: inherit;
}
button {
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  padding: 9px 12px;
  cursor: pointer;
}
button.ghost {
  background: #eef3f8;
  color: var(--text);
}
button.send-mcl-button {
  background: #198754;
  color: #fff;
}
button.send-mcl-button.sent-mcl,
button.send-mcl-button:disabled {
  background: #aab4bf;
  color: #fff;
  cursor: default;
}
button.danger-action {
  background: #b42318;
  color: #fff;
}
.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #e9eef3;
}
.login-panel {
  width: min(380px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 18px 60px rgba(13, 27, 42, .12);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--navy);
  color: #fff;
  border-radius: 7px;
  font-weight: 800;
}
.brand-mark.small {
  width: 34px;
  height: 34px;
  font-size: 13px;
}
.login-panel h1 {
  margin: 14px 0 22px;
  font-size: 25px;
}
.stack {
  display: grid;
  gap: 12px;
}
label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  padding: 8px 9px;
  min-height: 36px;
}
.form-message {
  margin: 0;
  min-height: 18px;
  color: var(--danger);
  font-size: 12px;
}
.transport-job-context {
  margin: 0;
  min-height: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.app-shell {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: var(--navy);
  color: #fff;
  padding: 16px 12px;
}
.sidebar-brand {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 4px 18px;
}
.sidebar-brand span {
  display: block;
  color: #afbdd0;
  font-size: 12px;
  margin-top: 3px;
}
.sidebar nav {
  display: grid;
  gap: 4px;
}
.sidebar nav button {
  text-align: left;
  background: transparent;
  color: #dce6f2;
  padding: 9px 10px;
}
.sidebar nav button.active,
.sidebar nav button:hover {
  background: var(--navy-2);
}
.main-area {
  min-width: 0;
}
.topbar {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.company-box {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.company-box select { min-width: 260px; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.page-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.page-header h2 {
  margin: 0;
  font-size: 22px;
}
.page-header p {
  margin: 4px 0 0;
  color: var(--muted);
}
.filters {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page {
  display: none;
  padding: 18px;
}
.page.active { display: block; }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.metric-grid article,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.metric-grid article {
  padding: 16px;
}
.metric-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.metric-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}
.split {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
#jobsPage .split {
  grid-template-columns: minmax(220px, 15%) minmax(0, 85%);
}
#jobsPage #jobForm {
  font-size: 12px;
}
#jobsPage #jobForm .form-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
#jobsPage #jobForm textarea {
  min-height: 64px;
}
#jobsPage .table-wrap table {
  min-width: 1180px;
}
tr.is-selected {
  background: #eef6ff;
  box-shadow: inset 3px 0 0 var(--accent);
}
.transport-layout {
  grid-template-columns: minmax(720px, 1.05fr) minmax(420px, .95fr);
}
.transport-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.transport-page-toolbar h3 { margin: 0; }
.transport-page-toolbar p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
#transportPage .transport-layout { display: block; width: 100%; max-width: none; }
#transportPage .transport-board-panel { width: 100%; }
.transport-form-panel { margin-bottom: 14px; }
.transport-jobs-table { overflow-x: auto; }
#transportPage .transport-jobs-table table { min-width: 1580px; border-spacing: 0; }
#transportPage .transport-jobs-table {
  text-transform: uppercase;
}
#transportPage .transport-jobs-table th,
#transportPage .transport-jobs-table td {
  padding: 7px 5px;
  font-size: 14px;
  line-height: 1.3;
  vertical-align: middle;
}
#transportPage .transport-jobs-table th {
  padding: 7px 5px;
  font-size: 13px;
  line-height: 1.25;
  vertical-align: middle;
}
#transportPage .transport-jobs-table strong {
  font-size: 14px;
}
#transportPage .transport-jobs-table small {
  font-size: 12px;
  line-height: 1.25;
}
#transportPage .transport-trip-actions button,
#transportPage .transport-trip-actions small {
  text-transform: uppercase;
}
#transportPage .transport-jobs-table th:nth-child(10),
#transportPage .transport-jobs-table th:nth-child(11),
#transportPage .transport-jobs-table th:nth-child(12),
#transportPage .transport-jobs-table td:nth-child(10),
#transportPage .transport-jobs-table td:nth-child(11),
#transportPage .transport-jobs-table td:nth-child(12) { width: 150px; padding-left: 5px; padding-right: 5px; }
.transport-stage-cell {
  position: relative;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 5px;
  padding: 6px 8px;
}
.transport-stage-cell strong,
.transport-stage-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
}
.transport-stage-cell strong {
  flex: 1 1 auto;
  min-width: 0;
}
.transport-stage-cell small {
  flex: 0 0 auto;
}
.transport-stage-cell.stage-completed { background: #d9f2df; color: #176b32; }
.transport-stage-cell.stage-in-progress,
.transport-stage-cell.stage-assigned { background: #fff0c2; color: #8a5a00; }
.transport-stage-cell.stage-planned,
.transport-stage-cell.stage-ready { background: #edf0f3; color: #59636e; }
.transport-stage-cell.stage-cancelled { background: #fbe0df; color: #a12520; }
.transport-stage-status.stage-completed { background: #d9f2df; color: #176b32; }
.transport-stage-status.stage-in-progress,
.transport-stage-status.stage-assigned { background: #fff0c2; color: #8a5a00; }
.transport-stage-status.stage-planned,
.transport-stage-status.stage-ready { background: #edf0f3; color: #59636e; }
.transport-stage-status.stage-cancelled { background: #fbe0df; color: #a12520; }
.transport-stage-warning {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f4b400;
}
.transport-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.transport-movements-content { padding-top: 10px; }
.movement-timeline-row { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 12px; }
.movement-timeline-card { flex: 0 0 230px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 190px; }
.movement-timeline-card.has-incident { border-color: #f4d77b; }
.incident-notification {
  position: relative;
  flex: 0 0 180px;
  align-self: stretch;
  border: 1px solid #f0d37a;
  background: #fff7d6;
  color: #6f5200;
  border-radius: 7px;
  padding: 8px 8px 8px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.incident-notification > div:first-of-type { display: grid; gap: 2px; }
.route-anywhere { font-size: 0.72em; font-weight: 600; opacity: 0.7; letter-spacing: 0.02em; }
.incident-notification .incident-performer { margin-top: 6px; }
.dispatch-band-0 { box-shadow: inset 4px 0 0 #2563eb; }
.dispatch-band-1 { box-shadow: inset 4px 0 0 #16a34a; }
.dispatch-band-2 { box-shadow: inset 4px 0 0 #9333ea; }
.dispatch-band-3 { box-shadow: inset 4px 0 0 #ea580c; }
.dispatch-band-4 { box-shadow: inset 4px 0 0 #0891b2; }
.dispatch-band-5 { box-shadow: inset 4px 0 0 #db2777; }
.record-bottom { margin-top: auto; display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed #cbd5e1; }
.record-bottom-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.record-bottom-actions button { padding: 5px 10px; font-size: 13px; }
.record-bottom-actions .dispatch-sent { background: #dcfce7; border-color: #86efac; color: #166534; }
.record-bottom-actions .recall-dispatch { background: #fffbeb; border-color: #fcd34d; color: #b45309; }
.dispatch-job { font-weight: 700; }
.dispatch-state-needs_update { color: #b45309; }
.dispatch-state-sent, .dispatch-state-completed { color: #15803d; }
.dispatch-orphan { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; padding: 8px 10px; border: 1px solid #fca5a5; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 13px; }
.incident-notification-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.incident-notification { flex-direction: column; align-items: stretch; }
.incident-notification .transport-stage-warning { top: 8px; left: 6px; right: auto; }
.movement-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.movement-card-head > span:first-child { font-weight: 800; color: var(--muted); }
.movement-card-meta { display: grid; gap: 3px; color: var(--muted); font-size: 12px; }
.movement-card-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.movement-assignment-preview {
  display: grid;
  gap: 8px;
  min-width: 980px;
}
.movement-preview-header,
.movement-preview-row {
  display: grid;
  grid-template-columns: 34px minmax(130px, 1.1fr) minmax(130px, 1.15fr) minmax(130px, 1.15fr) minmax(130px, 1.15fr) minmax(160px, .95fr) minmax(110px, .75fr) minmax(140px, .9fr);
  gap: 6px;
  align-items: end;
}
.movement-preview-two-point .movement-preview-header,
.movement-preview-two-point .movement-preview-row {
  grid-template-columns: 34px minmax(130px, 1.1fr) minmax(130px, 1.15fr) minmax(130px, 1.15fr) minmax(160px, .95fr) minmax(110px, .75fr) minmax(140px, .9fr);
}
.movement-preview-header {
  padding: 0 8px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.movement-preview-row {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}
.movement-preview-row > strong {
  align-self: center;
  color: var(--muted);
}
.movement-preview-row label {
  margin: 0;
  font-size: 0;
}
.movement-preview-row select,
.movement-preview-row input {
  min-width: 0;
  font-size: 13px;
}
.movement-preview-static {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef2f7;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}
.transport-trip-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #fff;
}
.transport-trip-card select {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 15px;
}
.transport-trip-card input,
.transport-trip-card textarea {
  font-size: 14px;
}
.transport-trip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.transport-trip-head strong {
  color: var(--accent);
  font-size: 16px;
}
.transport-trip-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  flex: 1;
}
.transport-form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 4px;
}
.transport-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  grid-template-areas:
    "job schedule schedule"
    "performer notes notes"
    "movement movement movement";
  gap: 12px;
  align-items: start;
}
.transport-section {
  min-width: 0;
  margin: 0;
  background: #fbfcfe;
  border-color: #dfe5ec;
  padding: 11px;
}
.transport-section-a { grid-area: job; }
.transport-section-b { grid-area: schedule; }
.transport-section-e { grid-area: performer; }
.transport-section-f { grid-area: movement; overflow-x: auto; }
.transport-section-g { grid-area: notes; }
.transport-section > label,
.transport-section-grid label {
  min-width: 0;
}
.transport-section legend {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 800;
}
.transport-section label > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
/* B. Schedule & Route: one line per point — place, date, time */
.transport-stop-rows { display: grid; gap: 6px; }
.transport-stop-row {
  display: grid;
  grid-template-columns: 130px minmax(160px, 1fr) 150px 120px;
  gap: 8px;
  align-items: center;
}
.transport-stop-label { color: var(--muted); font-size: 11px; font-weight: 800; }
.transport-stop-row input { min-width: 0; width: 100%; }
.transport-stop-head span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.transport-service-type { grid-column: 1 / -1; }
.transport-trip-status { margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.transport-equipment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.transport-detail-view {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.transport-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.transport-detail-head h3 {
  margin: 6px 0 2px;
  font-size: 18px;
}
.transport-detail-head p,
.transport-detail-view p {
  margin: 4px 0;
  line-height: 1.55;
}
.transport-detail-grid,
.transport-detail-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.transport-detail-strip {
  display: flex;
  align-items: stretch;
  overflow-x: hidden;
  padding-bottom: 4px;
}
.transport-detail-grid section,
.transport-detail-strip section,
.transport-detail-view > section,
.transport-detail-view details {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
}
.transport-detail-strip section {
  min-width: 0;
  margin-top: 0;
}
/* The four trip sections share the top row; Movements gets its own full-width row below. */
.transport-detail-strip { flex-wrap: wrap; }
.transport-detail-strip > section:nth-child(1) { flex: 1.2 1 0; min-width: 0; }
.transport-detail-strip > section:nth-child(2) { flex: 1 1 0; min-width: 0; }
.transport-detail-strip > section:nth-child(3) { flex: 1.8 1 0; min-width: 0; }
.transport-detail-strip > section:nth-child(4) { flex: 1 1 0; min-width: 0; }
.transport-detail-strip .transport-movements-panel {
  flex: 1 1 100%;
  min-width: 0;
}
.transport-detail-strip .transport-movements-content {
  padding-top: 0;
  min-width: 0;
}
.transport-detail-strip .movement-timeline-card {
  flex: 1 0 215px;
  min-height: 168px;
}
.transport-trip-costs-panel {
  margin-top: 10px;
}
.trip-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.trip-finish-bar { display: flex; align-items: center; gap: 8px; }
.trip-finish-button { background: #15803d; }
.trip-finished { color: #15803d; font-weight: 600; font-size: 12px; }
.trip-pnl-table { max-width: 560px; }
.trip-pnl-table td.num { text-align: right; white-space: nowrap; }
.trip-pnl-table tr.pnl-head td { background: #f1f5f9; }
.trip-pnl-table tr.pnl-profit td { background: #ecfdf5; font-size: 13px; }
.job-close-panel { border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; }
.job-close-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.transport-detail-view h4 {
  margin: 0 0 5px;
  font-size: 12px;
}
.transport-detail-view pre {
  white-space: pre-wrap;
  margin: 8px 0 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
}
.transport-list-heading {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 12px;
}
.transport-board-date-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.transport-board {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}
.transport-board-grid {
  display: grid;
  grid-template-columns: minmax(180px, .85fr) repeat(var(--movement-count), minmax(150px, 1fr));
  min-width: 780px;
}
.transport-board-header-cell {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  background: #eef3f7;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.transport-board-row { display: contents; }
.transport-board-unit,
.transport-board-cell {
  min-height: 112px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}
.transport-board-unit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.transport-board-unit strong { font-size: 13px; }
.transport-board-unit small,
.transport-board-cell small { display: block; color: var(--muted); font-size: 11px; }
.transport-board-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 3px solid #cbd5df;
}
.transport-board-cell-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: auto;
}
.transport-board-cell strong { font-size: 14px; color: var(--ink); }
.transport-board-cell.state-completed { border-left-color: #198754; background: #eaf7ee; }
.transport-board-cell.state-in_progress { border-left-color: #d58b00; background: #fff8e6; }
.transport-board-cell.state-cancelled { border-left-color: #c0392b; background: #fff0ef; opacity: .78; }
.transport-board-cell.is-incident { border-top: 3px solid #d58b00; }
.transport-board-incident {
  position: relative;
  border-left-color: #f4b400;
  background: #fff7d6;
  color: #6f5200;
}
.transport-board-incident .transport-stage-warning { top: 7px; left: 6px; right: auto; }
.incident-count, .incident-badge { display: inline-block; color: #9a6700; font-weight: 700; font-size: 11px; }
.incident-row { background: #fffaf0; }
.incident-create-form,
.movement-create-form {
  border: 1px solid #ead9a6;
  background: #fffdf5;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
}
.incident-form-grid,
.movement-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
}
.incident-form-grid label,
.movement-form-grid label {
  min-width: 0;
}
.incident-form-grid input,
.incident-form-grid select,
.incident-form-grid textarea,
.movement-form-grid input,
.movement-form-grid select {
  width: 100%;
  min-height: 42px;
}
.incident-form-grid .wide-field {
  grid-column: 1 / -1;
}
.incident-form-grid .wide-field textarea {
  min-height: 72px;
}
.transport-board-cell.is-current { box-shadow: inset 0 0 0 2px var(--accent); }
.transport-board-cell-empty,
.transport-board-empty { color: var(--muted); text-align: center; }
.transport-board-empty { grid-column: 1 / -1; padding: 24px; }
.movement-performer-edit {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}
.movement-performer-edit summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.movement-performer-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.row-actions { white-space: nowrap; }
.row-actions button + button { margin-left: 6px; }
.danger-button { color: #b42318; border-color: #e5b7b3; background: #fff7f6; }
.direction-badge,
.status-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 6px;
  background: #e7eef5;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
.status-badge { background: #eef4ee; color: #276749; }
.transport-list-filters { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.panel {
  padding: 14px;
  min-width: 0;
}
.panel h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.panel-head h3 { margin: 0; }
.panel-head span {
  color: var(--muted);
  font-size: 12px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.compact-grid {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
}
.freight-split {
  margin-top: 14px;
}
.workflow-row,
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}
.workflow-row button {
  background: #e8edf3;
  color: var(--text);
  padding: 7px 8px;
  font-size: 12px;
}
.workflow-row button.active {
  background: var(--accent);
  color: #fff;
}
.inline-form input,
.inline-form select {
  width: auto;
  min-width: 130px;
}
.transport-operational-row {
  display: grid;
  grid-template-columns: 44px minmax(320px, 1fr) 150px 110px 88px;
  align-items: center;
}
.transport-operational-row > strong {
  grid-column: 1;
}
.transport-row-delete {
  background: #f7e9e7;
  color: var(--danger);
  padding: 7px 9px;
}
.transport-operational-row > input[hidden] {
  display: none;
}
.transport-operational-row .transport-location-field {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}
.transport-operational-row .transport-date-field {
  grid-column: 3;
  width: 100%;
  min-width: 0;
}
.transport-operational-row .transport-time-field {
  grid-column: 4;
  width: 100%;
  min-width: 0;
}
.transport-operational-row > :not(strong, [hidden], .transport-row-delete, .transport-location-field, .transport-date-field, .transport-time-field) {
  grid-column: span 1;
}
@media (max-width: 680px) {
  .transport-operational-row {
    grid-template-columns: 40px minmax(0, 1fr) 122px 74px 64px;
  }
}
fieldset {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px;
}
legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 12px;
}
.checkbox-row input {
  width: auto;
  min-height: auto;
}
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  max-height: 58vh;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: 13px;
}
th, td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
th {
  background: #f0f3f7;
  font-size: 12px;
  color: var(--muted);
}
td button {
  padding: 5px 8px;
}
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.subnav button {
  background: #e8edf3;
  color: var(--text);
}
.subnav button.active {
  background: var(--navy-2);
  color: #fff;
}
.job360 {
  margin-top: 14px;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.tabs button {
  background: #edf2f7;
  color: var(--text);
  padding: 7px 9px;
  font-size: 12px;
}
.tabs button.active {
  background: var(--accent);
  color: #fff;
}
pre {
  white-space: pre-wrap;
  background: #f6f8fa;
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 6px;
  max-height: 280px;
  overflow: auto;
}
.empty-state {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
}
.empty-state h3 {
  margin: 0 0 8px;
}
.empty-state p {
  margin: 0;
  color: var(--muted);
}
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 70px minmax(0, 1fr); }
  .sidebar-brand div:not(.brand-mark) { display: none; }
  .sidebar nav button { font-size: 0; }
  .sidebar nav button::first-letter { font-size: 13px; }
  .split, .metric-grid { grid-template-columns: 1fr; }
  .transport-layout { grid-template-columns: 1fr; }
  .transport-section-grid,
  .transport-detail-grid,
  .transport-detail-strip { grid-template-columns: 1fr; }
  .transport-section-grid {
    grid-template-areas:
      "job performer"
      "schedule schedule"
      "notes notes"
      "movement movement";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .transport-detail-strip { display: grid; }
  .transport-detail-strip .transport-movements-panel { min-width: 0; }
  .topbar, .page-header { align-items: flex-start; flex-direction: column; height: auto; }
}
@media (max-width: 680px) {
  .transport-list-filters { grid-template-columns: 1fr; }
  .transport-stop-row { grid-template-columns: 1fr 1fr; }
  .transport-stop-row .transport-stop-label,
  .transport-stop-row [data-transport-location] { grid-column: 1 / -1; }
  .transport-stop-head { display: none; }
  .transport-section-grid {
    grid-template-areas:
      "job"
      "schedule"
      "performer"
      "notes"
      "movement";
    grid-template-columns: 1fr;
  }
  .transport-equipment-grid { grid-template-columns: 1fr; }
}

/* Mileage per dispatch job, fuel price and km/L settings */
.transport-mileage-panel table { font-size: 12px; }
/* Trip detail: charges, mileage, tire and maintenance side by side, compact */
.trip-cards-row { display: grid; grid-template-columns: 1.5fr 1.3fr 1fr 1fr; gap: 10px; margin-top: 10px; align-items: start; }
.trip-cards-row > section { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; min-width: 0; margin-top: 0; }
.trip-cards-row h4 { margin: 0 0 6px; font-size: 13px; }
.trip-cards-row .trip-panel-head h4 { margin: 0; }
.trip-mini-table { width: 100%; min-width: 0; font-size: 12px; }
.trip-cards-row p.muted { margin: 0; font-size: 12px; }
.trip-mini-table th, .trip-mini-table td { padding: 3px 4px; }
.trip-cards-row .trip-cost-form { display: grid; grid-template-columns: 1fr 1fr; }
.trip-cards-row .trip-cost-form input, .trip-cards-row .trip-cost-form select { min-width: 0; width: 100%; }
.trip-cards-row .trip-cost-form label:first-child { grid-column: 1 / -1; }
@media (max-width: 1200px) { .trip-cards-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .trip-cards-row { grid-template-columns: 1fr; } }
.transport-mileage-total td { font-weight: 800; border-top: 2px solid var(--line); }
.fuel-price-row { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.fuel-price-row label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; }
.fuel-price-row input { width: 150px; }
.fuel-price-periods { display: grid; gap: 8px; margin-bottom: 12px; }
.fuel-price-periods h4 { margin: 0; }
.fuel-price-periods p { margin: 0; font-size: 12px; }
.km-per-liter-input { width: 80px; }
.km-per-liter-input.saved-flash { border-color: #22c55e; background: #f0fdf4; }

/* Trip costs: summary, table and the office entry form */
.trip-cost-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; margin-bottom: 8px; }
.trip-cost-summary b { margin-left: 4px; }
.trip-cost-total { padding-left: 18px; border-left: 2px solid var(--line); }
.trip-cost-advance-total { color: #b45309; }
.trip-cost-advance { font-size: 10px; font-weight: 800; color: #b45309; text-transform: uppercase; }
.trip-cost-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 8px; }
.trip-cost-form label { display: grid; gap: 3px; font-size: 11px; font-weight: 700; }
.trip-cost-form input, .trip-cost-form select { min-width: 120px; }
.vehicle-cost-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 6px 0; }
.vehicle-cost-form strong { width: 100%; font-size: 12px; }
.vehicle-cost-form label { display: grid; gap: 3px; font-size: 11px; font-weight: 700; }

/* Accounting: driver advance */
.accounting-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.accounting-tabs button.active { background: var(--navy); color: #fff; }
/* Accounting dashboard: month picker, four month totals, grouped bars for the year */
.acc-dash-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-dash-head h3 { margin: 0; }
.acc-dash-head h3 span { color: var(--muted); font-weight: 600; }
.acc-dash-year { display: flex; align-items: center; gap: 8px; }
.acc-dash-months { display: flex; flex-wrap: wrap; gap: 4px; }
.acc-dash-months button { padding: 5px 10px; font-size: 12px; background: #fff; color: var(--text); border: 1px solid var(--line); }
.acc-dash-months button.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.acc-dash-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.acc-dash-tile { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; background: #fff; border-top: 4px solid var(--tile-color); }
.acc-dash-tile-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.acc-dash-tile-label i, .acc-dash-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--tile-color); }
.acc-dash-tile b { font-size: 24px; color: var(--text); font-variant-numeric: tabular-nums; }
.acc-dash-tile small { color: var(--muted); font-size: 11px; }
.acc-dash-chart-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.acc-dash-chart-head h4 { margin: 0; }
.acc-dash-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text); }
.acc-dash-legend span { display: flex; align-items: center; gap: 5px; }
.acc-dash-chart svg { width: 100%; height: auto; display: block; }
.acc-dash-chart .acc-grid { stroke: #eef1f4; }
.acc-dash-chart .acc-base { stroke: #c5ccd5; }
.acc-dash-chart .acc-axis { font-size: 11px; fill: var(--muted); }
.acc-month { cursor: pointer; }
.acc-month .acc-band { fill: transparent; }
.acc-month:hover .acc-band { fill: #f4f6f8; }
.acc-month.is-picked .acc-band { fill: #e8eef6; }
.acc-month.is-picked .acc-axis { fill: var(--text); font-weight: 700; }
.acc-dash-table summary { cursor: pointer; font-size: 12px; font-weight: 700; }
.acc-dash-table table { min-width: 0; }
.acc-dash-note { font-size: 11px; margin: 0; }
#accDashMessage:empty { display: none; }
.acc-dash-legend span { white-space: nowrap; }
.acc-dash-legend { flex-wrap: wrap; }
.acc-dash-chart { overflow-x: auto; }
.acc-dash-chart svg { min-width: 640px; }
@media (max-width: 900px) { .acc-dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acc-dash-tile b { font-size: 18px; } }
.advance-week-bar { gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.advance-week-bar h3 { margin: 0 8px; }
.advance-status { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.advance-ok { color: #15803d; }
.advance-status.advance-ok { background: #dcfce7; }
.advance-status.advance-low { background: #fef9c3; color: #a16207; }
.advance-over { color: #b91c1c; }
.advance-status.advance-over { background: #fee2e2; }
.advance-actions { display: flex; align-items: center; gap: 10px; }
.advance-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.advance-form label { display: grid; gap: 3px; font-size: 11px; font-weight: 700; }
.advance-form strong { width: 100%; }
.advance-entry { font-size: 12px; }
.advance-in { color: #15803d; }
.advance-transfers { width: 100%; margin: 0; padding-left: 18px; font-size: 12px; }
.link-button { background: none; border: none; padding: 0; color: var(--blue, #1d4ed8); font-weight: 700; cursor: pointer; text-align: left; }
/* Accounting: AR */
.ar-tabs button { font-size: 12px; }
.ar-reimbursements { display: grid; gap: 4px; }
.ar-check { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.ar-wide { flex: 1 1 360px; }
.ar-wide input { width: 100%; }
.ar-row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
#arServiceLines input[data-ar-field="description"] { min-width: 320px; }
#arServiceLines input[type="number"], #arReceiptLines input[type="number"] { width: 110px; }
.short-name-input { width: 110px; }
.short-name-input.saved-flash { border-color: #22c55e; background: #f0fdf4; }

.sub-customer-block { border-top: 1px solid #e2e8f0; padding-top: 8px; }
.sub-customer-row { border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.sub-customer-row legend { font-size: 12px; font-weight: 600; padding: 0 4px; }
.sub-customer-actions { display: flex; gap: 8px; margin-top: 6px; }
#masterFields .wide-field { grid-column: 1 / -1; }

/* Role rights: body.no-<right> hides the buttons that right is needed for. */
.view-only-badge { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: 12px; font-weight: 600; }
.view-only-badge[hidden] { display: none; }
body.no-accounting #mainNav [data-page="accounting"],
body.no-accounting [data-job-reopen],
body.no-jobs #jobForm, body.no-jobs [data-job-edit], body.no-jobs [data-job-delete],
body.no-transport #transportFormToggle, body.no-transport #transportForm,
body.no-transport [data-transport-edit], body.no-transport [data-transport-delete], body.no-transport [data-transport-detail-edit],
body.no-transport [data-board-action], body.no-transport [data-movement-action], body.no-transport [data-movement-dispatch], body.no-transport [data-dispatch-cancel],
body.no-transport [data-movement-generate], body.no-transport [data-incident-toggle-form], body.no-transport [data-incident-create],
body.no-transport [data-movement-edit], body.no-transport [data-movement-delete], body.no-transport .movement-performer-edit,
body.no-transport [data-trip-finish="costs"], body.no-transport [data-trip-cost-form], body.no-transport [data-trip-cost-delete], body.no-transport [data-job-close],
body.no-charges [data-trip-finish="charges"], body.no-charges [data-trip-charge-form], body.no-charges [data-trip-charge-delete],
body.no-customers [data-customer-edit],
body.no-rates #fleetPage .fuel-price-row, body.no-rates [data-fuel-price-delete], body.no-rates [data-wear-rate-delete],
body.no-fleet-cost .vehicle-cost-form, body.no-fleet-cost [data-fleet-cost-void],
body.no-fleet-docs #fleetDocumentForm, body.no-fleet-docs [data-fleet-document-edit], body.no-fleet-docs [data-fleet-document-deactivate],
body.no-freight #freightForm, body.no-freight #containerForm, body.no-freight #freeTimeForm, body.no-freight #importMilestoneButton,
body.no-freight.no-jobs #freightMoney [data-svc-form="cost"], body.no-freight.no-jobs #freightMoney [data-svc-finish="costs"], body.no-freight.no-jobs #freightMoney [data-svc-delete="costs"],
body.no-customs.no-jobs #customsMoney [data-svc-form="cost"], body.no-customs.no-jobs #customsMoney [data-svc-finish="costs"], body.no-customs.no-jobs #customsMoney [data-svc-delete="costs"],
body.no-freight.no-jobs.no-accounting #freightMoney [data-svc-form="charge"], body.no-freight.no-jobs.no-accounting #freightMoney [data-svc-finish="charges"], body.no-freight.no-jobs.no-accounting #freightMoney [data-svc-delete="charges"],
body.no-customs.no-jobs.no-accounting #customsMoney [data-svc-form="charge"], body.no-customs.no-jobs.no-accounting #customsMoney [data-svc-finish="charges"], body.no-customs.no-jobs.no-accounting #customsMoney [data-svc-delete="charges"],
body.no-customs #customsForm, body.no-customs #declarationForm, body.no-customs #inspectionForm, body.no-customs #dutyTaxForm, body.no-customs #customsFinancialForm { display: none !important; }
body.no-master .short-name-input, body.no-fleet .km-per-liter-input { pointer-events: none; border-color: transparent; background: transparent; }
body.no-jobs #jobsPage > .split { grid-template-columns: 1fr; }

.ar-invoice-columns { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(220px, 0.7fr); gap: 12px; align-items: start; }
.ar-invoice-column { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; display: grid; gap: 8px; }
.ar-invoice-column .panel-head { gap: 8px; align-items: flex-start; }
.ar-typed-lines { display: grid; gap: 8px; }
.ar-typed-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 1px dashed #cbd5e1; border-radius: 6px; padding: 8px; font-size: 12px; }
.ar-typed-line .ar-wide, .ar-typed-foot { grid-column: 1 / -1; }
.ar-typed-foot { display: flex; justify-content: space-between; align-items: center; }
.ar-invoice-summary { display: grid; gap: 6px; font-size: 13px; }
.ar-invoice-summary > div { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 1100px) { .ar-invoice-columns { grid-template-columns: 1fr; } }
.ar-invoice-column .ar-check { justify-content: flex-start; text-align: left; font-weight: 500; }
.ar-invoice-column .ar-check input { width: auto; flex: none; }
.ar-invoice-column .ar-check b { margin-left: auto; padding-left: 8px; }
.ar-invoice-column .panel-head button { white-space: nowrap; }
.ar-invoice-summary .ar-sum-total { font-weight: 700; border-top: 1px solid #e2e8f0; padding-top: 6px; }
/* Keep the invoice status and Process button in view while the trip columns scroll. */
.ar-sticky-invoice, .ar-sticky-close, .ar-sticky-action, .ar-sticky-unpaid { position: sticky; background: #fff; z-index: 1; }
.ar-sticky-unpaid { right: 0; width: 90px; min-width: 90px; max-width: 90px; text-align: center; }
.ar-sticky-action { right: 90px; width: 110px; min-width: 110px; max-width: 110px; }
.ar-sticky-close { right: 200px; width: 90px; min-width: 90px; max-width: 90px; text-align: center; white-space: nowrap; }
.ar-sticky-invoice { right: 290px; width: 130px; min-width: 130px; max-width: 130px; box-shadow: -4px 0 6px -4px rgba(15, 23, 42, 0.2); }
.ar-unpaid { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 4px; background: #fb923c; color: #000; font-size: 13px; font-weight: 700; }
.ar-inv-no { display: inline-block; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.ar-inv-no.is-unpaid { background: #e0f2fe; color: #075985; }
.ar-inv-no.is-paid { background: #dcfce7; color: #166534; }
thead .ar-sticky-invoice, thead .ar-sticky-close, thead .ar-sticky-action, thead .ar-sticky-unpaid { background: #f8fafc; }
/* Company picked right after login */
.company-pick-list { display: grid; gap: 8px; }
.company-pick { display: grid; gap: 2px; text-align: left; padding: 12px 14px; background: #fff; color: var(--text); border: 1px solid var(--line); }
.company-pick:hover { border-color: var(--navy); background: #f4f6f8; }
.company-pick span { font-size: 12px; font-weight: 400; color: var(--muted); }
/* Main dashboard: one card per module */
.dash-modules-title { margin: 22px 0 10px; font-size: 16px; }
.dash-modules-title small { font-size: 12px; font-weight: 400; }
.dash-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash-module { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: 8px; padding: 14px 16px; display: grid; gap: 6px; }
.dash-module h4 { margin: 0 0 4px; font-size: 15px; letter-spacing: .04em; }
.dash-module-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.dash-module-row span { color: var(--muted); }
.dash-module small { font-size: 12px; }
@media (max-width: 980px) { .dash-modules { grid-template-columns: 1fr; } }
/* Job list: one badge per service on the job, with where it stands */
.job-svc-cell { white-space: nowrap; }
.job-svc { display: inline-block; margin: 1px 4px 1px 0; padding: 2px 7px; border-radius: 10px; font-size: 11px; background: #eef2f6; color: var(--text); }
.job-svc b { font-weight: 700; }
.job-svc-frt { background: #e0f2fe; color: #075985; }
.job-svc-cus { background: #fef3c7; color: #92400e; }
.job-svc-trn { background: #dcfce7; color: #166534; }
.job360-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.job360-svc { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; font-size: 13px; }
.job360-svc h4 { margin: 0 0 2px; font-size: 13px; letter-spacing: .04em; }
.job360-svc div { display: flex; justify-content: space-between; gap: 10px; }
.job360-svc span { opacity: .75; }
.ar-scope { max-width: 320px; }
.job360-total { background: #f4f6f8; }
.cd-picks { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.cd-picks legend { font-size: 12px; color: var(--muted); font-weight: 700; }
.cd-picks label:last-child { flex: 1 1 180px; }
.cd-picks .ar-check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text); font-weight: 600; }
.cd-picks input[type=checkbox] { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; flex: none; }
.cd-picks label:last-child { display: grid; width: 100%; }