/* app-board.css — v2 Board+Kanban-Column-Familie.

   Konsumenten (KEIN Kanban-only):
     - .app-board / .app-board-columns / .app-kanban-column-* werden vom
       Kanban-Tab (Shell JS-seitig in kanban.js gebaut), Anfragen-Liste,
       Projekte-Liste, Wissen-Liste, Vertrieb-Workspace, Kontingente-Tab benutzt
     - Kanban-spezifisch ist nur die Drag-Logik in kanban.js — die
       Board-CSS-Klassen sind App-Layout-Primitive

   Inhalt: Board-Container, Loading/Error/Empty, Spalten-Strip mit Spacer-
   Pseudo, Kanban-Spalten (Header, Title, Count, Quick-Add, List),
   Tablet/Mobile-Adaptionen mit Lane-Snap und Lane-Dots-Indikator.
   ========================================================================== */

/* Board-Container: horizontal scrollbar Spalten-Strip */
.app-scope .app-board {
  flex: 1;
  overflow: auto;
  /* Verhindert iOS-Safari Browser-Pull-to-Refresh (Rubber-Band am
     Top des document scrolls). Unser eigener PTR soll die Geste schlucken. */
  overscroll-behavior: contain;
  background: var(--lod-gray-50);
  position: relative;
  min-height: 0;
}
.app-scope .app-board-loading,
.app-scope .app-board-error,
.app-scope .app-board-empty {
  display: grid;
  place-items: center;
  min-height: 200px;
  color: var(--lod-gray-500);
  font-size: var(--font-size-base);
  padding: var(--space-8);
  text-align: center;
}
.app-scope .app-board-error { color: var(--lod-danger); }
/* Reset-CTA im gefilterten Leerzustand — Grid-Item unter dem Hinweistext. */
.app-scope .app-board-empty .app-board-empty-reset { margin-top: var(--space-3); }

.app-scope .app-board-columns {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  min-height: 100%;
}
/* Spacer-Pseudo als letzte "Spalte" - Browser beruecksichtigt padding-right im
   horizontalen scrollWidth von Flex-Containern nicht zuverlaessig (Chromium-
   und Safari-Bug). Ein unsichtbares Flex-Child mit expliziter Breite erzwingt
   den Rand-Abstand auch am rechten Ende des Scrollbereichs. */
.app-scope .app-board-columns::after {
  content: '';
  flex: 0 0 var(--space-6);
  align-self: stretch;
}

/* Kanban-Column: Header ist ein eigener weisser Karton mit
   Schatten und farbigem Top-Accent. Karten darunter haengen lose als Liste. */
.app-scope .app-kanban-column {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  background: transparent;
  max-height: 100%;
  min-height: 0;
  position: relative;
  /* Kette: Column -> Column-List -> Card -> Card-Meta -> Phase-Badge.
     Ohne min-width: 0 entlang dieser Kette wird die Column vom laengsten
     Meta-Badge-Text aufgeblasen (Flex-default min-width: auto = min-content).
     Das ist die Ursache dafuer, dass lange Verkaufschance-/Anfrage-Namen die
     Spalte verbreitern statt via Ellipsis gekuerzt zu werden. */
  min-width: 0;
  max-width: 320px;
  /* Kein Stack-Gap - die einzelnen Abstaende setzen wir gezielt unten
     (Header -> Quick-Add -> List). So sitzt der Accent direkt am Header. */
}
.app-scope .app-kanban-column-accent {
  /* Voll durchgehender Top-Strich, klebt direkt am Header-Karton. */
  height: 5px;
  width: 100%;
  background: var(--kanban-column-accent, var(--lod-gray-300));
  margin: 0;
  border-radius: var(--radius-pill-sm) var(--radius-pill-sm) 0 0;
}
.app-scope .app-kanban-column-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: var(--space-3) var(--space-3-5) var(--space-3-5);
  background: var(--color-surface);
  border: 1px solid var(--lod-gray-200);
  border-top: none;
  border-radius: 0 0 var(--radius-pill-sm) var(--radius-pill-sm);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--lod-darkblue-900) 4%, transparent);
  margin-bottom: var(--space-2-5);
}
.app-scope .app-kanban-column-header-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Klickbarer Header (z.B. Phase-Spalte im Projekt-Board oeffnet Phase-Drawer).
   Button-Reset + Hover/Focus-States. Kann <button> ODER <a href> sein
   (Strg/Cmd-Klick → neuer Tab fuer Phase-Spalten). Gemeinsame Klassen-Regel. */
