/* ===== OO Gantt =====
   Gantt-Ansicht: je Zeile ein Zeilenkopf (fest links) und eine Spur mit absolut positionierten Balken und Markierungen.
   Positionen und Breiten setzt die Komponente inline in Prozent der Spur; die Spur ist --oo-gantt-weeks × --oo-gantt-week-width breit.
   Größen über --oo-gantt-week-width, --oo-gantt-row-height, --oo-gantt-bar-height und --oo-gantt-row-header-width.
   Size (oo-size-xxxs … oo-size-xl am Root) nutzt die Schriftgrößen-Tokens des Themes.
   ========================= */

.oo-gantt {
    --_zl-woche: var(--oo-gantt-week-width, 3.5rem);
    --_zl-zeile: var(--oo-gantt-row-height, 3rem);
    --_zl-balkenhoehe: var(--oo-gantt-bar-height, 1.25rem);
    --_zl-kopfbreite: var(--oo-gantt-row-header-width, 14rem);
    --_zl-spur: calc(var(--oo-gantt-weeks, 12) * var(--_zl-woche));
    --_zl-balken-standard: var(--oo-primary);
    --_zl-ueberschreitung-standard: var(--oo-danger);
    --_zl-schrift: var(--oo-gantt-font-size, var(--oo-font-size-md));
    --_zl-linie: var(--oo-color-border);
    display: block;
    max-width: 100%;
    font-size: var(--_zl-schrift);
    color: var(--oo-color-text);
}

.oo-gantt.oo-size-xxxs { --_zl-schrift: var(--oo-gantt-font-size, var(--oo-font-size-xxxs)); }
.oo-gantt.oo-size-xxs  { --_zl-schrift: var(--oo-gantt-font-size, var(--oo-font-size-xxs)); }
.oo-gantt.oo-size-xs   { --_zl-schrift: var(--oo-gantt-font-size, var(--oo-font-size-xs)); }
.oo-gantt.oo-size-sm   { --_zl-schrift: var(--oo-gantt-font-size, var(--oo-font-size-sm)); }
.oo-gantt.oo-size-md   { --_zl-schrift: var(--oo-gantt-font-size, var(--oo-font-size-md)); }
.oo-gantt.oo-size-lg   { --_zl-schrift: var(--oo-gantt-font-size, var(--oo-font-size-lg)); }
.oo-gantt.oo-size-xl   { --_zl-schrift: var(--oo-gantt-font-size, var(--oo-font-size-xl)); }

.oo-gantt__scroll {
    overflow-x: auto;
}

.oo-gantt__inner {
    width: max-content;
    min-width: 100%;
}

/* ---------- Kopf ---------- */

.oo-gantt__header,
.oo-gantt__row {
    display: flex;
}

.oo-gantt__corner,
.oo-gantt__row-head {
    position: sticky;
    left: 0;
    z-index: 3;
    box-sizing: border-box;
    flex: 0 0 var(--_zl-kopfbreite);
    width: var(--_zl-kopfbreite);
    min-width: 0;
    padding: 0 var(--oo-space-3);
    background-color: var(--oo-color-surface);
}

.oo-gantt__corner {
    display: flex;
    align-items: flex-end;
    padding-bottom: var(--oo-space-2);
    color: var(--oo-color-text-subtle);
    font-weight: 500;
}

.oo-gantt__axis {
    position: relative;
    flex: 0 0 var(--_zl-spur);
    width: var(--_zl-spur);
    padding-top: var(--oo-space-2);
}

.oo-gantt__months,
.oo-gantt__weeks {
    display: grid;
    grid-template-columns: repeat(var(--oo-gantt-weeks, 12), var(--_zl-woche));
}

