/* ===== your existing timeline variables remain here ===== */
:root {
	--page-bg: #ededed;
	--track-bg: #ffffff;
	--track-height: 56px;
	--track-radius: 6px;
	--arrow-size: 55px;
	--arrow-nudge: -50px;
	--dot-size: 14px;
	--dot-color: #2da9ff;
	--dot-shadow-size: 6px;
	--dot-shadow-color: rgba(45,169,255,.15);
	--connector-color: #9c9c9c;
	--connector-length: 35px; /* Dot's vertical line default length */
	--label-gap: 8px;
	--label-width: 240px;
	--pad-inline: 24px;
	--pad-top: 200px;
	--pad-bottom: 170px;
	--track-inset: 10px;
	--track-extend: 10px;
	--points-pad-pct: 2;
	--edge-offset: -20px;
	--tier-gap: 64px;
	--text: #111;
	--muted: #6c6c6c;
	/* Status glow controls */
	--status-color: transparent;
	--status-shadow-x: 10px;
	--status-shadow-y: 1px;
	--status-shadow-blur: 15px;
	--status-shadow-spread: 0px;
	/* Optional arrow-base eraser */
	--arrow-mask-width: 12px;
	/* Driver card vars */
	--h-collapsed: 38px;
	--font-small: 0.78rem;
	--gap: 4px 12px;
	--separator-color: #e0e0e0;
	--inline-gap: 10px; /* default symmetrical gap */
	--inline-gap-left: var(--inline-gap);
	--inline-gap-right: var(--inline-gap);
	--inline-overlap-tol: 8; /* how much extra space you require to stay on the arrow */
	--inline-collision-slack: 6; /* how close rects can get before we push one off-bar */
	--ui-top: 20px; /* header height if any */
	--ui-bottom: 120px; /* your external toolbar height */
	--map-min-height: 600px; /* minimum map height */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--page-bg);
    font-family: "Roboto", Arial, sans-serif;
    color: var(--text);
}

/* ===== Timeline core ===== */
.timeline {
    position: relative;
    padding: var(--pad-top) var(--pad-inline) var(--pad-bottom);
    min-height: calc(var(--pad-top) + var(--pad-bottom) + var(--track-height));
    overflow: visible;
}

.timeline-track {
    position: absolute;
    left: calc(var(--pad-inline) - var(--track-extend));
    right: calc(var(--pad-inline) + var(--arrow-size) - var(--track-extend));
    top: 50%;
    transform: translateY(-50%);
    height: var(--track-height);
    background: var(--track-bg);
    border-radius: var(--track-radius);
    /* status glow layer */
    box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.05), 0 var(--status-shadow-y) var(--status-shadow-blur) var(--status-shadow-spread) var(--status-color);
    z-index: 1;
}
    /* optional eraser to block back-glow */
    .timeline-track::before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: var(--arrow-mask-width);
        background: var(--track-bg);
        pointer-events: none;
        z-index: 2;
    }

    .timeline-track::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(calc(0px - var(--arrow-nudge)), -50%);
        border-left: var(--arrow-size) solid var(--track-bg);
        border-top: var(--arrow-size) solid transparent;
        border-bottom: var(--arrow-size) solid transparent;
        /* directional outward glow */
        filter: drop-shadow(var(--status-shadow-x) var(--status-shadow-y) calc(var(--status-shadow-blur) * 0.8) var(--status-color));
        z-index: 1;
    }

.timeline[data-status="ok"] {
    --status-color: transparent;
}

.timeline[data-status="warn"] {
    --status-color: rgba(255,149,0,.45);
}

.timeline[data-status="error"] {
    --status-color: rgba(255,59,48,.55);
}

/* items container */
.timeline-items {
    position: absolute;
    left: calc(var(--pad-inline) - var(--track-extend) + var(--track-inset));
    right: calc(var(--pad-inline) + var(--arrow-size) - var(--track-extend) + var(--track-inset));
    top: 0;
    bottom: 0;
    z-index: 2;
}

