/* ===== 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, 4rem);
    --_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;
    /* mittig über der Linie, am linken Rand der Zeitleiste aber nicht hinter die Zeilenköpfe geschoben */
    transform: translateX(calc(-1 * min(50%, var(--_zl-heute, 0.5) * var(--_zl-spur))));
}

/* ---------- 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__inner {
    position: relative;
}

.oo-gantt__row-head--sortable {
    padding-left: calc(var(--oo-space-3) + 1.25rem);
}

.oo-gantt__grip {
    position: absolute;
    top: 50%;
    left: var(--oo-space-1);
    display: inline-flex;
    transform: translateY(-50%);
    border-radius: var(--oo-radius-sm);
    color: var(--oo-color-text-subtle);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.oo-gantt__grip:hover {
    color: var(--oo-color-text);
}

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

.oo-gantt__row--dragging {
    opacity: 0.5;
}

.oo-gantt__drop-line {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 5;
    height: 0.125rem;
    background-color: var(--oo-primary);
    pointer-events: none;
}

.oo-gantt__group {
    border-top: var(--oo-border-width) solid var(--_zl-linie);
}

.oo-gantt__group-text {
    position: sticky;
    left: 0;
    display: inline-block;
    padding: var(--oo-space-1) var(--oo-space-3);
    color: var(--oo-color-text-subtle);
    font-weight: 600;
}

.oo-gantt__row-head--action {
    cursor: pointer;
}

.oo-gantt__row-head--action:hover {
    background-color: color-mix(in oklch, var(--oo-color-text) 6%, var(--oo-color-surface));
}

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

.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-extra {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: var(--_zl-balken);
}

/* Erledigt: halbtransparente schwarze Schicht über allem darunter, damit der Fortschritt auch in Zusatzbereich und Schraffur sichtbar bleibt */
.oo-gantt__bar-done {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: color-mix(in srgb, black var(--oo-gantt-done-darkening, 35%), transparent);
}

.oo-gantt__bar-overrun {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* Durchscheinende Streifen: Balkenfarbe und Zusatzbereich bleiben darunter erkennbar */
    background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--_zl-ueberschreitung) 75%, transparent) 0, color-mix(in srgb, var(--_zl-ueberschreitung) 75%, transparent) 0.25rem, color-mix(in srgb, var(--_zl-ueberschreitung) 25%, transparent) 0.25rem, color-mix(in srgb, var(--_zl-ueberschreitung) 25%, transparent) 0.5rem);
}

.oo-gantt__bar--editable {
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
}

.oo-gantt__bar--dragging {
    outline: calc(var(--oo-border-width) * 2) solid var(--oo-color-text);
}

.oo-gantt__drag-tip {
    position: absolute;
    bottom: calc(50% + var(--_zl-balkenhoehe) / 2 + var(--oo-space-1));
    z-index: 3;
    padding: var(--oo-space-1) var(--oo-space-2);
    border-radius: var(--oo-radius-sm);
    background-color: var(--oo-color-text);
    color: var(--oo-color-surface);
    font-size: 0.85em;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%);
}

.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);
}

/* Zielstrich: zentriert wie der Balken und nur knapp höher; gedämpftes, helles Grün, damit er auch auf dunklen oder farbigen Balken sichtbar bleibt */
.oo-gantt__marker--flag,
.oo-gantt__marker--line {
    --_zl-markierung: color-mix(in oklch, var(--oo-success, #16a34a) 65%, white);
    top: calc(50% - var(--_zl-balkenhoehe) / 2 - var(--oo-space-1));
    height: calc(var(--_zl-balkenhoehe) + var(--oo-space-1) * 2);
    border-left: calc(var(--oo-border-width) * 2) solid var(--_zl-markierung);
}

.oo-gantt__flag {
    position: absolute;
    top: 50%;
    left: 0;
    font-size: 1em;
    line-height: 1;
    transform: translateY(-50%);
}

.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%);
}

/* Freier Text je Woche: zentriert unter dem Balken über der Kalenderwoche; zu breiter Text ragt gleichmäßig nach beiden Seiten, Mausereignisse gehen durch */
.oo-gantt__week-note {
    position: absolute;
    top: calc(50% + var(--_zl-balkenhoehe) / 2);
    z-index: 2;
    display: flex;
    justify-content: center;
    padding-top: var(--oo-space-1);
    color: var(--oo-color-text);
    font-size: 0.8em;
    line-height: 1.1;
    white-space: nowrap;
    pointer-events: none;
}

/* Balkenbeschriftung am oberen Zeilenrand rechts vom Balkenende, damit sie nicht mit Wochentexten oder Markierungen kollidiert */
.oo-gantt__label--bar {
    top: var(--oo-space-1);
    line-height: 1;
    transform: none;
}

/* Zweiter Teil der Balkenbeschriftung (nach dem "·") am unteren Zeilenrand */
.oo-gantt__label--below {
    top: auto;
    bottom: var(--oo-space-1);
}

.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 srgb, black var(--oo-gantt-done-darkening, 35%), var(--_zl-balken)) 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;
}