.app-scope button.app-kanban-column-header-main.is-clickable,
.app-scope a.app-kanban-column-header-main.is-clickable {
  background: transparent;
  border: none;
  padding: var(--space-xxs) var(--space-1);
  /* Negativ-Margin gleicht das Hover-Padding aus, damit der Header-Content
     buendig zum nicht-klickbaren Header bleibt. calc(-1 * …) ist Pflicht —
     `-var(…)` ist keine gueltige Syntax und wuerde die Deklaration verwerfen. */
  margin: calc(-1 * var(--space-xxs)) calc(-1 * var(--space-1));
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--duration-quick), color var(--duration-quick);
  font: inherit;
  color: inherit;
  text-decoration: none;
}
.app-scope button.app-kanban-column-header-main.is-clickable:hover,
.app-scope a.app-kanban-column-header-main.is-clickable:hover {
  background: var(--lod-gray-50);
}
.app-scope button.app-kanban-column-header-main.is-clickable:hover .app-kanban-column-title,
.app-scope a.app-kanban-column-header-main.is-clickable:hover .app-kanban-column-title {
  color: var(--lod-darkblue);
}
.app-scope button.app-kanban-column-header-main.is-clickable:focus-visible,
.app-scope a.app-kanban-column-header-main.is-clickable:focus-visible {
  outline: 2px solid var(--lod-darkblue-300);
  outline-offset: 2px;
}
.app-scope .app-kanban-column-title {
  /* Titel-Größe + Zeilenhöhe als lokale Variablen, damit die 2-Zeilen-min-height
     unten nicht driftet, wenn die Schriftgröße geändert wird. */
  --kanban-title-size: 15px;
  --kanban-title-line: 1.25;
  font-family: var(--lod-font-display);
  font-size: var(--kanban-title-size);
  font-weight: var(--fw-bold);
  color: var(--lod-darkblue-700);
  margin: 0;
  line-height: var(--kanban-title-line);
  flex: 1;
  min-width: 0;
  /* Gruppen-Header immer gleich hoch — Title reserviert 2 Zeilen. Kurze Titel
     (1 Zeile) bleiben bündig oben, lange Titel brechen nach 2 Zeilen mit
     Ellipsis. So sehen alle Spalten gleich hoch aus, egal ob "Phase 1" oder
     "RECOM Recycling GmbH - Dynamics 365". */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--kanban-title-size) * var(--kanban-title-line) * 2);  /* 2 Zeilen */
}
.app-scope .app-kanban-column-count {
  /*Count-Pille ist dezent - kleiner Kreis, Text in Spaltenfarbe,
     zarter Tint-Hintergrund. Genau wie im Handoff (Überfällig 4 rot, Diese Woche 1
     orange, Später 8 blau, Ohne Fälligkeit 43 grau). */
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--kanban-column-accent, var(--lod-gray-700));
  background: color-mix(in srgb, var(--kanban-column-accent, var(--lod-gray-400)) 16%, var(--color-surface));
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.app-scope .app-kanban-column-meta {
  font-size: 11.5px;
  color: var(--lod-gray-500);
}
.app-scope .app-kanban-column-quickadd {
  /*Quick-Add steht frei zwischen Header-Karton und Karten-Liste */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-3-5);
  margin: 0 0 var(--space-2-5);
  border: 1px dashed var(--lod-gray-300);
  border-radius: var(--radius-lg);
  color: var(--lod-gray-500);
  font-size: 13px;
  font-weight: var(--fw-medium);
  background: transparent;
  transition: all var(--duration-quick);
  justify-content: flex-start;
}
.app-scope .app-kanban-column-quickadd:hover {
  /*Quick-Add-Hover zieht auch die Spaltenfarbe an */
  border-color: var(--kanban-column-accent, var(--lod-darkblue-300));
  border-style: solid;
  color: var(--kanban-column-accent, var(--lod-darkblue));
  background: var(--color-surface);
}
.app-scope .app-kanban-column-quickadd:focus-visible {
  outline: none; box-shadow: var(--lod-shadow-focus);
}

