/* ═══════════ Agenda: de tijdlijn ═══════════
   De weekweergave met de assen omgedraaid: horizontaal de tijd (per dag de uren in blokjes van een
   half uur), verticaal de teams. Dezelfde maat als de weekweergave, 48 pixels per uur, alleen
   gedraaid. De sleep- en rekstaten (is-sel, tl-ghost, tl-selbadge) worden door agenda-timeline.js
   gezet en na het loslaten weer weggehaald. */

/* Eén eigen scrollgebied, net als de teamweergave: horizontaal voor de tijd, verticaal voor de
   teams. De teamkolom plakt links en de dagkoppen plakken boven. */
.tl-scroll {
    flex: 1; min-width: 0; overflow: auto;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
    max-height: calc(100vh - var(--mud-appbar-height, 64px) - var(--agenda-header-h, 80px) - 24px);
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.tl-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.tl-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 6px; }

/* Rijen als flex-rijen en niet als één grid: een plakkend element mag zijn eigen omhulling niet
   verlaten, en in een grid is dat de eigen cel. In een rij is dat de hele rij, en dan kan de
   teamkolom links blijven staan terwijl de tijd eronderdoor schuift. */
.tl-grid { display: block; width: max-content; min-width: 100%; }
.tl-row { display: flex; }
.tl-row.tl-head { position: sticky; top: 0; z-index: 20; }

.tl-corner {
    position: sticky; left: 0; z-index: 25; width: 160px; flex-shrink: 0;
    background: linear-gradient(rgba(255,255,255,0.035), rgba(255,255,255,0.035)), var(--mud-palette-background);
    border-right: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tl-dayhead {
    flex-shrink: 0; width: calc(48px * var(--tl-hours, 14));
    background: linear-gradient(rgba(255,255,255,0.035), rgba(255,255,255,0.035)), var(--mud-palette-background);
    border-bottom: 1px solid rgba(255,255,255,0.08); border-right: 2px solid rgba(255,255,255,0.18);
}
.tl-daytitle { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px 4px; position: relative; }
.tl-daytitle .day-name { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.35); }
.tl-daytitle .day-number { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.7); line-height: 1.3; }
.tl-dayhead.today .day-name, .tl-dayhead.today .day-number, .tl-dayhead.is-pref .day-name { color: var(--mud-palette-primary); }
/* De weer-chip rechts in de dagkop, op dezelfde plek als in de week- en teamweergave. */
.tl-daytitle .wx-headpill.tl-wx { top: 9px; right: 10px; }
.tl-daytitle .agenda-vd-tag { left: auto; right: 10px; transform: none; top: 6px; }
.tl-hours { display: flex; height: 22px; border-top: 1px solid rgba(255,255,255,0.05); position: relative; }
.tl-hour { width: 48px; flex-shrink: 0; font-size: 0.6rem; font-weight: 600; color: rgba(255,255,255,0.25); padding: 4px 0 0 4px; border-left: 1px solid rgba(255,255,255,0.06); }
.tl-hour:first-child { border-left-color: transparent; }

