.driver-photo-selection {
  display: grid;
  gap: var(--space-1, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.driver-photo-selection li,
.driver-photo-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 16px);
  padding: var(--space-2, 16px);
  border: 1px solid var(--color-border, #d1d1d1);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-subtle, #f7f7f7);
}

.driver-photo-selection span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.damage-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3, 24px);
}

.damage-photo-card {
  display: grid;
  gap: var(--space-2, 16px);
  min-width: 0;
  padding: var(--space-2, 16px);
  border: 1px solid var(--color-border, #d1d1d1);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface, #fff);
}

.damage-photo-card img,
.damage-photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md, 8px);
  object-fit: contain;
  background: var(--color-surface-subtle, #f7f7f7);
}

.damage-photo-placeholder {
  display: grid;
  place-items: center;
  font-weight: 700;
}

.damage-photo-meta {
  display: grid;
  gap: var(--space-1, 8px);
  min-width: 0;
}

.damage-photo-meta strong {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .driver-portal-layout,
  .driver-vehicles-layout,
  .driver-vehicle-detail,
  .driver-vehicle-detail-page,
  .vehicle-section-grid,
  .vehicle-hero,
  .driver-stat-grid,
  .driver-damage-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    min-width: 0;
  }

  .driver-portal-layout,
  .driver-vehicles-layout,
  .driver-vehicle-detail,
  .driver-damage-shell {
    gap: var(--space-2, 16px);
  }

  .driver-vehicle-list {
    display: flex;
    gap: var(--space-1, 8px);
    width: 100%;
    overflow-x: auto;
    padding: 0 0 var(--space-1, 8px);
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  .driver-vehicle-list-item {
    flex: 0 0 min(78vw, 280px);
    min-height: 88px;
    scroll-snap-align: start;
  }

  .driver-vehicle-detail .table-scroll,
  .driver-vehicle-detail-page .table-scroll {
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .driver-vehicle-detail .damage-table,
  .driver-vehicle-detail-page .damage-table {
    min-width: 620px;
  }

  .driver-damage-shell,
  .damage-report-panel,
  .driver-context-bar {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .damage-report-panel,
  .driver-context-bar,
  .driver-vehicle-detail .vehicle-card,
  .driver-vehicle-detail .table-panel {
    padding: var(--space-2, 16px);
  }

  .driver-damage-actions,
  .driver-damage-actions > * {
    width: 100%;
  }

  .driver-damage-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .driver-damage-shell button,
  .driver-damage-shell input,
  .driver-damage-shell select,
  .driver-damage-shell textarea,
  .driver-portal-layout button,
  .driver-portal-layout a,
  .driver-vehicles-layout button,
  .driver-vehicles-layout a {
    min-height: 44px;
  }

  .driver-damage-shell input,
  .driver-damage-shell select,
  .driver-damage-shell textarea {
    font-size: 16px;
  }

  .driver-photo-field input[type="file"] {
    width: 100%;
    padding: var(--space-2, 16px);
    border: 1px dashed var(--color-border, #d1d1d1);
    border-radius: var(--radius-md, 8px);
  }

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

  .damage-photo-card .form-actions,
  .damage-photo-card .form-actions > * {
    width: 100%;
  }
}

@media (display-mode: standalone) {
  .driver-damage-shell,
  .driver-portal-layout,
  .driver-vehicles-layout {
    padding-bottom: max(var(--space-3, 24px), env(safe-area-inset-bottom));
  }
}