/* timeline-item positioning and variations */
:where(.timeline-item, timeline-item) {
    --pos: 50;
    --inline-r: calc(var(--dot-size) / 2);
    --tier: 0;
    position: absolute;
    left: calc( (
      var(--points-pad-pct) +
      ( (100 - (var(--points-pad-pct) * 2)) * (var(--pos) / 100) )
    ) * 1% );
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
}

:where(.timeline-item, timeline-item)::before {
	content: "";
	position: absolute;
	left: calc(var(--line-x-offset, 0px));
	width: 1px;
	background: var(--connector-color);
}

/* dot styles */
.timeline-dot {
    position: absolute;
    left: 0;
    top: var(--bar-center, 50%);
    transform: translate(-50%,-50%);
    width: var(--dot-size);
    height: var(--dot-size);
    background: var(--dot-color);
    border-radius: 50%;
    box-shadow: 0 0 0 var(--dot-shadow-size) var(--dot-shadow-color);
}

    .timeline-dot.dot--solid {
        box-shadow: none;
    }

    .timeline-dot.dot--triple {
        background: var(--dot-core-color, var(--dot-color));
        box-shadow: 0 0 0 var(--dot-ring1, 8px) var(--dot-ring1-color, var(--dot-color)), 0 0 0 var(--dot-ring2, 16px) var(--dot-ring2-color, var(--dot-color));
    }

    .timeline-dot.dot--double {
        background: var(--dot-core-color, var(--dot-color));
        box-shadow: 0 0 0 var(--dot-ring1, 8px) var(--dot-ring1-color, var(--dot-color));
    }

    .timeline-dot.dot--ring {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--dot-color);
    }

    .timeline-dot.dot--halo {
        background: var(--dot-color);
    }

        .timeline-dot.dot--halo::after {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            background: var(--dot-color);
            opacity: .15;
        }

    .timeline-dot.icon {
        background: transparent;
        box-shadow: none;
        width: 20px;
        height: 20px;
    }

        .timeline-dot.icon svg {
            width: 100%;
            height: 100%;
            display: block;
        }

/* inline labels */
/* ===== Inline labels (robust on-bar positioning) ===== */
.label-inline {
    position: absolute;
    overflow: visible;
    left: 0; /* anchor at the dot center via the parent */
    top: var(--bar-center, 50%);
    transform: translateY(-50%); /* only vertical centering by default */
    font-size: .9rem;
    line-height: 1.1;
    white-space: nowrap;
    color: #333;
    display: inline-block;
}

    .label-inline b {
        font-weight: 900;
    }

/* Reset any old X-translate for on-bar labels */
.timeline .timeline-items > .timeline-item.onbar > .label-inline {
	top: var(--bar-center, 50%);
	transform: translateY(-50%) !important; /* kill old translateX */
}

/* ▶ Label to the RIGHT of the dot (text sits to the right) */
.timeline .timeline-items > .timeline-item.onbar.inline-right > .label-inline {
	position: absolute;
	left: 0; /* anchor at dot center */
	right: auto;
	margin-left: calc(var(--inline-r, calc(var(--dot-size)/2)) + var(--inline-gap)) !important;
	margin-right: 0 !important;
	text-align: left;
}

/* ▶ Label to the LEFT of the dot (text sits to the left, right-aligned) */
.timeline .timeline-items > .timeline-item.onbar.inline-left > .label-inline {
	position: absolute;
	right: 0; /* anchor at dot center */
	left: auto;
	margin-right: calc(var(--inline-r, calc(var(--dot-size)/2)) + var(--inline-gap)) !important;
	margin-left: 0 !important;
	text-align: right;
}

/* Off-bar positions keep their horizontal translates (unchanged) */
.timeline .timeline-items > .timeline-item.offbar-top > .label-inline {
	top: calc(var(--bar-center, 50%) - var(--track-height)/2 - 6px);
}

.timeline .timeline-items > .timeline-item.offbar-bottom > .label-inline {
	top: calc(var(--bar-center, 50%) + var(--track-height)/2 + 6px);
}

