/* Load.Live 1.7.0-s22 — transportplan per job (M26): kop met load-in/load-out, tijdlijn van alle vrachtwagens, rijen, haalbaarheid,
 * en het deel van de chauffeur bovenaan Vandaag. Kleuren uit ll.css: --accent = rijden, --let = pauze/waarschuwing, --tally = fout. */
.tp-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tp-kop .acties, .tp-leeg .acties { display: flex; gap: 6px; flex-wrap: wrap; }
.tp .segment { display: inline-flex; border: 1px solid var(--lijn-sterk); border-radius: var(--r-pil, 999px); overflow: hidden; }
.tp .segment button { font: inherit; background: none; border: 0; padding: 6px 14px; cursor: pointer; color: inherit; }
.tp .segment button.actief { background: var(--accent); color: var(--op-accent, #0F1C1A); }
.tp-instel { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 12px; font-size: 14px; }
.tp-instel b { font-weight: 600; margin-right: 4px; }
.tp-status-gepubliceerd { color: var(--ok); background: var(--ok-zacht); border-color: transparent; }
.tp-status-concept { color: var(--let); background: var(--let-zacht); border-color: transparent; }
.tp-leeg { padding: 16px; }
.tp-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 16px; align-items: start; margin-top: 12px; }
@media (max-width: 960px) { .tp-raster { grid-template-columns: 1fr; } }
.tp-tabel td { vertical-align: top; }
.tp-rij-fout td:first-child { box-shadow: inset 3px 0 0 var(--tally); }
.tp-rij-waarschuwing td:first-child { box-shadow: inset 3px 0 0 var(--let); }
.tp-controle { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.tp-controle li { padding: 6px 8px; border-radius: 8px; background: var(--rack-2); }
.tp-controle li.tp-fout { color: var(--tally-tekst, var(--tally)); background: var(--tally-zacht); }
.tp-controle li.tp-waarschuwing { color: var(--let); background: var(--let-zacht); }
.tp-ok { color: var(--ok); }
.tp-mini { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }

/* tijdlijn */
.tp-tijdlijn { padding: 12px 14px; overflow-x: auto; }
.tp-as { position: relative; height: 18px; margin-left: 160px; font-size: 11px; color: var(--tekst-zacht, inherit); }
.tp-as span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tp-baan { display: grid; grid-template-columns: 160px minmax(480px, 1fr); align-items: center; min-height: 30px; border-top: 1px solid var(--lijn); }
.tp-baan-naam { font-size: 13px; display: grid; padding-right: 8px; }
.tp-baan-spoor { position: relative; height: 18px; }
.tp-balk { position: absolute; top: 0; height: 18px; border-radius: 4px; background: var(--accent); }
.tp-legende .tp-balk { position: static; display: inline-block; width: 18px; height: 10px; vertical-align: middle; margin: 0 4px 0 10px; }
.tp-seg-rijden { background: var(--accent); }
.tp-seg-pauze { background: var(--let); }
.tp-seg-dagrust, .tp-seg-weekrust { background: var(--lijn-sterk); }
.tp-seg-wachten, .tp-seg-staan, .tp-seg-verbod { background: repeating-linear-gradient(45deg, var(--lijn-sterk) 0 4px, transparent 4px 8px); }
.tp-dock { background: var(--ok); opacity: .85; }

/* het deel van de chauffeur */
.tp-mijn { margin: 0 0 16px; }
.tp-mijn-kaart { padding: 12px 14px; margin-bottom: 10px; }
.tp-mijn-kaart .top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tp-mijn-kaart h3 { margin: 2px 0 8px; font-size: 16px; }
.tp-feiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin: 0 0 10px; }
.tp-feiten dt { font-size: 12px; opacity: .75; }
.tp-feiten dd { margin: 0; display: grid; }
.tp-pauze { display: inline-block; margin-right: 8px; }
.tp-form { display: grid; gap: 10px; }