/* ==========================================================================
   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%; }
}


/* =================================================================
   ai-team-mobil-v1 (20.08.2026) — Personalakte auf dem Handy
   -----------------------------------------------------------------
   BEFUND, gemessen mit headless Chrome bei 390px Breite:
   styles.css setzt unter 768px ".table th,.table td{white-space:nowrap}"
   (Z.801) und global ".table{table-layout:fixed}" (Z.450). Die
   Vertrauens-Tabelle bekam damit 140px je Spalte, gebraucht wurden
   224px fuer den Text und 195px fuer das Auswahlfeld. Abgeschnitten
   wurde OHNE Auslassungspunkte, also ohne jeden Hinweis darauf.
   Die Reiterleiste brach auf VIER Zeilen um (209px = ein Viertel des
   Bildschirms, bevor ueberhaupt Inhalt kam).
   ================================================================= */

/* Ohne Breitengrenze: dieselbe Tabelle ist auch auf dem Desktop zu eng.
   Bei 1200px steht sie in einer col-lg-6, ist nur 398px breit und gibt
   der Beschriftung 199px bei 224px Bedarf — ebenfalls gemessen, ebenfalls
   abgeschnitten. In der Akte gibt es genau vier Tabellen, die Regel
   bleibt also eng begrenzt. */
#aiTeamRoot table.table { table-layout: auto !important; }
#aiTeamRoot table.table > thead > tr > th,
#aiTeamRoot table.table > tbody > tr > td {
    white-space: normal !important;
    overflow: visible !important;
    max-width: none !important;
    overflow-wrap: anywhere;
}

/* Ohne Breitenhinweis bekommt die Beschriftung im auto-Layout nur 143px,
   weil das Auswahlfeld (w-auto, 195px) die zweite Spalte aufspannt — der
   Text bricht dann unnoetig oft um. 60/40 gibt beiden genug. */
/* Nicht an .aiv-vertrauen gebunden: die Klasse kommt aus aiTeam.js, das
   ueber pages.js mit einer Stunde Cache laeuft. ":first-child:nth-last-child(2)"
   trifft die erste von genau ZWEI Spalten und wirkt deshalb sofort. */
#aiTeamRoot table.table > tbody > tr > td:first-child:nth-last-child(2) { width: 60%; }
#aiTeamRoot table.table > tbody > tr > td:first-child:nth-last-child(2) ~ td { width: 40%; }

@media (max-width: 767.98px) {
    #aiTeamRoot table.table > thead > tr > th,
    #aiTeamRoot table.table > tbody > tr > td { padding: 8px 6px !important; }

    /* Reiterleiste: eine seitlich schiebbare Zeile statt vier gestapelter. */
    #aiTeamRoot .nav-tabs {
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    #aiTeamRoot .nav-tabs::-webkit-scrollbar { display: none; }
    #aiTeamRoot .nav-tabs > .nav-item { flex: 0 0 auto; }
    #aiTeamRoot .nav-tabs .nav-link { white-space: nowrap; }
}

@media (max-width: 575.98px) {
    /* Vertrauensstufen: Beschriftung UEBER die Auswahl statt zwei enge
       Spalten nebeneinander. Bei 390px bekam jede Spalte 140px bei 224px
       bzw. 195px Bedarf - gemessen, beides abgeschnitten.

       ZWEI GETRENNTE BLOECKE MIT ABSICHT: stuenden :has() und der Rueckfall
       in derselben Selektorliste, wuerfe ein Browser ohne :has() die ganze
       Regel weg - also auch den Rueckfall. */
    /* Weg 1: jede zweispaltige Tabelle in der Akte, ohne Zutun von aiTeam.js */
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) {
        display: block; width: 100%;
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) > tbody {
        display: block; width: 100%;
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) > tbody > tr {
        display: block; width: 100%;
        padding: .45rem 0; border-bottom: 1px solid rgba(0,0,0,.08);
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) > tbody > tr:last-child {
        border-bottom: 0;
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) > tbody > tr > td {
        display: block; width: 100% !important;
        border: 0 !important; padding: .1rem 0 !important;
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) > tbody > tr > td.text-end {
        text-align: left !important; margin-top: .2rem;
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) .form-select {
        width: 100% !important; max-width: 100% !important; display: block !important;
    }

    /* Weg 2: Rueckfall ueber die Klasse aus aiTeam.js, falls :has() fehlt */
    #aiTeamRoot table.table.aiv-vertrauen {
        display: block; width: 100%;
    }
    #aiTeamRoot table.table.aiv-vertrauen > tbody {
        display: block; width: 100%;
    }
    #aiTeamRoot table.table.aiv-vertrauen > tbody > tr {
        display: block; width: 100%;
        padding: .45rem 0; border-bottom: 1px solid rgba(0,0,0,.08);
    }
    #aiTeamRoot table.table.aiv-vertrauen > tbody > tr:last-child {
        border-bottom: 0;
    }
    #aiTeamRoot table.table.aiv-vertrauen > tbody > tr > td {
        display: block; width: 100% !important;
        border: 0 !important; padding: .1rem 0 !important;
    }
    #aiTeamRoot table.table.aiv-vertrauen > tbody > tr > td.text-end {
        text-align: left !important; margin-top: .2rem;
    }
    #aiTeamRoot table.table.aiv-vertrauen .form-select {
        width: 100% !important; max-width: 100% !important; display: block !important;
    }

    /* Reiterleiste: eine seitlich schiebbare Zeile statt vier gestapelter. */
    #aiTeamRoot .nav-tabs {
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    #aiTeamRoot .nav-tabs::-webkit-scrollbar { display: none; }
    #aiTeamRoot .nav-tabs > .nav-item { flex: 0 0 auto; }
    #aiTeamRoot .nav-tabs .nav-link { white-space: nowrap; }
}