:root {
  --bg: #fcfcfb; --vlak: #ffffff; --tekst: #0b0b0b; --tekst2: #52514e; --rand: #e7e6e2; --accent: #2a78d6;
  --groen: #0ca30c; --geel: #fab219; --oranje: #ec835a; --rood: #d03b3b;
  --kop: 46px; --kaart: 40vh; --keuze: 56px; --score: 40px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tekst); height: 100%;
             font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.pagina { max-width: 1600px; margin: 0 auto; padding: 8px 14px; height: 100vh; display: flex; flex-direction: column; gap: 8px; }
.kop { display: flex; justify-content: space-between; align-items: center; height: var(--kop); flex: none;
       border-bottom: 1px solid var(--rand); }
h1 { font-size: 20px; margin: 0; display: inline; }
.sub { color: var(--tekst2); font-size: 12px; }
.bediening { display: flex; align-items: center; gap: 10px; }
.badge { font-size: 12px; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--rand); color: var(--tekst2); }
.paneel { background: var(--vlak); border: 1px solid var(--rand); border-radius: 8px; }
.kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; }
.kaarten .paneel { padding: 3px; }
.kaartgraf { height: var(--kaart) !important; min-height: 220px; }
/* grafiek */
.grafiek-paneel { flex: 1; min-height: 0; padding: 6px 10px; display: flex; flex-direction: column; }
.keuzes { display: flex; gap: 10px; align-items: flex-end; flex: none; height: var(--keuze); }
.keuze { display: flex; flex-direction: column; gap: 2px; flex: 1.2; min-width: 170px; }
.keuze.smal { flex: 0.8; min-width: 140px; }
.keuze.breed { flex: 2; min-width: 280px; }
.keuze.grafiekkeuze { flex: 3; min-width: 420px; }
.keuze label { font-size: 11.5px; color: var(--tekst2); }
.hoofdgraf { flex: 1; min-height: 220px; height: auto !important; }
.stat { flex: none; font-size: 12.5px; color: var(--tekst2); line-height: 1.45; min-height: var(--score); padding-top: 2px; }
.js-plotly-plot, .plot-container { height: 100% !important; }
.DateInput_input { font-size: 14px; padding: 6px 8px; }
.SingleDatePickerInput { border-radius: 4px; }
/* knoppen */
.rond-knop { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--accent); background: var(--vlak);
             color: var(--accent); font-size: 17px; cursor: pointer; line-height: 1; }
