/* Load.Live 1.6.2 (K42) — Load.Road › Vloot (web/src/s-vloot-162.ts). Kleuren zoals mockup 1: werk cyaan, zwaar vervoer amber,
   privé grijs, keuring/onderhoud gestreept, ingehuurd paars. Rood blijft een signaal (⚠︎). */
.vl-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.vl-filters .pil { border: 1px solid var(--lijn, #2c3d3a); border-radius: 999px; padding: 5px 12px; background: none; color: inherit; font: 600 13px var(--body, inherit); cursor: pointer; }
.vl-filters .pil.aan { background: var(--accent, #00f0e0); color: var(--accent-tekst, #002); border-color: var(--accent, #00f0e0); }
.vl-tussen { width: 10px; }
.vl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vl-raster { display: grid; grid-template-columns: 170px repeat(var(--dagen, 7), minmax(110px, 1fr)); min-width: 940px; font-size: 12px; }
.vl-raster > div { border-bottom: 1px solid var(--lijn, #2c3d3a); padding: 6px 4px; min-height: 48px; }
.vl-kop { color: var(--zacht, #8fa5a1); font-weight: 600; min-height: 0 !important; }
.vl-kop.vandaag { color: var(--accent, #00f0e0); }
.vl-naam { position: sticky; left: 0; background: var(--grond, var(--vak, #0f1a19)); z-index: 1; }
.vl-cel { display: flex; flex-direction: column; gap: 3px; }
.vl-cel.doel { outline: 2px dashed var(--accent, #00f0e0); outline-offset: -2px; }
.vl-blok { display: inline-block; border-radius: 6px; padding: 3px 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #012; max-width: 100%; }
.vl-blok.sleep { cursor: grab; }
.vl-w { background: var(--accent, #00f0e0); }
.vl-t { background: #f5a623; }
.vl-pr { background: #55605e; color: #ddd; }
.vl-st { background: none; color: var(--zacht, #8fa5a1); border: 1px solid var(--lijn, #2c3d3a); }
.vl-mt { background: repeating-linear-gradient(45deg, #3a2a2a, #3a2a2a 5px, #2a2020 5px, #2a2020 10px); color: #f99; }
.vl-hi { background: #9b7bff; }
.vl-vrij { border: 1px dashed transparent; border-radius: 6px; background: none; color: transparent; font-size: 11px; padding: 3px 6px; cursor: pointer; text-align: left; }
.vl-cel:hover .vl-vrij, .vl-vrij:focus-visible { border-color: var(--accent, #00f0e0); color: var(--accent, #00f0e0); }
.vl-legende .vl-blok { margin-right: 4px; }
@media (max-width: 640px) { .vl-raster { grid-template-columns: 120px repeat(var(--dagen, 7), minmax(96px, 1fr)); } }