/* KanbanBoard – Spalten und Cards */

.oo-kanban-board {
    /* Spaltenbreiten als Tokens: ColumnWidth am Board setzt Breite, Mindest- und Höchstbreite gemeinsam */
    --oo-kanban-column-width: 280px;
    --oo-kanban-column-min-width: 260px;
    --oo-kanban-column-max-width: 320px;
    --oo-kanban-column-width-wide: calc(2 * var(--oo-kanban-column-width));
    --oo-kanban-column-collapsed-width: 2.75rem;
    --oo-kanban-column-fill-min-width: 11rem;
    --oo-kanban-card-accent-width: 4px;
    display: flex;
    flex-direction: row;
    gap: var(--oo-space-4);
    align-items: flex-start;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: var(--oo-space-2);
}

/* Spalte */
.oo-kanban-column {
    display: flex;
    flex-direction: column;
    min-width: var(--oo-kanban-column-min-width, 260px);
    max-width: var(--oo-kanban-column-max-width, 320px);
    flex: 0 0 var(--oo-kanban-column-width, 280px);
    background-color: var(--oo-color-surface);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-border-radius);
    /* Kein overflow: hidden – sonst schnitte die Spalte aufklappende Elemente im Kopf ab, etwa ein ContextMenu.
       Die Rundung oben hält der Kopf selbst, Karten brechen lange Wörter um. */
    transition: opacity var(--oo-transition);
}

/* Gesperrte Spalte: nur während des Ziehens abdunkeln, sonst normal lesbar */
.oo-kanban-board--dragging .oo-kanban-column--no-drop {
    opacity: 0.6;
}

/* Spalten-Header */
.oo-kanban-column__header {
    padding: var(--oo-space-3) var(--oo-space-3) var(--oo-space-2);
    border-bottom: var(--oo-border-width) solid var(--oo-color-border);
    background-color: var(--oo-surface-2);
    overflow-wrap: anywhere;
    /* Innenradius der Spalte (Außenradius minus Rahmen), damit der Hintergrund bündig in der Rundung liegt */
    border-radius: calc(var(--oo-border-radius) - var(--oo-border-width)) calc(var(--oo-border-radius) - var(--oo-border-width)) 0 0;
}

.oo-kanban-column__title {
    font-weight: 600;
    font-size: var(--oo-font-size-sm);
    color: var(--oo-color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Fertiger Spaltenkopf (Icon, Titel, Zähler, Aktionen, Beschreibung, eigener Inhalt) */
.oo-kanban-column__header-row {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    min-width: 0;
}

.oo-kanban-column__heading {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    flex: 1 1 auto;
    min-width: 0;
}

.oo-kanban-column__icon,
.oo-kanban-column__count {
    flex-shrink: 0;
}

.oo-kanban-column__icon {
    color: var(--oo-color-text-subtle);
}

/* Titel im fertigen Kopf: normale Schreibweise, lange Titel enden mit „…“ statt die Knöpfe wegzudrücken */
.oo-kanban-column__title--plain {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--oo-color-text);
    text-transform: none;
    letter-spacing: normal;
}

.oo-kanban-column__title-content {
    display: flex;
    min-width: 0;
}

.oo-kanban-column__actions {
    display: flex;
    align-items: center;
    gap: var(--oo-space-1);
    flex-shrink: 0;
    margin-inline-start: auto;
}

/* Beschreibung immer einzeilig, auch bei größerer Schrift; die ausführliche Erklärung steht im Tooltip */
.oo-kanban-column__description {
    display: flex;
    max-width: 100%;
    min-width: 0;
    margin-top: var(--oo-space-1);
    color: var(--oo-color-text-subtle);
}

.oo-kanban-column__description small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oo-kanban-column__header-content {
    margin-top: var(--oo-space-2);
}

/* Breiten-Knopf erst beim Überfahren bzw. Fokus des Kopfs, bei breiter Spalte und auf Touch immer */
.oo-kanban-column__wide-toggle {
    opacity: 0;
    transition: opacity var(--oo-transition);
}

.oo-kanban-column__header:hover .oo-kanban-column__wide-toggle,
.oo-kanban-column__header:focus-within .oo-kanban-column__wide-toggle,
.oo-kanban-column--wide .oo-kanban-column__wide-toggle {
    opacity: 1;
}

@media (hover: none) {
    .oo-kanban-column__wide-toggle {
        opacity: 1;
    }
}

/* Doppelt breite Spalte */
.oo-kanban-column--wide {
    flex-basis: var(--oo-kanban-column-width-wide, 560px);
    min-width: var(--oo-kanban-column-width-wide, 560px);
    max-width: var(--oo-kanban-column-width-wide, 560px);
}

/* Eingeklappte Spalte: schmaler Streifen mit Pfeil, Icon, senkrechtem Titel und Anzahl (wie bei GitHub) */
.oo-kanban-column--collapsed {
    flex: 0 0 auto;
    width: var(--oo-kanban-column-collapsed-width, 2.75rem);
    min-width: 0;
    max-width: none;
}

.oo-kanban-column__header--collapsed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--oo-space-2);
    flex: 1 1 auto;
    padding: var(--oo-space-2) 0;
    border-bottom: none;
    border-radius: calc(var(--oo-border-radius) - var(--oo-border-width));
}