/* Teamkolom links: naam, leden, vertrekpunt en specialisaties, zoals in de teamweergave. */
.tl-label {
    position: sticky; left: 0; z-index: 15; width: 160px; flex-shrink: 0;
    background: linear-gradient(rgba(255,255,255,0.035), rgba(255,255,255,0.035)), var(--mud-palette-background);
    padding: 10px 12px; border-right: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex; align-items: flex-start; gap: 8px; min-height: 76px;
}
.tl-label .sw { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
.tl-label .nm { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.tl-label.unassigned .nm { color: rgba(255,255,255,0.55); }
.tl-label .mem { font-size: 0.64rem; color: rgba(255,255,255,0.4); margin-top: 2px; line-height: 1.45; }
.tl-label .org { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 0.64rem; color: rgba(255,255,255,0.35); min-width: 0; }
.tl-label .org span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-label .org.own { color: rgba(245,166,35,0.8); }
.tl-label .specs { display: flex; gap: 3px; margin-top: 5px; flex-wrap: wrap; }
.tl-label .specs > span { width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,0.06); display: inline-flex; align-items: center; justify-content: center; }
.tl-label .specs i { font-size: 9px; }
.tl-label .specs .tagdot { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.tl-empty { padding: 14px 16px; font-size: 0.8rem; color: rgba(255,255,255,0.4); position: sticky; left: 0; }

/* De dagband van één team: blokjes van een half uur als dropdoelen, daarover rijtijd en afspraken. */
.tl-band {
    position: relative; height: 76px; flex-shrink: 0; width: calc(48px * var(--tl-hours, 14));
    background: rgba(0,0,0,0.15);
    border-right: 2px solid rgba(255,255,255,0.18); border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex;
}
.tl-band.today { background: rgba(245,166,35,0.03); }
.tl-band.agenda-pp-pref {
    background: linear-gradient(180deg, rgba(245,166,35,0.12) 0%, rgba(245,166,35,0.04) 100%);
    box-shadow: inset 0 0 0 1px rgba(245,166,35,0.18);
}
.tl-slot { width: 24px; flex-shrink: 0; border-left: 1px solid rgba(255,255,255,0.025); cursor: crosshair; }
.tl-slot:nth-child(odd) { border-left-color: rgba(255,255,255,0.06); }
.tl-slot:first-child { border-left-color: transparent; }
.tl-slot:hover { background: rgba(245,166,35,0.06); outline: 1px solid rgba(245,166,35,0.2); outline-offset: -1px; }
/* Geselecteerde blokjes tijdens het slepen en het actieve dropvak tijdens een sleep van een blok:
   hetzelfde amber als het actieve dropvak in de weekweergave. */
.tl-slot.is-sel, .tl-slot.cd-dragover { background: rgba(245,166,35,0.22); outline: 1px solid rgba(245,166,35,0.55); outline-offset: -1px; }
.tl-slot.is-sel.sel-start { border-radius: 6px 0 0 6px; }
.tl-slot.is-sel.sel-end { border-radius: 0 6px 6px 0; }
.tl-selbadge {
    position: absolute; top: 5px; z-index: 7; pointer-events: none;
    background: var(--mud-palette-primary); color: #1a1a1a; font-size: 0.66rem; font-weight: 800;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 4px 12px -2px rgba(245,166,35,0.6);
}
.tl-selhint { position: absolute; bottom: 6px; z-index: 7; pointer-events: none; font-size: 0.6rem; color: rgba(255,255,255,0.55); white-space: nowrap; }

/* Afspraak: hetzelfde blok als de weekweergave (tagkleur als linkerrand en waas), gedraaid. */
.tl-block {
    position: absolute; top: 8px; bottom: 8px; z-index: 4;
    border-left: 3px solid var(--tag-color, #78909C); border-radius: 0 6px 6px 0;
    padding: 4px 11px 4px 6px; cursor: grab; overflow: hidden;
    display: flex; flex-direction: column; gap: 1px;
    transition: filter 0.15s;
    user-select: none; -webkit-user-drag: element;
}
/* De kinderen claimen geen eigen sleep: het blok is de sleepbron, zoals bij de weekblokken. */
.tl-block * { -webkit-user-drag: none; user-select: none; }
.tl-block:hover { filter: brightness(1.25); z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.tl-block:active { cursor: grabbing; }
.tl-block .b-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tl-block .b-time { font-size: 0.6rem; font-weight: 800; color: rgba(255,255,255,0.9); white-space: nowrap; }
.tl-block .b-dur { font-size: 0.54rem; font-weight: 600; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.07); border-radius: 20px; padding: 0 6px; white-space: nowrap; }
.tl-block .b-name { font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.tl-block .b-addr { display: flex; align-items: center; gap: 3px; font-size: 0.58rem; color: rgba(255,255,255,0.6); min-width: 0; }
.tl-block .b-addr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-block .b-sub { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--tag-color, #78909C); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-block .b-cats { position: absolute; top: 4px; right: 12px; display: flex; gap: 3px; }
.tl-block .b-cats i { font-size: 11px; }
.tl-block .b-marks { display: inline-flex; align-items: center; gap: 3px; }
.tl-block .b-marks:empty { display: none; }
/* De treden: de breedte is de duur en verandert nooit; alleen wat erin staat wijkt. Vanaf 144 pixels
   alles, van 120 tot 144 zonder duur en tekens, van 72 tot 120 alleen de begintijd, van 48 tot 72
   zonder adres en soort-iconen, van 36 tot 48 alleen de begintijd, onder 36 alleen de kleur. */
.tl-block.is-xl .b-dur, .tl-block.is-xl .b-marks { display: none; }
.tl-block.is-l .b-dur, .tl-block.is-l .b-marks { display: none; }
.tl-block.is-m .b-dur, .tl-block.is-m .b-marks, .tl-block.is-m .b-addr, .tl-block.is-m .b-cats { display: none; }
.tl-block.is-m { padding-right: 6px; }
.tl-block.is-s .b-dur, .tl-block.is-s .b-marks, .tl-block.is-s .b-addr, .tl-block.is-s .b-cats, .tl-block.is-s .b-name, .tl-block.is-s .b-sub { display: none; }
.tl-block.is-s { padding: 4px 3px; }
.tl-block.is-s .b-time { font-size: 0.52rem; letter-spacing: -0.02em; }
.tl-block.is-xs .b-top, .tl-block.is-xs .b-name, .tl-block.is-xs .b-sub, .tl-block.is-xs .b-addr, .tl-block.is-xs .b-cats { display: none; }
/* Reservering en afzegging, zoals overal in de agenda. */
.tl-block.reservation-pending {
    border: 1.5px dashed rgba(255,255,255,0.35); border-left: 3px solid var(--tag-color, #78909C);
    background: repeating-linear-gradient(45deg, rgba(120,144,156,0.15) 0 4px, transparent 4px 8px) !important;
}
.tl-block.cancel-pending { box-shadow: 0 0 0 2px rgba(245,166,35,0.35); border-left-color: #F5A623; }
.tl-block.is-dragging { opacity: 0.4; }

/* De handle aan de rechterrand: in rust gedempt zichtbaar zodat je weet dat 'ie er is, bij
   aanwijzen vol. Slepen eraan verandert alleen de eindtijd; de begintijd blijft staan. Op een
   smal blok blijft 'ie weg tot je erover beweegt, anders slokt 'ie de tijd op. */
.tl-block .b-handle {
    position: absolute; top: 0; bottom: 0; right: 0; width: 9px; cursor: ew-resize; z-index: 5;
    display: flex; align-items: center; justify-content: center; opacity: 0.4; transition: opacity 0.12s;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18));
    border-radius: 0 6px 6px 0;
}
.tl-block .b-handle::before { content: ""; width: 2px; height: 14px; border-radius: 2px; background: rgba(255,255,255,0.85); box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.tl-block.is-m .b-handle, .tl-block.is-s .b-handle, .tl-block.is-xs .b-handle { opacity: 0; }
.tl-block:hover .b-handle, .tl-block.is-resizing .b-handle { opacity: 1; }
.tl-block.is-resizing { cursor: ew-resize; }
/* Tijdens het rekken groeit of krimpt het blok zelf live mee, zodat de ronde rechterrand en de
   handle altijd het einde blijven en je van links naar rechts blijft lezen. Het spook toont bij
   krimpen het deel dat wegvalt, gearceerd en met de ronding aan de buitenkant rechts waar het
   einde stond; bij groeien alleen een streepje waar het einde stond. */
.tl-ghost { position: absolute; top: 8px; bottom: 8px; z-index: 3; pointer-events: none; }
.tl-ghost.shrink {
    border: 1.5px dashed rgba(255,255,255,0.3); border-left: none; border-radius: 0 6px 6px 0;
    background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.10) 0 4px, transparent 4px 8px);
}
.tl-ghost.grow { width: 0; border-left: 1.5px dashed rgba(255,255,255,0.35); }
.tl-block.is-resizing { z-index: 10; }

/* Hele dag: een dunne strook over de hele dag, bovenin de band; de blokken zakken eronder. */
.tl-allday {
    position: absolute; top: 4px; left: 4px; right: 4px; height: 16px; z-index: 3; cursor: pointer;
    border-left: 3px solid var(--tag-color, #78909C);
    border-radius: 0 4px 4px 0; padding: 0 6px; display: flex; align-items: center; gap: 6px;
    font-size: 0.58rem; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden;
}
.tl-allday b { font-weight: 800; color: rgba(255,255,255,0.9); }
.tl-band.has-allday .tl-block, .tl-band.has-allday .tl-travel, .tl-band.has-allday .tl-ghost { top: 24px; }

/* Rijtijd vóór een afspraak: even hoog als de afspraak, op ware lengte. Rit en afspraak vormen
   samen één keten: sluit de rit aan op de vorige afspraak, dan is de dag naadloos gevuld; zit er
   donker tussen, dan is dat echte ruimte. */
.tl-travel {
    position: absolute; top: 8px; bottom: 8px; z-index: 3;
    background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.13) 0 4px, rgba(255,255,255,0.04) 4px 8px);
    border: 1px dashed rgba(255,255,255,0.22); border-right: none; border-radius: 6px 0 0 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    font-size: 0.56rem; font-weight: 700; color: rgba(255,255,255,0.62); white-space: nowrap; overflow: hidden;
}
.tl-travel .tv-ico { font-size: 11px; line-height: 1; }

/* Nu-lijn in de kolom van vandaag, zoals in de weekweergave. */
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(245,166,35,0.75); z-index: 6; pointer-events: none; }
.tl-now-head { position: absolute; bottom: -1px; width: 2px; height: 22px; background: rgba(245,166,35,0.75); z-index: 21; }
.tl-now-head::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-primary); }

/* Capaciteit en afwezigheid komen uit de teamweergave (tv-cap, tv-unavailable); alleen de
   arcering op de band heeft hier een eigen regel omdat de band geen agenda-team-cell is. */
.tl-band.tv-unavailable { background: repeating-linear-gradient(-45deg, rgba(0,0,0,0.32) 0 10px, rgba(255,255,255,0.07) 10px 20px); }
.tl-band.tv-unavailable .tl-slot { border-left-color: transparent; }