/* assets/css/wegenwerken.css */
/* Paneel-styling afgestemd op weather.css + layout fix zodat kaart-profiel links
   en wegenwerken/weerbericht rechts naast elkaar staan. */

/* ========== LAYOUT: kaart links, wegenwerken rechts ========== */
.gpx-wegenwerken-layout {
  display: flex;
  gap: 16px;                 /* ruimte tussen linker en rechter kolom */
  align-items: flex-start;   /* uitlijnen aan de bovenkant */
  flex-wrap: nowrap;         /* forceer naast elkaar zolang er ruimte is */
}

/* Linkerkolom: kaart + hoogteprofiel */
.kaart-profiel-blok {
  flex: 1 1 60%;             /* groeit, neemt minstens ~60% */
  min-width: 0;              /* belangrijk voor overflow in flex context */
}

/* Rechterkolom: weerbericht + wegenwerken */
.wegenwerken-tabel-blok {
  flex: 0 1 40%;             /* krimpt mee, start rond 40% */
  min-width: 320px;          /* redelijke minimale breedte */
  max-width: 600px;          /* optioneel: hou ‘t panel compact */
}

/* Responsief: bij smallere schermen onder elkaar stapelen */
@media (max-width: 980px) {
  .gpx-wegenwerken-layout {
    flex-direction: column;  /* onder elkaar */
  }
  .wegenwerken-tabel-blok,
  .kaart-profiel-blok {
    max-width: none;
    width: 100%;
  }
}

/* Zorg dat interne containers netjes schalen */
.gpx-viewer-container,
#gpx-map,
#gpx-chart,
.wegenwerken-paneel {
  width: 100%;
  box-sizing: border-box;
}


/* ========== Paneelcontainer met rand + afgeronde hoeken (afgestemd op weather) ========== */
.wegenwerken-paneel {
  border: 1px solid #e5e7eb;      /* zelfde randkleur als weather */
  border-radius: 10px;             /* zelfde afgeronde hoeken */
  overflow: hidden;                /* houdt titelbalk mooi afgerond */
  background: #fff;                /* zelfde achtergrond als weather content */
  margin-top: 10px;
}

/* ========== Titelbalk bovenaan (zelfde stijl als weather) ========== */
.wegenwerken-paneel .ww-title {
  margin: 0;
  padding: 18px 12px;
  background: #182c42;             /* zelfde kleur als in weather-titelbalk */
  color: #ffffff;                  /* lichte tekst */
  border-bottom: 1px solid #0f2235;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.wegenwerken-paneel .ww-title i {
  font-size: 18px;
  line-height: 1;
}

/* ========== Inhoudsblok (zelfde spacing als weather) ========== */
.wegenwerken-paneel .ww-content {
  padding: 16px;
  background: #fff;
}

/* ========== Tabel — afgestemd op weather-table-inner ========== */
.wegenwerken-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;                 /* gelijkgetrokken met weather */
  background: #fff;                /* zelfde achtergrond als weather */
}

.wegenwerken-tabel thead th {
  text-align: left;
  background: #f3f4f6;             /* zelfde header-achtergrond als weather */
  color: #111827;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb; /* zelfde scheidingslijn */
}

/* BELANGRIJK: teksterugloop inschakelen (omschrijving nu volledig zichtbaar) */
.wegenwerken-tabel tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #f3f4f6; /* subtiele rij-scheiding */
  white-space: normal;              /* wrapping toestaan */
  overflow-wrap: anywhere;          /* breek lange woorden/URLs */
  word-break: normal;               /* natuurlijke woordbreking */
}

/* SPECIAL: afstandskolom altijd op 1 lijn (getal + 'km') en iets breder */
.wegenwerken-tabel tbody td.ww-distance {
  white-space: nowrap;          /* houd op 1 lijn */
  min-width: 7.5em;             /* ~ genoeg voor '123,4 km' zonder afbreken */
}

/* Hoverkleur per rij */
.wegenwerken-tabel tbody tr:hover {
  background: #fafafa;               /* zelfde hoverkleur */
}

/* ========== Afstand-kolom: hand-cursor + lichtgrijs hover-underline ========== */
.wegenwerken-tabel td.ww-distance a,
.wegenwerken-tabel td.ww-distance button {
  position: relative;
  color: #0f487a;
  cursor: pointer;               /* handje */
  text-decoration: none;         /* we tekenen onze eigen underline */
  background: none;
  border: 0;
  padding: 0;
  line-height: 1.2;
}

.wegenwerken-tabel td.ww-distance a::after,
.wegenwerken-tabel td.ww-distance button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;                  /* net onder de tekst */
  height: 2px;
  background: #e5e7eb;          /* lichtgrijs, consistent met borders */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease-in-out;
}

.wegenwerken-tabel td.ww-distance a:hover::after,
.wegenwerken-tabel td.ww-distance button:hover::after,
.wegenwerken-tabel td.ww-distance a:focus-visible::after,
.wegenwerken-tabel td.ww-distance button:focus-visible::after {
  transform: scaleX(1);
}

/* Toegankelijkheid: focus-stijl */
.wegenwerken-tabel td.ww-distance a:focus-visible,
.wegenwerken-tabel td.ww-distance button:focus-visible {
  outline: 2px solid #c7d2fe;   /* subtiele focusring */
  outline-offset: 2px;
  border-radius: 4px;
}

/* ========== Lege staat / melding ========== */
.wegenwerken-empty {
  color: #6b7280;
  font-style: italic;
  padding: 4px 0;
}

/* ========== Compact op kleine schermen ========== */
@media (max-width: 480px) {
  .wegenwerken-paneel .ww-content {
    padding: 12px;
  }
  .wegenwerken-tabel {
    font-size: 13px;
  }
  .wegenwerken-tabel thead th, .wegenwerken-tabel tbody td {
    padding: 8px;
  }
}