/* Vehicle Master keeps the same compact operational rhythm as the existing
   Dealer/Case surfaces.  The integration shell may load this file globally. */
.vehicle-page .vehicle-filter-surface,
.vehicle-page .vehicle-timeline-surface { margin-block: 1rem; }
.vehicle-page .vehicle-table th:first-child { min-width: 17rem; }
.vehicle-page .vehicle-table td,
.vehicle-page .vehicle-table th { vertical-align: middle; }
.vehicle-page .vehicle-timeline-surface .section-note { margin: .25rem 0 0; }
.vehicle-page .vehicle-filter-disclosure > summary {
  cursor: pointer;
  font-weight: 600;
  list-style-position: inside;
  padding: .1rem 0;
}
.vehicle-page .vehicle-list-filter-form {
  align-items: end;
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(10rem, 1fr)) auto;
  margin-top: 1rem;
}
.vehicle-page .vehicle-list-filter-form .field { margin: 0; }
.vehicle-page .vehicle-list-filter-form .filter-actions { margin: 0; }
.vehicle-page .vehicle-pagination {
  align-items: center;
  border-top: 1px solid var(--border, #d9d9d6);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .75rem 1rem;
}
.vehicle-page .vehicle-pagination-start,
.vehicle-page .vehicle-pagination-end,
.vehicle-page .vehicle-page-size-form,
.vehicle-page .vehicle-page-jump,
.vehicle-page .vehicle-page-numbers { align-items: center; display: flex; gap: .45rem; }
.vehicle-page .vehicle-page-size-form,
.vehicle-page .vehicle-page-jump { margin: 0; }
.vehicle-page .vehicle-page-size-form select,
.vehicle-page .vehicle-page-jump input { width: auto; }
.vehicle-page .vehicle-page-jump input { max-width: 4.5rem; }
.vehicle-page .vehicle-page-numbers { list-style: none; margin: 0; padding: 0; }
.vehicle-page .vehicle-page-numbers li { margin: 0; }
.vehicle-page .vehicle-pagination .button.is-current { background: var(--ink, #1d1d1b); color: #fff; }
.vehicle-page .vehicle-pagination .button.is-disabled { opacity: .5; pointer-events: none; }

/* The directory is one compact surface: the table and its controls share a
   single edge, while the table-wrap remains the only horizontal scroll area. */
.workspace-main .vehicle-list-table-panel {
  width: 100%;
  padding: 0;
  border: 1px solid var(--vor-line, #d9d9d6);
  border-radius: 4px;
  background: var(--vor-surface, #fff);
  box-shadow: none;
  overflow: hidden;
}
.workspace-main .vehicle-list-table-panel > .table-wrap {
  width: 100%;
  margin: 0;
}
.workspace-main .vehicle-list-table-panel .vehicle-pagination {
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--vor-line, #d9d9d6);
  background: var(--vor-surface, #fff);
}
.workspace-main .vehicle-list-table-panel .vehicle-table {
  width: 100%;
}

/* Vehicle detail follows the compact Case/Dealer information rhythm while
   keeping the Vehicle Master fields readable at desktop widths. */
.vehicle-page .vehicle-module,
.vehicle-page .vehicle-timeline-surface { margin-block: 1rem; }
.vehicle-page .vehicle-section-heading {
  align-items: center;
  background: var(--surface-subtle, #f2f2f0);
  border-bottom: 1px solid var(--border, #d9d9d6);
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: .75rem 1rem;
}
.vehicle-page .vehicle-section-heading h2 { margin: 0; }
.vehicle-page .vehicle-overview-grid,
.vehicle-page .vehicle-details-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.vehicle-page .vehicle-details-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vehicle-page .vehicle-detail-field {
  border-bottom: 1px solid var(--border, #d9d9d6);
  min-width: 0;
  padding: .9rem 1rem;
}
.vehicle-page .vehicle-detail-field:nth-last-child(-n + 2) { border-bottom: 0; }
.vehicle-page .vehicle-details-grid .vehicle-detail-field:nth-last-child(-n + 4) { border-bottom: 0; }
.vehicle-page .vehicle-detail-field dt,
.vehicle-page .vehicle-field-label {
  display: block;
  color: var(--muted, #666);
  font-size: .72rem;
  letter-spacing: .02em;
  margin-bottom: .3rem;
}
.vehicle-page .vehicle-detail-field dd { margin: 0; overflow-wrap: anywhere; }
.vehicle-page .vehicle-edit-control[hidden],
.vehicle-page .vehicle-edit-actions[hidden],
.vehicle-page .vehicle-readonly-note[hidden],
.vehicle-page .vehicle-rego-reason[hidden] { display: none !important; }
.vehicle-page .vehicle-edit-control { margin-top: .45rem; }
.vehicle-page .vehicle-edit-control label { display: block; }
.vehicle-page .vehicle-edit-control .field-help {
  margin: .35rem 0 0;
  color: var(--muted, #666);
  font-size: .72rem;
}
.vehicle-page .vehicle-edit-control input,
.vehicle-page .vehicle-edit-control select,
.vehicle-page .vehicle-edit-control textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}
.vehicle-page .vehicle-rego-edit { max-width: 28rem; }
.vehicle-page .vehicle-rego-reason { margin-top: .6rem; }
.vehicle-page .vehicle-rego-actions { margin-top: .6rem; }
.vehicle-page .vehicle-readonly-note {
  color: var(--muted, #666);
  font-size: .82rem;
  margin: .75rem 1rem 0;
}
.vehicle-page .vehicle-edit-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-top: 1px solid var(--border, #d9d9d6);
  margin: 0;
  padding: .75rem 1rem;
}
.vehicle-page .vehicle-table { min-width: 58rem; }
.vehicle-page .vehicle-table th:first-child { min-width: 14rem; }
.vehicle-page .vehicle-table th,
.vehicle-page .vehicle-table td { white-space: nowrap; }
.vehicle-page .vehicle-create-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vehicle-page .vehicle-create-grid .field { margin: 0; }

/* Vehicle Master history is a compact audit narrative: one event carries its
   actor/time metadata and the actual changed fields remain readable together. */
.vehicle-page .vehicle-timeline {
  list-style: none;
  margin: 0;
  padding: 0 1rem;
}
.vehicle-page .vehicle-timeline-entry {
  align-items: start;
  border-bottom: 1px solid var(--border, #d9d9d6);
  display: grid;
  gap: .75rem 1.25rem;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, auto);
  padding: .85rem 0;
}
.vehicle-page .vehicle-timeline-entry:last-child { border-bottom: 0; }
.vehicle-page .vehicle-timeline-changes {
  display: grid;
  gap: .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vehicle-page .vehicle-timeline-change-row {
  align-items: baseline;
  display: grid;
  gap: .35rem .75rem;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  min-width: 0;
}
.vehicle-page .vehicle-timeline-field {
  color: var(--ink, #1d1d1b);
  font-size: .82rem;
  font-weight: 600;
}
.vehicle-page .vehicle-timeline-change {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-width: 0;
}
.vehicle-page .vehicle-timeline-value {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.vehicle-page .vehicle-timeline-before { color: var(--muted, #666); }
.vehicle-page .vehicle-timeline-after { color: var(--ink, #1d1d1b); font-weight: 500; }
.vehicle-page .vehicle-timeline-arrow { color: var(--muted, #666); }
.vehicle-page .vehicle-timeline-meta {
  color: var(--muted, #666);
  display: grid;
  font-size: .72rem;
  gap: .2rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.vehicle-page .vehicle-timeline-meta time { white-space: nowrap; }

/* Keep the filter's action row inside the content edge.  The inherited
   desktop rule's four fixed-width selects plus a second grid span can create
   an implicit column at ordinary workspace widths. */
.dealer-page .dealer-filter-disclosure .filter-form {
  grid-template-columns: minmax(14rem, 2fr) repeat(4, minmax(0, 1fr));
}
.dealer-page .dealer-filter-disclosure .filter-form .filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

/* These are flex/grid children of a clipped workspace, so let them yield
   before the document itself can become wider than the viewport. */
.vehicle-page .vehicle-pagination-start,
.vehicle-page .vehicle-pagination-end,
.vehicle-import-page .import-workbench,
.vehicle-import-page .import-workbench-module,
.vehicle-import-page .import-preview-table { max-width: 100%; min-width: 0; }
.vehicle-page .vehicle-pagination-start,
.vehicle-page .vehicle-pagination-end { flex-wrap: wrap; }
.vehicle-page .vehicle-page-numbers { flex-wrap: wrap; }
.vehicle-update-page .dcs-module-header { flex-wrap: wrap; }
.vehicle-update-page .dcs-module-header h2 { min-width: 0; }

@media (max-width: 900px) {
  .vehicle-page .vehicle-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-page .vehicle-list-filter-form { grid-template-columns: 1fr; }
  .dealer-page .dealer-filter-disclosure .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .vehicle-page .vehicle-list-filter-form { grid-template-columns: 1fr; }
  .vehicle-page .vehicle-pagination { align-items: flex-start; flex-direction: column; }
  .vehicle-page .vehicle-pagination-start,
  .vehicle-page .vehicle-pagination-end { width: 100%; }
  .vehicle-page .vehicle-pagination-end { justify-content: flex-start; }
  .vehicle-page .vehicle-create-grid,
  .vehicle-page .vehicle-overview-grid,
  .vehicle-page .vehicle-details-grid { grid-template-columns: 1fr; }
  .vehicle-page .vehicle-detail-field:nth-last-child(-n + 2),
  .vehicle-page .vehicle-details-grid .vehicle-detail-field:nth-last-child(-n + 4) { border-bottom: 1px solid var(--border, #d9d9d6); }
  .vehicle-page .vehicle-detail-field:last-child { border-bottom: 0; }
  .vehicle-page .vehicle-timeline { padding-inline: .75rem; }
  .vehicle-page .vehicle-timeline-entry { grid-template-columns: 1fr; }
  .vehicle-page .vehicle-timeline-change-row { grid-template-columns: 1fr; gap: .15rem; }
  .vehicle-page .vehicle-timeline-meta { grid-template-columns: 1fr; }
  .vehicle-page .vehicle-timeline-meta time { white-space: normal; }
  .vehicle-update-page .dcs-module-header {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
  }
  .vehicle-update-page .dcs-module-header .status-label { align-self: flex-start; }
  .vehicle-list-page .page-actions,
  .vehicle-import-page .page-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .vehicle-list-page .page-actions .button,
  .vehicle-import-page .page-actions .button {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .dealer-page .dealer-filter-disclosure .filter-form { grid-template-columns: 1fr; }
  .dealer-page .dealer-filter-disclosure .filter-form .filter-actions { grid-column: auto; }
}