.rond-knop.info { font: italic 700 20px Georgia, serif; }
.rond-knop:hover { background: var(--accent); color: #fff; }
.knop { margin-top: 10px; padding: 6px 12px; border: 1px solid var(--accent); background: var(--vlak); color: var(--accent);
        border-radius: 6px; cursor: pointer; }
/* modal en lade */
.modal { position: fixed; inset: 0; background: rgba(11,11,11,.45); display: flex; align-items: center; justify-content: center;
         z-index: 1000; padding: 16px; }
.modal-inhoud { background: var(--vlak); border-radius: 10px; max-width: 760px; width: 100%; max-height: 88vh; overflow-y: auto;
                padding: 22px 26px; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.lade { position: fixed; top: 0; right: 0; height: 100vh; width: 760px; max-width: 92vw; background: var(--vlak); z-index: 900;
        box-shadow: -8px 0 30px rgba(0,0,0,.18); padding: 18px 20px; overflow-y: auto; }
.modal.verborgen, .lade.verborgen { display: none; }
.lade h3 { margin: 0 0 4px; }
.par { display: grid; grid-template-columns: 1fr 70px; grid-template-rows: auto auto; gap: 2px 8px; margin: 12px 0 0; align-items: center; }
.par label { grid-column: 1 / 3; font-size: 13px; }
.par input[type=number] { width: 70px; padding: 4px 6px; border: 1px solid var(--rand); border-radius: 4px; grid-column: 2; grid-row: 2; }
.par .eenheid { font-size: 12px; color: var(--tekst2); grid-column: 1; grid-row: 2; }
.sluit-knop { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 26px; cursor: pointer;
              color: var(--tekst2); }
.uitleg-tekst h3 { margin: 0 0 8px; } .uitleg-tekst h4 { margin: 14px 0 4px; }
.uitleg-tekst p, .uitleg-tekst li { font-size: 14px; line-height: 1.55; color: var(--tekst2); }
.uitleg-tekst ul { padding-left: 18px; margin: 4px 0; }
@media (max-width: 1000px) {
  .pagina { height: auto; } .kaarten { grid-template-columns: 1fr; } .keuzes { flex-wrap: wrap; height: auto; }
  .hoofdgraf { height: 380px !important; flex: none; }
}

.tabs { margin: 0 30px 8px 0; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.knop.primair { background: var(--accent); color: #fff; }
.knop:disabled { opacity: .4; cursor: default; }
.melding { font-size: 12.5px; color: var(--tekst2); margin-top: 8px; }
.melding ul { padding-left: 18px; margin: 4px 0; }
.lade .par { max-width: 380px; }

/* tabbladen */
.tabknoppen { display: flex; gap: 4px; align-self: flex-end; }
.tabknop { font: inherit; font-size: 14px; padding: 8px 18px; border: 1px solid var(--rand); border-bottom: none;
           border-radius: 8px 8px 0 0; background: #f4f3f0; color: var(--tekst2); cursor: pointer; }
.tabknop.actief { background: var(--vlak); color: var(--tekst); font-weight: 600; box-shadow: inset 0 3px 0 var(--accent); }
.blad { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.blad.verborgen { display: none; }
.balk { display: flex; align-items: flex-end; gap: 14px; flex: none; flex-wrap: wrap; }
.balk .keuze { flex: none; min-width: 150px; }
.live { font-size: 13px; padding-bottom: 8px; }
.balk .badge { margin-bottom: 7px; }
.legenda { display: flex; gap: 12px; font-size: 12px; color: var(--tekst2); margin-left: auto; padding-bottom: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.blokje { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
/* codekleuren (vlak) */
.c0 { background: var(--groen); color: #fff; } .c1 { background: var(--geel); color: var(--tekst); }
.c2 { background: var(--oranje); color: var(--tekst); } .c3 { background: var(--rood); color: #fff; }
.cnd { background: #e7e6e2; color: var(--tekst2); }
/* matrix */
.matrix-paneel { flex: 1; min-height: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
/* computer: de tegels krimpen niet onder hun inhoud (anders liep de legenda eronder door de tegels heen);
   past het niet, dan scrolt het overzicht */
@media (min-width: 701px) {
  #blad-act { overflow-y: auto; }
  .matrix-paneel { flex-shrink: 0; }
  #matrix { flex: 1 0 auto; }
}
.matrix { width: 100%; height: 100%; border-collapse: separate; border-spacing: 6px 5px; table-layout: fixed; }
.matrix th { font-size: 13px; font-weight: 600; color: var(--tekst2); text-align: center; padding: 0 0 2px; }
.matrix thead th { border-bottom: 2px solid var(--rand); }
.matrix th.locatie { text-align: left; font-size: 15px; color: var(--tekst); width: 130px; }
.matrix td { padding: 0; height: 1px; }
.cel { width: 100%; height: 100%; min-height: 42px; border: 3px solid transparent; border-radius: 7px; cursor: pointer;
       display: flex; align-items: center; justify-content: center; gap: 10px; font: inherit; padding: 4px 8px; }
.cel:hover { filter: brightness(1.06); border-color: rgba(11,11,11,.25); }
.cel.gekozen { border-color: var(--tekst); box-shadow: 0 0 0 2px var(--vlak) inset; }
.cel-r { font-weight: 700; font-size: 15px; }
.cel-t { font-size: 13px; }
.matrix-voet { flex: none; display: flex; justify-content: space-between; align-items: center; }
.knop.klein { margin-top: 0; padding: 4px 10px; font-size: 13px; }
/* herleiding */
.herleiding { flex: none; display: flex; gap: 8px; margin: 6px 0 2px; align-items: stretch; }
.code-blok { flex: 0 0 150px; border-radius: 7px; padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; }
.code-naam { font-size: 17px; font-weight: 700; }
.code-sub { font-size: 11.5px; opacity: .9; }
.stap { flex: 1; border: 1px solid var(--rand); border-left-width: 5px; border-radius: 7px; padding: 4px 8px; font-size: 12px;
        color: var(--tekst2); background: #fafaf8; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stap b { color: var(--tekst); font-size: 12.5px; }
.stap.aan.s1 { border-left-color: var(--geel); background: #fab2191a; }
.stap.aan.s2 { border-left-color: var(--oranje); background: #ec835a1a; }
.stap.aan.s3 { border-left-color: var(--rood); background: #d03b3b14; }
.stap.bepaalt { border-top-color: var(--tekst); border-right-color: var(--tekst); border-bottom-color: var(--tekst); }
.stap-tekst { line-height: 1.35; }
.links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.link { border: none; background: none; color: var(--accent); padding: 0; font: inherit; font-size: 12px; cursor: pointer; }
.link:hover { text-decoration: underline; }
@media (max-width: 1000px) { .herleiding { flex-wrap: wrap; } .legenda { margin-left: 0; } }
/* kaarten donker, keuzes boven de kaarten */
.paneel.donker { background: #1d1f23; border-color: #2c2f35; }
.keuze-radio { display: flex; flex-direction: column; gap: 4px; flex: none; }
.keuze-radio label { font-size: 11.5px; color: var(--tekst2); }
.radio { display: flex; gap: 2px; background: #f1f0ed; border-radius: 6px; padding: 2px; }
.radio label { font-size: 13px !important; color: var(--tekst) !important; padding: 5px 10px; border-radius: 5px; cursor: pointer;
               display: inline-flex; align-items: center; gap: 4px; }
.radio input { accent-color: var(--accent); margin: 0; }
.radio label:has(input:checked) { background: var(--vlak); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.live-badge { color: var(--rood); border-color: #f2b8b8; font-weight: 600; }
.uitleg-kolommen { padding-left: 18px; margin: 10px 0 0; line-height: 1.45; }
.uitleg-kolommen li { margin-bottom: 3px; }
.lade .par { max-width: 520px; grid-template-columns: 1fr 70px; }
.matrix-voet { gap: 14px; }
.matrix-voet .legenda { margin-left: auto; padding-bottom: 0; }
.matrix-voet .legenda span, .matrix-voet .knop { white-space: nowrap; }
.matrix-voet > .sub { flex: 1; min-width: 0; }
/* logo's in de kop */
.titel { display: flex; align-items: center; gap: 12px; }
.logo { height: 44px; width: auto; display: block; }
.logo-dmi { height: 44px; margin-right: 4px; }
.cel-c { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,.35); }
.cel { flex-wrap: wrap; row-gap: 2px; }
.cel { flex-wrap: nowrap; gap: 8px; overflow: hidden; }
.cel-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cel-r, .cel-c { flex: none; }
/* titel met DMI-logo erachter */
.titel .logo-dmi { margin-left: 22px; height: 40px; }
/* Mobility Sensing: rustig naast het DMI-logo, met een dun scheidingslijntje en ruimte tot de tabbladen */
.titel .logo-mobilitysensing { height: 24px; margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--rand);
                               box-sizing: content-box; }
.titel { margin-right: 32px; }
/* herleiding: per spits één regel */
.herleiding { flex-direction: column; gap: 4px; }
.herl-rij { display: flex; gap: 6px; align-items: stretch; }
.herl-rij .code-blok { flex: 0 0 170px; padding: 4px 10px; }
.herl-rij .code-naam { font-size: 13.5px; }
.herl-rij .stap { flex: 1; flex-direction: row; align-items: center; gap: 4px; padding: 4px 8px; cursor: pointer;
                  font: inherit; font-size: 12px; text-align: left; white-space: nowrap; overflow: hidden; }
.herl-rij .stap .stap-tekst { overflow: hidden; text-overflow: ellipsis; }
.herl-rij .stap:hover { filter: brightness(0.97); }
.herl-rij .stap.bepaalt { outline: 2px solid var(--tekst); outline-offset: -2px; }
/* voet onder de grafiek + herleiding in een modal */
.voet { flex: none; display: flex; align-items: flex-start; gap: 12px; }
.voet .stat { flex: 1; }
.voet .knop { margin-top: 2px; white-space: nowrap; }
.modal-inhoud.breed { max-width: 980px; }
.herl-kop { margin: 0 0 2px; }
#herl-modal .herleiding { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 8px; flex-direction: row; }
.herl-kolom { display: flex; flex-direction: column; gap: 6px; }
.herl-kolom .code-blok { flex: none; padding: 8px 12px; }
.herl-kolom .code-naam { font-size: 15px; }
.herl-kolom .stap { flex: none; display: block; text-align: left; font: inherit; font-size: 12.5px; padding: 7px 10px;
                    cursor: pointer; white-space: normal; }
.herl-kolom .stap:hover { filter: brightness(0.97); }
.herl-kolom .stap.bepaalt { outline: 2px solid var(--tekst); outline-offset: -2px; }
.stap-lang { white-space: pre-line; color: var(--tekst2); margin-top: 3px; line-height: 1.4; }
@media (max-width: 800px) { #herl-modal .herleiding { grid-template-columns: 1fr; } }
.datum-vast { height: 36px; display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--rand);
              border-radius: 4px; background: #f4f3f0; font-size: 15px; color: var(--tekst); cursor: default; }
.dk-sam { margin-left: 16px; padding-bottom: 8px; }
#blad-dk .hoofdgraf { min-height: 260px; }
/* matrix in twee helften onder de twee kaarten */
.matrix-duo { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; height: 100%; }
.matrix-duo .matrix th.locatie { width: 110px; font-size: 14px; }
/* verdieping */
.kpis { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0; }
.kpi { border: 1px solid var(--rand); border-radius: 8px; padding: 6px 12px; background: #fafaf8; }
.kpi-titel { font-size: 12px; color: var(--tekst2); }
.kpi-waarde { font-size: 22px; font-weight: 700; line-height: 1.2; }
.kpi-sub { font-size: 11.5px; color: var(--tekst2); }
/* computer: rijen minstens 400 px hoog en ruimte ertussen; past het niet, dan scrolt het paneel */
#blad-vd .grafiek-paneel { overflow-y: auto; }
.vd-raster { flex: 1 0 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr;
             grid-template-rows: minmax(400px, 1fr) minmax(400px, 1fr); gap: 28px 32px; padding-top: 8px; }
.vd-graf { min-height: 0; height: 100% !important; }
.vd-groot { grid-row: 1 / 3; }

/* ======================================================================= telefoon
   Eén kolom onder elkaar, tabbladen als balk onderin (zoals een app), codematrix bovenaan.
   De kaarten staan op slot tot je erop tikt, zodat je er met je vinger langs kunt scrollen. */
.kaart-paneel { position: relative; }
.kaart-slot { display: none; }
@media (max-width: 700px) {
  :root { --onderbalk: 58px; }
  html, body { height: auto; -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; }
  .pagina { height: auto; min-height: 100vh; gap: 10px;
            padding: calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right))
                     calc(var(--onderbalk) + 14px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); }
  /* kop: logo + titel links, knoppen rechts; de badge met de bron past er niet */
  .kop { height: auto; padding: 2px 0 8px; gap: 8px; }
  .titel { gap: 8px; min-width: 0; margin-right: 0; }
  .logo { height: 30px; }
  .titel .logo-dmi, .titel .logo-mobilitysensing { display: none; }
  h1 { font-size: 16px; line-height: 1.2; }
  .bediening { gap: 8px; flex: none; }
  .bediening .badge { display: none; }
  .rond-knop { width: 38px; height: 38px; }
  /* tabbladen: vaste balk onderin */
  .tabknoppen { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: grid;
                grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--vlak); border-top: 1px solid var(--rand);
                padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
                box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
  .tabknop { height: var(--onderbalk); border: none; border-radius: 0; background: none; font-size: 12.5px; padding: 0 2px;
             color: var(--tekst2); box-shadow: none; -webkit-tap-highlight-color: transparent; }
  .tabknop.actief { background: none; color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
  /* overzicht: datum en snelheid, dan per spits de kaart met de codes eronder, onderaan legenda en knop.
     Kaarten en matrix vallen daarvoor uiteen (display: contents), zodat de delen los te ordenen zijn. */
  .blad { flex: none; min-height: 0; }
  .balk { gap: 8px 12px; align-items: flex-end; }
  .balk .keuze { min-width: 0; }
  .live, .legenda, .balk .badge { padding-bottom: 0; margin-bottom: 0; }
  #blad-act { gap: 10px; }
  #blad-act .kaarten, #blad-act .matrix-paneel, #blad-act #matrix, #blad-act .matrix-duo { display: contents; }
  #blad-act .balk { order: 1; }
  #blad-act .k-ochtendspits { order: 2; }
  #blad-act .m-ochtendspits { order: 3; }
  #blad-act .k-avondspits { order: 4; margin-top: 10px; }
  #blad-act .m-avondspits { order: 5; }
  #blad-act .matrix-voet { order: 6; background: var(--vlak); border: 1px solid var(--rand); border-radius: 8px; padding: 10px; }
  #blad-act table.matrix { background: var(--vlak); border: 1px solid var(--rand); border-radius: 8px; padding: 4px 4px 6px;
                           width: 100%; height: auto; }
  .kaarten { grid-template-columns: 1fr; }
  .kaartgraf { height: 40vh !important; min-height: 250px; }
  .kaart-slot { display: flex; position: absolute; inset: 3px; align-items: flex-end; justify-content: center;
                padding-bottom: 12px; z-index: 5; background: transparent; cursor: pointer; }
  .kaart-slot span { background: rgba(20,22,26,.82); color: #f4f4f2; font-size: 12.5px; padding: 6px 12px; border-radius: 14px; }
  .kaart-slot.weg { display: none; }
  /* codematrix: ochtend- en avondspits onder elkaar, tekst mag over twee regels */
  .matrix-paneel { padding: 8px; }
  .matrix-duo { grid-template-columns: 1fr; row-gap: 12px; height: auto; }
  .matrix { border-spacing: 4px 4px; }
  .matrix th.locatie, .matrix-duo .matrix th.locatie { width: 92px; font-size: 13.5px; }
  .matrix th { font-size: 12.5px; }
  .cel { min-height: 50px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 4px 8px; }
  .cel-r { font-size: 14px; }
  .cel-t { font-size: 11.5px; white-space: normal; text-align: left; line-height: 1.25; }
  .matrix-voet { flex-wrap: wrap; gap: 8px; }
  .matrix-voet > .sub { flex: 1 1 100%; }
  .matrix-voet .legenda { margin-left: 0; flex-wrap: wrap; gap: 6px 12px; }
  .matrix-voet .knop { width: 100%; padding: 10px; font-size: 14px; }
  /* grafieken, verdieping, datakwaliteit */
  .grafiek-paneel { padding: 8px; flex: none; }
  .keuzes { flex-wrap: wrap; height: auto; gap: 8px; }
  .keuze, .keuze.smal, .keuze.breed { flex: 1 1 100%; min-width: 0; }
  .keuze.smal { flex-basis: calc(50% - 4px); }
  .hoofdgraf { height: auto !important; min-height: 0; flex: none; margin-top: 12px; }   /* hoogte: zie achtergrond() */
  .grafiek-paneel .keuze-radio { flex: 1 1 100%; }
  .stat { font-size: 13px; line-height: 1.5; color: var(--tekst); }
  .voet { flex-direction: column; gap: 6px; }
  .voet .knop { width: 100%; padding: 10px; font-size: 14px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 6px; }
  .kpi { padding: 6px 10px; }
  .kpi-waarde { font-size: 19px; }
  .kpis { margin: 12px 0 6px; }
  .vd-raster { display: flex; flex-direction: column; gap: 0; }
  .vd-graf { height: 380px !important; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--rand); }
  .vd-groot { height: 620px !important; margin-top: 14px; border-top: none; padding-top: 0; }
  #blad-dk .balk { margin-bottom: 6px; }
  #blad-dk .hoofdgraf { min-height: 360px; height: 54vh !important; margin-top: 28px; }
  #blad-dk .dash-table-container { margin-top: 12px; }
  .dk-sam { margin-left: 0; display: block; line-height: 1.45; }
  /* lade (⚙) en uitleg op volle breedte */
  .lade { width: 100vw; max-width: 100vw; padding: calc(14px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)); }
  .lade .par { max-width: none; grid-template-columns: 1fr 84px; }
  .par input[type=number] { width: 84px; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-inhoud, .modal-inhoud.breed { max-width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0;
                                        padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); }
  .sluit-knop { font-size: 30px; top: 6px; right: 8px; padding: 4px 8px; }
  .knoppen .knop { flex: 1 1 auto; padding: 10px 12px; }
  .radio label { padding: 7px 10px; }
  /* geen inzoomen van iOS bij het tikken in een invoerveld */
  input, select, textarea, .DateInput_input { font-size: 16px !important; }
}

/* installeren als app (balk onder de kop; assets/mobiel.js bepaalt of hij zichtbaar is) */
.verborgen { display: none !important; }
.installeer-balk { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
                   background: #eef4fc; border: 1px solid #c9dcf3; }
.installeer-icoon { width: 32px; height: 32px; border-radius: 7px; flex: none; }
.installeer-tekst { flex: 1; font-size: 13.5px; line-height: 1.3; }
.installeer-balk .knop { margin: 0; white-space: nowrap; padding: 8px 12px; font-size: 14px; }
.installeer-sluit { border: none; background: none; font-size: 22px; color: var(--tekst2); cursor: pointer; padding: 0 4px; }
.uitleg-tekst ol { padding-left: 20px; } .uitleg-tekst ol li { font-size: 15px; line-height: 1.6; }
.deel { display: inline-block; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 4px; padding: 0 4px;
        font-size: 12px; line-height: 1.4; }
@media (min-width: 701px) { .installeer-balk { display: none !important; } }

/* volgorde van de spitsen op Overzicht: op de lopende dag vanaf 13:00 de avondspits voorop (app.py, volgorde()) */
.volgorde { display: none; }
#blad-act:has(#volgorde.avond-eerst) .k-avondspits,
#blad-act:has(#volgorde.avond-eerst) .m-avondspits { order: -1; }
@media (max-width: 700px) {
  #blad-act:has(#volgorde.avond-eerst) .k-avondspits { order: 2; margin-top: 0; }
  #blad-act:has(#volgorde.avond-eerst) .m-avondspits { order: 3; }
  #blad-act:has(#volgorde.avond-eerst) .k-ochtendspits { order: 4; margin-top: 10px; }
  #blad-act:has(#volgorde.avond-eerst) .m-ochtendspits { order: 5; }
}
/* klein grafiekmenu (in-/uitzoomen, terugzetten): op de telefoon altijd zichtbaar */
@media (max-width: 700px) {
  .js-plotly-plot .plotly .modebar { opacity: 1 !important; }
  .js-plotly-plot .plotly .modebar-btn { padding: 4px 5px; }
  .js-plotly-plot .plotly .modebar-btn svg { width: 18px; height: 18px; }
}

/* legenda onder de grafiek per werkdag (tijdreeks_legenda in app.py) */
.tr-legenda { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; font-size: 12.5px; color: var(--tekst2); }
.tr-legenda > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.tr-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.tr-legenda .tr-kop { font-weight: 600; color: var(--tekst); min-width: 190px; }
@media (max-width: 700px) { .tr-legenda .tr-kop { min-width: 0; width: 100%; } }

/* definitie sluipverkeer voor de gekozen dag (definitie_uitleg in app.py) */
.def-uitleg { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--rand); background: #fafaf8; border-radius: 4px; }
.def-uitleg ol { margin: 4px 0; padding-left: 22px; }
.def-uitleg li { margin: 1px 0; }
.def-uitleg .ok { color: var(--groen); font-weight: 700; }
.def-uitleg .nok { color: var(--rood); font-weight: 700; }
.def-uitleg summary { cursor: pointer; list-style-position: inside; }
.def-uitleg[open] summary { margin-bottom: 4px; }
.def-uitleg .nadruk { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }