/* Kanban-Boards: Board-Übersicht, Board-Ansicht und Board-Sektion in der Artikel-Bearbeitung */

/* ── Board-Übersicht ── */

.kanban-boards-index {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-4);
    padding: var(--oo-space-4);
}

.kanban-boards-index__liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--oo-space-3);
}

.kanban-boards-index__suche {
    max-width: 24rem;
}

/* SmartLink zentriert seinen Inhalt und packt ihn in ein eigenes <div> – das muss hier die volle Breite bekommen,
   sonst laufen die einzeiligen, gekürzten Texte links und rechts aus der Kachel. */
.kanban-boards-index__eintrag {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    padding: var(--oo-space-3) var(--oo-space-4);
    background-color: var(--oo-color-surface);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-border-radius);
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.kanban-boards-index__eintrag:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--oo-color-border-focus);
}

.kanban-boards-index__eintrag > div {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-2);
    flex: 1;
    min-width: 0;
}

/* Zeile 1: nur der Titel, zu lange Titel enden mit "…" */
.kanban-boards-index__kopf {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    min-width: 0;
}

.kanban-boards-index__kopf > :first-child {
    flex: 0 0 auto;
    color: var(--oo-color-text-muted);
}

.kanban-boards-index__name {
    flex: 1;
    min-width: 0;
    font-size: var(--oo-font-size-lg);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zeile 2: Anzahl Artikel als Badge, danach die Mitglieder (einzeilig, Rest im Tooltip) */
.kanban-boards-index__info {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    min-width: 0;
    font-size: var(--oo-font-size-sm);
    color: var(--oo-color-text-muted);
}

/* Anzahl-Badge, gemeinsam für Board-Übersicht und Pipeline-Kopf */
.kanban-anzahl {
    flex: 0 0 auto;
    padding: 0 var(--oo-space-2);
    border-radius: 999px;
    background-color: var(--oo-color-background);
    border: var(--oo-border-width) solid var(--oo-color-border);
    color: var(--oo-color-text-muted);
    font-size: var(--oo-font-size-sm);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.6;
    white-space: nowrap;
}

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

.kanban-boards-index__mitglieder > :first-child {
    flex: 0 0 auto;
}

.kanban-boards-index__mitglieder-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Board-Ansicht ── */

/* Die Seite ist genau so hoch wie der Inhaltsbereich des Layouts (Fenster minus Kopfleiste und Innenabstand von
   .oo-wdb-body), damit nie die ganze Seite scrollt, sondern nur das Board. */
.kanban-board-seite {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-3);
    padding: var(--oo-space-4);
    min-width: 0;
    box-sizing: border-box;
    height: calc(100dvh - var(--oo-wdb-header-height) - 2 * var(--oo-space-4));
}

/* Links Titel und Mitglieder, rechts (fix in der ersten Zeile) der AI-Chat-Button */
.kanban-board-kopfbereich {
    display: flex;
    align-items: flex-start;
    gap: var(--oo-space-3);
    min-width: 0;
}

.kanban-board-kopfbereich__ai {
    flex: 0 0 auto;
    margin-left: auto;
    /* auf Höhe der Titelzeile (36px) mittig */
    min-height: 36px;
    display: flex;
    align-items: center;
}

/* Titelzeile (Zurück, Name, Menü) bricht nie um, der Name wird gekürzt. Die Mitglieder dürfen in die nächste Zeile. */
.kanban-board-kopf {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--oo-space-3);
    row-gap: var(--oo-space-1);
    min-width: 0;
}

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

.kanban-board-kopf__titelzeile > * {
    flex: 0 0 auto;
}

.kanban-board-kopf__titelzeile > .kanban-board-kopf__name {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-board-kopf__mitglieder {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-1);
    font-size: var(--oo-font-size-sm);
}

/* Das Board füllt die restliche Seitenhöhe und scrollt nur waagrecht. Jede Pipeline ist so hoch wie das Board,
   ihr Kopf bleibt stehen und nur ihre Karten scrollen senkrecht.
   Doppelte Klasse, damit die Regeln unabhängig von der Ladereihenfolge vor .oo-kanban-board (Bibliothek) gewinnen. */
.oo-kanban-board.kanban-board {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
}

.kanban-board .oo-kanban-column {
    flex: 0 0 300px;
    min-width: 0;
    max-width: none;
    min-height: 0;
    box-sizing: border-box;
    /* nicht abschneiden: das Kontextmenü im Pipeline-Kopf ragt über den Kartenbereich */
    overflow: visible;
}

.kanban-board .oo-kanban-column__header {
    flex: 0 0 auto;
    border-radius: var(--oo-border-radius) var(--oo-border-radius) 0 0;
}

/* Der Kartenbereich scrollt und schneidet deshalb ab, was über ihn hinausragt. Der Abstand unten sorgt dafür,
   dass das (nach unten aufgehende) Kontextmenü der letzten Karte noch ganz hineinpasst. */
.kanban-board .oo-kanban-column__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: 2rem;
}

.kanban-board-pipeline__kopf {
    display: flex;
    align-items: center;
    gap: var(--oo-space-1);
}

/* Die Anzahl steht als Badge direkt hinter dem (ggf. gekürzten) Namen, die Aktionen rechtsbündig */
.kanban-board-pipeline__name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-board-pipeline__anzahl {
    margin-left: var(--oo-space-1);
}

.kanban-board-pipeline__aktionen {
    display: flex;
    align-items: center;
    gap: var(--oo-space-1);
    flex: 0 0 auto;
    margin-left: auto;
}

.kanban-board-neue-pipeline {
    align-self: start;
}

/* ── Karten ── */

.kanban-board-karte {
    cursor: grab;
}

.kanban-board-karte:active {
    cursor: grabbing;
}

.kanban-board-karte__inhalt {
    display: flex;
    align-items: flex-start;
    gap: var(--oo-space-1);
}

.kanban-board-karte__text {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-1);
    flex: 1;
    min-width: 0;
}

.kanban-board-karte__titel {
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.kanban-board-karte__meta {
    font-size: var(--oo-font-size-xs);
    color: var(--oo-color-text-muted);
}

/* Platzhalter für Artikel aus Spaces, die der Betrachter nicht sehen darf */
.kanban-board-karte--platzhalter {
    border-style: dashed;
    background-color: transparent;
}

.kanban-board-karte--platzhalter .kanban-board-karte__titel {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-1);
    font-weight: 400;
    color: var(--oo-color-text-muted);
}

/* ── Dialoge ── */

.kanban-board-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-3);
}

/* Platz unter dem Auswahlfeld für die aufgeklappte Liste (Suchfeld + max. 15.625rem Liste) */
.kanban-board-dialog--auswahl {
    padding-bottom: 19rem;
}

.kanban-board-dialog__feld {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-1);
}

.kanban-board-dialog__label {
    font-weight: 600;
}

/* Hinweistext steht über dem Feld, damit man ihn vor der Auswahl liest */
.kanban-board-dialog__hinweis {
    font-size: var(--oo-font-size-sm);
    line-height: 1.4;
}

/* Die aufgeklappte Auswahlliste hat in der Bibliothek nur einen Schatten – im Dialog braucht sie einen klaren Rahmen */
.kanban-board-dialog .oo-multiselect--list {
    margin-top: 2px;
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ── Artikel-Bearbeitung: Sektion pro Board ── */

.artikel-edit-kanban-zuordnung {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-1);
}

.artikel-edit-kanban-zuordnung__board {
    font-weight: 600;
    overflow-wrap: anywhere;
}