/* Webversie: paneel links, grote kaart rechts met legenda en tijdschuif eronder.
   Bouwt voort op ../shared/style.css (kleuren, formulieren, kaarten). */

.bar { gap: 16px; }
.bar h1 { flex: none; }
.nav { display: flex; gap: 4px; margin-right: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; }
.nav a {
  color: var(--accent-text); text-decoration: none; padding: 6px 12px; border-radius: 8px; opacity: .85;
}
.nav a:hover { opacity: 1; background: #ffffff22; }
.nav a[aria-current=page] { opacity: 1; background: #ffffff33; font-weight: 600; }

.layout {
  display: grid; grid-template-columns: minmax(340px, 420px) 1fr;
  height: calc(100vh - 52px); height: calc(100dvh - 52px);
}
.panel { overflow-y: auto; padding: 16px; border-right: 1px solid var(--line); background: var(--bg); }
.panel h2 { margin-bottom: 12px; }
.panel .card + .card, .panel .actions + .card { margin-top: 12px; }
.panel .actions { margin-top: 12px; }

.mapcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mapcol #map { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; }
.under-map { background: var(--surface); border-top: 1px solid var(--line); padding: 8px 16px 10px; }
.under-map .legend { margin: 0 0 6px; }
.timeline-card { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(260px, 420px); gap: 4px 20px; align-items: center; }
.timeline-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.timeline-info .time-label { margin: 0; flex-basis: 100%; }
body:not([data-view=result]) .result-only { display: none; }

/* Smal scherm: alles onder elkaar, zoals de app. */
@media (max-width: 800px) {
  .layout { display: block; height: auto; }
  .panel { border-right: 0; }
  .mapcol #map { height: 60vh; }
  .timeline-card { grid-template-columns: 1fr; }
  .nav a { padding: 6px 8px; }
}

/* Telefoon: de naam wijkt voor het menu, dat zo nodig opzij schuift. */
@media (max-width: 520px) {
  .bar { gap: 8px; }
  .bar h1 { display: none; }
  .nav a { padding: 6px 7px; font-size: .92rem; }
}

/* Tabbladen: nieuwe rit of eigen route */
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; min-height: 40px;
  padding: 0 12px; color: var(--muted); font-weight: 600; }
.tabs button[aria-selected=true] { color: var(--accent); border-bottom-color: var(--accent); }

fieldset.pauses { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 6px; margin: 0 0 14px; }
fieldset.pauses legend { font-size: .85rem; color: var(--muted); padding: 0 4px; }
.pause-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.pause-row .suggest { flex: 1; min-width: 0; }
.pause-row select { width: auto; }
.pause-row .remove { min-height: 40px; width: 40px; padding: 0; flex: none; }
fieldset.pauses p { margin: 6px 0 2px; }
fieldset.when { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 14px; }
fieldset.when legend { font-size: .85rem; color: var(--muted); padding: 0 4px; }
fieldset.when .small-check { display: inline-flex; margin-right: 14px; }
.when-times { align-items: center; margin-top: 8px; flex-wrap: wrap; }
.when-times input { width: auto; flex: 1; min-width: 110px; }
input[type=date], input[type=time], input[type=file] {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 10px; min-height: 44px; }
input[type=file] { width: 100%; }

/* Grafiek: natte minuten per vertrektijd */
.own-chart svg { width: 100%; height: auto; display: block; }
.own-chart .bar { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.own-chart .bar.dry { fill: var(--droog); }
.own-chart .bar.best { stroke: var(--text); stroke-width: 2; }
.own-chart text { font-size: 11px; fill: var(--muted); font-family: inherit; }
.own-chart text.value { fill: var(--text); font-weight: 600; }

/* Route aanpassen: de punten op de kaart */
.edit-point { background: #fff; border: 2px solid #1f6feb; border-radius: 50%; box-shadow: 0 1px 4px #0006; cursor: grab; }
.edit-point.end { background: #1b1f24; border-color: #fff; color: #fff; font: 700 11px system-ui, sans-serif;
  display: flex !important; align-items: center; justify-content: center; }

/* Hoogteprofiel onder de kaart */
.elevation { margin: 4px 0 6px; }
.elevation-head { font-size: .85rem; margin-bottom: 2px; }
.elevation-tip { font-variant-numeric: tabular-nums; }
.elevation svg { width: 100%; height: auto; display: block; }
.elevation text { font: 11px system-ui, sans-serif; fill: var(--muted); }
.elevation .grid { stroke: var(--line); stroke-width: 1; }
.elevation .area { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: none; }
.elevation .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.elevation .cursor { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.elevation .hover { stroke: var(--text); stroke-width: 1; opacity: .5; }
.elevation .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }