/* ==========================================================================
   aiteam.css — ai-team-gfx-v1 (17.08.2026)
   Reiter "Aktivität" und "Berichte" des KI-Teams.

   ANLASS Michael: "diese beiden Punkte sind grafisch noch nicht schön
   gelöst". Der Befund war nicht die Farbe, sondern fehlende Gliederung:
   173 Handlungen lagen als EIN Strom untereinander (gemessen 14.662 px
   Seitenhöhe = 16 Bildschirme), ohne Tagestrenner, ohne Filter, ohne
   Farbe am Status — und die Berichte zeigten drei gleich starke
   Überschriften je Karte, zwei davon regelmäßig leer ("Erledigt (0)").

   FARBREGEL — bewusst zwei getrennte Sätze:
   1. STATUS (--aiv-good/warn/neutral/info) trägt kleine Schrift in
      Marken. Alle vier sind gegen ihren eigenen 12%-Ton auf >= 4.5:1
      gemessen (WCAG kleiner Text): 4.51 / 5.00 / 5.15 / 5.93.
      Die Hausfarben --v2-success (#2d9d78) und --v2-danger (#d94452)
      erreichen dort nur 2.97 bzw. 3.66 — sie bleiben deshalb den
      GROSSEN Kennzahlen vorbehalten (>= 3:1 genügt), wo sie weiter
      benutzt werden. Wer sie in eine Statusmarke setzt, macht sie
      unlesbar.
   2. Farbe steht bei einem Status NIE allein: jede Marke trägt Symbol
      UND Wort. Das ist nicht Zierde, sondern die Absicherung — gemessen
      liegen "abgelehnt" (neutral) und "Entwurf" (info) bei normalem
      Sehen nur ΔE 10.5 auseinander, unter Rot-Grün-Schwäche noch näher.
      Ein früher Entwurf hatte Rot für "abgelehnt": der lag zu Bernstein
      bei ΔE 13.2 / 4.1 (deuteran) und war damit schlechter. "Abgelehnt"
      ist ohnehin KEINE Störung, sondern eine Entscheidung des Inhabers
      und steht deshalb neutral.

   --v2-primary wird für Status NICHT benutzt: er ist markenabhängig
   (physio-edition schaltet ihn auf Grün) und wäre dort von "erledigt"
   nicht mehr zu unterscheiden.
   ========================================================================== */

.v2-layout {
    --aiv-good:    #0d7a58;   /* erledigt                  */
    --aiv-warn:    #8a5a00;   /* nicht möglich / blockiert */
    --aiv-neutral: #55637a;   /* abgelehnt (Entscheidung)  */
    --aiv-info:    #3f51a8;   /* Entwurf, wartet auf Sie   */
}

/* ---------------------------------------------------------- Kennzahlen
   Eine Reihe Kacheln statt eines Fließsatzes. Die Kacheln sind KNÖPFE:
   sie sind zugleich der Statusfilter, damit eine Zahl nicht nur
   berichtet, sondern zum nächsten Schritt führt.
   inv-kpi-row-Lehre aus dem KI-Team-Mobilbau: Grid statt waagerechtem
   Scrollen, sonst liegt die dritte Kachel ausserhalb des Bildes. */
.aiv-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.aiv-kpi {
    display: block; width: 100%; text-align: left;
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-radius: var(--v2-radius, 0.75rem);
    background: var(--v2-surface-card, #fff);
    padding: 0.6rem 0.75rem;
    position: relative; overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.aiv-kpi::before {           /* schmaler Farbstreifen, kein Vollflächen-Ton */
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--aiv-akzent, var(--v2-text-muted, #8a97a8));
}
button.aiv-kpi { cursor: pointer; }
button.aiv-kpi:hover { border-color: var(--aiv-akzent, var(--v2-primary, #2E6B94)); }
.aiv-kpi.is-an {
    border-color: var(--aiv-akzent, var(--v2-primary, #2E6B94));
    box-shadow: 0 0 0 1px var(--aiv-akzent, var(--v2-primary, #2E6B94)) inset;
}
.aiv-kpi-wert {
    font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: 1.5rem; line-height: 1.1;
    color: var(--aiv-akzent, var(--v2-text, #1a2332));
    font-variant-numeric: tabular-nums;
}
.aiv-kpi-lab {
    font-size: 0.72rem; letter-spacing: .02em;
    color: var(--v2-text-secondary, #5e6d7f); margin-top: 0.1rem;
}

/* ------------------------------------------------------------- Filter
   Eine Zeile über der Liste (Vorgabe aus der Hausregel für Filter).
   Der Suchknopf ist bewusst kein Formular: Tippen filtert sofort. */
.aiv-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.aiv-chip {
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    background: var(--v2-surface-card, #fff);
    color: var(--v2-text-secondary, #5e6d7f);
    border-radius: 999px; padding: 0.2rem 0.7rem;
    font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.aiv-chip:hover { border-color: var(--v2-primary, #2E6B94); }
.aiv-chip.is-an {
    background: var(--v2-primary, #2E6B94); border-color: var(--v2-primary, #2E6B94);
    color: #fff; font-weight: 600;
}
.aiv-suche {
    flex: 1 1 180px; min-width: 140px; max-width: 320px;
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-radius: 999px; padding: 0.2rem 0.8rem; font-size: 0.8rem;
    background: var(--v2-surface-card, #fff); color: var(--v2-text, #1a2332);
}
.aiv-suche:focus { outline: none; border-color: var(--v2-primary, #2E6B94); }
.aiv-zaehler { font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); margin-left: auto; }

/* ------------------------------------------------------------ Tagesband
   Klebt beim Scrollen oben. Ohne diesen Trenner stand "15:11" über
   "23:58" und niemand sah, dass dazwischen ein Tag lag. */
.aiv-tag {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.35rem 0.1rem; margin-top: 0.35rem;
    background: var(--v2-surface, #f5f7fa);
    border-bottom: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
}
.aiv-tag-name {
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.85rem;
    color: var(--v2-text, #1a2332);
}
.aiv-tag-zahl { font-size: 0.75rem; color: var(--v2-text-muted, #8a97a8); }

/* ------------------------------------------------------------ Zeitstrahl
   Der Punkt trägt die Statusfarbe, die durchgehende Linie den Verlauf.
   2px, wie für Linienmarken vorgesehen; der Punkt >= 8px. */
.aiv-strang { position: relative; padding-left: 1.35rem; }
.aiv-strang::before {
    content: ''; position: absolute; left: 4px; top: 0.35rem; bottom: 0.35rem;
    width: 2px; background: var(--v2-outline, rgba(94,109,127,0.12));
}
.aiv-zeile { position: relative; padding: 0.45rem 0 0.45rem 0; }
.aiv-zeile + .aiv-zeile { border-top: 1px solid rgba(94,109,127,0.08); }
.aiv-punkt {
    position: absolute; left: -1.35rem; top: 0.72rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--aiv-akzent, var(--v2-text-muted, #8a97a8));
    box-shadow: 0 0 0 2px var(--v2-surface, #f5f7fa);   /* 2px Ring auf der Fläche */
}
.aiv-kopf {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.aiv-uhr {
    font-variant-numeric: tabular-nums; font-size: 0.78rem;
    color: var(--v2-text-muted, #8a97a8); white-space: nowrap;
}
.aiv-wer {
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
    color: var(--v2-text-secondary, #5e6d7f);
    background: var(--v2-surface-low, #edf1f5);
    border-radius: 999px; padding: 0.05rem 0.5rem;
}
.aiv-was {
    font-size: 0.88rem; font-weight: 600; color: var(--v2-text, #1a2332);
    min-width: 0;
}

/* --------------------------------------------------------- Statusmarke
   Symbol UND Wort — nie Farbe allein. */
.aiv-marke {
    margin-left: auto; white-space: nowrap;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 999px; padding: 0.1rem 0.55rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: var(--aiv-akzent, var(--v2-text-secondary, #5e6d7f));
    background: color-mix(in srgb, var(--aiv-akzent, #8a97a8) 12%, #fff);
}
.aiv-marke i { font-size: 0.85em; }

/* ---------------------------------------------------------- Ergebnistext
   Gemessen bis 2.768 Zeichen bei 240 im Schnitt. Ungekappt war der
   Fließtext das eigentliche Raumproblem: er drückte die Kopfzeile —
   also WER WAS WANN — unter den Erklärtext. Zwei Zeilen, Rest auf Klick. */
.aiv-erg {
    font-size: 0.82rem; color: var(--v2-text-secondary, #5e6d7f);
    margin-top: 0.2rem; overflow-wrap: anywhere; white-space: pre-line;
}
.aiv-erg.is-kurz {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.aiv-mehr {
    background: none; border: none; padding: 0; margin-top: 0.1rem;
    font-size: 0.75rem; color: var(--v2-primary, #2E6B94);
    cursor: pointer; font-weight: 600;
}
.aiv-mehr:hover { text-decoration: underline; }

/* =======================================================  BERICHTE  ==== */

.aiv-woche {
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-radius: var(--v2-radius, 0.75rem);
    background: var(--v2-surface-card, #fff);
    box-shadow: var(--v2-shadow, 0 12px 32px rgba(25,28,30,0.06));
    padding: 1rem; margin-bottom: 1rem;
}
.aiv-woche-kopf {
    display: flex; align-items: baseline; gap: 0.5rem;
    flex-wrap: wrap; margin-bottom: 0.75rem;
}
.aiv-woche-kopf h6 {
    margin: 0; font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: 1rem; color: var(--v2-text, #1a2332);
}
.aiv-zeitraum { margin-left: auto; font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); }
.aiv-satz { font-size: 0.9rem; color: var(--v2-text-secondary, #5e6d7f); margin-bottom: 0.75rem; }

/* Mitarbeiter-Zeile mit Anteilsbalken.
   Warum ein Balken und keine weitere Zahlenspalte: die Tabelle nannte
   16 / 0 / 10 / 9 nebeneinander, aber nicht das VERHAELTNIS. Dass bei
   einem Mitarbeiter 17 blockierte auf 8 erledigte Handlungen kommen,
   war in vier gleich grossen Ziffern nicht zu sehen. */
.aiv-mit { padding: 0.55rem 0; }
.aiv-mit + .aiv-mit { border-top: 1px solid rgba(94,109,127,0.08); }
.aiv-mit-kopf {
    display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
.aiv-mit-name { font-weight: 600; font-size: 0.9rem; color: var(--v2-text, #1a2332); }
.aiv-mit-titel { font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); }
.aiv-mit-summe { margin-left: auto; font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); }
.aiv-balken {
    height: 8px; border-radius: 4px; overflow: hidden;
    background: var(--v2-surface-low, #edf1f5);
}
/* Die Spur bleibt immer 100% breit — sie ist der Massstab, an dem man
   die Laenge des gefuellten Teils ueberhaupt ablesen kann. */
.aiv-balken-innen { display: flex; gap: 2px; height: 100%; }
.aiv-balken span { display: block; height: 100%; }
.aiv-balken-innen span:first-child { border-radius: 4px 0 0 4px; }
.aiv-balken-innen span:last-child  { border-radius: 0 4px 4px 0; }
.aiv-balken-innen span:only-child  { border-radius: 4px; }
.aiv-legende {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    margin-top: 0.3rem; font-size: 0.76rem; color: var(--v2-text-secondary, #5e6d7f);
}
.aiv-leg { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.aiv-leg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.aiv-mit-still {
    font-size: 0.76rem; color: var(--aiv-warn); font-weight: 600;
}

/* ------------------------------------------------------- Tagesberichte */
.aiv-taggruppe { margin-bottom: 0.6rem; }
.aiv-taggruppe > summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-radius: var(--v2-radius, 0.75rem);
    background: var(--v2-surface-card, #fff);
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.88rem;
    color: var(--v2-text, #1a2332);
}
.aiv-taggruppe > summary::-webkit-details-marker { display: none; }
.aiv-taggruppe > summary::before {
    content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--v2-text-muted, #8a97a8); transition: transform .12s;
    display: inline-block; width: 0.7rem;
}
.aiv-taggruppe[open] > summary::before { transform: rotate(90deg); }
.aiv-taggruppe > summary:hover { border-color: var(--v2-primary, #2E6B94); }
.aiv-tagzahl { margin-left: auto; font-weight: 400; font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); }
.aiv-tagkoerper { padding: 0.5rem 0 0.1rem 0.6rem; }

.aiv-bericht {
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-left: 3px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-radius: var(--v2-radius, 0.75rem);
    background: var(--v2-surface-card, #fff);
    padding: 0.7rem 0.85rem; margin-bottom: 0.5rem;
}
.aiv-bericht.hat-wartet { border-left-color: var(--aiv-info); }
.aiv-bericht.hat-blockiert { border-left-color: var(--aiv-warn); }
.aiv-bericht-kopf {
    display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.aiv-bericht-wer { font-weight: 700; font-size: 0.92rem; color: var(--v2-text, #1a2332); }
.aiv-bericht-rolle { font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); }
.aiv-bericht-datum { margin-left: auto; font-size: 0.76rem; color: var(--v2-text-muted, #8a97a8); }

/* Ein Abschnitt erscheint NUR, wenn er Inhalt hat. Vorher standen bei
   jedem Bericht drei fette Ueberschriften, davon regelmaessig zwei mit
   "(0)" — zwei Drittel der Karte sagten nichts. */
.aiv-abschnitt { margin-top: 0.4rem; }
.aiv-abschnitt-kopf {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: .01em;
    color: var(--aiv-akzent, var(--v2-text-secondary, #5e6d7f));
}
.aiv-abschnitt ul {
    margin: 0.15rem 0 0; padding-left: 1.1rem;
    font-size: 0.83rem; color: var(--v2-text-secondary, #5e6d7f);
}
.aiv-abschnitt li { margin-bottom: 0.12rem; overflow-wrap: anywhere; }
.aiv-leer {
    font-size: 0.82rem; color: var(--v2-text-muted, #8a97a8); font-style: italic;
}

/* Der Fuehrungsblock ist ein Bericht IM Bericht — er tritt zurueck. */
.aiv-fuehrung {
    margin-top: 0.5rem; padding: 0.5rem 0.6rem;
    background: var(--v2-surface-low, #edf1f5);
    border-radius: 0.5rem;
}

/* -------------------------------------------------------------- schmal */
@media (max-width: 575.98px) {
    .aiv-kpis { grid-template-columns: repeat(2, 1fr); }
    .aiv-kpi-wert { font-size: 1.25rem; }
    .aiv-marke { margin-left: 0; }
    .aiv-zaehler { margin-left: 0; width: 100%; }
}