.oo-kanban-column__title--vertical {
    writing-mode: vertical-rl;
    white-space: nowrap;
    max-height: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--oo-color-text);
    text-transform: none;
    letter-spacing: normal;
}

/* Hervorgehobene Spalte (etwa „Heute“) und leicht getönte Spalte (etwa Wochenende) */
.oo-kanban-column--highlight {
    background-color: color-mix(in srgb, var(--oo-primary) 7%, var(--oo-color-surface));
    outline: 2px solid color-mix(in srgb, var(--oo-primary) 45%, transparent);
    outline-offset: -2px;
}

.oo-kanban-column--muted {
    background-color: color-mix(in srgb, var(--oo-color-text) 4%, var(--oo-color-surface));
}

/* Spalten-Body */
.oo-kanban-column__body {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-2);
    padding: var(--oo-space-2);
    min-height: 80px;
    flex: 1;
}

/* Card */
.oo-kanban-card {
    background-color: var(--oo-color-background);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-border-radius);
    padding: var(--oo-space-3);
    min-width: 0;
    overflow-wrap: anywhere;
    cursor: default;
    user-select: none;
    transition: opacity var(--oo-transition), box-shadow var(--oo-transition);
}

/* Knapper Innenabstand wie bei GitHub */
.oo-kanban-card--compact {
    padding-top: var(--oo-space-2);
    padding-bottom: var(--oo-space-2);
}

/* Farbstrich links; der Innenabstand gleicht den breiteren Rand aus, damit Inhalte aller Karten bündig stehen */
.oo-kanban-card--accent {
    border-left: var(--oo-kanban-card-accent-width, 4px) solid var(--oo-kanban-card-accent);
    padding-left: calc(var(--oo-space-3) - var(--oo-kanban-card-accent-width, 4px) + var(--oo-border-width));
}

/* Ausgegraut (etwa geplant oder erledigt), bleibt ziehbar */
.oo-kanban-card--dimmed {
    opacity: 0.5;
}

/* Ohne Drag-Handle ist die ganze Card der Griff */
.oo-kanban-board:not(.oo-kanban-board--handle) .oo-kanban-card {
    cursor: grab;
}

.oo-kanban-board:not(.oo-kanban-board--handle) .oo-kanban-card:active {
    cursor: grabbing;
}

.oo-kanban-card:hover {
    box-shadow: var(--oo-shadow-sm);
    border-color: var(--oo-primary);
}

.oo-kanban-card:focus-visible {
    outline: 2px solid var(--oo-primary);
    outline-offset: 2px;
}

/* Anklickbare Karte (Href oder OnClick): Die Klickfläche (__hit, ein a mit Href, sonst ein span) liegt unter dem ganzen Inhalt.
   Der Inhalt darüber lässt Klicks zur Fläche durch, außer Bedienelementen und Elementen mit eigenem Tooltip – die bleiben
   bedienbar und lösen die Karte nicht aus. Ohne z-index, damit keine Stapelebene entsteht und Menüs im Inhalt über den
   Nachbarkarten liegen. */
