/* Levensloop routekaart: huisstijlkleuren uit Kleurcodes.docx, systeemlettertype (geen externe assets). */
:root {
  --paars: #a92c7b;
  --donkerpaars: #6e0d4f;
  --groen: #d0e558;
  --geel: #f4d44d;
  --creme: #f9f5f0;
  --lichtpaars: #e3bde0;
  --tekst: #2b1a26;
  --zacht: #6f5d69;
  --lijn: #e6dbe3;
  --rood: #c62828;
  --balk: 52px;
  --paneel: 400px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tekst);
  background: var(--creme);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--paars); }
h2 { font-size: 1.15rem; margin: 1.1rem 0 .6rem; color: var(--donkerpaars); }
h2:first-child { margin-top: .2rem; }
h3 { font-size: 1rem; margin: 1.1rem 0 .5rem; color: var(--donkerpaars); }
.laden { padding: 2rem; text-align: center; color: var(--zacht); }

button {
  cursor: pointer;
  border: 1px solid var(--lijn);
  background: #fff;
  border-radius: 8px;
  padding: .45rem .8rem;
}
button:hover { border-color: var(--lichtpaars); background: #fdf8fb; }
button:disabled { opacity: .5; cursor: default; }
button.primair { background: var(--paars); border-color: var(--paars); color: #fff; font-weight: 600; }
button.primair:hover { background: var(--donkerpaars); border-color: var(--donkerpaars); }
button.gevaar { color: var(--rood); }
button.gevaar:hover { border-color: var(--rood); background: #fff5f5; }
button.link { border: 0; background: none; padding: 0; color: var(--paars); text-decoration: underline; }
#app { min-height: 100%; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border: 1px solid #d8c9d3;
  border-radius: 8px;
  padding: .45rem .6rem;
  background: #fff;
  width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--paars); outline-offset: 1px; }
textarea { resize: vertical; }

/* ---------- inloggen ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(160deg, var(--donkerpaars), var(--paars)); }
.login form { background: #fff; border-radius: 14px; padding: 1.6rem; width: min(380px, 100%); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.login .logo { width: 48px; height: 48px; display: block; margin-bottom: .6rem; }
.login h1 { margin: 0; font-size: 1.5rem; color: var(--donkerpaars); }
.login .sub { margin: .1rem 0 1rem; color: var(--zacht); }
.login label { display: block; margin: .7rem 0; font-weight: 600; font-size: .9rem; }
.login label input { margin-top: .25rem; font-weight: 400; }
.login button { width: 100%; margin-top: .6rem; padding: .6rem; }
.login .welkom { margin: .4rem 0 .8rem; }
.fout { color: var(--rood); min-height: 1.2em; margin: .6rem 0 0; }
.klein, small { font-size: .85rem; color: var(--zacht); }

/* ---------- indeling ---------- */
.balk {
  height: var(--balk);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .8rem 0 1rem;
  background: var(--donkerpaars);
  color: #fff;
}
.merk { display: flex; align-items: center; gap: .5rem; min-width: 0; white-space: nowrap; }
.merk img { width: 28px; height: 28px; }
.merk b { font-size: 1.05rem; }
.merk span { color: var(--groen); font-weight: 600; }
#nieuw { padding: .45rem 1rem; background: var(--groen); border-color: var(--groen); color: var(--donkerpaars); }
#nieuw:hover { background: #e2f08a; }

.hoofd {
  position: relative;
  height: calc(100vh - var(--balk));
  height: calc(100dvh - var(--balk));
  display: grid;
  grid-template-columns: 1fr var(--paneel);
}
#kaart { height: 100%; min-height: 0; background: #e8e4df; }
#kaart.plaatsen, #kaart.plaatsen .leaflet-grab, #kaart.plaatsen .leaflet-interactive { cursor: crosshair; }

.paneel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border-left: 1px solid var(--lijn);
}
.tabs { display: flex; gap: .2rem; padding: .45rem .5rem 0; border-bottom: 1px solid var(--lijn); background: var(--creme); }
.tabs button { border: 0; border-radius: 8px 8px 0 0; background: none; padding: .5rem .8rem; color: var(--zacht); font-weight: 600; }
.tabs button.actief { background: #fff; color: var(--donkerpaars); box-shadow: 0 -2px 0 var(--paars) inset; }
.tabs .aantal { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 1em; background: var(--lichtpaars); color: var(--donkerpaars); font-size: .8rem; text-align: center; }
.tabs .formaat { display: none; margin-left: auto; }
.inhoud { flex: 1; overflow-y: auto; padding: .8rem 1rem 1.5rem; overscroll-behavior: contain; }

.hint {
  position: absolute;
  z-index: 1000;
  top: .7rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 7rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  background: var(--donkerpaars);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}
.hint[hidden] { display: none; }
.hint span { font-weight: 600; }
.hint button { padding: .3rem .7rem; color: var(--tekst); }
.hint button.primair { background: var(--groen); border-color: var(--groen); color: var(--donkerpaars); }

#toast {
  position: fixed;
  z-index: 3000;
  left: 50%;
  bottom: 1.2rem;
  transform: translate(-50%, 150%);
  max-width: calc(100% - 2rem);
  padding: .6rem 1rem;
  border-radius: 10px;
  background: #2b1a26;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
  transition: transform .2s;
  pointer-events: none;
}
#toast.zicht { transform: translate(-50%, 0); }
#toast.fout { background: var(--rood); }

