/* ═══════════════════════════════════════════════════════════════════════════════
   POLARIS — Mobile-Optimierung (Handy, ≤ 768 px)                 Stand 05.10.2026
   ───────────────────────────────────────────────────────────────────────────────
   Nutzer-Vorgabe: Die Desktop-Optik darf sich NICHT ändern. Diese Datei wird als LETZTE
   Stylesheet-Datei geladen und enthält ausschließlich Regeln innerhalb von
   @media (max-width: 768px). Oberhalb von 768 px hat sie keinerlei Wirkung.
   Neue Mobil-Anpassungen gehören hierher (nicht in die Modul-CSS-Dateien).
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Grundregeln: nie breiter als der Bildschirm ───────────────────────────── */
    html, body { max-width: 100%; overflow-x: hidden; }
    *, *::before, *::after { box-sizing: border-box; }
    #app, .main-content { max-width: 100%; min-width: 0; }
    img, video, canvas, svg { max-width: 100%; }
    .view { max-width: 100%; min-width: 0; overflow-x: hidden; }

    /* ── Kopfzeile: Hamburger-Menü darf nie verdrängt werden ───────────────────── */
    /* Ursache des fehlenden Menüs: Die Status-Buttons (Workflow/Server/Wiki) waren zusammen
       ~500 px breit und drückten den linken Bereich mit dem Hamburger auf Breite 0. */
    .header { gap: 6px; padding: 0 8px; }
    .header-left { flex: 1 1 auto; min-width: 0; gap: 4px; overflow: visible; }
    #sidebar-toggle {
        flex: 0 0 auto; width: 42px; height: 42px; padding: 0; font-size: 1.35rem;
        border-radius: 10px; -webkit-tap-highlight-color: transparent;
    }
    .header h1 { flex: 1 1 auto; min-width: 0; font-size: 1rem; max-width: none; }
    .header-actions { flex: 0 0 auto; gap: 4px; margin-left: auto; align-items: center; }

    /* Status-Buttons und Wiki-Badge nur als Symbol/Punkt (Text ausgeblendet, per Tippen öffnet sich das Dropdown) */
    .header-actions .server-status-btn {
        font-size: 0; gap: 0; padding: 0; width: 38px; height: 38px; min-width: 0;
        justify-content: center; border-radius: 10px;
    }
    .header-actions .server-status-btn i { font-size: 1.05rem; }
    .header-actions .server-status-dot { width: 12px; height: 12px; }

    /* Benutzer-Menü (Einstellungen / Abmelden) war auf dem Handy komplett ausgeblendet → als Symbol zeigen */
    .header-user-chip {
        display: flex !important; width: 38px; height: 38px; padding: 0; justify-content: center;
        border-radius: 50%; gap: 0;
    }
    .header-user-chip #header-username-text, .header-user-chip .header-user-chevron { display: none; }
    .header-user-chip i { font-size: 1.35rem; }

    /* Dropdowns der Kopfzeile immer innerhalb des Bildschirms */
    .server-status-dropdown, .user-dropdown {
        position: fixed; top: 58px; left: 8px; right: 8px; width: auto; min-width: 0; max-width: none;
        max-height: calc(100vh - 76px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .user-dropdown { left: auto; width: 230px; }

    /* ── Menü (Sidebar als Schublade) ──────────────────────────────────────────── */
    .sidebar { width: min(300px, 86vw) !important; max-width: 86vw; }
    .sidebar:not(.open) { box-shadow: none; }          /* vorher: Schlagschatten des versteckten Menüs am linken Rand */
    .sidebar .nav-links { padding: 10px 8px 24px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .nav-links li { min-height: 46px; padding: 12px 14px; }  /* Touch-Ziele ≥ 44 px */
    .nav-links li span { white-space: normal; line-height: 1.25; }
    .nav-sub-item { padding-top: 11px; padding-bottom: 11px; }

    /* ── Allgemeine Muster (Inline-Styles der Module) ──────────────────────────── */
    /* Zeilen mit display:flex dürfen umbrechen, statt über den Rand zu laufen */
    .view [style*='display:flex']:not([style*='nowrap']),
    .view [style*='display: flex']:not([style*='nowrap']) { flex-wrap: wrap; }
    /* mehrspaltige Inline-Raster → 1 bzw. 2 Spalten */
    .view [style*='grid-template-columns:1fr 1fr'],
    .view [style*='grid-template-columns: 1fr 1fr'] { grid-template-columns: minmax(0, 1fr) !important; }
    .view [style*='grid-template-columns:1fr 1fr 1fr'],
    .view [style*='grid-template-columns:repeat(3'],
    .view [style*='grid-template-columns:repeat(4'],
    .view [style*='grid-template-columns:repeat(5'],
    .view [style*='grid-template-columns:repeat(6'] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* Eingabefelder nie breiter als ihr Container */
    .view select, .view input:not([type='checkbox']):not([type='radio']):not([type='range']), .view textarea { max-width: 100%; }
    /* Tabellen ohne eigenen Scroll-Container: Container scrollt waagerecht statt die Seite zu verbreitern */
    .view :is(div, section):has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .view table { max-width: none; }
    /* Modale Fenster: nie größer als der Bildschirm */
    .modal-content, [role='dialog'] { max-width: 100vw; }
}

/* ── Gefundene Überläufe (Audit 05.10.2026) ──────────────────────────────────────── */
@media (max-width: 768px) {
    /* Projektstatusblatt: Auswahlleiste (Projektleiter, Blatt suchen, Buttons) umbrechen statt 850 px breit zu sein */
    .psb-select-wrap { flex-wrap: wrap; gap: 8px; width: 100%; }
    .psb-select-wrap > select, #psb-pl-filter { min-width: 0 !important; max-width: 100% !important; flex: 1 1 100%; }
    #psb-proj-sel-wrap { min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; width: 100%; }
    .psb-select-wrap > .btn { flex: 1 1 auto; justify-content: center; }
    /* Q-Button: Filterzeile */
    .qb-filter-row .form-control, .qb-filter-row input[type="search"], .qb-filter-row .btn { min-width: 0 !important; width: 100% !important; flex: 1 1 100%; }
    .form-control.qb-tabs-ges-filter { margin-left: 0; width: 100%; }
    /* eLearning-Kurskatalog: Kategorienbaum über den Kurskarten statt daneben */
    #el-kat-sidebar { width: 100% !important; align-self: stretch !important; }
    div:has(> #el-kat-sidebar) { flex-direction: column; }
    #el-kat-sidebar + div { width: 100%; }
    #el-kat-sidebar + div input[type="text"] { min-width: 0 !important; width: 100%; }
    /* Administration → Berechtigungen: Gruppen und Benutzer untereinander */
    #admin-tab-panel-permissions > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── Modale, Formular-Raster, Q-Button, Startseite ───────────────────────────────── */
@media (max-width: 768px) {
    /* Modale Fenster: volle Breite statt fester Desktop-Breite (560/800/900 px …) */
    .qb-modal, .qb-modal-lg, .dsb-modal, .dsb-modal-lg, .pt-modal, .pt-modal-lg,
    .dwx-modal, .dwx-modal.dwx-modal-wide, .modal-box, .modal-box.modal-lg, .usp-dlg {
        width: calc(100vw - 16px) !important; min-width: 0 !important; max-width: calc(100vw - 16px) !important;
        max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    /* Zweispaltige Formulare → einspaltig */
    .qb-form-grid2, .dsb-form-grid, .kap-form-grid2, .usp-dlg .form-grid, .bd-form-grid,
    .settings-pw-grid, .modal-2col, .bd-preview-meta { grid-template-columns: minmax(0, 1fr) !important; }
    /* Q-Button: Bereichsbaum über der Dokumentliste */
    .qb-doklayout { flex-direction: column; align-items: stretch; gap: 12px; }
    .qb-doc-main { width: 100%; max-width: 100%; }
    .qb-kat-sidebar { width: 100%; }
    .qb-tabs { flex-wrap: wrap; }
    .qb-tabs-left { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
    .qb-tab { white-space: nowrap; padding: 10px 12px; }
    .qb-toolbar > * { max-width: 100%; }
    #qb-neu-btn { width: 100%; justify-content: center; }
    /* Startseite */
    .dash-main-row { grid-template-columns: minmax(0, 1fr) !important; }
    .dash-info-tile { min-width: 0; }
}

/* ── Projektstatusblatt ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* ── Projektstatusblatt ─────────────────────────────────────────────────────
       Reine Mobil-Anpassung; Desktop und Druck bleiben unverändert (PSB ist produktiv). */
    .psb-wrap { padding: 8px 6px; }
    .psb-toolbar h2 { white-space: normal; }
    .psb-toolbar-row3 { flex-direction: column; align-items: stretch; }
    .psb-select-wrap { width: 100%; max-width: 100%; }
    .psb-select-wrap > .btn { white-space: normal; padding: 8px 10px; line-height: 1.2; }
    .psb-select-wrap > .btn { flex: 1 1 calc(50% - 8px); justify-content: center; min-width: 0; }
    #psb-del-btn, .psb-select-wrap > .psb-action-btn { flex: 0 0 46px; }
    .psb-action-btns { margin-left: 0; flex-wrap: wrap; width: 100%; }
    .psb-pds-bar { flex-wrap: wrap; }
    .psb-pds-sel, .psb-pds-sel-wide, .psb-pds-ss-wrap, .psb-pds-ss-wide { min-width: 0 !important; width: 100%; flex: 1 1 100%; }
    .psb-header-band { flex-wrap: wrap; padding: 12px; gap: 8px; }
    .psb-header-band h1 { font-size: 1.05rem; }
    .psb-header-meta { flex-wrap: wrap; gap: 8px; width: 100%; }
    .psb-header-meta label { flex: 1 1 100%; margin: 0; }
    .psb-header-meta input[type=date] { flex: 1 1 auto; min-width: 0; }
    .psb-section-head { padding: 8px 12px; font-size: .95rem; }
    .psb-val { padding: 4px 12px 10px; min-width: 0; }
    .psb-lbl { padding: 8px 12px 2px; font-weight: 600; }
    .psb-inp.psb-narrow, .psb-inp.psb-mid, .psb-inp-wide { width: 100%; }
    .psb-inp, .psb-disp, .psb-calc-bg { min-width: 0; max-width: 100%; }
    .psb-multicol { flex-wrap: wrap; gap: 4px 8px; width: 100%; }
    .psb-multicol-lbl { white-space: normal; flex: 1 1 40%; }
    .psb-nachtrag-body .psb-multicol input.psb-inp, .psb-nachtrag-body .psb-multicol span.psb-calc-val { margin-left: 0; width: auto; flex: 1 1 120px; min-width: 0; }
    .psb-nachtrag-row, .psb-bp-field { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .psb-bp-field span { padding-top: 0; }
    .psb-nachtrag, .psb-bp-block { margin: 8px 6px; }
    .psb-nachtrag-head, .psb-bp-head { flex-wrap: wrap; }
    .psb-nachtrag-toggle { flex-wrap: wrap; gap: 8px 14px; }
    .psb-check-row { grid-template-columns: minmax(0, 1fr) 52px 52px; }
    .psb-check-opt label { width: 44px; height: 36px; }
    .psb-toggle-group label { padding: 8px 12px; }
    .psb-ab-table, .psb-mat-table { min-width: 460px; }
    .psb-save-bar { flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
    .psb-save-bar .btn { flex: 1 1 auto; justify-content: center; }
    #psb-toast { left: 12px; right: 12px; bottom: 76px; }
}

/* ── Maßnahmenpläne (Karten statt Raster) ────────────────────────────────────────── */
@media (max-width: 768px) {
    /* ── Maßnahmenplan: Aufgaben als Karten statt 1.500 px breites Raster ─────────
       Die Zellen tragen data-field; die Beschriftung kommt per ::before. Bearbeiten per Tipp bleibt unverändert
       (Text/Personen öffnen das Popup, Datum/Status/Prio/Fortschritt bearbeitest du in der Karte). */
    .mn-wrap-full { padding: 8px 6px; }
    .mn-grid-outer { overflow: visible; }
    .mn-grid-scroll { overflow: visible !important; max-height: none !important; border: none; background: transparent; }
    .mn-grid-hscroll { display: none !important; }
    .mn-grid, .mn-grid tbody { display: block; width: 100% !important; table-layout: auto; }
    .mn-grid colgroup, .mn-grid thead { display: none !important; }

    /* Kategorie-Kopfzeile */
    .mn-kat-row { display: block; margin: 14px 0 6px; }
    .mn-kat-row td { display: block; border-radius: 8px; padding: 10px 12px; }

    /* Aufgaben-Karte */
    tr.mn-grid-row {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 10px;
        border: 1px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden;
        background: var(--surface, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }
    tr.mn-grid-row > td {
        display: flex; flex-direction: column; gap: 3px; width: auto !important; max-width: none !important;
        padding: 9px 12px; border: none !important; border-bottom: 1px solid var(--border, #e2e8f0) !important;
        min-height: 0; height: auto !important; overflow: visible; background: transparent; position: relative !important;
    }
    tr.mn-grid-row > td::before {
        content: ""; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
        color: var(--text-muted, #64748b);
    }
    tr.mn-grid-row > td[data-field="position"]::before { content: "Pos."; }
    tr.mn-grid-row > td[data-field="prio"]::before { content: "Priorität"; }
    tr.mn-grid-row > td[data-field="beschreibung"]::before { content: "Beschreibung"; }
    tr.mn-grid-row > td[data-field="ansprechpartner"]::before { content: "Ansprechpartner"; }
    tr.mn-grid-row > td[data-field="verantwortlich"]::before { content: "Verantwortlich"; }
    tr.mn-grid-row > td[data-field="erfasst_am"]::before { content: "Erfasst am"; }
    tr.mn-grid-row > td[data-field="abgabe_termin"]::before { content: "Abgabe"; }
    tr.mn-grid-row > td[data-field="erledigt_datum"]::before { content: "Erledigt am"; }
    tr.mn-grid-row > td[data-field="fortschritt"]::before { content: "Fortschritt"; }
    tr.mn-grid-row > td[data-field="status"]::before { content: "Status"; }
    tr.mn-grid-row > td[data-field="bemerkung"]::before { content: "Bemerkung"; }
    tr.mn-grid-row > td[data-field="aufgabe"]::before { display: none; }
    .mn-cell-editing::before { display: none !important; }

    /* Reihenfolge und Breite der Felder in der Karte */
    tr.mn-grid-row > td[data-field="aufgabe"] { order: 1; grid-column: 1 / -1; font-size: .98rem; background: var(--background, #f8fafc); }
    tr.mn-grid-row > td[data-field="aufgabe"] .mn-cell-aufgabe-text { font-weight: 600; }
    tr.mn-grid-row > td[data-field="status"] { order: 2; }
    tr.mn-grid-row > td[data-field="prio"] { order: 3; }
    tr.mn-grid-row > td[data-field="verantwortlich"] { order: 4; grid-column: 1 / -1; }
    tr.mn-grid-row > td[data-field="abgabe_termin"] { order: 5; }
    tr.mn-grid-row > td[data-field="fortschritt"] { order: 6; }
    tr.mn-grid-row > td[data-field="beschreibung"] { order: 7; grid-column: 1 / -1; }
    tr.mn-grid-row > td[data-field="bemerkung"] { order: 8; grid-column: 1 / -1; }
    tr.mn-grid-row > td[data-field="ansprechpartner"] { order: 9; grid-column: 1 / -1; }
    tr.mn-grid-row > td[data-field="position"] { order: 10; }
    tr.mn-grid-row > td[data-field="erfasst_am"] { order: 11; }
    tr.mn-grid-row > td[data-field="erledigt_datum"] { order: 12; }
    tr.mn-grid-row > td.mn-cell-actions { order: 20; grid-column: 1 / -1; display: flex; flex-direction: row; justify-content: flex-end; gap: 10px; border-bottom: none !important; }
    .mn-act-btn { width: 40px; height: 36px; font-size: .95rem; }
    .mn-cell-long-text, .mn-cell-aufgabe-text { -webkit-line-clamp: unset; max-height: none; }
    .mn-cell-editing { min-height: 64px !important; }

    /* Schnell-Hinzufügen */
    .mn-quickadd-row { display: block; margin: 0 0 8px; }
    .mn-quickadd-row td { display: block; padding: 4px 0; }
    .mn-quickadd-btn { width: 100%; justify-content: center; min-height: 40px; }
    .mn-quickadd-input { width: 100%; }
}

/* ── Maßnahmen-Popup am Handy ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Maßnahmen-Popup (Text/Personen) am Handy: oben verankert, damit die Tastatur es nicht verdeckt */
    .mn-cell-popup-overlay { align-items: flex-start; padding: 8px; }
    .mn-cell-popup { width: 100%; max-height: calc(100dvh - 16px); }
    .mn-cp-textarea { height: 38vh; min-height: 180px; font-size: 1rem; }
    .mn-cell-popup-hint { display: none; }
    .mn-cell-popup-foot { padding: 10px 14px 14px; }
    .mn-cell-popup-foot .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
    .mn-cell-popup-body.mn-cp-person { min-height: 280px; }
    .mn-cell-popup-sub { max-width: 80vw; }
}

/* ── Stundenabgleich ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* ── Stundenabgleich: PDF-Liste und Ergebnis untereinander ─────────────────── */
    .sa-root { height: auto; overflow: visible; }
    .sa-topbar { padding: 10px 12px 8px; }
    .sa-panel { overflow: visible; padding: 12px; }
    .sa-compare-layout { flex-direction: column; overflow: visible; gap: 14px; }
    .sa-left-panel { width: 100%; }
    .sa-right-panel { overflow: visible; }
    .sa-pdf-list { max-height: 260px; }
    .sa-filter-row > * { min-width: 0; }
    .sa-filter-row .sa-autocomplete-wrap, .sa-filter-row input, .sa-filter-row select { width: 100%; min-width: 0; flex: 1 1 100%; }
    .sa-autocomplete-dd { min-width: 0; width: 100%; max-width: 100%; }
    .sa-time-results { overflow-x: auto; }
}

/* ── Touch-Bedienung ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* ── Touch-Bedienung ────────────────────────────────────────────────────────
       Eingabefelder mit < 16 px Schrift lässt iOS beim Antippen hineinzoomen — die Seite „wandert“ danach ein paar
       Millimeter nach rechts. Daher überall (außer in dichten Tabellenzellen) mindestens 16 px. */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']), select, textarea):not(:is(td, th) *) { font-size: 16px !important; }
    .view .btn:not(.btn-sm):not(.btn-icon-sm):not(:is(td, th) *) { min-height: 40px; }
    button, [role='button'], .btn, label, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    /* Hover-Effekte (z. B. nur beim Überfahren sichtbare Aktionen) sind auf dem Handy nicht erreichbar → immer sichtbar */
    .qb-kat-actions { display: flex; }
}

/* ── Kapazitätsplanung, Umsatzplanung, Filterfelder ──────────────────────────────── */
@media (max-width: 768px) {
    /* ── Kapazitätsplanung ───────────────────────────────────────────────────── */
    .kap-nav-bar { padding: 8px 10px; gap: 8px; flex-direction: column; align-items: stretch; }
    .kap-week-nav { flex-wrap: wrap; gap: 6px; width: 100%; }
    .kap-expand-btns { flex-wrap: wrap; margin-left: 0; width: 100%; }
    .kap-plan-filters { flex-wrap: wrap; width: 100%; gap: 6px; }
    .kap-plan-filters > *, .kap-plan-filters .kap-select { min-width: 0; max-width: 100%; }
    .kap-search-box { width: 100%; }
    .kap-search-input { width: 100% !important; min-width: 0; }
    .kap-toolbar { padding: 10px; }
    .kap-toolbar > * { max-width: 100%; }
    .kap-tip { min-width: 0 !important; max-width: calc(100vw - 16px); }
    .kap-btn-einsatz { opacity: 1; }
    #kap-toast { left: 12px; right: 12px; bottom: 16px; }
    .kap-res-pick-hd, .kap-res-pick-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 70px; }
    /* Umsatzplanung */
    .usp-pl-select, .usp-toolbar select, .usp-toolbar input { min-width: 0 !important; max-width: 100%; }
    .usp-col-panel { min-width: 0 !important; width: 100%; max-height: 70vh; }
    .usp-col-panel-body { flex-wrap: wrap; }
    .usp2-col-section-kw { margin-left: 0; border-left: none; padding-left: 0; flex: 1 1 100%; }
    .usp-pot-info-popover { width: calc(100vw - 24px) !important; max-width: none; }
    .usp-sf-panel { max-width: calc(100vw - 16px); }
    /* Weitere Auswahl-/Filterfelder mit fester Mindestbreite */
    .vtm-search, .mn-search-input, .aw-search-wrap, .sa-autocomplete-wrap, .psbex-email-input { min-width: 0 !important; width: 100%; }
    .run-card-left { min-width: 0; }
    .ps-toolbar .ps-fav-sel { width: 100%; }
    .tfa-box { min-width: 0; }
    .bud-pop, .mn-kat-picker, .mn-ms-menu { min-width: 0; max-width: calc(100vw - 16px); }
}

/* ── Wiki, Benutzerverwaltung ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #wiki-root { flex-direction: column !important; height: auto !important; }
    #wiki-sidebar { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border); max-height: 42vh; }
    #wiki-content { overflow: visible !important; }
    #wiki-content-inner { padding: 18px 14px !important; max-width: 100% !important; }
    #wiki-content-inner :is(pre, table) { max-width: 100%; overflow-x: auto; display: block; }
    .settings-users-header { flex-wrap: wrap; gap: 10px; }
    .settings-users-header .btn { width: 100%; justify-content: center; }
    .eb-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .eb-tab { white-space: nowrap; padding: 8px 12px; flex: 0 0 auto; }
}

/* ── Tablet (769–1100 px): Seitenmenü bleibt stehen, der Inhalt ist schmal ───── */
@media (min-width: 769px) and (max-width: 1100px) {
    .psb-select-wrap { flex-wrap: wrap; gap: 8px; max-width: 100%; }
    .psb-select-wrap > select, #psb-pl-filter { min-width: 0 !important; max-width: 100% !important; }
    #psb-proj-sel-wrap { min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; }
    .psb-toolbar-row3 { flex-wrap: wrap; }
}