.timeline .timeline-items > .timeline-item.right-of-line > .label-inline {
	transform: translate(8px, -100%) !important;
}

.timeline .timeline-items > .timeline-item.right-of-line.offbar-bottom > .label-inline {
	transform: translate(8px, 0) !important;
}

.timeline .timeline-items > .timeline-item.left-of-line > .label-inline {
	transform: translate(calc(-100% - 8px), -100%) !important;
}

.timeline .timeline-items > .timeline-item.left-of-line.offbar-bottom > .label-inline {
	transform: translate(calc(-100% - 8px), 0) !important;
}




/* big blocks */
.timeline-label {
    position: absolute;
    left: 0;
    width: var(--label-width);
    text-align: left;
    transform: translateX(-50%);
    overflow-wrap: anywhere;
}

.label-entry {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .5rem;
    row-gap: .25rem;
    align-items: start;
}

    .label-entry + .label-entry {
        margin-top: .5rem;
    }

.entry-title {
    margin: 0 0 .1rem;
    font-size: 15px;
    letter-spacing: .2px;
    font-weight: 900;
}

.entry-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.entry-marker {
    --kv-color: var(--dot-color);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kv-color);
    margin-top: .25rem;
    position: relative;
}

    .entry-marker.ring {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--kv-color);
    }

    .entry-marker.halo::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        background: var(--kv-color);
        opacity: .15;
    }

    .entry-marker.icon {
        background: transparent;
        width: 14px;
        height: 14px;
    }

        .entry-marker.icon svg {
            width: 100%;
            height: 100%;
            display: block;
        }

/* dynamic center + connectors */
.timeline {
    --bar-shift: 0px;
    --bar-center: calc(50% + var(--bar-shift));
}

.timeline-track {
    top: var(--bar-center) !important;
}

:where(.timeline-item, timeline-item).top::before {
    top: calc(var(--bar-center) - var(--track-height)/2 - (var(--connector-length) + var(--tier) * var(--tier-gap))) !important;
    height: calc(var(--connector-length) + var(--tier) * var(--tier-gap));
}

:where(.timeline-item, timeline-item).bottom::before {
    top: calc(var(--bar-center) + var(--track-height)/2) !important;
    height: calc(var(--connector-length) + var(--tier) * var(--tier-gap));
}

:where(.timeline-item, timeline-item).top .timeline-label {
    top: calc(var(--bar-center) - var(--track-height)/2 - (var(--connector-length) + var(--tier) * var(--tier-gap)) - var(--label-gap)) !important;
    transform: translate(-50%, -100%);
}

:where(.timeline-item, timeline-item).bottom .timeline-label {
    top: calc(var(--bar-center) + var(--track-height)/2 + (var(--connector-length) + var(--tier) * var(--tier-gap)) + var(--label-gap)) !important;
}

/* edge handling */
.timeline-items > :is(.timeline-item, timeline-item):last-child .timeline-label {
    text-align: right;
    transform: translateX(-100%);
    margin-right: var(--edge-offset);
}

.timeline-items > :is(.timeline-item, timeline-item):last-child.top .timeline-label {
    transform: translate(-100%, -100%);
}

.timeline-items > :is(.timeline-item, timeline-item):last-child .timeline-label .label-entry {
    grid-template-columns: 1fr auto;
    justify-items: end;
}

.timeline-items > :is(.timeline-item, timeline-item):first-child .timeline-label {
    transform: translateX(0);
    margin-left: var(--edge-offset);
}

.timeline-items > :is(.timeline-item, timeline-item):first-child.top .timeline-label {
    transform: translate(0, -100%);
}

:where(.timeline-item, timeline-item).block-snap-left .timeline-label {
    transform: translateX(0) !important;
}

:where(.timeline-item, timeline-item).block-snap-left.top .timeline-label {
    transform: translate(0, -100%) !important;
}




/* ===== Error icons on the map ===== */
/* Small red round badges stacked under the Google buttons */
.tmv-errors {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	/* line up visually with Google's Map/Satellite control */
	margin-left: 8px; /* same inset Google uses */
	margin-top: 6px; /* a little space under the control */
}