/* ---------- soorten ---------- */
.s-opmerking { --c: #e8a400; }
.s-gevaar { --c: #d62828; }
.s-afsluiting { --c: #e2711d; }
.s-wissel { --c: #2e9e3e; }
.s-parkeren { --c: #1f6fb2; }
.s-doorkomst { --c: #7b3fb5; }

.dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--c, #999); flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .6rem;
  border-radius: 1em;
  border: 1px solid var(--lijn);
  background: #fff;
  font-size: .85rem;
  color: var(--zacht);
}
.chip .dot { opacity: .35; }
.chip.aan { border-color: var(--c); color: var(--tekst); background: color-mix(in srgb, var(--c) 12%, #fff); }
.chip.aan .dot { opacity: 1; }
.chip small { font-size: .8rem; }
.keuze .chip { font-size: .9rem; padding: .35rem .7rem; }

/* ---------- lijst ---------- */
.filters { display: flex; gap: .4rem; }
.filters select { width: auto; flex: none; }
.telling { margin: .4rem 0; font-size: .85rem; color: var(--zacht); }
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li + li { border-top: 1px solid var(--lijn); }
.item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .55rem .3rem;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
}
.item:hover { background: #fbf5f9; }
.item .dot { margin-top: .35em; }
.item .km { flex: none; width: 3.2em; font-weight: 700; color: var(--donkerpaars); font-variant-numeric: tabular-nums; }
.item .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item .txt small { display: block; }
.item.klaar .txt, .item.klaar .km { opacity: .55; }
.leeg { color: var(--zacht); }
.export { margin-top: 1.2rem; font-size: .9rem; }
.uitleg { font-size: .85rem; color: var(--zacht); }

/* ---------- vlag ---------- */
.terug { border: 0; background: none; padding: .2rem 0; color: var(--paars); font-weight: 600; }
.terug:hover { background: none; text-decoration: underline; }
.vlag-kop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0 .3rem; }
.vlag-kop .km { font-weight: 700; font-size: 1.1rem; color: var(--donkerpaars); }
.vlag-kop .naast { color: var(--zacht); font-size: .9rem; }
.label { display: inline-block; padding: .05rem .45rem; border-radius: 6px; background: var(--lichtpaars); color: var(--donkerpaars); font-size: .78rem; font-weight: 600; }
.klaar-label { background: #dff1e1; color: #1d6b2a; }
.tekst { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.02rem; margin: .5rem 0; }
.meta { margin: .2rem 0; font-size: .85rem; color: var(--zacht); }
.knoppen { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; align-items: center; }
.knoppen.klein { margin: .4rem 0 0; }
.knoppen.klein button, .knoppen.klein select { padding: .25rem .55rem; font-size: .85rem; width: auto; }
.links { font-size: .9rem; }
.reacties { list-style: none; margin: 0; padding: 0; }
.reacties li { background: var(--creme); border-radius: 10px; padding: .5rem .7rem; margin-bottom: .45rem; }
.r-kop { display: flex; align-items: baseline; gap: .5rem; }
.r-kop .weg { margin-left: auto; border: 0; background: none; padding: 0 .3rem; color: var(--zacht); font-size: 1.1rem; line-height: 1; }
.r-kop .weg:hover { color: var(--rood); }
.reacties p { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reactie-form { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }
.km-voorbeeld { font-weight: 700; color: var(--donkerpaars); margin: 0 0 .4rem; }
.veld { display: block; font-weight: 600; font-size: .9rem; margin: .8rem 0 .2rem; }

/* ---------- beheer ---------- */
.rij-form { display: flex; flex-wrap: wrap; gap: .4rem; }
.rij-form input { flex: 1 1 140px; }
.rij-form select, .rij-form button { width: auto; flex: none; }
.kolom-form { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.accounts, .routes { list-style: none; margin: .6rem 0 0; padding: 0; }
.accounts li, .routes li { padding: .6rem 0; border-top: 1px solid var(--lijn); }
.accounts li.uit b { text-decoration: line-through; color: var(--zacht); }
.link-vak { background: #f6fbe0; border: 1px solid var(--groen); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .7rem; }
.link-vak p { margin: 0 0 .4rem; font-size: .9rem; }
.rij { display: flex; gap: .4rem; align-items: center; }
.rij button { flex: none; }
.swatch { flex: none; vertical-align: middle; }
.upload { display: inline-block; margin-top: .8rem; }
.upload span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }

/* ---------- kaart: vlaggen, punten en km ---------- */
.vlag svg { display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); transform-origin: 5px 32px; transition: transform .12s; }
.vlag .paal { stroke: #2b1a26; stroke-width: 2.4; stroke-linecap: round; }
.vlag .voet { fill: #2b1a26; }
.vlag .doek { fill: var(--c); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.vlag.klaar svg { opacity: .45; }
.vlag.sel svg { transform: scale(1.35); filter: drop-shadow(0 0 4px #fff) drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.vlag.concept svg { animation: wip 1s ease-in-out infinite alternate; }
@keyframes wip { from { transform: scale(1.2); } to { transform: scale(1.4); } }

.wpt { border-radius: 50%; background: #fff; border: 3px solid var(--paars); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.wpt-start { background: #2e9e3e; border-color: #fff; }
.wpt-finish { background: #111; border-color: #fff; }
.wpt-doorkomst { background: var(--geel); border-color: var(--donkerpaars); }
.km-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  color: var(--donkerpaars);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--lichtpaars);
  border-radius: 8px;
}
.ik-knop a { display: grid; place-items: center; }
.ik-knop svg { fill: #333; stroke: #333; }
.leaflet-control-layers-overlays label span { display: inline-flex; align-items: center; gap: .25rem; }
.leaflet-container { font: inherit; }
.leaflet-popup-content { margin: .6rem .8rem; }

/* ---------- telefoon: paneel onder de kaart, in drie standen ---------- */
@media (max-width: 760px) {
  .merk span { display: none; }
  .hoofd { display: flex; flex-direction: column; }
  #kaart { flex: 1; }
  .paneel { flex: none; height: 45%; border-left: 0; border-top: 1px solid var(--lijn); box-shadow: 0 -4px 14px rgba(0, 0, 0, .12); transition: height .2s; }
  .formaat-groot .paneel { height: 82%; }
  .formaat-klein .paneel { height: 46px; }
  .formaat-klein .inhoud { display: none; }
  .tabs .formaat { display: block; font-size: 1.1rem; padding: .3rem .8rem; }
  .tabs button { padding: .45rem .6rem; }
  .hint { max-width: calc(100% - 6.5rem); font-size: .9rem; }
  .chips:not(.keuze) { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; }
  .chips:not(.keuze) .chip { flex: none; }
}