/* ═══════════════════════════════════════════════════════════════════════════
 *  WILVISTA · RESPONSIVE.CSS (neu, 2026-09-27)
 *  Diese Datei war im Seitenkopf (template_header.php) schon immer verlinkt, existierte aber nicht —
 *  jeder Seitenaufruf lief in einen 404. Jetzt bündelt sie alle Regeln für Seitenbreite, Umbrüche und
 *  Handy-Darstellung an EINER Stelle statt in 100 Views.
 *
 *  Ladereihenfolge: theme_style.css → responsive.css → <style> der Seite. Wo eine Seite eigene Regeln
 *  mitbringt, gewinnen wir über die Spezifität (main.wv-page …) und nur, wo nötig, über !important
 *  (Inline-Styles lassen sich nur so übersteuern).
 *
 *  Grundsätze
 *  · Die Seite ist nie breiter als das Fenster: html/body clip seitlich (nicht hidden — so bleibt
 *    position:sticky der Kopfleiste intakt). Das Menü verschiebt sich damit nie mehr mit.
 *  · Was breiter sein muss (Datentabellen, Gantt), scrollt in seinem eigenen Kasten (.wv-scroll,
 *    .table-responsive, .gantt-grid-wrapper) — nie die Seite.
 *  · Ein Seitencontainer (main.wv-page) mit einer Breite für alle Seiten: 100 %, maximal 1'760 px.
 *  · Breakpoints: 1100 (Hauptmenü klappt, bestehend) · 992 Tablet · 768 Handy quer · 640 Handy · 480 klein.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Grundregeln (alle Breiten) ─────────────────────────────────────── */
html, body { overflow-x: clip; }
body { min-width: 0; }
main.wv-page { overflow-wrap: break-word; }
main.wv-page fieldset { min-width: 0; }                         /* Browser-Voreinstellung min-width:min-content — Fieldsets wuchsen über die Karte hinaus (Client/System Settings) */
main.wv-page img, main.wv-page iframe, main.wv-page canvas, main.wv-page video { max-width: 100%; }
main.wv-page pre { max-width: 100%; overflow-x: auto; }
main.wv-page code { overflow-wrap: anywhere; }
main.wv-page .card { min-width: 0; max-width: 100%; box-sizing: border-box; }
main.wv-page .container { min-width: 0; }

/* Tabellen: theme_style.css erzwang min-width:900px für JEDE Tabelle — auch für zwei Spalten.
   Jetzt richtet sich die Mindestbreite nach der Spaltenzahl; Tabellen ohne Scroll-Kasten bekommen
   beim Laden automatisch einen (.wv-scroll, template_footer.php), damit sie in der Karte scrollen. */
table { min-width: 0; }
table:has(tr > :nth-child(4)) { min-width: 560px; }
table:has(tr > :nth-child(6)) { min-width: 760px; }
table:has(tr > :nth-child(8)) { min-width: 900px; }
.wv-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
.wv-scroll > table { margin-bottom: 0; }
.table-responsive { max-width: 100%; }

/* Inhaltsbreite: Karten, Formulare und die Kinder von Flex-/Grid-Zeilen dürfen schrumpfen. Flex- und Grid-Kinder haben
   min-width:auto — ein Text mit white-space:nowrap + ellipsis (Startseite, Listen) oder eine Tabelle in einer Rasterspalte
   zog sonst die ganze Zeile auf ihre Inhaltsbreite auf, und die Karte lief über. */
main.wv-page .card > *, main.wv-page .card > form > *, main.wv-page .container > * { min-width: 0; }
main.wv-page :is([style*="display:flex"], [style*="display: flex"], [style*="display:grid"], [style*="display: grid"], [style*="inline-flex"]) > * { min-width: 0; }
main.wv-page :is(.el-grid, .el-tasks, .cv-wrap, .cv-two, .cv-three, .est-layout, .est-charts, .est-list, .est-kpis, .est-help-grid, .ts-grid, .np-form, .np-cards, .settings-grid, .imp-choice,
    .charts-grid, .kpiA-charts, .kpiA-grid, .evm-charts, .evm-kpis, .export-grid, .feature-grid, .wvh-grid, .hmx-risklist, .fc-scenarios, .fc-kpi-grid, .cst-kpi,
    .wv-oo-strip, .wv-oo-boxgrid, .wv-oo-lightgrid, .ooA-boxgrid, .usr-two, .usr-role, .wv-ts-2col) > * { min-width: 0; }