.tmv-error-badge {
	width: 32px;
	height: 32px;
	border-radius: 9999px;
	background: #d93025;
	color: #fff;
	font: 800 12px/1 Roboto, system-ui, Arial, sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
	cursor: default;
	user-select: none;
}




/* ===== Drivers (componentized) ===== */
.drivers {
    padding: 6px var(--pad-inline) 0px 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--font-small);
}

.driver-card {
    display: inline-flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    overflow: hidden;
    height: var(--h-collapsed);
    max-width: 220px;
    transition: max-width .4s ease, height .3s ease, box-shadow .2s ease;
    font-size: var(--font-small);
}

    .driver-card:hover {
        box-shadow: 0 4px 10px rgba(0,0,0,.12);
    }

.driver-header {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 10px;
	white-space: nowrap;
	color: #333;
	line-height: var(--h-collapsed);
	cursor: pointer;
	user-select: none;
	flex: 0 0 auto;
	font-size: calc(var(--font-small) + 0.1rem); /* bigger name */
	font-weight: 700; /* bolder */
	outline: none;
}

/* Font Awesome 6 icons inside the header */
.driver-header .fa-solid,
.driver-header .fa-regular,
.driver-header .fa-light,
.driver-header .fa-thin,
.driver-header .fa-duotone,
.driver-header .fa-brands {
	font-size: 18px;
	color: #3f6ad8;
	line-height: 1;
	display: inline-block;
}


.driver-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: var(--gap);
    align-content: start;
    padding: 0;
    width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    border-left: 0 solid var(--separator-color);
    transition: width .4s ease, max-height .3s ease, opacity .25s ease, padding .2s ease, border-left-width .3s ease;
    font-size: var(--font-small);
}
    /* Bold values inside driver details */
    .driver-details .dvalue,
    .driver-details .dvalue a {
        font-weight: 700;
    }

.driver-card.expanded {
    max-width: 900px;
    height: auto;
}

    .driver-card.expanded .driver-details {
        width: 640px;
        max-height: 1000px;
        opacity: 1;
        padding: 6px 10px;
        border-left-width: 1px; /* show vertical separator */
    }

.item b {
    font-weight: 700;
}

.value-wrap {
    overflow-wrap: anywhere;
}

/* grid placement */
.item--id {
    grid-column: 1;
}

.item--kuerzel {
    grid-column: 2;
}

.item--firma {
    grid-column: 3 / -1;
}

.item--mobile {
    grid-column: 1;
}

.item--telefon {
    grid-column: 2;
}

.item--plz {
    grid-column: 1;
}

.item--stadt {
    grid-column: 2;
}

.item--strasse {
    grid-column: 3 / -1;
}

.item--email {
    grid-column: 1 / -1;
}

    .item--email a {
        color: #0066cc;
        text-decoration: none;
        font-size: var(--font-small);
    }

        .item--email a:hover {
            text-decoration: underline;
        }

/* responsiveness */
@media (max-width: 900px) {
    :root {
        --label-width: 210px;
        --connector-length: 72px;
        --pad-top: 190px;
        --pad-bottom: 160px;
        --tier-gap: 56px;
    }
}

@media (max-width: 640px) {
    :root {
        --label-width: 190px;
        --connector-length: 58px;
        --pad-top: 180px;
        --pad-bottom: 150px;
        --tier-gap: 48px;
    }

    .driver-card.expanded .driver-details {
        width: 100%;
    }
}



/* =========================
   Timeline: Range overlays
   ========================= */

.timeline .timeline-items .timeline-ranges {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* below dots/labels */
}

    .timeline .timeline-items .timeline-ranges .range {
        position: absolute;
        box-sizing: border-box;
        top: var(--bar-center, 50%);
        transform: translateY(-50%);
        height: var(--range-height, 30px);
        border: 2px solid var(--range-color, rgba(0,0,0,.25));
        background: var(--range-fill, rgba(0,0,0,.08));
        border-radius: var(--range-radius, 18px);
    }

