/**
 * Styling per pianta autobus a layout fisso
 * Nessuna griglia automatica: il renderer disegna solo il template approvato.
 */

:root {
  --seat-size: 44px;
  --seat-gap: 8px;
  --aisle-width: 28px;
  --door-width: 48px;
  --layout-row-gap: 12px;
  --seat-radius: 12px;

  --seat-available-bg: #1f8f3a;
  --seat-available-text: #ffffff;
  --seat-available-border: #17682b;

  --seat-occupied-bg: #d64545;
  --seat-occupied-text: #ffffff;
  --seat-occupied-border: #a63232;

  --seat-selected-bg: #d4af37;
  --seat-selected-text: #231f11;
  --seat-selected-border: #b68f15;

  --seat-disabled-bg: #808080;
  --seat-disabled-text: #f4f4f4;
  --seat-disabled-border: #656565;
}

html.dark {
  --seat-available-bg: #1d6f31;
  --seat-available-text: #eff9f0;
  --seat-available-border: #2c8a41;

  --seat-occupied-bg: #ab2c2c;
  --seat-occupied-text: #fff0f0;
  --seat-occupied-border: #c24b4b;

  --seat-selected-bg: #d4af37;
  --seat-selected-text: #20190a;
  --seat-selected-border: #e0bd4e;

  --seat-disabled-bg: #595959;
  --seat-disabled-text: #d2d2d2;
  --seat-disabled-border: #464646;
}

.seat-map-container {
  background: var(--surface, #ffffff);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  margin: 20px 0;
}

html.dark .seat-map-container {
  background: var(--surface, #1e1e1e);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.seat-map-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.seat-map-front {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.22);
  color: var(--text, #1d1d1d);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.08);
}

html.dark .seat-map-front {
  color: var(--text, #fff);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.08));
}

.seat-map-front__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.seat-map-front__driver {
  min-width: 94px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
}

.seat-map-stats {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted, #666);
}

html.dark .seat-map-stats {
  color: var(--text-muted, #aaa);
}

.seat-map-stats strong {
  color: var(--brand, #0f4c81);
}

.seat-map-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.seat-map-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding: 14px;
  background: var(--bg, #f5f7fb);
  border-radius: 16px;
}

html.dark .seat-map-legend {
  background: var(--bg, #2a2a2a);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text, #333);
}

html.dark .legend-item {
  color: var(--text, #fff);
}

.seat-map-legend .seat,
.seat-map-legend .seat-void {
  width: 24px;
  height: 24px;
}

.seat-map-rows {
  display: flex;
  flex-direction: column;
  gap: var(--layout-row-gap);
  overflow-x: auto;
  padding: 6px 0 8px;
}

.seat-map-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.row-label {
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}

html.dark .row-label {
  color: var(--text-muted, #a1a1aa);
}

.seat-map-row__cells {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--seat-gap);
  flex-direction: row;
}


.seat {
  width: var(--seat-size);
  height: var(--seat-size);
  border-radius: var(--seat-radius);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background-color 140ms ease;
}

.seat__number {
  display: inline-block;
  transform: translateY(0.5px);
}

.seat.available {
  background: var(--seat-available-bg);
  border-color: var(--seat-available-border);
  color: var(--seat-available-text);
}

.seat.available:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.05);
  box-shadow: 0 10px 18px rgba(31, 143, 58, 0.26);
}

.seat.occupied {
  background: var(--seat-occupied-bg);
  border-color: var(--seat-occupied-border);
  color: var(--seat-occupied-text);
  cursor: not-allowed;
  opacity: 0.92;
}

.seat.occupied:disabled {
  box-shadow: none;
}

.seat.selected {
  background: var(--seat-selected-bg);
  border-color: var(--seat-selected-border);
  color: var(--seat-selected-text);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28), 0 10px 18px rgba(212, 175, 55, 0.25);
  animation: seat-pop 160ms ease-out;
}

.seat-void {
  width: var(--seat-size);
  height: var(--seat-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--seat-radius);
  box-sizing: border-box;
}

.seat-void--aisle {
  width: var(--aisle-width);
  background: repeating-linear-gradient(
    180deg,
    rgba(148, 163, 184, 0.16) 0,
    rgba(148, 163, 184, 0.16) 10px,
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0) 18px
  );
}

.seat-void--door {
  width: var(--door-width);
  border: 1px dashed rgba(37, 99, 235, 0.3);
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seat-void--gap {
  opacity: 0;
}

.seat-void--hidden {
  visibility: hidden;
}

@keyframes seat-pop {
  0% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 900px) {
  :root {
    --seat-size: 38px;
    --seat-gap: 6px;
    --aisle-width: 22px;
    --door-width: 40px;
  }

  .seat-map-row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
  }
}