/* ── 2 · Tablet (≤ 992 px) ──────────────────────────────────────────────── */
@media (max-width: 992px) {
    /* Risiko- und QG-Listen schalten den Scroll-Kasten am Desktop bewusst ab (Tabelle exakt 100 %, keine
       zweite Scrollleiste). Unter 992 px ist die Tabelle breiter als die Karte — dann muss sie scrollen. */
    main.wv-page .table-responsive,
    main.wv-page .table-responsive:has(#riskBulkTable),
    main.wv-page .table-responsive:has(#qgBulkTable),
    main.wv-page .table-responsive:has(.qg-analysis-table) { overflow-x: auto !important; }
    main.wv-page #riskBulkTable, main.wv-page #qgBulkTable { table-layout: auto; }
    main.wv-page .settings-grid { grid-template-columns: 1fr; max-width: none; }
    main.wv-page .settings-grid > label { margin-bottom: -6px; }
}

/* ── 3 · Handy quer / kleines Tablet (≤ 768 px) ─────────────────────────── */
@media (max-width: 768px) {
    main.wv-page { padding: 14px 14px 40px; }
    main.wv-page .card { padding: 18px 16px; margin-bottom: 16px; border-radius: 14px; }
    main.wv-page .card .card { padding: 14px 14px; }
    main.wv-page .settings-fieldset { padding: 16px 14px; }
    main.wv-page h2 { font-size: 18px; }
    main.wv-page h3 { font-size: 15px; }
    main.wv-page .header-title-flex { flex-wrap: wrap; row-gap: 8px; }

    /* Flex-Zeilen (Toolbars, Kopfzeilen mit Knöpfen, Kennzahlen-Reihen) dürfen umbrechen, statt die Karte zu sprengen:
       das setzt template_footer.php beim Laden und bei Grössenänderung per Skript (nur Zeilen-Richtung, nie Spalten-Container
       wie die Diagrammkarten, nie in Scroll-Containern, nie mit .wv-nowrap) — CSS kann die Richtung nicht unterscheiden. */
    main.wv-page [data-wv-wrap] { flex-wrap: wrap; }

    /* Formularfelder mit fester Breite (Suchfelder 280 px, Selects, Datumsfelder) passen sich der Karte an */
    main.wv-page :is(input, select, textarea, button) { max-width: 100%; min-width: 0; }
    main.wv-page .cv-tools input[type=search], main.wv-page .cv-tools select, main.wv-page .cv-exp select { width: 100%; }
    main.wv-page .cv-exp select { flex: 1 1 100%; }

    /* Gantt: Werkzeugleisten werden zu umbrechenden Pillen-Gruppen; Baumspalte schmaler */
    main.wv-page .gantt-table-left { width: 260px; min-width: 260px; }
    main.wv-page .g-cell-meta .g-date { display: none; }

    /* Projektkonfiguration: Kopf-Navigation (Schritte) in der Kopfleiste darf umbrechen */
    .topbar-body .md-nav { padding: 8px 14px; gap: 8px; }
    .topbar-body .md-grp { flex-wrap: wrap; }

    /* Mandantenkarten: Abschnittszeilen dürfen umbrechen */
    main.wv-page .wv-cc-sec { flex-wrap: wrap; }
    main.wv-page .wv-cc-sec > i { white-space: normal; }
    main.wv-page .wv-danger-btn { white-space: normal; }

    /* Elwin: Leiste und Kästen */
    main.wv-page .elwin-bar { flex-wrap: wrap; }
    main.wv-page .el-hero { padding: 16px 16px; }

    /* Import: Ablagefläche */
    main.wv-page .imp-drop { padding: 16px 12px; }
}

/* ── 4 · Handy (≤ 640 px): alles einspaltig ─────────────────────────────── */
@media (max-width: 640px) {
    /* Inline-Raster (style="display:grid; grid-template-columns:…") werden einspaltig — die Spaltenvorgaben
       stammen aus dem Desktop und passen nie in 320 px. Sonderfälle markieren sich mit .wv-keep-grid. */
    main.wv-page [style*="grid-template-columns"]:not(.wv-keep-grid) { grid-template-columns: 1fr !important; }

    /* Klassenbasierte Raster der Views (minmax(300–400px) passt nicht in die Karte) */
    main.wv-page :is(.el-grid, .el-tasks, .feature-grid, .est-list, .est-help-grid, .est-charts, .est-layout, .wvh-grid, .export-grid,
        .hmx-risklist, .wv-oo-strip, .wv-oo-boxgrid, .wv-oo-lightgrid, .cv-wrap, .cv-two, .cv-three, .np-form, .np-cards, .imp-choice,
        .usr-two, .usr-role, .kpiA-charts, .evm-charts, .ooA-boxgrid, .fc-scenarios, .wv-ts-2col, .ts-grid, .settings-grid, .charts-grid) { grid-template-columns: 1fr !important; }
    /* Kennzahlen-Kacheln: zwei nebeneinander bleiben lesbar */
    main.wv-page :is(.evm-kpis, .kpiA-grid, .est-kpis, .fc-kpi-grid, .cst-kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    main.wv-page .np-form > * { min-width: 0; }
    main.wv-page .np-form .btn-save { width: 100%; }

    /* Zweispaltige Kartenraster (z. B. QG erstellen: minmax(400px)) */
    main.wv-page .card .card { margin-left: 0; margin-right: 0; }

    /* Knöpfe in Kopfzeilen: volle Breite statt Gedränge */
    main.wv-page .header-title-flex > :is(div, span, form) { flex: 1 1 100%; }
    /* SEITENKOPF (2026-09-27, Paket D): Titelblock aus wv_page_head() bleibt neben dem Symbol, nur die Werkzeuge rechts brechen um */
    main.wv-page .header-title-flex.wv-ph > .wv-ph-t { flex: 1 1 0; }

    /* CV: Skill-Tabelle (table-layout:fixed, min-width:0) würde auf 300 px zerquetscht — auf dem Handy scrollt sie im Kasten */
    main.wv-page .cv-tbl { min-width: 620px !important; table-layout: auto; }
    /* CV: Vorschau unter dem Formular, keine feste Breite */
    main.wv-page .cv-preview { position: static !important; }
    main.wv-page .cv-preview iframe { width: 100%; }

    /* Dashboard-Projektzeilen: Name volle Breite, Rest darunter */
    main.wv-page .card > div[style*="flex:0 0 220px"], main.wv-page .card > div > div[style*="flex:0 0 220px"] { flex: 1 1 100% !important; white-space: normal !important; }
}

/* ── 5 · Kleine Handys (≤ 480 px) ───────────────────────────────────────── */
@media (max-width: 480px) {
    main.wv-page { padding: 12px 10px 36px; }
    main.wv-page .card { padding: 16px 12px; }
    main.wv-page .btn-save, main.wv-page .filter-btn { font-size: 12px; }
    main.wv-page .gantt-table-left { width: 200px; min-width: 200px; }
}

/* ── HANDY (2026-10-14, Usability 13): Kennzahlen-Kacheln 2 × 2 statt vier untereinander — Zeiterfassung (.ts-kpi), Startseite (.kpi-grid), Analysis-Kacheln ── */
@media (max-width: 768px) {
    main.wv-page .ts-kpi { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    main.wv-page .ts-kpi > div { min-width: 0; padding: 12px 12px; }
    main.wv-page .ts-kpi .v { font-size: 20px; }
    main.wv-page .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    main.wv-page .kpi-grid .kpi-card { padding: 14px 14px; min-width: 0; }
    main.wv-page .kpi-grid .kpi-value { font-size: 22px; }
    main.wv-page .kpi-grid .kpi-title { font-size: 10.5px; }
}