/* Keep wide tables inside their own scroller, including nested grid/flex cards. */
.app-shell { grid-template-columns: 270px minmax(0, 1fr); }
.workspace, .module-view, .data-card, .placeholder-card,
.legacy-records, .records-section, .recycling-section, .product-register,
.vehicle-table-groups, .vehicle-table-group, .vehicle-group-content,
.vehicle-status-section, .vehicle-status-content {
  min-width: 0;
  max-width: 100%;
}
.legacy-records, .vehicle-table-groups { grid-template-columns: minmax(0, 1fr); }
.legacy-records > *, .vehicle-table-groups > * { min-width: 0; }
.vehicle-table-wrap, .product-table-wrap, .invoice-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: auto;
}
.vehicle-table-wrap:focus-visible, .product-table-wrap:focus-visible,
.invoice-table-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.table-scroll-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin: 8px 0;
  padding: 0 8px;
  text-align: left;
}
.table-scroll-hint { color: var(--muted); font-size: 12px; }
.table-scroll-buttons { display: flex; flex-shrink: 0; gap: 6px; }
.table-scroll-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 6px;
  border: 1px solid #cbdce3;
  border-radius: 8px;
  background: #edf4f7;
  color: var(--blue);
  font-size: 20px;
  cursor: pointer;
}
.table-scroll-controls button:disabled { opacity: .4; cursor: default; }
.table-scroll-controls button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (max-width: 1000px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { height: 100dvh; overflow-y: auto; overscroll-behavior-y: contain; }
  .sidebar-bottom { flex-shrink: 0; }
}

@media (max-width: 620px) {
  .workspace { padding: 0 12px 28px; }
  .module-view { padding-top: 18px; }
  .data-card, .placeholder-card { padding: 14px; }
  .recycling-section, .module-inline-form { padding: 12px; }
  .placeholder-card h1 { font-size: clamp(28px, 8vw, 38px); overflow-wrap: anywhere; }
  .placeholder-card > .eyebrow { margin-bottom: 0; }
  .placeholder-card > p { overflow-wrap: anywhere; }
  .module-header { flex-wrap: wrap; gap: 14px; }
  .module-header > div { min-width: 0; max-width: 100%; }
  .module-header h1 { font-size: 34px; overflow-wrap: anywhere; }
  .module-header-actions { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-header-actions button { min-height: 44px; }
  .topbar { gap: 8px; }
  .topbar > div:nth-child(2) { min-width: 0; margin-left: 0; }
  .topbar h2 { font-size: 22px; overflow-wrap: anywhere; }
  .topbar p { font-size: 10px; }
  #menu-button { flex-shrink: 0; width: 44px; min-height: 44px; }
  .user-pill { flex-shrink: 0; }
  .section-head { flex-wrap: wrap; gap: 10px; }
  .vehicle-toolbar, .search-field, .vehicle-view-switch { min-width: 0; max-width: 100%; }
  .search-field { width: 100%; }
  .vehicle-view-switch button { min-width: 0; min-height: 44px; padding: 8px; }
  .vehicle-table-group > header, .vehicle-status-section > header { flex-wrap: wrap; }
  .vehicle-table-group > header button, .vehicle-status-section > header button { min-height: 44px; }
  .vehicle-data-table { font-size: 12px; }
  .vehicle-data-table th { font-size: 11px; }
  .vehicle-data-table th button { min-height: 36px; }
  .vehicle-table-actions button, .vehicle-table-actions a, .product-table button {
    display: inline-flex; align-items: center; min-height: 44px; font-size: 12px;
  }
  .product-table { font-size: 12px; }
  .product-table input[type="number"] { min-height: 44px; width: 88px; font-size: 16px; }
  .product-table input[type="checkbox"] { width: 24px; height: 24px; margin: 10px; }
  .metric-grid.compact { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-grid article { min-width: 0; overflow-wrap: anywhere; }
  .metric-grid.compact article { padding: 12px 8px; }
  .metric-grid.compact strong { font-size: 20px; }
  .metric-grid.compact span { font-size: 12px; }
  .inline-date-filter { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); }
  .inline-date-filter button { min-height: 44px; justify-content: center; }
  .form-grid, .vehicle-form { grid-template-columns: minmax(0, 1fr); }
  .form-grid > *, .vehicle-form > *, .invoice-filters > *, .invoice-line > *, .recurring-line > * { min-width: 0; }
  label, input, select, textarea { min-width: 0; max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  input[type="date"], input[type="file"], select, textarea { width: 100%; }
  .record-actions { flex-wrap: wrap; }
  .record-actions button, .record-actions a { min-height: 44px; overflow-wrap: anywhere; }
  .legacy-record { grid-template-columns: minmax(0, 1fr); }
  .legacy-record > * { min-width: 0; overflow-wrap: anywhere; }
  .invoice-tabs { flex-wrap: wrap; }
  .invoice-lines-head { flex-wrap: wrap; gap: 8px; }
  .invoice-pagination { justify-content: flex-start; gap: 8px; }
  .recycling-section > h2 { font-size: 24px; overflow-wrap: anywhere; }
}