:root {
  --fleet-ink: #1f2933;
  --fleet-muted: #667789;
  --fleet-line: #dfe5ec;
  --fleet-panel: #ffffff;
  --fleet-page: #f4f6f8;
  --fleet-sidebar: #182230;
  --fleet-sidebar-soft: #263446;
  --fleet-accent: #26706f;
  --fleet-warning: #d89216;
  --sdc-gold: #f4b942;
  --sdc-gold-hover: #dfa323;
  --sdc-gold-border: #c98f16;
  --sdc-action-text: #000000;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--fleet-page);
  color: var(--fleet-ink);
  min-width: 320px;
  /* Any wide element (table, toolbar, form row) should scroll within its
     own container - the page itself must never scroll sideways. */
  overflow-x: hidden;
}

.app-shell {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--fleet-sidebar);
  color: #f7fafc;
  padding: 24px 18px;
  position: relative;
}

/* "Make the dark blue section collapsible so the main page on the
   right has a larger view on the desktop" (2026-09-11) - desktop only
   (the mobile drawer below is a completely different, already-working
   mechanism, untouched). Collapsed: sidebar shrinks to an icon-only
   rail, .app-shell's grid column shrinks to match so .content actually
   gets the freed-up width rather than just centering in the same
   space. State persists per-browser (sdc_sidebar_collapsed,
   toggleSidebarCollapsed/applyStoredSidebarCollapsed in dashboard.js). */