/* Hide dot when range is present */
.timeline-item.has-range .timeline-dot {
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================
   Timeline: Band mode lanes
   ========================= */

/* keep overflow visible for lanes + tooltips */
.timeline,
.timeline-items,
.timeline-item {
    overflow: visible;
}

    /* IMPORTANT: don't change positioning here, JS sets it */
    .timeline .label-inline {
        z-index: 3; /* tooltip anchor predictable */
    }

    .timeline .inline-lane {
        position: absolute;
        left: 0;
        right: 0;
        pointer-events: none;
        z-index: 2;
    }

        .timeline .inline-lane .band-row {
            position: relative;
            height: auto;
        }

        .timeline .inline-lane .band-label {
            position: absolute;
            display: inline-block;
            white-space: nowrap;
            pointer-events: auto;
            z-index: 3;
        }


/* =========================
   Timeline: Tooltips
   ========================= */

.timeline {
    --hint-max-width: 360px;
}

    .timeline .label-inline .inline-tooltip,
    .timeline .band-label .inline-tooltip {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 6px;
        max-width: var(--hint-max-width);
        background: #111;
        color: #fff;
        padding: 8px 10px;
        border-radius: 6px;
        border: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 6px 18px rgba(0,0,0,.18);
        white-space: normal;
        overflow-wrap: break-word;
        z-index: 8;
    }

    /* show on hover/focus */
    .timeline .label-inline:hover .inline-tooltip,
    .timeline .band-label:hover .inline-tooltip {
        display: block;
    }

    .timeline .label-inline .inline-tooltip::before,
    .timeline .band-label .inline-tooltip::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 12px;
        border: 6px solid transparent;
        border-bottom-color: #111;
    }


/* =========================
   Timeline: Planned labels
   ========================= */

    /* Inline + band bubbles */
    .timeline .timeline-item[data-inline-kind="planned"] .label-inline,
    .timeline .inline-lane .band-label[data-inline-kind="planned"] {
        border: 2px solid currentColor;
        border-radius: var(--range-radius, 18px);
        padding: 2px 6px;
        box-sizing: border-box;
    }

    /* Big block labels (GEPLANTER START/ENDE) */
    .timeline .timeline-item[data-inline-kind="planned"] .timeline-label {
        border: 2px solid currentColor;
        border-radius: var(--range-radius, 18px);
        padding: 4px 8px;
        box-sizing: border-box;
    }

/* =========================
   Timeline: Vehicle symbol
   ========================= */


    /* Vehicle icon on timeline (container for the SVG) */
    .timeline .timeline-dot.dot--vehicle {
        /* keep centered by existing .timeline-dot layout; just size via content */
        display: inline-flex;
        align-items: flex-end;
        justify-content: center;
        /* avoids accidental label occlusion due to invisible hit area */
        pointer-events: auto;
    }

        /* Wrapper that holds the van SVG (48×26 for scale=0.5) */
        .timeline .timeline-dot.dot--vehicle .tmv-vehicle {
            width: 48px;
            height: 26px;
            display: block;
        }

    /* Fallback: container sized as a small dot for pulse animation */
    .timeline .timeline-dot.dot--vehicle--fallback {
        width: 14px;
        height: 14px;
        display: block;
    }

    /* The pulsing fill (CSS-only animation) */
    .timeline .timeline-dot .tmv-vehicle-pulse {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: block;
        background: var(--vehicle-color, #FF4D4D);
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55);
        animation: tmv-pulse 1.6s ease-out infinite;
    }

@keyframes tmv-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,77,77,.55);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(255,77,77,0);
        transform: scale(1.08);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,77,77,0);
        transform: scale(1);
    }
}

/* Planned entry-title pill */
.entry-title.planned {
	display: inline-block;
	border-style: solid;
	border-width: 2px;
	border-radius: 16px;
	padding: 8px 20px;
	/* same color source, with matching transparency */
	border-color: color-mix(in srgb, var(--kv-color, #3D54BA) 40%, transparent);
}

.label-entry.no-marker {
	grid-template-columns: 1fr;
}