.oo-kanban-card--clickable {
    position: relative;
}

.oo-kanban-card__hit {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    cursor: pointer;
}

.oo-kanban-card--clickable > :not(.oo-kanban-card__hit) {
    position: relative;
    pointer-events: none;
}

.oo-kanban-card--clickable > :not(.oo-kanban-card__hit) :is(a, button, input, select, textarea, label, [role="button"], [tabindex], [title]) {
    pointer-events: auto;
}

.oo-kanban-card--dragging {
    opacity: 0.35;
}

/* Drop-Indikator */
.oo-kanban-placeholder {
    height: 2px;
    background-color: var(--oo-primary);
    border-radius: var(--oo-radius-sm);
    pointer-events: none;
    flex-shrink: 0;
    margin: 0;
}

/* Drag-Handle (optional, per CSS-Klasse in der Card) */
.oo-kanban-handle {
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
    color: var(--oo-color-text-subtle);
}

.oo-kanban-handle:active {
    cursor: grabbing;
}

/* Swimlanes (KanbanSwimlane): Zeilen untereinander, je Zeile eine Reihe von Spalten */
.oo-kanban-board:has(> .oo-kanban-swimlane) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--oo-space-3);
}

.oo-kanban-swimlane {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-2);
    /* So breit wie alle Spalten, damit die Zeilen gemeinsam waagrecht scrollen */
    min-width: max-content;
    padding-top: var(--oo-space-2);
    border-top: var(--oo-border-width) solid var(--oo-color-border);
}

.oo-kanban-swimlane__header {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    /* Bleibt beim waagrechten Scrollen links stehen */
    position: sticky;
    left: 0;
    align-self: flex-start;
    max-width: 100%;
}

.oo-kanban-swimlane__title {
    font-weight: 600;
    font-size: var(--oo-font-size-sm);
}

.oo-kanban-swimlane__columns {
    display: flex;
    flex-direction: row;
    gap: var(--oo-space-4);
    align-items: flex-start;
}

/* Akzentfarbe bleibt beim Überfahren (die Card färbt sonst den ganzen Rahmen) */
.oo-kanban-card--accent:hover {
    border-left-color: var(--oo-kanban-card-accent);
}

/* FillWidth: Spalten teilen sich die Breite statt fester Breite; eingeklappte Spalten bleiben schmal */
.oo-kanban-board--fill-width .oo-kanban-column:not(.oo-kanban-column--collapsed) {
    flex: var(--oo-kanban-column-grow, 1) 1 0;
    min-width: var(--oo-kanban-column-fill-min-width, 11rem);
    max-width: none;
}

.oo-kanban-board--fill-width .oo-kanban-column.oo-kanban-column--wide:not(.oo-kanban-column--collapsed) {
    flex-grow: calc(2 * var(--oo-kanban-column-grow, 1));
    min-width: calc(2 * var(--oo-kanban-column-fill-min-width, 11rem));
}

/* FillHeight: Board füllt die Höhe des Elternelements. Ohne Swimlanes scrollt jede Spalte für sich,
   der waagrechte Balken liegt unten im Bild; mit Swimlanes scrollt das Board als Ganzes. */
.oo-kanban-board--fill-height {
    flex: 1 1 0%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.oo-kanban-board--fill-height:not(:has(> .oo-kanban-swimlane)) {
    align-items: stretch;
}

.oo-kanban-board--fill-height:not(:has(> .oo-kanban-swimlane)) > .oo-kanban-column {
    min-height: 0;
}

.oo-kanban-board--fill-height:not(:has(> .oo-kanban-swimlane)) > .oo-kanban-column > .oo-kanban-column__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.oo-kanban-board--fill-height:has(> .oo-kanban-swimlane) {
    overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
    .oo-kanban-column,
    .oo-kanban-card {
        transition: none;
    }
}