@media (min-width: 821px) {
  .app-shell.sidebar-collapsed {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .sidebar-collapsed .sidebar {
    padding-left: 10px;
    padding-right: 10px;
    overflow: visible;
  }

  .sidebar-collapsed .brand span,
  .sidebar-collapsed .module-nav a span,
  .sidebar-collapsed .sidebar-identity {
    display: none;
  }

  .sidebar-collapsed .brand {
    justify-content: center;
  }

  .sidebar-collapsed .module-nav a {
    justify-content: center;
  }

  .sidebar-collapsed .module-nav a.module-sub-link {
    padding-left: 12px;
  }
}

.sidebar-collapse-toggle {
  align-items: center;
  background: var(--fleet-sidebar-soft);
  border: none;
  border-radius: 50%;
  color: #f7fafc;
  display: none;
  height: 26px;
  justify-content: center;
  position: absolute;
  right: -13px;
  top: 28px;
  width: 26px;
  z-index: 5;
}

.sidebar-collapse-toggle:hover {
  background: var(--fleet-accent);
}

@media (min-width: 821px) {
  .sidebar-collapse-toggle {
    display: flex;
  }
}

.brand {
  align-items: center;
  color: #fff;
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  text-decoration: none;
}

.brand:hover {
  color: #fff;
}

.brand-mark {
  align-items: center;
  background: #e9b44c;
  border-radius: 8px;
  color: #1f2933;
  display: inline-flex;
  font-weight: 800;
  height: 46px;
  justify-content: center;
  width: 54px;
}

.brand small {
  color: #b8c4d4;
  display: block;
  font-size: .78rem;
}

.module-nav {
  display: grid;
  gap: 5px;
}

.module-nav a {
  border-radius: 7px;
  color: #dbe3ec;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
}

.sidebar-identity {
  border-top: 1px solid var(--fleet-sidebar-soft);
  margin-top: 24px;
  padding-top: 16px;
}

.sidebar-identity-card {
  background: var(--fleet-sidebar-soft);
  border-radius: 8px;
  display: block;
  margin-bottom: 8px;
  padding: 10px 12px;
}

.sidebar-identity-card strong {
  color: #fff;
  display: block;
  font-size: .92rem;
}

.sidebar-identity-card small {
  color: #b8c4d4;
}

/* View As (admin-only "see the app as another role" toggle - real
   server-side enforcement, see verifyRequest.js/getAuthHeaders). */
.sidebar-view-as {
  margin-bottom: 12px;
}

.sidebar-view-as .form-label {
  color: #b8c4d4;
}

.view-as-banner {
  align-items: center;
  background: linear-gradient(90deg, #7c2d12, #9a3412);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  font-size: .82rem;
  font-weight: 700;
  gap: 10px;
  justify-content: center;
  left: 0;
  padding: 8px 14px;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 3000;
}

.view-as-banner .btn {
  font-size: .78rem;
  padding: 2px 10px;
}

body.view-as-active .app-shell {
  margin-top: 40px;
}

.auth-gate {
  align-items: center;
  background: var(--fleet-sidebar);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.auth-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  max-width: 380px;
  padding: 32px;
  width: 100%;
}

.auth-brand {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.auth-brand strong {
  display: block;
}

.auth-brand small {
  color: #6b7785;
  display: block;
  font-size: .78rem;
}

.auth-footnote {
  color: #6b7785;
  font-size: .8rem;
  margin: 16px 0 0;
  text-align: center;
}

.module-nav a.active,
.module-nav a:hover {
  background: var(--fleet-sidebar-soft);
  color: #fff;
}

.module-nav a.parent-active {
  background: rgba(38, 52, 70, .58);
  color: #fff;
}

.module-nav a.module-sub-link {
  font-size: .88rem;
  margin-left: 24px;
  padding: 8px 10px;
  position: relative;
}

.module-nav a.module-sub-link::before {
  background: #536174;
  content: "";
  height: 1px;
  left: -13px;
  position: absolute;
  top: 50%;
  width: 9px;
}

.content {
  padding: 30px;
  /* min-width: 0 lets this grid column actually shrink below its content's
     natural width - without it, a wide descendant (table, toolbar) can
     force the whole grid track wider instead of scrolling in place. */
  min-width: 0;
  overflow-x: hidden;
}

/* .table-wrap had no rule of its own at all until now - a wide table
   inside it just got silently clipped by .content's overflow-x:hidden
   above (columns past the edge were invisible, not scrollable).
   Scrolling within the wrapper itself is what every table in this app
   actually needs, on any screen, not just mobile. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.topbar,
.module-heading {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.topbar h1,
.module-heading h2 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0;
}

.topbar-title-row {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

/* Hidden on desktop - .mobile-nav-toggle below only shows it under the
   mobile breakpoint, where the sidebar becomes a slide-in drawer
   instead of pushing every page's content down below the full nav
   list (confirmed live on an actual phone viewport, 2026-09-02 - the
   sidebar rendered as a full-height block ABOVE the content, so
   reaching anything meant scrolling past the entire nav first). */
.mobile-nav-toggle {
  align-items: center;
  background: var(--fleet-panel);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  color: var(--fleet-ink);
  display: none;
  flex: none;
  font-size: 1.2rem;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.mobile-nav-backdrop {
  display: none;
}

.topbar-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.eyebrow {
  color: var(--fleet-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.summary-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  margin-bottom: 24px;
}

.summary-card,
.module-card,
.data-panel {
  background: var(--fleet-panel);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
}

.summary-card {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 106px;
  padding: 18px;
}

.summary-card span {
  color: var(--fleet-muted);
  display: block;
  font-size: .85rem;
  font-weight: 700;
}

.summary-card strong {
  display: block;
  font-size: 2rem;
  line-height: 1.1;
  margin-top: 8px;
}

.summary-card i {
  color: var(--fleet-warning);
  font-size: 1.4rem;
}

.module-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.module-card {
  color: inherit;
  display: flex;
  gap: 16px;
  min-height: 148px;
  padding: 22px;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.module-card:hover {
  border-color: var(--fleet-warning);
  box-shadow: 0 14px 30px rgba(24, 34, 48, .09);
  color: inherit;
  transform: translateY(-2px);
}

.module-card i {
  color: var(--fleet-accent);
  font-size: 1.6rem;
}

.module-card h3,
.data-panel h3 {
  font-size: 1.05rem;
  letter-spacing: 0;
  margin: 0;
}

.module-card p {
  color: var(--fleet-muted);
  margin: 8px 0 0;
}

.table-stack {
  display: grid;
  gap: 18px;
}

/* Every direct child of a CSS grid defaults to min-width:auto, which
   sizes it to its content's intrinsic width instead of letting it
   shrink to the grid track - a wide table nested inside (even several
   plain <div> levels down) can force the whole #moduleTables column
   wider than the viewport instead of scrolling in its own
   .table-wrap/.table-responsive. Same root cause as .content's
   min-width:0 above, just one level deeper for anything rendered into
   #moduleTables through an extra wrapper div (e.g. the Mechanics
   module's #mechanicsHost/#mechanicsContent tab host, 2026-09-25 - the
   History tab's table bled off the right edge on mobile with no way to
   scroll it into view until this was added). */
.table-stack > * {
  min-width: 0;
}

.data-panel {
  overflow: hidden;
  padding: 18px;
}

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

.btn-primary,
.btn-outline-primary,
.import-error-download {
  --bs-btn-bg: var(--sdc-gold);
  --bs-btn-border-color: var(--sdc-gold-border);
  --bs-btn-color: var(--sdc-action-text);
  --bs-btn-hover-bg: var(--sdc-gold-hover);
  --bs-btn-hover-border-color: #b67e0f;
  --bs-btn-hover-color: #000;
  --bs-btn-active-bg: #c98f16;
  --bs-btn-active-border-color: #a8710b;
  --bs-btn-active-color: #000;
  --bs-btn-disabled-bg: #e5c673;
  --bs-btn-disabled-border-color: #c9aa5a;
  --bs-btn-disabled-color: #000000;
  background: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  font-weight: 800;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.import-error-download:hover,
.import-error-download:focus {
  background: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-outline-primary:disabled,
.btn-outline-primary.disabled,
.import-error-download:disabled,
.import-error-download.disabled {
  background: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  color: var(--bs-btn-disabled-color);
  opacity: .72;
}

.btn-primary i,
.btn-primary span,
.btn-outline-primary i,
.btn-outline-primary span,
.import-error-download i,
.import-error-download span {
  color: inherit;
}

.btn-primary svg,
.btn-outline-primary svg,
.import-error-download svg {
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
}

/* "Request Change is hard to see" (2026-09-23) - plain Bootstrap
   .btn-outline-warning is pale yellow text/border on transparent,
   nearly invisible next to a solid .btn-outline-primary (gold, see
   above) at the same size on a move card. Same solid-with-dark-text
   treatment, its own color so it still reads as a distinct, secondary
   action next to Mark En Route/Delivered. */
.btn-outline-warning {
  --bs-btn-bg: #f0ad4e;
  --bs-btn-border-color: #d99a0b;
  --bs-btn-color: #111827;
  --bs-btn-hover-bg: #ec9c3d;
  --bs-btn-hover-border-color: #b67e0f;
  --bs-btn-hover-color: #111827;
  --bs-btn-active-bg: #e08e24;
  --bs-btn-active-border-color: #a8710b;
  --bs-btn-active-color: #111827;
  background: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  font-weight: 700;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

.collapsible-panel-header {
  border-bottom: 1px solid #edf1f5;
  margin: -2px 0 14px;
  padding-bottom: 12px;
}

.panel-header span {
  color: var(--fleet-muted);
  display: block;
  font-size: .88rem;
  font-weight: 700;
  margin-top: 3px;
}

.collapse-toggle {
  align-items: center;
  background: #f7f9fb;
  border: 1px solid var(--fleet-line);
  border-radius: 7px;
  color: #405063;
  display: inline-flex;
  font-size: .82rem;
  font-weight: 800;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  white-space: nowrap;
}

.collapse-toggle:hover,
.collapse-toggle:focus {
  background: #edf3f8;
  border-color: #c9d5e2;
}

.collapse-toggle:focus {
  outline: 2px solid rgba(38, 112, 111, .25);
  outline-offset: 2px;
}

.collapsible-panel-body[hidden] {
  display: none;
}

.collapsible-subsection {
  border-top: 1px solid #edf1f5;
  margin-top: 14px;
  padding-top: 14px;
}

.table-wrap,
.table-responsive {
  overflow-x: auto;
  /* Always show a visible horizontal scrollbar rather than relying on
     OS/browser hover-to-reveal behavior, which can make a scrollable wide
     table look like it's just cut off with no way to see the rest. */
  scrollbar-width: auto;
  scrollbar-color: var(--fleet-muted) var(--fleet-page);
}

.table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  height: 10px;
}

.table-wrap::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: var(--fleet-page);
}

.table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--fleet-muted);
  border-radius: 6px;
}

/* Rental report tables (2026-10-15): scroll INSIDE a capped-height box so the horizontal scrollbar is always on screen
   (it used to sit at the very bottom of a long table, so people had to scroll the whole page down to scroll sideways).
   Header row stays pinned while scrolling down. Removed during PDF capture (see expandAccessoryRows). */
.rental-report-scroll {
  overflow-x: auto;
}

/* A mirror of the table's sideways scrollbar, pinned to the top of the screen while the table is in view. */
.rental-hscroll-proxy {
  background: var(--fleet-panel);
  height: 18px;
  margin-bottom: 4px;
  overflow-x: scroll;
  overflow-y: hidden;
  position: sticky;
  top: 0;
  z-index: 6;
}

/* .data-panel clips overflow, which would stop the pinned scrollbar from sticking to the screen. */
.data-panel:has(> .rental-hscroll-proxy) {
  overflow: visible;
}

.rental-hscroll-proxy > div {
  height: 1px;
}

.table {
  min-width: 760px;
}

.table th {
  color: var(--fleet-muted);
  font-size: .76rem;
  text-transform: uppercase;
}

.status-pill {
  background: #edf1f5;
  border-radius: 999px;
  color: #465669;
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  padding: 4px 9px;
  white-space: nowrap;
}

.status-active,
.status-completed,
.status-connected,
.status-matched,
.status-scheduled,
.status-approved,
.status-scaffolded,
.status-done,
.status-current,
.status-handled-work-order-exists {
  background: #dff2e6;
  color: #19653b;
}

.status-open,
.status-pending,
.status-due-soon,
.status-review,
.status-needs-review,
.status-high,
.status-missing-samsara,
.status-missing-hcss,
.status-historical-swap {
  background: #fff2cc;
  color: #806000;
}

.status-down,
.status-overdue,
.status-offline,
.status-failed,
.status-critical,
.status-duplicate-historical,
.status-inactive {
  background: #ffe2df;
  color: #9e2f24;
}

.status-in-progress,
.status-maintenance,
.status-active {
  background: #e1efff;
  color: #1b5f9c;
}

.request-form {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

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

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

.equipment-tools {
  align-items: end;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(150px, 1fr));
}

.equipment-tool-actions {
  display: flex;
  justify-content: flex-end;
}

.equipment-table {
  min-width: 1120px;
}

.work-order-table {
  table-layout: fixed;
  min-width: 1640px;
}

.work-order-table th,
.work-order-table td {
  font-size: .84rem;
  line-height: 1.25;
  padding: 8px 10px;
  vertical-align: top;
}

.work-order-table th {
  font-size: .68rem;
  line-height: 1.15;
  white-space: nowrap;
}

.work-order-table .wo-col {
  overflow-wrap: anywhere;
}

.work-order-table .wo-col-work-order-id {
  width: 88px;
}

.work-order-table .wo-col-unit-number {
  width: 92px;
}

.work-order-table .wo-col-work-order-status {
  width: 132px;
}

.work-order-table .wo-col-status-date,
.work-order-table .wo-col-work-order-date {
  width: 104px;
}

.work-order-table .wo-col-repair-description {
  width: 420px;
}

.work-order-table .wo-col-telematics-job,
.work-order-table .wo-col-telematics-job-description {
  width: 150px;
}

.work-order-table .wo-col-requested-by {
  width: 170px;
}

.work-order-table .wo-col-assigned-to {
  width: 190px;
}

.work-order-table .wo-col-telematics-job-source {
  width: 116px;
}

.work-order-table .wo-col-work-order-id,
.work-order-table .wo-col-unit-number,
.work-order-table .wo-col-work-order-status,
.work-order-table .wo-col-status-date,
.work-order-table .wo-col-telematics-job-source,
.work-order-table .wo-col-work-order-date {
  white-space: nowrap;
}

.work-order-table td.wo-col-work-order-id,
.work-order-table td.wo-col-unit-number,
.work-order-table td.wo-col-status-date,
.work-order-table td.wo-col-work-order-date,
.work-order-table td.wo-col-telematics-job-source {
  overflow: hidden;
  text-overflow: ellipsis;
}

.maintenance-list-tiles {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.maintenance-list-tile {
  background: #fff7df;
  border: 1px solid var(--sdc-gold-border);
  border-radius: 8px;
  color: #1e2a36;
  cursor: pointer;
  display: grid;
  gap: 8px;
  padding: 16px;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.maintenance-list-tile:hover,
.maintenance-list-tile:focus {
  background: #ffe7a8;
  border-color: #b67e0f;
  box-shadow: 0 10px 24px rgba(139, 97, 15, .16);
  color: #000;
  outline: none;
  transform: translateY(-1px);
}

.maintenance-list-tile span {
  font-weight: 800;
}

.maintenance-list-tile strong {
  font-size: 1.25rem;
}

.maintenance-list-tile small {
  color: var(--fleet-muted);
}

.maintenance-list-tile em {
  color: #111827;
  font-style: normal;
  font-weight: 800;
}

.sdc-work-order-panel {
  border-left: 4px solid var(--sdc-gold-border);
}

.sdc-work-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
}

.sdc-tab-strip {
  align-items: center;
  background: #eef3f8;
  border: 1px solid #d5dee8;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px;
}

.sdc-tab-button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #42566d;
  cursor: pointer;
  font-weight: 800;
  min-height: 38px;
  padding: 8px 13px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sdc-tab-button:hover {
  background: #fff;
  border-color: #c8d3df;
  color: var(--fleet-ink);
}

.sdc-tab-button.active {
  background: #fff;
  border-color: #e0a31a;
  color: var(--fleet-ink);
  box-shadow: inset 0 -3px 0 var(--sdc-gold), 0 1px 2px rgba(15, 23, 42, .08);
}

.sdc-queue-column {
  min-width: 0;
}

.sdc-overview-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sdc-overview-column {
  min-width: 0;
}

.sdc-full-span {
  grid-column: 1 / -1;
}

.sdc-subheader {
  align-items: baseline;
  margin-bottom: .75rem;
}

.sdc-tools {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 220px);
  margin-bottom: .75rem;
}

.sdc-selected-equipment-panel {
  background: #f8fafc;
  border: 1px solid var(--fleet-line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 220px;
  padding: 1rem;
}

/* New Work Order Request modal redesign (explicit instruction,
   2026-09-04: "needs to look more professional and needs to be very
   very user friendly to interface with"). */
.sdc-request-modal {
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

.sdc-request-modal-header {
  align-items: flex-start;
  background: #fbf6ea;
  border-bottom: 1px solid var(--fleet-line);
}

.sdc-request-modal-header .modal-title {
  align-items: center;
  display: flex;
  gap: .5rem;
}

.sdc-request-modal-subtitle {
  color: #6b6455;
  font-size: .85rem;
  margin: .2rem 0 0;
}

.sdc-request-section {
  border-bottom: 1px solid #f1ede1;
  padding: 1.1rem 0;
}

.sdc-request-section:first-child {
  padding-top: 0;
}

.sdc-request-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.sdc-request-section-title {
  align-items: center;
  color: var(--fleet-ink, #22201b);
  display: flex;
  font-size: 1rem;
  font-weight: 800;
  gap: .55rem;
  margin-bottom: .85rem;
}

.sdc-change-equipment-link {
  font-size: .8rem;
  font-weight: 600;
  margin-left: auto;
  padding: 0;
  text-decoration: none;
}

.sdc-request-step {
  align-items: center;
  background: var(--sdc-gold, #e9b44c);
  border-radius: 50%;
  color: #1f2933;
  display: inline-flex;
  flex: none;
  font-size: .8rem;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.sdc-equipment-picker {
  background: #fff;
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 220px;
  overflow-y: auto;
}

.sdc-equipment-option {
  background: none;
  border: none;
  border-bottom: 1px solid #f1ede1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
}

.sdc-equipment-option:last-child {
  border-bottom: none;
}

.sdc-equipment-option:hover {
  background: #fbf6ea;
}

.sdc-equipment-option.active {
  background: #fbf1da;
  box-shadow: inset 3px 0 0 var(--sdc-gold-border, #d4952f);
}

.sdc-equipment-option strong {
  color: var(--fleet-ink, #22201b);
  font-size: .92rem;
}

.sdc-equipment-option span {
  color: #6b6455;
  font-size: .8rem;
}

.sdc-equipment-picker-empty,
.sdc-equipment-picker-no-matches {
  color: #6b6455;
  margin: auto;
  padding: 1rem;
  text-align: center;
}

.sdc-selected-equipment-empty {
  align-items: center;
  color: #8a8578;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .5rem;
  justify-content: center;
  text-align: center;
}

.sdc-selected-equipment-empty i {
  font-size: 1.6rem;
}

.sdc-selected-equipment-fields {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.sdc-selected-equipment-row {
  align-items: baseline;
  display: flex;
  font-size: .88rem;
  gap: .5rem;
  justify-content: space-between;
}

.sdc-selected-equipment-row span {
  color: #6b6455;
  flex: none;
}

.sdc-selected-equipment-row strong {
  color: var(--fleet-ink, #22201b);
  text-align: right;
}

.sdc-selected-equipment-source {
  color: #8a8578;
  font-size: .78rem;
  margin-top: .25rem;
}

.sdc-card-list {
  display: grid;
  gap: 12px;
}

.sdc-compact-card-list {
  gap: 10px;
}

.sdc-work-card {
  background: #fff;
  border: 1px solid #dbe3ec;
  border-radius: 6px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.sdc-card-top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.sdc-card-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.sdc-card-heading strong {
  color: var(--fleet-ink);
  font-size: .98rem;
}

.sdc-card-title {
  color: #1f2937;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sdc-card-detail-line {
  color: #52657a;
  font-size: .85rem;
  line-height: 1.35;
}

.sdc-work-card p {
  color: #34495e;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
}

.sdc-card-meta {
  color: #52657a;
  display: grid;
  font-size: .84rem;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: stretch;
}

.sdc-card-meta span {
  background: #f8fafc;
  border: 1px solid #e6ecf2;
  border-radius: 5px;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
}

.sdc-card-meta strong {
  color: #52657a;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sdc-card-meta em {
  color: #1f2937;
  font-style: normal;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sdc-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  padding-top: 4px;
  white-space: normal;
}

.sdc-card-actions .btn {
  align-items: center;
  border-radius: 5px;
  display: inline-flex;
  font-size: .84rem;
  font-weight: 800;
  height: 36px;
  justify-content: center;
  min-width: 86px;
  padding: 0 12px;
  width: auto;
}

.sdc-card-actions .sdc-convert-request-button {
  background: var(--sdc-gold);
  border-color: #d99a0b;
  color: #111827;
}

.sdc-card-actions .sdc-convert-request-button:hover {
  background: #e4a51f;
  color: #111827;
}

.sdc-card-actions .btn-outline-danger {
  background: #fff;
  border-color: #dc3545;
  color: #a51e2d;
}

.sdc-card-actions .btn-outline-danger:hover {
  background: #dc3545;
  color: #fff;
}

.sdc-card-actions .sdc-delete-request-button {
  background: #b4232f;
  border-color: #9f1d2a;
  color: #fff;
}

.sdc-card-actions .sdc-delete-request-button:hover {
  background: #8f1823;
  border-color: #8f1823;
  color: #fff;
}

.sdc-detail-summary {
  border-bottom: 1px solid var(--fleet-line);
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.sdc-detail-summary h6 {
  font-size: 1rem;
  margin: 10px 0 4px;
}

.sdc-detail-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0 0 16px;
}

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

.sdc-detail-grid dt {
  color: var(--fleet-muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sdc-detail-grid dd {
  margin: 4px 0 0;
}

.sdc-detail-section {
  border-top: 1px solid var(--fleet-line);
  padding-top: 12px;
}

.sdc-work-card-compact .sdc-card-meta {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

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

.sdc-detail-card {
  background: #f8fafc;
  border: 1px solid var(--fleet-line);
  border-radius: 6px;
  padding: .75rem;
}

.sdc-detail-card h4 {
  font-size: .9rem;
  margin-bottom: .5rem;
}

.sdc-detail-card p {
  font-size: .86rem;
  margin-bottom: .4rem;
}

.sdc-detail-actions {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sdc-detail-actions h4 {
  font-size: .95rem;
  margin-bottom: .5rem;
}

.sdc-admin-form {
  max-width: 720px;
}

.sdc-mechanic-panel {
  max-width: 920px;
}

@media (max-width: 760px) {
  .maintenance-list-tiles {
    grid-template-columns: 1fr;
  }

  .sdc-work-order-grid,
  .sdc-overview-grid,
  .sdc-detail-grid,
  .sdc-detail-actions {
    grid-template-columns: 1fr;
  }
}

.dispatch-snapshot-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.dispatch-snapshot-card {
  min-height: 96px;
}

.dispatch-snapshot-card strong {
  font-size: 1.8rem;
}

.dispatch-workflow-table {
  min-width: 1500px;
}

.dispatch-command-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}

.dispatch-kpi-button {
  border: 1px solid #e6edf5;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s ease, box-shadow .12s ease;
  width: 100%;
}

.dispatch-kpi-button:hover {
  border-color: var(--sdc-gold-border);
}

.dispatch-kpi-button.active {
  border-color: var(--sdc-gold-border);
  box-shadow: inset 0 0 0 1px var(--sdc-gold-border);
}

/* Clicking a KPI tile or one of these chips narrows the table below to
   matching rows - a light-weight, purely client-side filter (no
   fetch/recalculation), same on/off toggle behavior as a chart legend. */
.dispatch-filter-chip {
  background: #fff;
  border: 1px solid var(--fleet-line);
  border-radius: 999px;
  color: #405063;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 12px;
}

.dispatch-filter-chip:hover {
  border-color: var(--sdc-gold-border);
}

.dispatch-filter-chip.active {
  background: #fbf1da;
  border-color: var(--sdc-gold-border);
  color: #1f2933;
}

.dispatch-action-bar {
  align-items: center;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 14px 0;
  padding: 14px;
}

.dispatch-action-bar > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dispatch-sync-status {
  color: var(--fleet-muted);
  display: grid;
  font-size: .82rem;
  gap: 2px;
  text-align: right;
}

.dispatch-sync-status strong {
  color: #111827;
  font-size: .95rem;
}

.dispatch-tabs {
  border-bottom: 1px solid #dbe5ef;
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
}

.dispatch-tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--fleet-muted);
  font-weight: 800;
  padding: 10px 12px;
}

.dispatch-tab.active {
  border-color: var(--fleet-primary);
  color: #111827;
}

.dispatch-primary-panel {
  border-top-left-radius: 0;
  margin-top: 0;
}

.dispatch-queue-toolbar {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(150px, 1fr)) auto;
  margin-bottom: 12px;
}

.dispatch-scheduler-note {
  background: #f8fafc;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  color: var(--fleet-muted);
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.dispatch-scheduler-note strong {
  color: #111827;
}

.dispatch-request-modal {
  background: rgba(15, 23, 42, .48);
}

.dispatch-request-modal .request-form {
  margin: 0;
}

@media (max-width: 1100px) {
  .dispatch-command-grid,
  .dispatch-snapshot-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .dispatch-queue-toolbar {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .dispatch-action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .dispatch-sync-status {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .dispatch-command-grid,
  .dispatch-snapshot-grid,
  .dispatch-queue-toolbar {
    grid-template-columns: 1fr;
  }
}

.dispatch-history-table {
  min-width: 1180px;
}

.dispatch-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 220px;
}

.dispatch-row-actions {
  min-width: 340px;
}

.dispatch-action-fields {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  margin-bottom: 8px;
}

.dispatch-action-fields .wide-field {
  grid-column: 1 / -1;
}

.employees-table {
  min-width: 1240px;
}

.telematics-table {
  min-width: 1540px;
}

.telematics-match-table {
  min-width: 1480px;
}

.cat-aemp-table {
  min-width: 1460px;
}

.telematics-workspace {
  display: grid;
  gap: 22px;
  grid-template-columns: 250px minmax(0, 1fr);
}

.telematics-sidebar {
  background: linear-gradient(180deg, #0d2338 0%, #071827 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  min-height: 720px;
  padding: 16px;
}

.telematics-sidebar-title {
  align-items: center;
  display: flex;
  gap: 10px;
  font-size: 1rem;
  margin-bottom: 22px;
}

.telematics-sidebar-title i {
  font-size: 1.3rem;
}

.telematics-sidebar nav {
  display: grid;
  gap: 6px;
}

.telematics-sidebar nav button,
.telematics-quick-actions button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #eef5ff;
  display: flex;
  font-weight: 700;
  gap: 10px;
  padding: 10px 11px;
  text-align: left;
}

.telematics-sidebar nav button:hover,
.telematics-sidebar nav button.active {
  background: #145da0;
  border-color: rgba(255, 255, 255, .12);
  color: #fff;
}

.telematics-quick-actions {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 12px;
}

.telematics-main {
  min-width: 0;
}

.telematics-header {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.telematics-header h3 {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0;
}

.telematics-header p {
  color: var(--fleet-muted);
  margin: 4px 0 0;
}

.telematics-header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.telematics-overview-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  margin-bottom: 20px;
}

.telematics-card,
.telematics-map-panel,
.telematics-detail-card {
  background: #fff;
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.telematics-card {
  display: grid;
  gap: 18px;
  min-height: 196px;
  padding: 18px;
}

.telematics-card-title {
  align-items: center;
  display: flex;
  gap: 12px;
}

.telematics-card-title h4 {
  flex: 1;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0;
}

.telematics-card-icon {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.telematics-card-icon.samsara {
  background: #1263a3;
}

.telematics-card-icon.cat,
.telematics-card-icon.warning {
  background: var(--sdc-gold);
  color: #162131;
}

.telematics-card-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.telematics-card-stats span,
.telematics-exception-compact span,
.telematics-summary-row span,
.telematics-detail-list dt {
  color: #475467;
  display: block;
  font-size: .75rem;
  font-weight: 800;
}

.telematics-card-stats strong,
.telematics-exception-compact strong {
  color: #0f172a;
  display: block;
  font-size: .92rem;
  margin-top: 5px;
}

.telematics-card-actions {
  border-top: 1px solid #edf1f5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 16px;
}

.telematics-exception-compact {
  display: grid;
  gap: 10px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.telematics-exception-compact div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.telematics-map-panel {
  overflow: hidden;
}

.telematics-map-panel.expanded .telematics-map-canvas {
  min-height: 660px;
}

.telematics-map-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--fleet-line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 12px;
}

.telematics-map-tabs,
.telematics-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.telematics-map-tabs button {
  align-items: center;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #0f172a;
  display: flex;
  font-weight: 800;
  gap: 8px;
  padding: 9px 12px;
}

.telematics-map-tabs button.active {
  background: #0d2338;
  color: #fff;
}

.telematics-map-filters .form-select {
  min-width: 180px;
}

.telematics-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
}

.telematics-map-canvas {
  background: #eef2f6;
  min-height: 520px;
  overflow: hidden;
  position: relative;
}

.telematics-leaflet-map {
  height: 520px;
  min-height: inherit;
  width: 100%;
}

.telematics-map-panel.expanded .telematics-leaflet-map {
  height: 660px;
}

.telematics-leaflet-marker {
  background: transparent;
  border: 0;
}

.telematics-leaflet-marker span {
  align-items: center;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
  color: #0f172a;
  display: inline-flex;
  font-size: .78rem;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  min-width: 34px;
  padding: 0 8px;
}

.telematics-leaflet-marker.samsara span {
  background: #e8f5ff;
  outline: 4px solid rgba(21, 101, 192, .62);
}

.telematics-leaflet-marker.cat span {
  background: #fff5d8;
  outline: 4px solid rgba(244, 185, 66, .72);
}

.telematics-popup {
  display: grid;
  gap: 8px;
  min-width: 240px;
}

.telematics-popup strong {
  color: #0f172a;
  font-size: .95rem;
}

.telematics-popup > span {
  color: #475467;
  font-size: .8rem;
}

.telematics-popup dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.telematics-popup dl div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
}

.telematics-popup dt {
  color: #667085;
  font-size: .72rem;
  font-weight: 800;
}

.telematics-popup dd {
  font-size: .76rem;
  margin: 0;
}

.telematics-map-library-missing {
  align-items: center;
  color: #334155;
  display: flex;
  font-weight: 800;
  height: 100%;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.telematics-map-empty {
  background: rgba(255, 255, 255, .92);
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #334155;
  font-weight: 800;
  left: 50%;
  padding: 16px 18px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 84%);
}

.telematics-map-side {
  background: #fff;
  border-left: 1px solid var(--fleet-line);
}

.telematics-side-section {
  border-bottom: 1px solid var(--fleet-line);
  padding: 16px;
}

.telematics-side-section h4,
.telematics-side-section h5 {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 12px;
}

.telematics-side-section h5 {
  color: #145da0;
}

.telematics-summary-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.telematics-summary-row-clickable {
  border-radius: 6px;
  cursor: pointer;
  margin: 0 -8px;
  padding: 8px;
}

.telematics-summary-row-clickable:hover {
  background: #f1f5f9;
}

.telematics-summary-row-clickable.selected {
  background: #eaf4ff;
  outline: 1px solid #145da0;
}

/*
 * Dispatch & Telematics module shell - a grouped rail of tabs sitting
 * ABOVE the content (2026-09-11: "the left side table with dispatch
 * ops and telematics [should] be moved to show above the map" - it
 * was a fixed 216px side column eating into exactly the width the Map
 * needed, see the width fix above). A wrapping horizontal strip, not a
 * flat single-row tab bar - 14 sections still need real grouping, not
 * just a divider between two runs of buttons. This is the same
 * treatment the mobile layout already used below (a rail on top,
 * "reads better here") - now the shared layout at every width, wrapped
 * onto more rows on a wide screen instead of scrolled sideways on a
 * narrow one (still handled by the mobile override below).
 */
.dispatch-shell {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.dispatch-rail {
  background: #f3f5f8;
  border-bottom: 1px solid var(--fleet-line);
  padding: 10px 16px;
  position: relative;
}

/* "make this part adjustable so the top part with all the different
   tabs shrinks and the magnet board can have a larger screen view"
   (2026-09-15) - collapsed state hides every tab button except the
   active one (and every group label), so the bar shrinks to a single
   thin line instead of the full two-row nav. */
.dispatch-rail-collapse-toggle {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fleet-muted);
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  position: absolute;
  right: 10px;
  top: 8px;
}

.dispatch-rail-collapse-toggle:hover {
  background: #e9edf3;
}

.dispatch-rail-collapsed {
  padding: 6px 16px;
}

.dispatch-rail-collapsed .dispatch-rail-label,
.dispatch-rail-collapsed .dispatch-rail-item:not(.active) {
  display: none;
}

.dispatch-rail-collapsed .dispatch-rail-group {
  gap: 0;
  min-height: 0;
}

.dispatch-rail-label {
  color: var(--fleet-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  margin: 10px 0 6px;
  text-transform: uppercase;
}

.dispatch-rail-label:first-child {
  margin-top: 0;
}

.dispatch-rail-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dispatch-rail-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #405063;
  display: flex;
  font-size: .86rem;
  font-weight: 600;
  gap: 8px;
  padding: 7px 12px;
  text-align: left;
}

.dispatch-rail-item:hover {
  background: #e9edf3;
}

.dispatch-rail-item i {
  flex: none;
  font-size: .95rem;
  opacity: .8;
}

.dispatch-rail-item.active {
  background: #fbf1da;
  box-shadow: inset 0 -3px 0 var(--sdc-gold-border);
  color: var(--fleet-ink);
  font-weight: 800;
}

.dispatch-rail-content {
  min-width: 0;
  padding: 22px 26px;
}

/* Mobile-native "simple" list for Work Orders/PM Service under a
   request-rank (non-write) role - simpleRecordCards() in dashboard.js.
   Every field stacks label:value, nothing off-screen/column-based, so
   there's no horizontal scroll failure mode like a <table> has. */
.simple-record-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.simple-record-card {
  background: #fff;
  border: 1px solid var(--fleet-border, #e2ddd0);
  border-radius: 10px;
  padding: 14px 16px;
}

.simple-record-card-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--fleet-ink, #22201b);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fleet-border, #e2ddd0);
}

.simple-record-card-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  font-size: .92rem;
}

.simple-record-card-row + .simple-record-card-row {
  border-top: 1px solid #f1ede1;
}

.simple-record-card-label {
  color: #6b6455;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.simple-record-card-value {
  font-weight: 600;
  color: var(--fleet-ink, #22201b);
  line-height: 1.35;
  word-break: break-word;
}

.simple-record-empty {
  padding: 18px;
  text-align: center;
  color: #6b6455;
}

/* Job number/name/equipment number search above the map
   (searchDispatchMap/bindDispatchMapSearchControls) - zooms straight
   to the matching unit's marker or job's geofence shape. */
.dispatch-map-search {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.dispatch-map-search input {
  flex: 1;
  min-width: 0;
}

/* "The map width is not long enough...make the map look better and
   fit the screen" (2026-09-11, comparing against Samsara's own map).
   The Dispatch Map's panel pays two padding taxes other modules don't
   - the 22px/26px .dispatch-rail-content padding every Dispatch tab
   sits in, then this panel's own 18px .data-panel padding on top of
   that - so it renders narrower than "wide" content elsewhere in the
   app even though nothing here has an actual max-width. Bled out of
   both, just for this one panel/map (see .dispatch-map-panel below),
   so it actually uses the width the layout leaves it. Collapsing the
   Dispatch rail (the collapse toggle added earlier) recovers even
   more width on top of this. Taller too (560px read short and boxy
   next to Samsara's near-full-height map) - a vh-based height that
   still has sane floor/ceiling values for a very short or very tall
   browser window. */
.dispatch-leaflet-map {
  background: #eef2f6;
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  height: 70vh;
  min-height: 480px;
  max-height: 820px;
  width: calc(100% + 36px);
  margin: 0 -18px;
}

.dispatch-map-panel {
  margin: -22px -26px 0;
}

.dispatch-map-legend {
  background: var(--fleet-page);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  color: var(--fleet-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: .82rem;
  font-weight: 600;
  gap: 8px 18px;
  padding: 10px 14px;
}

.dispatch-map-legend span {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

/* Legend items are click targets - selecting one or more narrows the
   map to matching layers/markers (renderDispatchMapLegend/
   bindDispatchMapLegendControls); unselected = show everything. */
.dispatch-map-legend-item {
  align-items: center;
  background: #fff;
  border: 1px solid var(--fleet-line);
  border-radius: 999px;
  color: var(--fleet-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: .82rem;
  font-weight: 600;
  gap: 7px;
  padding: 5px 12px;
}

.dispatch-map-legend-item:hover {
  border-color: var(--sdc-gold-border);
}

.dispatch-map-legend-item.active {
  background: #fbf1da;
  border-color: var(--sdc-gold-border);
}

.dispatch-map-legend-divider {
  align-self: stretch;
  background: var(--fleet-line);
  width: 1px;
}

/*
 * Custom cluster badges for the Dispatch map's Equipment Job Assignments
 * layer. Leaflet.markercluster's default iconCreateFunction colors a
 * cluster by how many markers it contains (green/yellow/orange for small/
 * medium/large) - completely unrelated to what a marker's own color means,
 * so at any zoomed-out view the cluster colors didn't match the legend at
 * all. dashboard.js supplies its own iconCreateFunction producing these
 * classes instead, keyed on the telematics source of the units inside each
 * cluster (matching the same Samsara/VisionLink colors as the individual
 * markers and the existing Telematics map) rather than the count.
 */
.dispatch-marker-cluster {
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .55);
  display: flex;
  justify-content: center;
}

.dispatch-marker-cluster div {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.dispatch-marker-cluster-samsara div { background: #1565c0; }
.dispatch-marker-cluster-visionlink div { background: #c98f16; }
.dispatch-marker-cluster-manual div { background: #92400e; }
.dispatch-marker-cluster-mixed div { background: #475569; }

.dispatch-location-exception-list {
  display: grid;
  gap: 10px;
  margin: 4px 0 14px;
}

.dispatch-location-exception-row {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.dispatch-location-exception-row .badge {
  flex: none;
  margin-top: 1px;
}

.dispatch-location-exception-row strong {
  display: block;
  font-size: .88rem;
}

/* The equipment marker popup on the Dispatch Map - an action card
   (Override/Confirm Job, Dispatch This Unit), not just a read-only
   tooltip. Styled as a compact business card (2026-09-02 revision, per
   explicit "make it look more professional" feedback) - a clear
   unit/source header, driver identity as the subtitle (what she
   actually looks for at a glance, not the equipment type code), then
   equipment identity and job status in a quiet detail block. Leaflet's
   own popup chrome (.leaflet-popup-content-wrapper/-tip) already
   supplies the card's shadow/radius, so this only needs to style the
   content, not add a second shadow on top of it. */
.dispatch-map-card {
  font-size: .86rem;
  min-width: 220px;
}

.dispatch-map-card-head {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fleet-line);
}

.dispatch-map-card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dispatch-map-card-unit {
  font-size: .98rem;
  color: var(--fleet-ink);
  letter-spacing: .01em;
}

.dispatch-map-card-source-pill {
  flex: none;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}

.dispatch-map-card-source-pill.samsara {
  background: #1565c0;
}

.dispatch-map-card-source-pill.visionlink {
  background: #c98f16;
}

.dispatch-map-card-source-pill.manual {
  background: #92400e;
}

.dispatch-map-card-driver {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: .84rem;
  color: var(--fleet-muted);
}

.dispatch-map-card-driver i {
  font-size: .78rem;
}

.dispatch-map-card-status {
  margin-bottom: 8px;
}

.dispatch-map-card-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--fleet-muted);
  line-height: 1.45;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fleet-line);
}

/* Equipment identity (make/model, serial/VIN) - the professional
   equivalent of a business card's fine print, sitting where the driver
   line used to be. Distinguished from the muted detail lines below it
   since it's identity, not status. */
.dispatch-map-card-spec {
  color: var(--fleet-ink);
  font-weight: 500;
}

/* Samsara's/VisionLink's own on-device geofence name - deliberately
   styled distinct from the plain job-match text above it, since it's a
   different, independent source (can be populated even when we have no
   SdcGeofence for the job at all). */
.dispatch-map-card-telematics-location {
  color: var(--fleet-accent);
  font-style: italic;
}

/* Open Work Orders + Jobsite History (2026-09-18) - lazy-loaded into
   the card, styled as a continuation of .dispatch-map-card-detail's
   muted small-text blocks rather than a heavier nested panel. */
.dispatch-map-card-extra {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--fleet-line);
  font-size: .78rem;
}

.dispatch-map-card-wo,
.dispatch-map-card-jobsite-history {
  margin-bottom: 6px;
}

.dispatch-map-card-jobsite-history strong,
.dispatch-map-card-wo strong {
  display: block;
  margin-bottom: 2px;
  color: var(--fleet-ink);
}

/* Two btn-sm buttons at the app's default weight/padding stacked (or
   wrapping) in a 260px popup read as one bulky, redundant block -
   sized down here specifically, rather than touching the global button
   styling used everywhere else. Rentals can carry up to six action
   buttons on this same compact card (2026-09-18) - wraps onto more
   than one row instead of squeezing or overflowing. */
.dispatch-map-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dispatch-map-card-actions .btn {
  flex: 1;
  padding: 5px 8px;
  font-size: .74rem;
  font-weight: 700;
  white-space: normal;
  line-height: 1.2;
}

/* Magnet Board (2026-09-09) - a resource list + a grid of job cards,
   built to feel like the rest of this dashboard (same panel/table
   language as everywhere else) rather than a literal skin of the
   legacy HCSS screen it's modeled after. */
.magnet-board-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  /* "why are the job tiles in a separate scrollable table from yard,
     called off, needs confirmation & unassigned...extend the table
     with all the jobs down to the unassigned job tile" (2026-09-17) -
     was align-items:start, which let .magnet-board-pinned (Yard/Called
     Off/Needs Confirmation/Unassigned, stacked to their own natural
     height) run taller than .magnet-board-grid's old fixed 720px cap,
     leaving a dead strip of blank page below the shorter, separately-
     scrolling job-tile grid. Default stretch (no align-items override)
     makes both columns fill the same row height instead - see
     .magnet-board-grid below for the matching height:100% change. */
}

/* "Side by side view so whoever is assigning the moves can see what
   drivers are currently assigned" (2026-09-10) - equal columns; wide
   tables (see .table-wrap) scroll inside their own half rather than
   forcing the page itself wider. */
.pending-and-moves-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

@media (max-width: 1100px) {
  .pending-and-moves-grid {
    grid-template-columns: 1fr;
  }
}

/* "The pending & moves tab the font is too big.... everything should
   fit without a scroll bar" (2026-09-10). A real <table> here doesn't
   work at all - EVERY table in the app has a hardcoded 760px min-width
   (see the plain `.table` rule), and even overridden, one row's several
   inline controls (driver select, date, time, AM/PM) can't fit in a
   half-width column no matter how small the font gets. Cards instead:
   each row's controls wrap onto their own line naturally, so nothing
   needs a fixed table-column width and there's nothing to scroll. */
.pending-item-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 70vh;
  overflow-y: auto;
}

.pending-item-card {
  background: var(--fleet-page);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .85rem;
}

.pending-item-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* Driver-grouped "Currently Assigned" panel (2026-09-10, explicit
   instruction: "the right and side should display all active
   transportation drivers with the assigned equipment listed below
   them i still want to see their name even if not equipment is
   assigned yet") - a named group per driver, however many (or zero)
   moves are under it, instead of one flat table of moves alone. */
.pending-driver-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 70vh;
  overflow-y: auto;
}

.pending-driver-group {
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  padding: 8px 10px;
}

/* "Click and drag the pending request under the driver they want to
   assign the move to" (2026-09-10) - dashed highlight while a pending
   card is dragged over a driver group, same dashed-outline language
   the Magnet Board's own drop targets already use. */
.pending-driver-group-drop-active {
  outline: 2px dashed var(--fleet-accent);
  outline-offset: 2px;
}

.pending-item-card[draggable="true"] {
  cursor: grab;
}

.pending-driver-group-header {
  font-size: .85rem;
  margin-bottom: 4px;
}

.pending-driver-move-chip {
  background: var(--fleet-page);
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 4px;
  font-size: .82rem;
}

.pending-driver-move-chip-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

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

  /* Stacked single-column layout here - .magnet-board-pinned and
     .magnet-board-grid are no longer side-by-side row tracks, so
     there's nothing for height:100% to stretch to match. Back to a
     fixed cap with its own scrollbar, same as before this fix. */
  .magnet-board-grid {
    height: auto;
    max-height: 720px;
  }
}

/* Driver's own mobile move/time cards (2026-09-15, "not conducive to
   use on a tablet or phone in an app manner... the format needs to be
   better than what it is") - replaces the desktop-density
   .pending-item-card/.pending-driver-move-chip family above for
   DRIVER's own Equipment Moves and My Time History (equipmentMoveCardHtml/
   myTimeHistoryView, wwwroot/js/dashboard.js), which is a real touch
   screen, not a dense admin panel: bigger type, more breathing room,
   and 44px+ tap targets on every action button - the exact things a
   phone/tablet needs that the shared .btn-sm/.table styling elsewhere
   in this app never provided. */
.dispatch-move-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dispatch-move-card {
  background: var(--fleet-page);
  border: 1px solid var(--fleet-line);
  border-radius: 10px;
  padding: 14px 16px;
}

.dispatch-move-card-top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.05rem;
  gap: 8px;
  margin-bottom: 6px;
}

.dispatch-move-card-main {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.dispatch-move-card-route {
  color: var(--fleet-muted, #6c757d);
  font-size: .92rem;
  margin-bottom: 6px;
}

.dispatch-move-card-meta {
  color: var(--fleet-muted, #6c757d);
  display: flex;
  flex-wrap: wrap;
  font-size: .85rem;
  gap: 4px 12px;
}

.dispatch-move-card-actions {
  border-top: 1px solid var(--fleet-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
}

/* Real touch targets - every action button on a driver's own card
   (Mark En Route/Delivered, Cancel, History, etc. - the same
   data-dispatch-* buttons equipmentMoveRowParts already builds for the
   desktop table) grows to a real tappable size here instead of the
   shared Bootstrap .btn-sm's ~30px height. */
.dispatch-move-card-actions .btn {
  flex: 1 1 auto;
  min-height: 44px;
  min-width: 44px;
}

/* Same real-touch-target treatment for the Clock In/Clock Out buttons
   (driverClockWidgetClockInView/driverClockWidgetClockedInView) - the
   first thing a driver taps every time they open the app. */
.driver-clock-widget .btn {
  min-height: 48px;
  padding-left: 16px;
  padding-right: 16px;
}

/* "That section can be replaced by the sdc/provac/a1 tile and the
   unassigned tile - do not put these tiles together, keep them
   separated!" (2026-09-11) - replaces the old full resource-list
   table. Just a plain stacked column (Yard tile, then Unassigned)
   in the same 320px slot the list used to occupy. */
.magnet-board-pinned {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.magnet-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-content: start;
  gap: 12px;
  /* Matches .magnet-board-pinned's own height (stretch, see
     .magnet-board-layout) instead of a fixed 720px cap - no more dead
     space below it when the pinned column runs taller; still scrolls
     internally if there are more job tiles than that height fits. */
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

/* "Make it to where the individual job tiles on the right are the
   same width and height, add a scroll bar into those so it looks
   cleaner" (2026-09-09) - every tile gets the same fixed footprint
   regardless of how many chips it holds (width already matched via
   the grid's own equal columns above); a tile with more equipment
   than fits just scrolls inside its own body instead of growing
   taller than its neighbors. */
/* Magnet Board VIEW ONLY roles (General Superintendent, Superintendent): no action buttons anywhere on the board or its cards. */
.magnet-board-readonly button:not(.magnet-board-keep):not(.btn-close),
.magnet-board-readonly [data-dispatch-assign],
.magnet-board-readonly [data-magnet-remove-move],
.magnet-board-readonly [data-rental-verify-pickup] { display: none !important; }
.magnet-card-readonly .modal-body .btn,
.magnet-card-readonly .modal-body button,
.magnet-card-readonly .modal-body a.btn { display: none !important; }

.magnet-board-card {
  background: var(--fleet-panel);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 260px;
}

.magnet-board-card-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .82rem;
  color: var(--fleet-ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--fleet-line);
  flex-shrink: 0;
}

.magnet-board-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* min-height: 0 is what lets a flex child actually shrink below its
     content size so overflow-y: auto can kick in, instead of the
     card growing to fit every chip. */
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.magnet-board-empty {
  font-size: .78rem;
  font-style: italic;
}

/* "Make a board for the equipment that are unassigned" (2026-09-09) -
   a slightly warm tint and thicker accent border set it apart from a
   real job/location tile at a glance. */
.magnet-board-card-unassigned {
  background: #fff8ec;
  border: 1px solid var(--fleet-warning);
}

/* The pinned Yard/Unassigned tiles (2026-09-11, see .magnet-board-pinned)
   have no reorder controls and live outside .magnet-board-grid, so
   their header shouldn't show the grab cursor every other tile's does. */
.magnet-board-card-pinned .magnet-board-card-head {
  cursor: default;
}

/* "Color code the equipment based on their colors from the map, i.e.
   Samsara blue/VisionLink gold, etc" (2026-09-09) - identical hex
   values to DISPATCH_MAP_SOURCE_COLOR/.dispatch-map-card-source-pill
   so a unit reads the same color on the map, its own popup, and here. */
.magnet-board-chip.magnet-board-source-samsara {
  border-left: 4px solid #1565c0;
}

.magnet-board-chip.magnet-board-source-visionlink {
  border-left: 4px solid #c98f16;
}

.magnet-board-chip.magnet-board-source-manual {
  border-left: 4px solid #92400e;
}

.magnet-board-resources tbody tr.magnet-board-source-samsara .magnet-board-resource-unit {
  box-shadow: inset 4px 0 0 #1565c0;
  padding-left: 8px;
}

.magnet-board-resources tbody tr.magnet-board-source-visionlink .magnet-board-resource-unit {
  box-shadow: inset 4px 0 0 #c98f16;
  padding-left: 8px;
}

.magnet-board-resources tbody tr.magnet-board-source-manual .magnet-board-resource-unit {
  box-shadow: inset 4px 0 0 #92400e;
  padding-left: 8px;
}

/* "Make the tiles on the magnet board adjustable so individual
   profiles can adjust the order of their tiles as they want"
   (2026-09-09) - click-only reordering (see
   bindMagnetBoardTileDragControls); a separate drag-and-drop grip
   handle was tried and retired ("what does the button circled do,
   I'm trying to click it and nothing happens" - it only ever
   responded to an actual drag gesture, never a click, and looked
   broken next to two buttons that do work on click). */
.magnet-board-tile-controls {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 2px;
}

.magnet-board-move-btn {
  color: var(--fleet-muted);
  line-height: 1;
  padding: 2px 4px;
}

.magnet-board-move-btn:hover,
.magnet-board-move-btn:focus-visible {
  color: var(--fleet-ink);
}

.magnet-board-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--fleet-page);
  border: 1px solid var(--fleet-line);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: .78rem;
  cursor: pointer;
}

.magnet-board-chip:focus-visible {
  outline: 2px solid var(--fleet-accent);
  outline-offset: 1px;
}

.magnet-board-chip-unit {
  font-weight: 700;
  color: var(--fleet-ink);
}

.magnet-board-chip-pending {
  background: #fff7e6;
  border-color: var(--fleet-warning);
  cursor: default;
  justify-content: space-between;
}

/* "I need a way to assign the equipment showing as unassigned...
   ASAP" + "I need an ignore function" (2026-09-16) - Set Job/Ignore
   buttons on an Unassigned chip. flex-wrap lets the actions drop to
   their own line under the unit/type text instead of squeezing the
   chip's normal single-row layout. */
.magnet-board-chip:has(.magnet-board-chip-actions) {
  flex-wrap: wrap;
}

.magnet-board-chip-actions {
  display: flex;
  gap: 4px;
  width: 100%;
}

.magnet-board-chip-actions .btn {
  padding: 1px 8px;
  font-size: .72rem;
}

/* "the x button is to big on the equipment move tile things on the
   magnet board" (2026-09-11) - a plain btn-sm icon-only button still
   carries Bootstrap's normal padding on all four sides, which reads
   as chunky next to the compact "Assign" text button right beside it
   in this same tight row. Flattened to a small square that matches
   the row's own scale instead. */
.magnet-board-remove-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  font-size: .72rem;
  flex: 0 0 auto;
}

/* "When a move is assigned/scheduled show that scheduled move in the
   to location, show the driver assigned and the time it's scheduled
   for" (2026-09-10) - blue, distinct from the pending-request yellow,
   so a tile reads at a glance which of its moves still need action
   (pending) vs. are already lined up (scheduled). */
.magnet-board-chip-scheduled {
  background: #eef4ff;
  border-color: #2563eb;
  cursor: default;
}

/* Drop-target highlight while dragging a resource row onto a tile
   (2026-09-10, "click and draggable... auto creates the equipment
   move request") - also the tile-reorder drop target (any tile, not
   just ones with data-magnet-drop-target - Unassigned included, per
   "I WANT TO BE ABLE TO MOVE THE UNASSIGNED TILE"). */
.magnet-board-card.magnet-board-drop-active {
  outline: 2px dashed var(--fleet-accent);
  outline-offset: 2px;
}

.magnet-board-resources tbody tr[draggable="true"] {
  cursor: grab;
}

/* Pointer-based drag (2026-09-11) - the tile-chip-to-tile and
   tile-reorder mechanisms, replacing native HTML5 DnD which didn't
   reliably fire for a real mouse gesture in either case. A floating
   clone of the dragged element follows the cursor (bindPointerDragAndDrop);
   the real source dims in place while it's "picked up." */
.magnet-board-drag-ghost {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.85;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: rotate(-1deg);
}

.pointer-drag-source-active {
  opacity: 0.4;
}

/* "the holding of the mouse highlights everything when i drag the
   equipment thing to another job tile" (2026-09-11) - a real mouse
   drag is indistinguishable from a text-select gesture to the browser
   unless something turns selection off; nothing did. Applied to body
   for the duration of the drag only (bindPointerDragAndDrop). */
.magnet-board-dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

.magnet-board-card-head {
  cursor: grab;
}

.magnet-board-card-head:active {
  cursor: grabbing;
}

.magnet-board-resource-pending {
  opacity: 0.55;
}

.magnet-board-chip.magnet-board-resource-pending {
  cursor: default;
}

/* "when I search for an equipment in the magnet it pulls only that
   equipment up and no other job tiles for me to drag and assign to"
   (2026-09-15) - every tile now stays visible during a search, so this
   highlights the actual chip that matched, keeping it easy to spot
   among everything else instead of relying on the board narrowing
   itself down to just it. */
.magnet-board-chip-search-match {
  outline: 2px solid #f2b632;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(242, 182, 50, 0.25);
}

/* "I want to be directed to the job tile of whatever I put in the
   search bar by it auto scrolling and then providing a brief highlight
   over the item that was searched" (2026-09-15) - .magnet-board-flash
   was already added by two existing scroll-to-it flows (dragging a
   pending card onto a driver group, jumping here after Assign from the
   Pending & Assigned tab) but never actually had a visual effect
   defined - this was a real, pre-existing gap, not something this
   change introduced. Same class, now used by the search box too. */
@keyframes magnetBoardFlash {
  0%, 100% { background-color: transparent; }
  25%, 75% { background-color: rgba(242, 182, 50, 0.35); }
}
.magnet-board-flash {
  animation: magnetBoardFlash 2s ease-in-out;
  border-radius: 6px;
}

/* Rentals on the board (2026-09-09, "RENTALS NEED TO SHOW ON THE
   MAGNET BOARD") - a purple tint matching the map's own rental dots,
   so a rental reads as a distinct kind of chip from real equipment at
   a glance. */
.magnet-board-chip-rental {
  background: #f5eefe;
}

/* "Rentals are supposed to be color coded like on the map" (2026-09-10)
   - the exact same Equipment Rental (purple) / Pump Rental (magenta)
   split the Dispatch Map's own legend uses (DISPATCH_MAP_RENTAL_STYLE,
   wwwroot/js/dashboard.js), applied to both a job tile's rental chip
   and the resource sidebar's rental row. */
.magnet-board-chip.magnet-board-rental-equipment {
  border-left: 4px solid #7c3aed;
}

.magnet-board-chip.magnet-board-rental-pump {
  border-left: 4px solid #a21caf;
}

.magnet-board-resources tbody tr.magnet-board-rental-equipment .magnet-board-resource-unit {
  box-shadow: inset 4px 0 0 #7c3aed;
  padding-left: 8px;
}

.magnet-board-resources tbody tr.magnet-board-rental-pump .magnet-board-resource-unit {
  box-shadow: inset 4px 0 0 #a21caf;
  padding-left: 8px;
}

@media print {
  .sidebar,
  .topbar,
  .module-heading,
  .dispatch-rail,
  .dispatch-report-actions {
    display: none !important;
  }
  .app-shell {
    display: block !important;
  }
}

.telematics-geofence-list-scroll {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.telematics-geofence-list-scroll::-webkit-scrollbar {
  width: 8px;
}

.telematics-geofence-list-scroll::-webkit-scrollbar-track {
  background: var(--fleet-page);
}

.telematics-geofence-list-scroll::-webkit-scrollbar-thumb {
  background: var(--fleet-muted);
  border-radius: 6px;
}

.telematics-job-equipment-list {
  list-style: none;
  margin: 8px 0 0;
  max-height: 220px;
  overflow-y: auto;
  padding: 0;
}

.telematics-job-equipment-list li {
  align-items: center;
  border-bottom: 1px solid #edf1f5;
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  padding: 6px 0;
}

.telematics-detail-list {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}

.telematics-detail-list div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
}

.telematics-detail-list dd {
  margin: 0;
}

.telematics-map-footer {
  align-items: center;
  border-top: 1px solid var(--fleet-line);
  color: #475467;
  display: flex;
  font-size: .8rem;
  justify-content: space-between;
  padding: 10px 14px;
}

.telematics-detail-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
}

.telematics-detail-card {
  padding: 18px;
}

.telematics-export-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.compact-tools {
  grid-template-columns: minmax(180px, 320px);
}

@media (max-width: 1200px) {
  .telematics-workspace,
  .telematics-map-layout,
  .telematics-detail-grid {
    grid-template-columns: 1fr;
  }

  .telematics-sidebar {
    min-height: auto;
  }

  .telematics-sidebar nav {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .telematics-overview-grid {
    grid-template-columns: 1fr;
  }

  .telematics-map-side {
    border-left: 0;
    border-top: 1px solid var(--fleet-line);
  }
}

@media (max-width: 720px) {
  .telematics-header,
  .telematics-map-toolbar,
  .telematics-map-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .telematics-header-actions,
  .telematics-map-tabs,
  .telematics-map-filters,
  .telematics-card-actions {
    justify-content: stretch;
  }

  .telematics-header-actions > *,
  .telematics-map-tabs button,
  .telematics-map-filters .form-select,
  .telematics-card-actions .btn,
  .telematics-export-grid .btn {
    width: 100%;
  }

  .telematics-sidebar nav,
  .telematics-card-stats,
  .telematics-exception-compact,
  .telematics-export-grid {
    grid-template-columns: 1fr;
  }
}

.fleet-tco-table {
  min-width: 2200px;
}

.vorster-field-tile {
  position: relative;
}

.pm-cva-modal-table-wrap {
  border: 1px solid #eef2f6;
  border-radius: 8px;
  max-height: 58vh;
  overflow: auto;
}

.pm-cva-modal-table {
  border-collapse: collapse;
  font-size: .9rem;
  width: 100%;
}

.pm-cva-modal-table th,
.pm-cva-modal-table td {
  border-bottom: 1px solid #eef2f6;
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}

.pm-cva-modal-table th {
  background: #f8fafc;
  color: #475467;
  font-weight: 600;
  position: sticky;
  top: 0;
}

/* 2026-09-11: this was a flat 2100px regardless of how many columns
   actually render, forcing horizontal scroll even after
   OPERATIONS_HIDDEN_PM_COLUMNS/PM_SERVICE_EXTRA_COLUMNS drop columns
   for a given role/view. Let the table size to its real content
   instead - a role seeing fewer columns gets a narrower table. */
.pm-service-table {
  min-width: 0;
}

.pm-service-table td.pm-miles-red {
  background: #f8d7da;
  color: #842029;
  font-weight: 700;
}

.pm-service-table td.pm-miles-yellow {
  background: #fff3cd;
  color: #664d03;
  font-weight: 700;
}

.pm-service-table td.pm-miles-green {
  background: #d1e7dd;
  color: #0f5132;
  font-weight: 700;
}

.driver-exception-table {
  min-width: 1100px;
}

.empty-state {
  background: #f7f9fb;
  border: 1px dashed #cfd8e3;
  border-radius: 8px;
  color: var(--fleet-muted);
  font-weight: 700;
  margin-bottom: 12px;
  padding: 14px 16px;
}

.match-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  margin-bottom: 16px;
}

.match-summary-grid div {
  background: #f7f9fb;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  padding: 12px;
}

.match-summary-grid span {
  color: #697789;
  display: block;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.match-summary-grid strong {
  color: #1e2a36;
  font-size: 1.2rem;
}

/* PM Service List redesign (2026-09-11, "make the work order and pm
   service module look like this") - 5 real, clickable KPI cards
   (matching a reference layout) instead of the old plain 4-tile
   match-summary-grid. */
.pm-kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(180px, 1fr)) minmax(220px, 1.3fr);
  margin-bottom: 16px;
}

.pm-kpi-card {
  align-items: flex-start;
  background: var(--fleet-panel, #fff);
  border: 1px solid var(--fleet-line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.pm-kpi-card > div:first-of-type,
.pm-kpi-card-legend > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-kpi-card span {
  color: var(--fleet-muted, #697789);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pm-kpi-card strong {
  color: var(--fleet-text, #1e2a36);
  font-size: 1.6rem;
  line-height: 1.1;
}

.pm-kpi-overdue {
  color: #b3261e;
  font-size: .8rem;
  font-weight: 700;
}

.pm-kpi-card a {
  color: var(--fleet-accent, #26706f);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}

.pm-kpi-card a:hover {
  text-decoration: underline;
}

.pm-kpi-icon {
  align-items: center;
  border-radius: 8px;
  display: flex;
  font-size: 1.1rem;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.pm-kpi-icon-danger { background: #fdecea; color: #b3261e; }
.pm-kpi-icon-warning { background: #fff4e0; color: #b8730a; }
.pm-kpi-icon-success { background: #e6f4ea; color: #1e7e34; }
.pm-kpi-icon-info { background: #e8f0fe; color: #1a56b0; }

.pm-kpi-card-legend {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pm-kpi-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .8rem;
}

.pm-kpi-legend li {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 2px 0;
}

.pm-kpi-legend strong {
  font-size: .85rem;
}

.pm-kpi-dot {
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.pm-kpi-dot-shop { background: #1a56b0; }
.pm-kpi-dot-weikert { background: #b8730a; }
.pm-kpi-dot-other { background: #9aa5b1; }

.pm-service-tabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

@media (max-width: 1180px) {
  .pm-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PM Service "Exception Reporting" mini table (pmServiceExceptionsPanel)
   - a compact clickable list, not another KPI-tile grid, since these
   four are click-throughs to a detail popup (openPmExceptionModal)
   rather than at-a-glance counts. */
.pm-exceptions-panel {
  background: #fff8f0;
  border: 1px solid #f0dfc4;
  border-radius: 8px;
  overflow: hidden;
}

.pm-exceptions-panel-title {
  color: #8a5a1f;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 10px 14px 0;
  text-transform: uppercase;
}

.pm-exceptions-table {
  border-collapse: collapse;
  width: 100%;
}

.pm-exceptions-table td {
  padding: 0;
}

.pm-exception-row-button {
  align-items: center;
  background: none;
  border: none;
  border-top: 1px solid #f0dfc4;
  color: #33261a;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  text-align: left;
  width: 100%;
}

.pm-exception-row-button:hover {
  background: #fdecd4;
}

.pm-exception-row-button span {
  flex: 1;
  font-weight: 600;
}

.pm-exception-row-button strong {
  color: #8a5a1f;
}

.pm-exception-row-button i {
  color: #b98a44;
  font-size: .85rem;
}

.exception-kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  margin-bottom: 16px;
}

.exception-kpi {
  background: #f7f9fb;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  color: #1e2a36;
  cursor: pointer;
  padding: 12px;
  text-align: left;
}

.exception-kpi:hover,
.exception-kpi:focus {
  border-color: #c8d3df;
  outline: none;
}

.exception-kpi.active {
  background: #fff5d8;
  border-color: var(--sdc-gold-border);
}

.exception-kpi span {
  color: #697789;
  display: block;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.exception-kpi strong {
  color: #1e2a36;
  font-size: 1.2rem;
}

.match-tools {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(180px, 260px);
  margin-bottom: 16px;
}

.import-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  margin-bottom: 18px;
}

.import-summary-grid div {
  background: #f7f9fb;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  padding: 12px;
}

.import-summary-grid span {
  color: var(--fleet-muted);
  display: block;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.import-summary-grid strong {
  display: block;
  font-size: 1rem;
  margin-top: 6px;
}

.import-error-header {
  margin-top: 8px;
}

.import-error-table {
  min-width: 860px;
}

.last-import-line {
  background: #f7f9fb;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  color: var(--fleet-muted);
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: 14px;
  padding: 10px 12px;
}

.import-error-download {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.import-center-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-panel-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.admin-summary-grid {
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  margin-bottom: 0;
}

.admin-summary-grid div:first-child {
  grid-column: 1 / -1;
}

.system-status-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
}

.system-status-grid div {
  background: #f7f9fb;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  padding: 12px;
}

.system-status-grid span {
  color: var(--fleet-muted);
  display: block;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.system-status-grid strong {
  display: block;
  font-size: 1rem;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.row-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.row-actions .btn {
  align-items: center;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 34px;
}

.sdc-work-card .row-actions.sdc-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 2px;
  white-space: normal;
}

.sdc-work-card .row-actions.sdc-card-actions .btn {
  border-radius: 4px;
  font-weight: 700;
  height: 36px;
  min-width: 82px;
  padding: 0 12px;
  width: auto;
}

.sdc-work-card .row-actions.sdc-card-actions .sdc-convert-request-button {
  background: var(--sdc-gold);
  border-color: var(--sdc-gold-border);
  color: #111827;
}

.sdc-work-card .row-actions.sdc-card-actions .sdc-request-status-button.btn-outline-danger {
  background: #fff;
  border-color: #dc2626;
  color: #b91c1c;
}

.work-order-repair-cell {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.work-order-repair-cell > span {
  min-width: 0;
}

.work-order-description-preview {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  line-clamp: 2;
  max-height: 2.5em;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.work-order-notes-button {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  max-width: 138px;
  white-space: nowrap;
}

.loading-panel {
  align-items: center;
  color: var(--fleet-muted);
  display: flex;
  font-weight: 800;
  gap: 10px;
  min-height: 86px;
}

.work-order-pagination {
  align-items: center;
  border-top: 1px solid #edf1f5;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
}

.work-order-pagination > span {
  color: var(--fleet-muted);
  font-size: .86rem;
  font-weight: 800;
}

.work-order-multi-filter {
  background: #fff;
  border: 1px solid #d9e1ea;
  border-radius: 8px;
  min-width: 220px;
  padding: 8px 10px;
  position: relative;
}

.work-order-multi-filter summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
}

.work-order-multi-filter summary::-webkit-details-marker {
  display: none;
}

.work-order-multi-filter summary span {
  color: var(--fleet-muted);
  font-size: .82rem;
  font-weight: 800;
}

.work-order-multi-filter summary strong {
  color: var(--fleet-primary);
  font-size: .86rem;
  font-weight: 800;
  text-align: right;
}

.work-order-multi-filter-panel {
  background: #fff;
  border-top: 1px solid #edf1f5;
  margin-top: 8px;
  padding-top: 8px;
}

.work-order-multi-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.work-order-multi-filter-options {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
}

.work-order-multi-filter .form-check {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 0;
}

.work-order-multi-filter .form-check-input {
  flex: 0 0 auto;
  margin: 0;
}

/* Rental Equipment report revamp (2026-09-11) - base grid rules kept
   here, before the max-width:1180px/820px blocks below, so their
   narrower-viewport overrides (which target these same selectors)
   correctly win the cascade at those widths. */
.rental-kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.rental-charts-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: stretch;
}

/* Monthly Cost by Project + Rentals by Equipment Type only now (the
   project chart moved to its own full-width row below) - two even
   columns instead of the old 2fr/1fr/1fr three-up. */
.rental-charts-row-two {
  grid-template-columns: 1fr 1fr;
}

.rental-project-chart-row {
  display: grid;
}

/* Taller than the old 320px (2026-09-15, Month to Month Cost by
   Project) - a bottom legend with up to one entry per real project
   (15 on file today) wraps across several lines, on top of the chart
   itself, and needs the extra room to stay readable. */
.rental-project-chart-row .rental-chart-card {
  min-height: 420px;
}

.rental-bottom-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
}

@media (max-width: 1180px) {
  .summary-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }

  .module-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 22px 16px;
  }

  /* The sidebar becomes a slide-in drawer instead of a block that
     pushes every page's real content down below the full nav list -
     hidden off-screen by default, slid into view on top of a dimmed
     backdrop when #mobileNavToggle is tapped (bound in dashboard.js).
     position:fixed takes it out of the grid entirely, so .content
     doesn't need to make room for it. */
  .sidebar {
    bottom: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .3);
    left: 0;
    max-width: 320px;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 82%;
    z-index: 1000;
  }

  .sidebar.mobile-nav-open {
    transform: translateX(0);
  }

  .mobile-nav-toggle {
    display: flex;
  }

  .mobile-nav-backdrop {
    background: rgba(15, 23, 42, .45);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
  }

  .mobile-nav-backdrop.mobile-nav-open {
    display: block;
  }

  .module-nav {
    grid-template-columns: 1fr;
  }

  .topbar,
  .module-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .summary-grid,
  .module-grid,
  .admin-panel-grid,
  .exception-kpi-grid,
  .import-summary-grid,
  .system-status-grid,
  .equipment-tools,
  .request-form,
  .dispatch-snapshot-grid,
  .dispatch-command-grid,
  .match-summary-grid,
  .telematics-overview-grid,
  .rental-kpi-grid,
  .rental-charts-row,
  .rental-bottom-row {
    grid-template-columns: 1fr;
  }

  .equipment-tool-actions {
    justify-content: flex-start;
  }

  /* The rail is already a horizontal strip above the content at every
     width now (see the base .dispatch-shell rules above) - a phone
     screen just doesn't have room to WRAP 14 tabs onto rows without
     pushing the actual content far down, so this keeps them on one
     scrollable row instead, same as any other horizontal tab strip on
     mobile. */
  .dispatch-rail {
    padding: 6px 4px;
  }

  .dispatch-rail-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .dispatch-rail-item {
    white-space: nowrap;
  }

  .dispatch-rail-content {
    padding: 16px;
    /* Flex items default to min-width:auto (their content's intrinsic
       width), which lets them overflow their own container instead of
       shrinking - the actual mechanism behind the 1200+px shell above.
       This is what makes align-items:stretch's fix effective for a
       wide table/badge row inside. */
    min-width: 0;
  }

  /* .dispatch-map-panel's desktop margin (-22px -26px) matches the
     desktop .dispatch-rail-content padding it's canceling out - this
     matches it to the 16px padding set just above for this breakpoint
     instead, or the panel would over-bleed past .dispatch-rail-content
     and get clipped by .content's overflow-x:hidden. */
  .dispatch-map-panel {
    margin: -16px -16px 0;
  }

  /* The View As banner's full sentence wraps to 2-3 lines at phone
     width instead of the one line it fits on desktop - give the shell
     enough top margin that it doesn't sit under the fixed banner. */
  body.view-as-active .app-shell {
    margin-top: 76px;
  }
}

/* Field User Dispatch home (2026-09-10) - "their screen is going to
   be so so so simple." Two big, thumb-friendly tiles, nothing else. */
.field-user-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.field-user-tile {
  align-items: center;
  background: var(--fleet-panel);
  border: 1px solid var(--fleet-line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 16px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fleet-ink);
}

.field-user-tile i {
  font-size: 2rem;
  color: var(--fleet-accent);
}

.field-user-tile:hover,
.field-user-tile:focus-visible {
  background: var(--fleet-page);
  border-color: var(--fleet-accent);
}

.field-user-search-results {
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.field-user-search-results:empty {
  display: none;
}

.field-user-search-result {
  background: none;
  border: none;
  border-bottom: 1px solid var(--fleet-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.field-user-search-result:last-child {
  border-bottom: none;
}

.field-user-search-result:hover,
.field-user-search-result:focus-visible {
  background: var(--fleet-page);
}

.field-user-selected-chip {
  align-items: center;
  background: var(--fleet-page);
  border: 1px solid var(--fleet-accent);
  border-radius: 8px;
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  padding: 10px 12px;
}

/* ---------------------------------------------------------------------
   Rental Equipment report revamp (2026-09-11) - KPI tiles, charts, and
   the bottom info panels. .summary-card (already used by the main
   Dashboard's KPI row) is reused as-is for these tiles - same visual
   language, just a 5-column grid instead of 6. The base grid rules
   (.rental-kpi-grid/.rental-charts-row/.rental-bottom-row) live
   earlier in this file, right before the existing max-width:820px
   block - a base (non-media) rule placed AFTER a media-query rule
   targeting the same selector wins the cascade tie regardless of the
   media condition, so defining them here would have silently
   overridden the 820px single-column collapse below 820px.
   --------------------------------------------------------------------- */
.rental-chart-card {
  background: var(--fleet-panel);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rental-chart-card h4 {
  font-size: .95rem;
  margin-bottom: 12px;
}

.rental-chart-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
}

/* "a search/ drop down needs to be added for this chart only to
   search by job number/name individually" (2026-09-16) - Month to
   Month Cost by Project's own job picker, scoped to that one card. */
.rental-chart-project-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.rental-chart-project-picker input,
.rental-chart-project-picker select {
  flex: 1 1 200px;
  min-width: 0;
}

.rental-chart-empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .85rem;
  padding: 0 24px;
}

.rental-donut-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
  max-height: 300px;
  min-width: 180px;
}

/* "Active Rental Age & Cost" (2026-09-23) - replaces "Rentals by
   Equipment Type". Four aging buckets, each its own tinted card, plus
   a table of the longest-running active rentals underneath. */
.rental-age-cost-card {
  min-height: 0;
}

.rental-age-cost-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.rental-age-view-all {
  color: var(--fleet-link, #26706f);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.rental-age-view-all:hover {
  text-decoration: underline;
}

.rental-age-bucket-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 18px;
}

.rental-age-bucket {
  border-radius: 10px;
  padding: 14px 16px;
}

.rental-age-bucket-label {
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 6px;
}

.rental-age-bucket-count {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
}

.rental-age-bucket-cost {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 6px;
}

.rental-age-bucket-sub {
  color: var(--fleet-muted, #6c757d);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.rental-age-green { background: #e8f5e9; }
.rental-age-green .rental-age-bucket-label,
.rental-age-green .rental-age-bucket-count { color: #1b5e20; }

.rental-age-blue { background: #e3f2fd; }
.rental-age-blue .rental-age-bucket-label,
.rental-age-blue .rental-age-bucket-count { color: #0d47a1; }

.rental-age-amber { background: #fff8e1; }
.rental-age-amber .rental-age-bucket-label,
.rental-age-amber .rental-age-bucket-count { color: #8a5c00; }

.rental-age-red { background: #fdecea; }
.rental-age-red .rental-age-bucket-label,
.rental-age-red .rental-age-bucket-count { color: #a51e2d; }

.rental-age-longest-heading {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
}

@media (max-width: 820px) {
  .rental-age-bucket-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 2026-09-11: "the screen is so big on the rental dashboard... why?"
   - found live: with the project chart moved to its own row, the
   donut card's only sibling is the Monthly Cost by Project LIST,
   which keeps growing taller as more active projects get added (57
   active rentals = a long list). align-items:stretch on the row above
   was stretching the donut's card to match that height, and with no
   cap on .rental-donut-wrap, Chart.js (responsive, no fixed aspect
   ratio) filled that entire height with an enormous circle. Both
   cards in this row are now capped to a normal, professional height -
   the project list scrolls internally past that point instead of
   growing the whole row. */
.rental-charts-row-two .rental-chart-card {
  max-height: 360px;
}

.rental-charts-row-two .rental-bar-list {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

/* The "Active Rentals" center label used to be an HTML div here
   (.rental-donut-center), pinned to this wrap's CSS center. A 2026-09-11
   pass tried to fix it overlapping the ring with a max-width - that
   didn't address the real cause (the legend eats width on one side,
   so the ring's real center isn't the wrap's CSS center) and it kept
   overlapping. The label is now drawn straight onto the canvas at the
   ring's actual center instead - see rentalDonutCenterTextPlugin in
   wwwroot/js/dashboard.js - so this rule is no longer needed. */

.rental-bar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rental-bar-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 100px 1fr 32px;
}

.rental-bar-label {
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rental-bar-track {
  background: var(--fleet-page);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.rental-bar-fill {
  background: var(--fleet-accent);
  height: 100%;
}

.rental-bar-value {
  font-weight: 700;
  text-align: right;
}

.rental-cost-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--fleet-page);
}

.rental-cost-row .rental-bar-label {
  white-space: normal;
}

.rental-cost-total {
  align-items: center;
  border-top: 2px solid var(--fleet-line);
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
}

/* "we need to revamp the equipment & fuel usage module" (2026-09-16) -
   Fuel Usage by Project's own horizontal bar (reuses .rental-cost-row
   as the row container, same label/value styling, just with a bar
   track in the middle). */
.equipment-usage-hbar-track {
  background: var(--fleet-page);
  border-radius: 4px;
  flex: 1 1 auto;
  height: 10px;
  overflow: hidden;
}

.equipment-usage-hbar-fill {
  background: var(--fleet-accent);
  height: 100%;
}

.equipment-usage-insights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.equipment-usage-insight-row {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  font-size: .88rem;
}

.equipment-usage-insight-row i {
  color: var(--fleet-accent);
  margin-top: 2px;
}

.equipment-usage-header .panel-header {
  align-items: flex-start;
}

/* STALE GPS (2026-10-16): a unit that has not reported in 24+ hours - its shown location is only the LAST KNOWN one, not confirmed.
   Bright on purpose (Pete/Ryan assumed E-633 was at Mahogany for a week because nothing said it hadn't reported). */
.stale-gps-badge {
  background: #ff6a00;
  border: 1px solid #b34700;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}

.magnet-board-chip-stale {
  border-left: 5px solid #ff6a00 !important;
  box-shadow: 0 0 0 1px rgba(255, 106, 0, .55);
}

.rental-list-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
}

.rental-list-row {
  align-items: flex-start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(34px, max-content) minmax(0, 1fr) max-content;
  font-size: .84rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fleet-page);
}

.rental-list-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rental-list-days {
  color: var(--sdc-gold-border);
  font-weight: 800;
}

/* Pending Pickup Verification past its 1-week check-in window - a
   plainer amber count for everything else, red once it's genuinely
   overdue and the overbilling risk this whole panel exists for. */
.rental-list-days-overdue {
  color: #dc2626;
}

.rental-list-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rental-list-main span {
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Scoped to NOT overlap the existing max-width:820px block (which
   collapses .rental-kpi-grid to 1 column) - that block sits earlier in
   this file, so at a width under 820px this rule would otherwise win
   the cascade tie (same specificity, later source wins) and force 3
   columns back on a phone-width screen. min-width:821px keeps this
   only in the 821-1100px middle range. */
@media (max-width: 1100px) and (min-width: 821px) {
  .rental-kpi-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }

  .rental-charts-row,
  .rental-bottom-row {
    grid-template-columns: 1fr;
  }
}

/* "I don't want to see a huge paragraph on the pages telling me what
   it's about... but i do want it to be an icon where i can hover and
   read it" (2026-09-11) - the shared hover-to-read icon
   (infoHintHtml(), dashboard.js) used everywhere a panel used to carry
   a static explanatory paragraph under its heading. Sized to sit
   inline right after a heading's text, roughly matching its own
   line-height so it doesn't visually bump the heading taller. */
.info-hint {
  align-items: center;
  border-radius: 50%;
  color: var(--fleet-muted);
  cursor: help;
  display: inline-flex;
  font-size: .8rem;
  height: 18px;
  justify-content: center;
  position: relative;
  vertical-align: middle;
  width: 18px;
}

.info-hint:hover,
.info-hint:focus {
  color: var(--fleet-accent);
  outline: none;
}

/* Qualified as .info-hint .info-hint-tooltip, not the bare class alone
   - a real specificity bug caught live: the pre-existing generic
   ".panel-header span { display: block; }" rule (0,1,1) otherwise beat
   a bare ".info-hint-tooltip { display: none; }" (0,1,0), since every
   one of these lives inside a .panel-header's <h3> - the tooltip
   showed permanently, the exact opposite of "hover to read it". Two
   classes (0,2,0) beats that regardless of source order. */
.info-hint .info-hint-tooltip {
  background: var(--fleet-ink);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  color: #fff;
  display: none;
  font-size: .78rem;
  font-weight: 400;
  left: 0;
  letter-spacing: normal;
  line-height: 1.4;
  padding: 10px 12px;
  position: absolute;
  text-transform: none;
  top: 24px;
  width: 280px;
  max-width: 80vw;
  z-index: 40;
}

.info-hint:hover .info-hint-tooltip,
.info-hint:focus .info-hint-tooltip,
.info-hint:focus-within .info-hint-tooltip {
  display: block;
}

/* The Dispatch Map's own hint sits inside a Leaflet control (topright,
   stacked with the layers toggle) instead of a panel heading - sized
   to match Leaflet's own 30x30 .leaflet-bar buttons so it doesn't look
   like a foreign element bolted onto the map. Its tooltip opens
   leftward/downward instead of the default left:0/top:24px, so it
   never runs off the map's own right edge. */
.dispatch-map-help-control {
  background: #fff;
}

.dispatch-map-help-control .info-hint {
  height: 30px;
  width: 30px;
}

.dispatch-map-help-control .info-hint-tooltip {
  left: auto;
  right: 34px;
  top: 0;
}

/* Add Rental redesign (2026-09-15) - "a Fleet Admin contract-entry
   workspace": the form (left, ~52% width) and the contract document
   viewer (right, ~48%, the ENTIRE right side - no fields ever live
   there) scroll independently, both close to the modal's full height,
   with a fixed Cancel/+ Add Rental footer (modal-dialog-scrollable on
   .rental-add-modal-dialog keeps the header/footer put while only
   .modal-body's children scroll - see rentalEquipmentModalHtml).
   Was PDF-on-the-left/form-on-the-right (2026-09-11) - swapped per the
   explicit spec ("RIGHT SIDE: CONTRACT DOCUMENT VIEWER"), same flex
   row otherwise. */
.rental-add-modal-dialog {
  max-width: 1360px;
}

.rental-contract-preview-body {
  display: flex;
  gap: 0;
  padding: 0 !important;
}

.rental-contract-preview-form {
  flex: 1 1 52%;
  min-width: 0;
  padding: 18px 20px;
  overflow-y: auto;
  max-height: 82vh;
  border-right: 1px solid var(--fleet-line);
}

/* Clear section headers, per the redesign spec ("clear section
   headers and icons... light gray section borders") - one per group
   (Rental Information/Project & Location/Rental Dates/Rate
   Information/Contract Details/Additional Information), replacing the
   old plain <h6 class="mt-4"> with no visual separation between
   sections. */
.rental-form-section-heading {
  align-items: center;
  border-bottom: 1px solid var(--fleet-line);
  color: #1f2933;
  display: flex;
  font-size: .95rem;
  font-weight: 600;
  gap: 8px;
  margin: 22px 0 14px;
  padding-bottom: 8px;
}

.rental-form-section-heading:first-child {
  margin-top: 0;
}

.rental-form-section-heading i {
  color: var(--fleet-accent);
}

.rental-contract-viewer-pane {
  display: flex;
  flex: 1 1 48%;
  flex-direction: column;
  height: 82vh;
  min-width: 0;
  padding: 18px 20px;
}

.rental-contract-viewer-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--fleet-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  padding-bottom: 12px;
}

.rental-contract-viewer-title {
  min-width: 0;
}

.rental-contract-viewer-title h4 {
  color: #1f2933;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0;
  text-transform: uppercase;
}

.rental-contract-viewer-title h4 i {
  color: var(--fleet-accent);
  margin-right: 6px;
}

.rental-contract-viewer-filename {
  color: var(--fleet-muted, #6c757d);
  display: block;
  font-size: .82rem;
  margin-top: 2px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rental-contract-viewer-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rental-contract-zoom-controls {
  display: inline-flex;
  gap: 2px;
}

.rental-contract-viewer-body {
  flex: 1 1 auto;
  margin-top: 14px;
  min-height: 0;
  position: relative;
}

.rental-contract-viewer-body iframe {
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  height: 100%;
  width: 100%;
}

/* Before a file is chosen - "a large and very noticeable upload area"
   with its own drag-and-drop target; .rental-contract-dropzone-active
   is toggled on dragover/dragleave (bindRentalContractViewerControls). */
.rental-contract-dropzone {
  align-items: center;
  background: #fafbfc;
  border: 2px dashed var(--fleet-line);
  border-radius: 10px;
  color: var(--fleet-muted, #6c757d);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  justify-content: center;
  padding: 32px;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease;
}

.rental-contract-dropzone-active {
  background: #fff8e8;
  border-color: var(--sdc-gold-border);
}

.rental-contract-dropzone i {
  color: var(--fleet-accent);
  font-size: 2.75rem;
}

.rental-contract-dropzone-text {
  font-size: .95rem;
  margin: 0;
  max-width: 320px;
}

.rental-contract-image-wrap {
  background: #f4f6f8;
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  height: 100%;
  overflow: auto;
  text-align: center;
}

.rental-contract-image-wrap img {
  display: inline-block;
}

@media (max-width: 992px) {
  .rental-contract-preview-body {
    flex-direction: column;
  }

  .rental-contract-preview-form {
    border-right: none;
    border-bottom: 1px solid var(--fleet-line);
    max-height: none;
  }

  .rental-contract-viewer-pane {
    height: 60vh;
  }
}

/* Equipment Map embedded under Work Orders & PM Service Schedule's
   History and PM Service tabs (explicit instruction, 2026-09-11) -
   just a border/spacing wrapper, the map itself is unchanged. */
.equipment-map-embed {
  border: 1px solid var(--fleet-line);
  border-radius: 10px;
  overflow: hidden;
  padding: 12px;
}

/* Equipment Profile modal sections */
.equipment-profile-section {
  border-bottom: 1px solid var(--fleet-line);
  margin-bottom: 16px;
  padding-bottom: 16px;
}

.equipment-profile-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.equipment-profile-section h4 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.equipment-profile-interval-override {
  background: var(--fleet-surface-muted, #f8f9fa);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  margin-top: 10px;
  padding: 10px 12px;
}

/* ---------------------------------------------------------------------
   Work Order Management landing page redesign (2026-09-14, "the work
   order module needs to look like this exactly") - KPI tiles with
   trend, the 3-chart row, the status filter strip, the filter bar, the
   table + persistent right-side detail panel. Reuses .summary-card and
   the .rental-chart-card family (site.css, "Rental Equipment report
   revamp") for the same visual language as the rest of the dashboard
   instead of inventing a new one.
   --------------------------------------------------------------------- */

.sdc-tab-strip-spacer {
  flex: 1 1 auto;
}

.sdc-tab-link {
  background: transparent;
  border: none;
  color: var(--fleet-muted);
  cursor: pointer;
  font-size: .85rem;
  font-weight: 700;
  padding: 8px 10px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sdc-tab-link:hover,
.sdc-tab-link.active {
  color: var(--fleet-accent);
}

.sdc-wo-kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  margin-bottom: 16px;
}

.sdc-wo-kpi-tile {
  align-items: flex-start;
}

.sdc-wo-kpi-trend {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: .8rem;
  font-weight: 800;
  gap: 2px;
  padding: 3px 8px;
  white-space: nowrap;
}

.sdc-wo-kpi-trend-up {
  background: #fdecea;
  color: #c62828;
}

.sdc-wo-kpi-trend-down {
  background: #e6f4ea;
  color: #1e7d34;
}

.sdc-wo-kpi-trend-flat {
  background: var(--fleet-page);
  color: var(--fleet-muted);
}

.sdc-wo-charts-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 16px;
}

.sdc-status-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.sdc-status-filter-tab {
  background: var(--fleet-panel);
  border: 1px solid var(--fleet-line);
  border-radius: 999px;
  color: var(--fleet-muted);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  padding: 6px 14px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sdc-status-filter-tab:hover {
  border-color: var(--fleet-accent);
  color: var(--fleet-ink);
}

.sdc-status-filter-tab.active {
  background: var(--fleet-accent);
  border-color: var(--fleet-accent);
  color: #fff;
}

.sdc-wo-filter-bar {
  margin-bottom: 16px;
}

/* Resizable table/detail-panel split (2026-09-14, "I want to be able
   to adjust the width here... if i wanted a fuller view of the work
   order/work request detail i have it and vice versa with the list
   view"). --sdc-wo-panel-width is set as an inline style by JS
   (bindSdcWorkOrderPanelResize) from a saved per-browser width
   (localStorage - a per-viewer convenience, not data that needs to be
   shared or persisted server-side); the drag handle is the middle
   grid column. Falls back to the fixed 360px default when nothing's
   been dragged yet. */
.sdc-wo-layout {
  align-items: flex-start;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(280px, 1fr) 10px minmax(280px, var(--sdc-wo-panel-width, 360px));
}

.sdc-wo-resize-handle {
  align-items: center;
  align-self: stretch;
  cursor: col-resize;
  display: flex;
  justify-content: center;
  touch-action: none;
  width: 10px;
}

.sdc-wo-resize-handle::before {
  background: var(--fleet-line);
  border-radius: 2px;
  content: "";
  height: 40px;
  width: 4px;
  transition: background .15s ease;
}

.sdc-wo-resize-handle:hover::before,
.sdc-wo-resize-handle.is-dragging::before {
  background: var(--fleet-accent);
}

.sdc-wo-table-wrap {
  background: var(--fleet-panel);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  min-width: 0;
  padding: 16px;
}

.sdc-wo-table-desc {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sdc-wo-table-actions {
  white-space: nowrap;
}

.sdc-wo-table-row {
  cursor: pointer;
}

.sdc-wo-table-row:hover {
  background: var(--fleet-page);
}

.sdc-wo-table-row.active {
  background: #fff6e5;
}

.sdc-wo-detail-panel {
  background: var(--fleet-panel);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 16px;
  position: sticky;
  top: 16px;
}

.sdc-wo-detail-panel-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--fleet-line);
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.sdc-wo-detail-panel-header h4 {
  margin-bottom: 2px;
}

.sdc-wo-detail-panel-empty {
  align-items: center;
  color: var(--fleet-muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 40px 16px;
  text-align: center;
}

.sdc-wo-detail-panel-empty i {
  font-size: 1.8rem;
}

@media (max-width: 1100px) {
  .sdc-wo-kpi-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .sdc-wo-charts-row {
    grid-template-columns: 1fr;
  }

  .sdc-wo-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sdc-wo-resize-handle {
    display: none;
  }

  .sdc-wo-table-wrap {
    margin-bottom: 16px;
  }

  .sdc-wo-detail-panel {
    max-height: none;
    position: static;
  }
}

@media (max-width: 560px) {
  .sdc-wo-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Work order detail forms (Add Labor/Parts/Meter/Attachments) -
   2026-09-15: "THE WAY THIS IS SET UP RIGHT NOW IS NOT THE BEST
   FORMAT" + a real layout bug found from the screenshot - Bootstrap's
   .row/.col-md-4 breaks on VIEWPORT width, not the width of the actual
   container these forms render in. That was fine when this content
   only ever lived in a full-width modal; now it also renders inside
   the resizable detail panel (sdc-wo-detail-panel), which can be
   dragged much narrower than any Bootstrap breakpoint - the 3 columns
   kept trying to sit side by side anyway and collided/overlapped.
   CSS Grid's auto-fit responds to the real container width instead,
   so these fields now wrap correctly regardless of whether they're in
   the wide modal or a narrow dragged panel. */
.sdc-wo-form-row {
  /* .request-form (below) is ITSELF a 3-column grid - without this,
     this row is just one grid ITEM inside that outer grid, sized to a
     single ~180px column track instead of the form's full width, which
     starved the auto-fit rule below of any real room to work with
     (found live: at 700px this still rendered a single narrow stacked
     column). grid-column: 1 / -1 is the same "span every outer column"
     escape hatch already used by .wide-field/.form-actions above. */
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 12px;
}

.sdc-wo-form-row .form-label {
  margin-bottom: 0;
  width: 100%;
}

/* HCSS-sourced rows in the combined Work Order Management table
   (2026-09-15, made clickable 2026-09-17 - see openHcssSourcedWorkOrder
   in dashboard.js). Still tinted so they read as distinct from a
   native SDC row at a glance, even though clicking one now opens it
   just like any other row. */
.sdc-wo-table-row-hcss {
  color: var(--fleet-muted);
  cursor: pointer;
}

.sdc-wo-table-row-hcss td {
  background: var(--fleet-page);
}

.sdc-wo-table-row-hcss:hover td {
  background: var(--fleet-line);
}

.sdc-wo-table-row-hcss.active td {
  background: #fff6e5;
}

/* Equipment Management redesign, Page 1 - Fleet Overview
   (2026-09-15). Reuses .summary-card/.rental-chart-card/
   .sdc-status-filter-tab/.sdc-wo-table-wrap from elsewhere in the
   dashboard for the same visual language instead of inventing a new
   one. */
.equipment-overview-search {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.equipment-overview-search-box {
  align-items: center;
  background: var(--fleet-panel);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  display: flex;
  flex: 1 1 420px;
  gap: 10px;
  padding: 10px 14px;
}

.equipment-overview-search-box i {
  color: var(--fleet-muted);
}

.equipment-overview-search-box input {
  border: none;
  flex: 1;
  font-size: 1rem;
  outline: none;
  padding: 4px 0;
}

.equipment-kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.equipment-kpi-tile {
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.equipment-kpi-tile i {
  font-size: 1.6rem;
}

.equipment-kpi-tile-danger i { color: #c62828; }
.equipment-kpi-tile-warning i { color: var(--fleet-warning); }
.equipment-kpi-tile-info i { color: #1565c0; }

.equipment-overview-layout {
  align-items: flex-start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.equipment-list-column {
  min-width: 0;
}

.equipment-sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.equipment-sidebar-column .rental-chart-card {
  min-height: 220px;
}

.equipment-sidebar-column .rental-donut-wrap {
  max-height: 180px;
  min-height: 160px;
}

.equipment-sidebar-column .rental-chart-canvas-wrap {
  min-height: 160px;
}

.equipment-truck-assignments-table {
  font-size: .85rem;
}

@media (max-width: 1100px) {
  .equipment-kpi-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .equipment-overview-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .equipment-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Equipment Profile - Page 2 of the Equipment Management redesign
   (2026-09-15). A real full page (left nav + content), not a modal. */
.equipment-profile-header-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.equipment-profile-header-body {
  align-items: flex-start;
  display: flex;
  gap: 20px;
}

.equipment-profile-photo {
  align-items: center;
  background: var(--fleet-page);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  color: var(--fleet-muted);
  display: flex;
  flex: 0 0 110px;
  font-size: 2.5rem;
  height: 110px;
  justify-content: center;
  width: 110px;
}

.equipment-profile-header-fields {
  flex: 1;
  min-width: 0;
}

.equipment-profile-header-fields h2 {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 2px;
}

.equipment-profile-header-grid {
  display: grid;
  gap: 10px 20px;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  margin-top: 10px;
}

.equipment-profile-header-grid span {
  color: var(--fleet-muted);
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.equipment-profile-layout {
  align-items: flex-start;
  display: grid;
  gap: 16px;
  grid-template-columns: 220px minmax(0, 1fr);
}

.equipment-profile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 16px;
}

.equipment-profile-nav-btn {
  background: var(--fleet-panel);
  border: 1px solid var(--fleet-line);
  border-radius: 6px;
  color: var(--fleet-ink);
  cursor: pointer;
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
}

.equipment-profile-nav-btn:hover {
  border-color: var(--fleet-accent);
}

.equipment-profile-nav-btn.active {
  background: var(--fleet-accent);
  border-color: var(--fleet-accent);
  color: #fff;
}

.equipment-profile-content {
  min-width: 0;
}

.equipment-profile-overview-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

/* Details tab reorganization (2026-09-18, explicit instruction: "the
   current long single-column list is difficult to read... group the
   existing fields into cards/sections"). Same telematics-detail-list
   rows as before, just grouped into three named cards instead of one
   long flat list. */
.equipment-profile-detail-sections {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}

.equipment-profile-detail-card {
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  padding: 14px 16px;
}

.equipment-profile-detail-card h4 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--fleet-ink);
}

.equipment-profile-permit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.equipment-profile-permit-list li {
  border-bottom: 1px solid var(--fleet-line);
  padding: 6px 0;
}

.equipment-profile-permit-list li:last-child {
  border-bottom: none;
}

.equipment-profile-row-expiring td {
  background: #fff8e6;
}

.equipment-profile-note {
  border-bottom: 1px solid var(--fleet-line);
  padding: 10px 0;
}

.equipment-profile-note:last-child {
  border-bottom: none;
}

.equipment-profile-interval-override {
  background: var(--fleet-page);
  border: 1px solid var(--fleet-line);
  border-radius: 8px;
  margin-top: 12px;
  padding: 12px;
}

@media (max-width: 900px) {
  .equipment-profile-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .equipment-profile-nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }

  .equipment-profile-header-body {
    flex-direction: column;
  }

  .equipment-profile-header-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .equipment-profile-overview-grid {
    grid-template-columns: 1fr;
  }

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

/* Equipment auto-assign suggestions (2026-09-21) - "fits" candidates
   read as normal actionable cards; excluded/overweight/Down candidates
   stay visible (so the fleet manager sees WHY, not just a shorter
   list) but visually recede. */
.dispatch-suggest-candidate {
  border: 1px solid var(--fleet-line);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 6px;
}
.dispatch-suggest-candidate.does-not-fit {
  opacity: .65;
}

/* Mechanics / Inspections Perform Inspection checklist (2026-09-25).
   Flex rows instead of a <table> - a fixed-column table can't reflow on
   a phone (mechanics use this ON a phone in the field, same as CAT
   Inspect) and either forces horizontal scroll or gets clipped by
   body's overflow-x:hidden. No fixed widths anywhere here on purpose -
   flex-wrap plus each child's own min-width is what lets this reflow
   at every viewport without a table-specific breakpoint. */
.mechanics-item-list {
  display: flex;
  flex-direction: column;
}
.mechanics-item-row {
  align-items: center;
  border-bottom: 1px solid var(--fleet-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
}
.mechanics-item-row:last-child {
  border-bottom: none;
}
.mechanics-item-label {
  flex: 3 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mechanics-item-answer {
  flex: 2 1 180px;
  min-width: 160px;
}
.mechanics-item-comments {
  flex: 2 1 180px;
  min-width: 160px;
}
/* Below phone width even a 160px-min answer/comments pair can't sit
   side by side with the label and stay legible - stack every field
   onto its own full-width line instead of letting flex-wrap squeeze
   them, same standard as the rest of the app's @media (max-width:
   760px)/820px breakpoints above. */
@media (max-width: 560px) {
  .mechanics-item-row {
    flex-direction: column;
    align-items: stretch;
  }
  .mechanics-item-answer,
  .mechanics-item-comments {
    min-width: 0;
    width: 100%;
  }
}