/**
 * @file
 * Reistijdentabel onder aan /kamplocaties (templates/ozk-reistijden-tabel.html.twig).
 *
 * Vier kolommen: rit, normaal, drukste moment, nu. Elke cel stapelt minuten,
 * kilometers, route en tijdstip onder elkaar, zodat de tabel ook op een
 * telefoon leesbaar blijft; wordt hij toch breder dan het scherm, dan scrollt
 * alleen de tabelhouder.
 */
.ozk-reistijden {
  margin-top: 2rem;
}

.ozk-reistijden-tabelhouder {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ozk-reistijden-tabel {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.ozk-reistijden-tabel th,
.ozk-reistijden-tabel td {
  vertical-align: top;
  padding: 0.6rem 0.75rem;
}

.ozk-reistijden-tabel thead th {
  white-space: nowrap;
  border-bottom: 2px solid #dee2e6;
}

.ozk-reistijden-sub {
  display: block;
  font-weight: 400;
  font-size: 0.8em;
  color: #6c757d;
}

.ozk-reistijden-tabel tbody th {
  font-weight: 400;
}

/* De ritkolom op twee regels, zoals in de meldingsmail: kampnamen vet, de
   plaatsen klein en grijs eronder. De pijl blijft aan de eerste plaats vast,
   zodat een lange plaatsnaam hooguit één extra regel geeft. */
.ozk-reistijden-kamp {
  display: block;
  font-weight: 600;
  white-space: nowrap;
}

.ozk-reistijden-plaats {
  display: block;
  font-size: 0.85em;
  color: #6c757d;
}

.ozk-reistijden-plaatsvan {
  white-space: nowrap;
}

.ozk-reistijden-pijl {
  display: inline-block;
  margin: 0 0.35rem;
  color: #6c757d;
}

.ozk-reistijden-min {
  display: block;
  font-weight: 600;
  white-space: nowrap;
}

.ozk-reistijden-km,
.ozk-reistijden-via,
.ozk-reistijden-tijd,
.ozk-reistijden-leeg {
  display: block;
  font-size: 0.85em;
  color: #6c757d;
  white-space: nowrap;
}

/* Het routekaartje rechts: vierkant, 160px, met de hoekronding van de
   kaarten erboven. Het script tekent het één keer per dag (Maps Static API). */
.ozk-reistijden-kaart {
  width: 160px;
}

.ozk-reistijden-kaart img {
  display: block;
  width: 160px;
  height: 160px;
  max-width: none;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* De kolom "nu" kleurt mee met de vertraging: een kwart langer dan normaal
   is drukker, de helft langer of een kwartier extra is druk. Dezelfde grenzen
   staan in Reistijden::klasse() en in js/ozk-reistijden.js. */
.ozk-reistijden-tabel td.is-drukker .ozk-reistijden-min {
  color: #b45309;
}

.ozk-reistijden-tabel td.is-druk .ozk-reistijden-min {
  color: #b91c1c;
}

.ozk-reistijden-tabel td.is-druk {
  background-color: #fef2f2;
}