.oo-gantt__month {
    padding-left: var(--oo-space-2);
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.oo-gantt__weeks {
    margin-top: var(--oo-space-6);
    margin-bottom: var(--oo-space-2);
}

.oo-gantt__week {
    overflow: hidden;
    padding-left: var(--oo-space-2);
    color: var(--oo-color-text-subtle);
    font-size: 0.85em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.oo-gantt__today-label {
    position: absolute;
    top: calc(var(--oo-space-2) + 1.5em);
    padding: 0 var(--oo-space-2);
    border-radius: var(--oo-radius-full);
    background-color: var(--oo-warning);
    color: var(--oo-warning-on);
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* ---------- Zeilen ---------- */

.oo-gantt__row {
    min-height: var(--_zl-zeile);
    border-top: var(--oo-border-width) solid var(--_zl-linie);
}

.oo-gantt__row:last-of-type {
    border-bottom: var(--oo-border-width) solid var(--_zl-linie);
}

.oo-gantt__row-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.oo-gantt__row-text {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.oo-gantt__subtext {
    overflow: hidden;
    color: var(--oo-color-text-subtle);
    font-size: 0.85em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.oo-gantt__track {
    position: relative;
    flex: 0 0 var(--_zl-spur);
    width: var(--_zl-spur);
    background-image: linear-gradient(to right, var(--_zl-linie) var(--oo-border-width), transparent var(--oo-border-width));
    background-size: var(--_zl-woche) 100%;
}

/* ---------- Heute, Hervorhebungen ---------- */

.oo-gantt__today {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    border-left: calc(var(--oo-border-width) * 2) dashed var(--oo-color-text);
    pointer-events: none;
}

.oo-gantt__highlight {
    --_zl-hervorhebung: var(--oo-color-border-strong);
    position: absolute;
    top: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(45deg, var(--_zl-hervorhebung) 0, var(--_zl-hervorhebung) calc(var(--oo-border-width) * 2), transparent calc(var(--oo-border-width) * 2), transparent 0.375rem);
    opacity: 0.6;
}

/* ---------- Balken ---------- */

.oo-gantt__bar {
    --_zl-balken: var(--_zl-balken-standard);
    --_zl-ueberschreitung: var(--_zl-ueberschreitung-standard);
    position: absolute;
    top: 50%;
    z-index: 1;
    height: var(--_zl-balkenhoehe);
    overflow: hidden;
    border-radius: var(--oo-radius-sm);
    background-color: var(--_zl-balken);
    transform: translateY(-50%);
}

.oo-gantt__bar--clipped-start {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.oo-gantt__bar--clipped-end {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.oo-gantt__bar-done {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: color-mix(in oklch, var(--_zl-balken) 65%, black);
}

.oo-gantt__bar-overrun {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(45deg, var(--_zl-ueberschreitung) 0, var(--_zl-ueberschreitung) 0.25rem, color-mix(in oklch, var(--_zl-ueberschreitung) 60%, var(--oo-color-surface)) 0.25rem, color-mix(in oklch, var(--_zl-ueberschreitung) 60%, var(--oo-color-surface)) 0.5rem);
}

.oo-gantt__action {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.oo-gantt__action:hover {
    background-color: color-mix(in oklch, var(--oo-color-text) 10%, transparent);
}

.oo-gantt__action:focus-visible {
    outline: calc(var(--oo-border-width) * 2) solid var(--oo-color-text);
    outline-offset: calc(var(--oo-border-width) * -2);
}

/* ---------- Markierungen und Beschriftungen ---------- */

.oo-gantt__marker {
    --_zl-markierung: var(--oo-color-text);
    position: absolute;
    z-index: 2;
    color: var(--_zl-markierung);
}

.oo-gantt__marker--flag,
.oo-gantt__marker--line {
    top: 15%;
    bottom: 15%;
    border-left: calc(var(--oo-border-width) * 2) solid var(--_zl-markierung);
}

.oo-gantt__flag {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1em;
    line-height: 1;
}

.oo-gantt__marker--diamond {
    --_zl-markierung: var(--_zl-balken-standard);
    top: 50%;
    width: var(--_zl-balkenhoehe);
    height: var(--_zl-balkenhoehe);
    box-sizing: border-box;
    border: calc(var(--oo-border-width) * 2) solid var(--oo-color-surface);
    background-color: var(--_zl-markierung);
    transform: translate(-50%, -50%) rotate(45deg) scale(0.7);
}

.oo-gantt__label {
    position: absolute;
    top: 50%;
    z-index: 2;
    padding-left: var(--oo-space-2);
    color: var(--oo-color-text-subtle);
    font-size: 0.85em;
    white-space: nowrap;
    transform: translateY(-50%);
}

.oo-gantt__label--marker {
    padding-left: var(--oo-space-3);
}

/* ---------- Legende ---------- */

.oo-gantt__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oo-space-1) var(--oo-space-4);
    margin-top: var(--oo-space-3);
    font-size: 0.9em;
}

.oo-gantt__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-2);
}

.oo-gantt__legend-symbol {
    --_zl-balken: var(--_zl-balken-standard);
    --_zl-ueberschreitung: var(--_zl-ueberschreitung-standard);
    --_zl-markierung: var(--oo-color-text);
    --_zl-hervorhebung: var(--oo-color-border-strong);
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
}

.oo-gantt__legend-symbol--bar {
    width: 1.5em;
    height: 0.75em;
    border-radius: var(--oo-radius-sm);
    background-image: linear-gradient(to right, color-mix(in oklch, var(--_zl-balken) 65%, black) 50%, var(--_zl-balken) 50%);
}

.oo-gantt__legend-symbol--overrun {
    width: 1.5em;
    height: 0.75em;
    border-radius: var(--oo-radius-sm);
    background-image: repeating-linear-gradient(45deg, var(--_zl-ueberschreitung) 0, var(--_zl-ueberschreitung) 0.25rem, color-mix(in oklch, var(--_zl-ueberschreitung) 60%, var(--oo-color-surface)) 0.25rem, color-mix(in oklch, var(--_zl-ueberschreitung) 60%, var(--oo-color-surface)) 0.5rem);
}

.oo-gantt__legend-symbol--flag,
.oo-gantt__legend-symbol--line {
    width: 0;
    height: 1em;
    border-left: calc(var(--oo-border-width) * 2) solid var(--_zl-markierung);
}

.oo-gantt__legend-symbol--diamond {
    width: 0.7em;
    height: 0.7em;
    background-color: var(--_zl-balken);
    transform: rotate(45deg);
}

.oo-gantt__legend-symbol--highlight {
    width: 1.5em;
    height: 0.75em;
    background-image: repeating-linear-gradient(45deg, var(--_zl-hervorhebung) 0, var(--_zl-hervorhebung) calc(var(--oo-border-width) * 2), transparent calc(var(--oo-border-width) * 2), transparent 0.375rem);
    opacity: 0.6;
}