/* fiets-ruitjes: geen standaard wit vierkant van Leaflet */
.fiets-icoon { background: none !important; border: none !important; }

/* legenda: knop linksboven, klapt open tot paneel */
.legenda-paneel > summary.legenda-knop {
  list-style: none; cursor: pointer; display: inline-block;
  background: rgba(20,20,20,0.92); color: #eee; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px; border: 1px solid #555; user-select: none;
}
.legenda-paneel > summary.legenda-knop::-webkit-details-marker { display: none; }
.legenda-paneel > summary.legenda-knop::before { content: "▸ "; }
.legenda-paneel[open] > summary.legenda-knop { border-radius: 6px 6px 0 0; border-bottom: none; }
.legenda-paneel[open] > summary.legenda-knop::before { content: "▾ "; }

/* datumkeuze: invoervelden altijd breed genoeg om in te klikken/typen */
.dash-datepicker-input { min-width: 92px !important; }

.knop-verwerk { padding: 8px 18px; background: #c0392b; color: white; border: none; border-radius: 4px; cursor: pointer; }
.knop-verwerk:disabled { background: #ccc; color: #666; cursor: not-allowed; }

/* schuifbalk tussen kaart en diagram */
.splitter { height: 8px; cursor: row-resize; background: #ddd; border-top: 1px solid #bbb;
            border-bottom: 1px solid #bbb; flex: 0 0 auto; position: relative; }
.splitter::after { content: ""; position: absolute; left: 50%; top: 2px; width: 40px; height: 2px;
                   margin-left: -20px; border-top: 1px solid #888; border-bottom: 1px solid #888; }
.splitter:hover, .splitter.actief { background: #c9c9c9; }

/* sleepbare marker voor het midden van een kruispunt (tab Locaties) */
.sleep-marker { background: #fff; color: #c0392b; border: 2px solid #c0392b; border-radius: 50%;
                font-size: 18px; line-height: 22px; text-align: center; cursor: move;
                box-shadow: 0 0 6px rgba(0,0,0,0.6); }

/* stadkeuze boven de tabs */
.stadbalk { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
            background: #2c3e50; color: #ecf0f1; font-size: 13px; }
.stadbalk .Select-control, .stadbalk .dash-dropdown { min-height: 26px; }
.stadbalk input { height: 24px; font-size: 12px; }
.stadbalk button { height: 26px; font-size: 12px; padding: 0 10px; }

/* stappenplan (informatievenster) */
.info-knop { background: #f1c40f; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; }
.info-achter { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 3000;
               align-items: center; justify-content: center; }
.info-venster { background: #fff; color: #222; width: min(720px, 92vw); max-height: 86vh; overflow-y: auto;
                border-radius: 8px; padding: 18px 22px; box-shadow: 0 8px 30px rgba(0,0,0,0.35);
                font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.45; }
.info-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.info-sluit { border: none; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #666; }
.info-intro { color: #555; margin: 4px 0 12px; }
.info-stap { display: flex; gap: 12px; margin-bottom: 12px; }
.info-stap p { margin: 3px 0 0; color: #444; }
.info-nr { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #2c3e50; color: #fff;
           display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }

/* stappen in de tab Locaties */
.loc-stap { font-weight: 600; font-size: 13px; color: #2c3e50; margin: 12px 0 2px; padding-top: 8px;
            border-top: 1px solid #ddd; }
.loc-kader { border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; background: #fbfbfa; margin-top: 6px; }

/* tabs: tekst verticaal in het midden; actieve tab lichtblauw met een blauwe streep bovenaan */
.tab { display: flex !important; align-items: center; justify-content: center; height: 44px;
  padding: 0 8px !important; box-sizing: border-box; line-height: 1.2; }
.tab--selected, .tab.tab--selected { background: #d6eaf8 !important; border-top: 1px solid #d6d6d6 !important;
  box-shadow: inset 0 3px 0 #2e86c1; color: #1b4f72 !important; font-weight: 600; }
.tab:not(.tab--selected) { background: #f4f4f4 !important; color: #555 !important; }