.workspace-tabs {
  display: flex;
  gap: 6px;
  max-width: 100%;
  margin: 16px 0 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.mobile-cell-label {
  display: none;
}

.workspace-tabs button {
  flex: 0 0 auto;
}

.workspace-tabs button.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.document-library-toolbar,
.document-tabs {
  min-width: 0;
  max-width: 100%;
}

.document-tabs {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.document-tabs button {
  flex: 0 0 auto;
}

.record-drawer,
.operating-ledger-workspace,
.claim-case-workspace,
.operational-follow-through {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.task-split,
.reservation-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.record-filter-row,
.movement-actions,
.document-preview-tools,
.document-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.record-filter-row {
  justify-content: flex-end;
  margin-bottom: 10px;
}

.movement-actions {
  justify-content: flex-end;
}

.history-list,
.workflow-task-list {
  display: grid;
  gap: 8px;
}

.weekly-collections-panel {
  margin-bottom: 18px;
}

.payment-history-row {
  align-items: flex-start;
  flex-wrap: wrap;
}

.payment-history-main {
  display: grid;
  min-width: min(100%, 16rem);
}

.payment-correction-details {
  flex-basis: 100%;
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}

.payment-correction-details > summary {
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 700;
}

@media (max-width: 760px) {
  /* Keep the record title and the two frequent commands in one compact row.
     Search remains immediately below; account and system actions live in the
     mobile More sheet. */
  .topbar {
    top: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    padding: 10px;
  }
  .topbar > div:first-child { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; }
  .topbar h1 { font-size: 23px; overflow-wrap: anywhere; }
  .topbar .eyebrow { margin-bottom: 2px; font-size: 11px; }
  .global-command { grid-column: 1 / -1; grid-row: 2; }
  .topbar-actions {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    overflow: visible;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .topbar-actions > .profile-trigger,
  .topbar-actions > .system-menu { display: none; }
  .topbar-actions > .primary { padding-inline: 10px; white-space: nowrap; }

  .notification-panel {
    position: fixed;
    inset: auto 12px calc(88px + env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100dvh - 190px - env(safe-area-inset-bottom));
  }
  .global-search-results {
    max-height: calc(100dvh - 190px - env(safe-area-inset-bottom));
  }

  /* Mobile users should never have to guess that a section exists off-screen.
     Six to eight short tabs fit as a readable two-column section picker. */
  .file-tab-bar,
  .rental-detail-tabs,
  .workspace-tabs,
  .document-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
    gap: 7px;
  }
  .file-tab,
  .rental-detail-tabs button,
  .workspace-tabs button,
  .document-tabs button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
  .customer-file-header .customer-more-actions { width: 100%; }
  .customer-file-header .customer-more-actions > summary { width: 100%; text-align: center; }
  .customer-file-header .customer-more-actions > div { right: 12px; left: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* Dialogs occupy the full interactive surface. The app navigation is
     hidden while a top-layer workflow is active so it cannot compete with
     the dialog footer or appear to be actionable beneath it. */
  body.modal-open .sidebar { display: none; }
  body.modal-open .modal:not(.confirm-modal) {
    height: 100dvh;
    max-height: 100dvh;
  }
  body.modal-open .modal:not(.confirm-modal) .modal-body {
    max-height: calc(100dvh - 78px);
  }

  .fleet-scan-table thead { display: none; }
  .fleet-scan-table,
  .fleet-scan-table tbody { display: block; min-width: 0; width: 100%; }
  .fleet-scan-table tr {
    display: grid;
    gap: 0;
    width: 100%;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
  }
  .fleet-scan-table td {
    display: grid;
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 100%;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  .fleet-scan-table .mobile-cell-label {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
  }
  .fleet-scan-table td:first-child,
  .fleet-scan-table td.mobile-card-action { grid-template-columns: 1fr; }
  .fleet-scan-table td.mobile-card-action { border-bottom: 0; }
  .fleet-scan-table td.mobile-card-action button { width: 100%; }
  .fleet-scan-table .vehicle-table-cell { grid-template-columns: 58px minmax(0, 1fr); }
}

.payment-correction-details .compact-entry-form {
  margin-top: 0.75rem;
}

.payment-correction-details .danger-zone {
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

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

.collection-account-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(190px, auto) auto;
  gap: 16px;
  align-items: center;
  min-height: 72px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.collection-account-row:first-child {
  border-top: 0;
}

.collection-account-row > div,
.collection-account-due {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.collection-account-row small,
.weekly-period-amount small {
  color: var(--muted);
}

.collection-account-row.is-overdue {
  border-left: 3px solid var(--danger);
  padding-left: 12px;
}

.collection-account-due {
  text-align: right;
}

.weekly-charge-history {
  margin: 18px 0;
}

.weekly-period-amount {
  display: grid;
  justify-items: end;
  gap: 3px;
}

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

.form-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.detail-tile.is-warning {
  border-left: 3px solid var(--warning);
}

.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.history-row > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.history-row small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.workflow-task {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.workflow-task.is-current {
  border-left: 4px solid var(--primary);
}

.workflow-task-heading {
  display: grid;
  gap: 3px;
}

.workflow-task-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.workflow-task-heading h3 {
  margin: 0;
  font-size: 16px;
}

.service-edit-form {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.confirm-reason {
  padding-bottom: 0;
}

.toast {
  align-items: center;
  gap: 12px;
}

.mobile-more-button,
.mobile-more-panel {
  display: none;
}

.my-work-panel { grid-area: work; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.command-dashboard.is-guided-only > :not(.my-work-panel) { display: none; }
.my-work-heading,
.my-work-tabs,
.my-work-list { min-width: 0; max-width: 100%; }
.my-work-heading small { color: var(--muted); white-space: nowrap; }
.my-work-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.my-work-tabs button { min-height: 44px; }
.my-work-tabs button span { display: inline-grid; place-items: center; min-width: 22px; margin-left: 5px; padding: 2px 6px; border-radius: 999px; background: #e8edf0; color: var(--ink); }
.my-work-tabs button.is-active { color: white; background: var(--primary); }
.my-work-list { display: grid; gap: 9px; }
.my-work-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.my-work-item p { margin: 6px 0; color: var(--muted); }
.my-work-item small { display: block; color: var(--muted); }
.my-work-item strong,
.my-work-item p,
.my-work-item small { overflow-wrap: anywhere; }
.my-work-empty { display: grid; gap: 5px; }

@media (max-width: 760px) {
  .my-work-heading { align-items: flex-start; }
  .my-work-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-work-tabs button { white-space: normal; }
  .my-work-item { grid-template-columns: 1fr; }
  .my-work-item button { width: 100%; min-height: 44px; }
}

.document-library-grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  min-height: 560px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.document-library-list {
  display: grid;
  align-content: start;
  border-right: 1px solid var(--line);
  background: #f8fafc;
  overflow-y: auto;
}

.document-library-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
}

.document-library-row:hover,
.document-library-row.is-active {
  background: #fff;
}

.document-library-row.is-active {
  box-shadow: inset 3px 0 0 var(--primary);
}

.document-library-row span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.document-library-row strong,
.document-library-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-library-row small {
  color: var(--muted);
}

.document-type-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.document-library-detail {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.document-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.document-detail-header h3 {
  margin: 3px 0;
  font-size: 20px;
}

.document-library-preview {
  display: grid;
  min-height: 420px;
  max-height: 68vh;
  place-items: center;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef2f4;
}

.document-library-preview img {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
}

.document-library-preview iframe {
  width: 100%;
  height: 62vh;
  min-height: 420px;
  border: 0;
  background: #fff;
}

.document-file-fallback {
  display: grid;
  gap: 12px;
  justify-items: center;
  max-width: 320px;
  overflow-wrap: anywhere;
}

.document-detail-notes {
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.mobile-more-panel {
  position: fixed;
  right: 8px;
  bottom: 78px;
  left: 8px;
  z-index: 120;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
}

.mobile-more-panel:not(.is-hidden) {
  display: grid;
}

.mobile-more-panel button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #17252b;
  text-align: left;
}

.mobile-more-panel button:hover {
  background: #eef4f5;
}

@media (max-width: 900px) {
  .task-split,
  .reservation-history-grid,
  .document-library-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-library-list {
    max-height: 300px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .weekly-collections-panel .panel-header > *,
  .weekly-collections-panel .segmented-control {
    min-width: 0;
    max-width: 100%;
  }

  .weekly-collections-panel .segmented-control {
    display: flex;
    overflow-x: auto;
  }

  .weekly-collections-panel .segmented-control button {
    flex: 0 0 auto;
  }

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

  .collection-account-due {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }

  .weekly-period-row {
    align-items: start;
  }
  body {
    overflow-x: clip;
  }

  .sidebar .nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }

  .sidebar .nav-item:not(.mobile-primary):not(.mobile-more-button) {
    display: none;
  }

  .sidebar .nav-item,
  body.sidebar-collapsed .nav-item {
    width: 100%;
    min-width: 0;
  }

  .mobile-more-button {
    display: grid;
  }

  .topbar {
    gap: 10px;
  }

  .topbar-actions {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .document-library-preview,
  .document-library-preview iframe {
    min-height: 340px;
    height: 52vh;
  }

  .document-detail-header,
  .history-row {
    align-items: flex-start;
  }

  .history-row {
    flex-wrap: wrap;
  }

  .record-drawer,
  .document-library-detail {
    padding: 12px;
  }

  .workspace-tabs {
    margin-top: 10px;
  }

  .document-library-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .document-tabs {
    width: 100%;
  }

  .service-lane-grid,
  .claims-lanes {
    grid-template-columns: minmax(260px, 86vw);
  }
}

/* Renter portal workspace */
.portal-notice {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning, #b8860b);
  border-radius: 8px;
  background: var(--surface-muted, rgba(0, 0, 0, 0.03));
}

.portal-notice p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.portal-row {
  align-items: flex-start;
  gap: 12px;
}

.portal-row .row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.portal-tabs {
  margin-bottom: 12px;
}

/* Renter onboarding, absorbed from the standalone /onboarding-admin/ page */
.portal-onboarding-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.portal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portal-onboarding-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.portal-queue-list {
  display: grid;
  gap: 6px;
  max-height: 640px;
  overflow-y: auto;
}

.portal-queue-item {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, transparent);
  text-align: left;
  cursor: pointer;
}

.portal-queue-item:hover {
  border-color: var(--accent, #666);
}

.portal-queue-item.is-active {
  border-color: var(--accent, #666);
  box-shadow: inset 3px 0 0 var(--accent, #666);
}

.portal-queue-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-queue-item small {
  color: var(--text-muted, #666);
  font-size: 0.8rem;
}

.portal-detail {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.portal-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.portal-detail-head h3 {
  margin: 0 0 2px;
}

.portal-section {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.portal-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal-section h3 {
  margin: 0;
  font-size: 0.95rem;
}

.handover-dispatch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted, rgba(0, 0, 0, 0.025));
}

.handover-dispatch > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.handover-dispatch small {
  color: var(--text-muted, #666);
}

.handover-dispatch strong {
  overflow-wrap: anywhere;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.inspection-rental-groups {
  display: grid;
  gap: 14px;
}

.inspection-rental-group {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-muted, rgba(0, 0, 0, 0.02));
}

.portal-hint {
  margin: 0;
  color: var(--text-muted, #666);
  font-size: 0.85rem;
}

.portal-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--danger, #b3261e);
  background: var(--surface-muted, rgba(0, 0, 0, 0.03));
  font-size: 0.85rem;
}

.portal-datum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.portal-datum {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-datum small {
  color: var(--text-muted, #666);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.portal-datum strong {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

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

  .portal-queue-list {
    max-height: 320px;
  }
}

.portal-panel-detail {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.portal-flag-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted, #666);
  font-size: 0.85rem;
}

@media (max-width: 520px) {
  .portal-row,
  .portal-section-head,
  .portal-detail-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-row .row-actions,
  .portal-section-head .row-actions,
  .portal-detail-head .row-actions {
    width: 100%;
    justify-content: stretch;
  }

  .portal-row .row-actions button,
  .portal-row .row-actions a,
  .portal-section-head .row-actions button,
  .portal-detail-head .row-actions button {
    flex: 1 1 132px;
    min-height: 44px;
  }

  .portal-datum-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-queue-list {
    max-height: 240px;
  }

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

  .handover-dispatch .row-actions,
  .handover-dispatch button,
  .handover-dispatch a {
    width: 100%;
    min-height: 44px;
  }
}

/* One destination, more than one bench: these switch between the workspaces a
   single nav item owns. */
.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.view-tabs button.is-active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

/* An empty lane says so in one line rather than reserving a column of
   whitespace the height of the busiest lane beside it. */
.service-lane.is-empty {
  align-self: start;
  opacity: 0.72;
}

.service-lane.is-empty .lane-heading {
  margin: 0;
}

/* These launchers are buttons, so they should read as buttons rather than as
   another row in the list they sit above: size to their content, and carry the
   accent the rest of the primary actions use. */
.tool-launch {
  width: auto;
  min-height: 44px;
  padding: 10px 16px;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 800;
}

.tool-launch span {
  font-size: 14px;
}

.tool-launch small {
  display: none;
}

.fleet-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 640px) {
  .tool-launch { width: 100%; }
}

/* A row that holds the one action a stack offers, above the list it adds to. */
.stack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

/* A disclosure that opens a form is an action, so it reads as a button rather
   than as another full-width row in the list above it (§7.4). Sized to its
   label, carrying the accent, with a marker that says it expands. */
.setup-details {
  width: max-content;
  max-width: 100%;
  border-color: var(--primary);
}

.setup-details:not([open]) {
  background: transparent;
}

.setup-details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--primary);
  font-size: 14px;
  list-style: none;
}

.setup-details > summary::-webkit-details-marker { display: none; }

.setup-details > summary::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 120ms ease;
  font-size: 15px;
  line-height: 1;
}

.setup-details[open] > summary::before { transform: rotate(225deg); }

.setup-details > summary small { display: none; }

.setup-details[open] {
  width: 100%;
}

@media (max-width: 640px) {
  .setup-details { width: 100%; }
}

/* A scroll container only scrolls if it is allowed to shrink below its
   min-content width. These carry overflow-x:auto already but sat inside grid
   and flex parents that refused to shrink them, so they pushed the page on a
   phone instead of scrolling themselves. */
.file-tab-bar,
.customer-file,
.vehicle-file,
#customerDetailPanel,
#vehicleDetailPanel {
  min-width: 0;
}

/* The ten-stage rental timeline is a 920px grid (10 x 92px). It carries
   overflow-x:auto, but a grid item will not shrink below min-content unless it
   is told it may, so on a phone it pushed the page instead of scrolling itself.
   These rules were dead until the missing brace in styles-operations.css was
   closed, so this is the first time they have applied. */
.rental-case-timeline {
  min-width: 0;
  overflow-x: auto;
}

.rental-next-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0; padding: 16px; border: 1px solid #a9d5bb; border-radius: 14px; background: #eef9f2; }
.rental-next-action > div { display: grid; gap: 4px; }
.rental-next-action span, .rental-next-action small { color: var(--muted); }
.rental-next-action .primary { width: auto; }
.rental-detail-tabs { display: flex; gap: 8px; margin: 16px 0; padding-bottom: 5px; overflow-x: auto; }
.rental-detail-tabs button { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
.rental-detail-tabs button.is-active { color: white; border-color: var(--primary); background: var(--primary); }
.rental-tab-panel { min-width: 0; }
.rental-money-panel .inspection-history-section { display: none; }
.rental-inspection-panel .payment-ledger-section, .rental-inspection-panel .weekly-charge-history { display: none; }
.rental-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.my-work-more { margin-top: 10px; }
.my-work-more > summary { min-height: 44px; display: flex; align-items: center; padding: 10px; font-weight: 750; cursor: pointer; }

@media (max-width: 680px) {
  .rental-next-action { align-items: stretch; flex-direction: column; }
  .rental-next-action .primary { width: 100%; }
  .rental-related-grid { grid-template-columns: 1fr; }
}

.rental-case-timeline ol {
  /* The ol is itself the scroll container (overflow-x:auto in
     styles-operations.css) and its repeat(10, minmax(92px, 1fr)) tracks give it
     a 920px floor. It only needs permission to shrink below that inside its
     parent; the tracks then overflow and it scrolls itself. */
  min-width: 0;
}
.timeline-current-stages { display: none !important; }
.timeline-all-stages > summary { display: none; }
.timeline-all-stages:not([open]) > ol { display: grid; }

@media (max-width: 680px) {
  .timeline-current-stages { display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; }
  .timeline-all-stages > summary { min-height: 44px; display: flex; align-items: center; margin-top: 8px; font-weight: 750; cursor: pointer; }
  .timeline-all-stages:not([open]) > ol { display: none; }
  .timeline-all-stages[open] > ol { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .rental-case-timeline .case-stage { min-height: 64px; grid-template-columns: 30px minmax(0, 1fr); padding-left: 4px; }
  .rental-case-timeline .case-stage::before { top: 0; bottom: 0; left: 14px; right: auto; width: 3px; height: auto; }
}

.rental-workspace,
#reservationDetail,
#rentalDetailPage {
  min-width: 0;
}

/* Emails and plate strings have no break opportunity, so a long one pushes the
   record header wider than the phone. */
.vehicle-file-meta,
.vehicle-file-meta span,
.customer-file-header .vehicle-file-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A rental's documents, grouped by what they are. One checkout can file a
   dozen inspection photos; that is one line with a disclosure, not twelve. */
.document-groups { display: grid; gap: 6px; }
.document-group summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.document-group > summary small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.document-group-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 15px 13px; }
.document-group-files a { min-width: 44px; justify-content: center; font-variant-numeric: tabular-nums; }

/* Final interactive-size guardrails. Several older component rules were more
   specific than the shared button rule and kept header and disclosure targets
   below the 44px pilot requirement. */
.topbar-actions button,
.sidebar-collapse-button {
  min-width: 44px;
  min-height: 44px;
}

.payment-correction-details > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
}

/* Keep every record section visible on a phone. These rules intentionally sit
   after the desktop rental-tab declarations so the mobile section picker
   cannot regress to a one-line, off-screen carousel. */
@media (max-width: 760px) {
  .view-tabs,
  .file-tab-bar,
  .rental-detail-tabs,
  .workspace-tabs,
  .document-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    overflow: visible;
    gap: 7px;
  }

  .view-tabs button,
  .file-tab,
  .rental-detail-tabs button,
  .workspace-tabs button,
  .document-tabs button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}