.app-scope .app-kanban-column-list {
  /*Karten-Liste frei stehend, ohne Container-Padding */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 0 var(--space-4);
  overflow-y: auto;
  min-height: 40px;
  /* Siehe .app-kanban-column: min-width: 0 muss durchgereicht werden, damit
     Cards sich an die 320px-Column halten und nicht durch lange Badge-Texte
     groesser werden. */
  min-width: 0;
  width: 100%;
}

/* Kanban-Card-CSS lebt vollstaendig
 nach web/styles/card.css migriert (.card-v2--compact + Sub-Klassen).
 Die alten .app-kanban-card-* Regeln sind entfernt. SortableJS-Ghost-Klasse
 ist jetzt .card-app-ghost (siehe card.css). */

/* Tablet+Mobile-Adaptionen: Columns 100% Breite, horizontaler Scroll am Board */
@media (max-width: 999px) {
  .app-scope .app-kanban-column { flex: 0 0 88vw; }
}

/* Mobile (<600px): Echte Lane-Swipe-UX statt 2D-Freescroll.
   - .app-board ist der Scroll-Container und traegt scroll-snap-type
   - Jede .app-kanban-column = volle Viewport-Breite, snap-align: start
   - vertikaler Scroll lebt IN der Lane (.app-kanban-column-list hat overflow-y),
     damit man Karten listen kann ohne horizontal zu verrutschen
   Kein Drag&Drop auf Mobile - Phasenwechsel laeuft ueber den Aufgaben-Drawer. */
@media (max-width: 599px) {
  .app-scope .app-board {
    scroll-snap-type: x mandatory;
    /* overflow explizit auf beiden Achsen setzen — overflow-y:hidden allein
       ueberschreibt das overflow:auto Shorthand nicht zuverlaessig in allen
       Browsern. Plus min-height:0 damit der flex-Hoehen-Chain greift. */
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 0;
  }
  .app-scope .app-board-columns {
    gap: 0;
    padding: var(--space-3) 0;
    align-items: stretch;
    /* min-height:100% reicht nicht — der flex-Container muss auch eine
       konkrete Hoehe haben, damit stretch greift. height:100% zwingt das. */
    min-height: 100%;
    height: 100%;
  }
  .app-scope .app-kanban-column {
    flex: 0 0 100vw;
    max-width: 100vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 0 var(--space-4);
    box-sizing: border-box;
    /* max-height:100% allein kollabiert zur Content-Hoehe wenn der Inhalt
       kuerzer ist → kein Scroll-Trigger. height:100% zwingt volle Hoehe,
       und die Liste innen scrollt bei Ueberlauf. */
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }
  /* Spacer-Pseudo fuer Padding-Rechts bei flex-scroll wird im Snap-Modus
     stoerend (landet als eigene Lane-Stelle). Ausblenden. */
  .app-scope .app-board-columns::after { display: none; }
  /* Karten unter dem Header scrollen innerhalb der Lane. flex:1 am List-
     Element sorgt dafuer, dass die Liste die verbleibende Vertikal-Flaeche
     der Lane fuellt. overflow-y:auto hier explizit wiederholen — die
     Desktop-Regel setzt es zwar, aber Mobile-Layout-Pfade koennen es
     ueberschreiben. */
  .app-scope .app-kanban-column-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Lane-Indikator (Dots) - Desktop ausgeblendet, Mobile als kleine Punkt-Reihe
   unter dem Board-Strip. Zeigt Position + Anzahl aller Lanes. */
.app-scope .app-board-lane-indicator {
  display: none;
}
@media (max-width: 599px) {
  .app-scope .app-board-lane-indicator {
    display: flex;
    justify-content: center;
    gap: var(--space-1-5);
    padding: var(--space-2) 0 var(--space-3);
  }
  .app-scope .app-board-lane-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lod-gray-300);
    transition: background var(--duration-balanced), transform var(--duration-balanced);
  }
  .app-scope .app-board-lane-dot.is-active {
    background: var(--lod-darkblue);
    transform: scale(1.35);
  }
}

/* Mobile-Card-Header-Regeln liegen in card.css
   (siehe dort @media (max-width: 599px) .card-v2--compact .card-app-id etc.). */