/* Shared by every src/parking/<id>.html page that has live occupancy
   tracking - same weekly day/hour grid already used in the main app's
   detail panel (see heatmapGridHtml() in tel-aviv-parking.html), just at
   slightly larger type since these pages are read standalone, not squeezed
   into a narrow sidebar. */
:root {
  --gray-bg: #f3f4f6;
  --amber: #b45309;
  --amber-bg: #fffbeb;
  --red: #b91c1c;
  --red-bg: #fee2e2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --gray-bg: #262a33;
    --amber: #fbbf24;
    --amber-bg: #2b2210;
    --red: #f87171;
    --red-bg: #2a1414;
  }
}

.spots-line { font-size: 0.95rem; font-weight: 600; margin: 0 0 12px; }
.busy-summary { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.busy-day { font-size: 0.9rem; }
.busy-tag {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  margin-inline-start: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}
.busy-tag.busy-red { background: var(--red-bg); color: var(--red); }
.busy-tag.busy-yellow { background: var(--amber-bg); color: var(--amber); }

.heatmap-wrap { margin-top: 4px; }
.heatmap-title { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.heatmap-grid {
  direction: ltr;
  display: grid;
  grid-template-columns: 24px repeat(24, 1fr);
  gap: 1px;
}
.heatmap-daylabel {
  font-size: 10px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 3px;
}
.heatmap-cell { aspect-ratio: 1 / 1.2; border-radius: 2px; }
.heatmap-hourlabels {
  direction: ltr;
  display: grid;
  grid-template-columns: 24px repeat(24, 1fr);
  gap: 1px;
  margin-top: 2px;
}
.heatmap-hourlabels span { font-size: 9px; color: var(--text-dim); text-align: center; }
.heatmap-legend { direction: ltr; display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--text-dim); }
.heatmap-legend .bar {
  width: 90px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #cde2fb, #9ec5f4, #6da7ec, #3987e5, #1c5cab, #0d366b);
}
.heatmap-legend .swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gray-bg);
  border: 1px solid var(--border);
}
/* Diagonal hatch instead of the "no data" swatch's flat gray - a closed
   hour is a known fact (from the lot's data-operating-hours attribute), not
   missing data, so it needs its own distinct look. */
.heatmap-cell.closed, .heatmap-legend .swatch.closed {
  background: repeating-linear-gradient(45deg, var(--gray-bg), var(--gray-bg) 2px, var(--border) 2px, var(--border) 4px);
}
.lot-note { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 0; }