@import url("theme-alias.css?v=202608121300");
/* =============================================================
 * VANSS Mobile-Layer (iPhone/Handy) — 27.07.2026
 * ALLES hier greift NUR unter 820px Breite. Desktop bleibt unberuehrt.
 * Grundelemente (immer im DOM, aber auf Desktop inert):
 *   .mobile-nav-toggle  = Hamburger (display:none ausserhalb der Media Query)
 *   .mobile-nav-backdrop = Overlay hinter der Schublade (display:none ausserhalb)
 *
 * 12.08.2026: Der @import oben zieht css/theme-alias.css nach — dort werden die
 * in base.css fehlenden Variablen --bg-main/--bg-base/--bg-elevated definiert
 * (sonst bleiben Tool-Panels im hellen Theme dunkel = unlesbar). @import muss
 * die erste Regel der Datei sein, daher steht er vor diesem Kommentarblock.
 * ============================================================= */

/* Immer versteckt — werden nur in der Media Query sichtbar (Desktop = inert) */
.mobile-nav-toggle{display:none}
.mobile-nav-backdrop{display:none}

@media (max-width:820px){
  /* ---- Grundlayout: Sidebar wird zur Schublade ---- */
  .app{padding-left:0 !important}
  .sidebar{
    width:82vw;max-width:310px;
    transform:translateX(-100%);
    transition:transform .25s ease-out;
    z-index:300;box-shadow:8px 0 30px rgba(0,0,0,.45);
    -webkit-overflow-scrolling:touch;
  }
  body.nav-open .sidebar{transform:none}

  .mobile-nav-backdrop{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);
    backdrop-filter:blur(2px);z-index:290;opacity:0;pointer-events:none;
    transition:opacity .2s ease-out;
  }
  body.nav-open .mobile-nav-backdrop{opacity:1;pointer-events:auto}

  /* ---- Topbar + Hamburger ---- */
  .topbar{padding:12px 14px;gap:10px}
  .mobile-nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:0 0 40px;margin-right:2px;
    border:1px solid var(--border);border-radius:9px;
    background:var(--bg-card,rgba(255,255,255,.04));color:var(--text-primary,#e5e7eb);
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .mobile-nav-toggle:active{transform:scale(.94)}
  .topbar-title{font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-date{display:none}                 /* Platz sparen */
  .last-update{display:none}
  .topbar-right{gap:8px}

  /* ---- Inhalt ---- */
  .content{padding:14px 12px}

  /* Grids zusammenklappen */
  .kpi-strip{grid-template-columns:1fr 1fr !important;gap:10px;margin-bottom:16px}
  .panels{grid-template-columns:1fr !important}
  .field-row{grid-template-columns:1fr !important}
  .detail-info{grid-template-columns:1fr 1fr !important}
  .gp-grid{grid-template-columns:1fr !important}
  .geraete-picker-grid{grid-template-columns:1fr !important}

  /* Tabellen: horizontal scrollbar statt Zerreissen (generisch fuer alle Module) */
  .content table,.modal table,.vt-modal table{
    display:block;overflow-x:auto;white-space:nowrap;max-width:100%;
    -webkit-overflow-scrolling:touch;
  }

  /* Karten-/Zeilen-Grids, die auf Desktop mehrspaltig sind */
  .ticket-card{grid-template-columns:auto 1fr !important;gap:8px 10px}
  /* Listen-Views setzen per ID ein 4-Spalten-Raster (Zeile 795 tickets.js) -> hier zuruecknehmen */
  #view_tickets_meine .ticket-card,#view_tickets_alle .ticket-card{grid-template-columns:auto 1fr !important;padding-right:14px !important}
  /* rechter Block (Bearbeiter + Status/Prio/SLA): war fix 218px rechtsbuendig (inline) ->
     volle Breite, linksbuendig, als umbrechende Zeile unter den Hauptinhalt */
  .ticket-right{
    width:auto !important;grid-column:1 / -1 !important;align-self:stretch !important;
    flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important;
    justify-content:flex-start !important;white-space:normal !important;gap:6px !important;margin-top:2px;
  }
  .leistung-row{grid-template-columns:1fr;gap:6px}
  .zw-item{grid-template-columns:auto 1fr;gap:8px}

  /* ---- Ticketlisten (Meine/Alle): Kopfleiste + Filter handytauglich ---- */
  .panel-header{padding:12px 14px}
  .panel-body{max-height:none}                 /* am Handy die ganze Liste, kein Innen-Scroll */
  /* Bedienleiste rechts der Titelzeile -> volle Breite, umbrechend */
  #view_tickets_meine .panel-header,#view_tickets_alle .panel-header{align-items:stretch}
  #view_tickets_meine .panel-header > div:last-child,
  #view_tickets_alle .panel-header > div:last-child{width:100%;gap:8px}
  /* fixe Feldbreiten (inline) freigeben */
  #meineSortSelect,#alleSortSelect{flex:1 1 46% !important;width:auto !important;min-width:0}
  #meineFilterInput,#alleSearchInput,#alleFilterInput{flex:1 1 100% !important;width:100% !important;min-width:0}
  #alleStatusBtn{flex:1 1 46% !important}
  /* Filter-/Status-Dropdowns nicht ueber den Bildschirmrand */
  #meineFilterResults,#alleFilterResults,#alleStatusDropdown{
    width:min(92vw,320px) !important;max-width:92vw !important;left:0 !important;right:auto !important;
  }

  /* Suchfelder/Picker mit fixer Mindestbreite freigeben (inline-Styles ueberschreiben) */
  .kunden-search-wrap,.geraete-picker-search,.kunden-search-wrap *{max-width:100% !important}
  .geraete-picker-search{min-width:0 !important}
  [class*="search"]{min-width:0 !important}

  /* ---- 01.09.2026 (Matthias: "Vorgänge und Rechnungen passen nicht") ----
     Breite Tabellen: Nebenspalten am Handy ausblenden, Rest scrollt horizontal.
     ACHTUNG nth-child: bei Spaltenaenderungen in vorgang.js/rechnungen.js mitpflegen! */
  /* Vorgangsliste (10 Spalten: 1 Ampel · 2 Nr · 3 Projekt · 4 Kunde · 5 Status ·
     6 Projektleiter · 7 Angebote · 8 Einnahmen · 9 Gewinn · 10 Tickets)
     -> Projektleiter, Angebote, Gewinn ausblenden */
  #view_vorgaenge .kunden-table th:nth-child(6),#view_vorgaenge .kunden-table td:nth-child(6),
  #view_vorgaenge .kunden-table th:nth-child(7),#view_vorgaenge .kunden-table td:nth-child(7),
  #view_vorgaenge .kunden-table th:nth-child(9),#view_vorgaenge .kunden-table td:nth-child(9){display:none}
  /* Vorgangs-Toolbar: Suchfeld volle Breite statt min-width 240px inline */
  #vorgangSearch{flex:1 1 100% !important;min-width:0 !important}
  #vorgangJahr,#vorgangReloadBtn,#vorgangNeuBtn{flex:0 1 auto}
  /* Rechnungen: Reiterleiste umbrechen, Suchfeld volle Breite (inline width:220px) */
  #view_rechnungen .gp-tabs{flex-wrap:wrap;max-width:100% !important}
  #raSuche{width:100% !important;flex:1 1 100%}
  #raNeu{margin-left:0 !important}
  /* RG-Ausgang (7 Spalten: 1 RG-Nr · 2 Datum · 3 Firma · 4 Netto · 5 Brutto ·
     6 Status · 7 Aktionen) -> Netto ausblenden */
  .ra-tbl th:nth-child(4),.ra-tbl td:nth-child(4){display:none}
  /* ER-Eingang (10 Spalten: 1 Datum · 2 ERG-Nr · 3 Lieferant · 4 RG-Nr · 5 Faellig ·
     6 Netto · 7 Brutto · 8 Status · 9 Kostenstelle · 10 Aktionen)
     -> ERG-Nr, Netto, Kostenstelle ausblenden */
  .er-tbl th:nth-child(2),.er-tbl td:nth-child(2),
  .er-tbl th:nth-child(6),.er-tbl td:nth-child(6),
  .er-tbl th:nth-child(9),.er-tbl td:nth-child(9){display:none}
  /* ER-Erfassung: Lieferant-Feldgruppe hat inline width:330px -> volle Breite */
  #view_rechnungen .field-group[style*="width:330px"]{width:100% !important}
  /* Genereller Schutz: kein Eingabefeld breiter als der Bildschirm */
  .content .field-input{max-width:100%}

  /* Modals fast Vollbild */
  .modal{width:96% !important;max-width:96vw !important;max-height:90vh !important}
  .modal.mail-modal{width:96vw !important;height:88vh !important;min-width:0 !important;resize:none}
  .context-panel{width:100vw !important}
  .vt-modal{width:96vw !important;max-width:96vw !important}

  /* iOS: 16px verhindert Auto-Zoom beim Fokus auf Eingabefelder */
  input,select,textarea,.field-input,.edit-input,.vt-si{font-size:16px !important}

  /* groessere Touch-Ziele fuer kleine Icon-Buttons */
  .vt-ico,.gp-file-dl,.gp-file-del{min-width:30px;min-height:30px}

  /* Container-Panel/FAB nicht ueber den Rand */
  .context-fab{top:auto;bottom:80px}
}

/* Sehr schmal (iPhone SE / Mini, Portrait): KPI einspaltig, Detail einspaltig */
@media (max-width:430px){
  .kpi-strip{grid-template-columns:1fr !important}
  .detail-info{grid-template-columns:1fr !important}
  .topbar-title{font-size:15px}
}

/* ---- Installierte PWA (Home-Bildschirm, Vollbild): iPhone Safe-Area beachten.
       Greift NUR im standalone-Modus — der normale Browser bleibt unberuehrt. ---- */
@media (display-mode:standalone){
  .topbar{padding-top:calc(12px + env(safe-area-inset-top))}
  .sidebar{padding-top:calc(24px + env(safe-area-inset-top))}
  .content{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .context-panel{padding-top:env(safe-area-inset-top)}
}

/* =============================================================
 * MOBIL-DURCHGANG 2 — 04.09.2026
 * Befund Matthias: "viele Layouts nicht mobiltauglich. Bereich Firmen.
 * Eingangsrechnung, Ausgangsrechnungen. Pdf ansichten. Usw. Usw."
 * Zusammenspiel mit js/mobile_fix.js:
 *   body.mob-on          = Handybreite erkannt
 *   table[data-mobcard]  = Tabelle wird als Karten dargestellt (td[data-l] = Feldname)
 *   .mob-pdf             = Ersatzkarte für eingebettete PDFs
 *   body.mob-kd-open     = Firmen-Seitenpanel als Vollbild
 * ALLES nur unter 820px — Desktop bleibt unberührt.
 * ============================================================= */
@media (max-width:820px){

  /* ---- Grundschutz: nichts ist breiter als der Bildschirm ---- */
  html,body{max-width:100%;overflow-x:hidden}
  .content,.content *{max-width:100%}
  .content img,.content canvas,.content video,.content svg{height:auto}
  .content pre{white-space:pre-wrap;word-break:break-word}

  /* ---- B. Tabellen als Karten (Firmen, RG-Ausgang, RG-Eingang, …) ---- */
  table[data-mobcard]{display:block!important;overflow:visible!important;white-space:normal!important;border-collapse:separate;border-spacing:0}
  table[data-mobcard] thead{display:none!important}
  table[data-mobcard] tbody{display:block!important}
  table[data-mobcard] > tbody > tr{
    display:block!important;background:var(--bg-card);border:1px solid var(--border);
    border-radius:12px;padding:10px 12px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.12);
  }
  table[data-mobcard] > tbody > tr.selected{border-color:var(--accent-blue,#3b82f6)}
  table[data-mobcard] > tbody > tr > td{
    display:flex!important;justify-content:space-between;align-items:baseline;gap:12px;
    padding:4px 0!important;border:0!important;white-space:normal!important;
    font-size:13px;text-align:left!important;
  }
  table[data-mobcard] > tbody > tr > td:empty{display:none!important}
  table[data-mobcard] > tbody > tr > td::before{
    content:attr(data-l);flex:0 0 42%;color:var(--text-muted);font-size:11px;
    text-transform:uppercase;letter-spacing:.3px;font-weight:600;
  }
  table[data-mobcard] > tbody > tr > td[data-l=""]::before{display:none}
  /* erste Zelle = Kopfzeile der Karte */
  table[data-mobcard] > tbody > tr > td:first-child{
    font-weight:700;font-size:14px;padding-bottom:6px!important;margin-bottom:4px;
    border-bottom:1px solid var(--border)!important;
  }
  table[data-mobcard] > tbody > tr > td:first-child::before{font-size:10px;opacity:.75}
  /* Zeilen mit colspan (Ladehinweis/„keine Treffer") bleiben schlicht */
  table[data-mobcard] > tbody > tr[data-mobfull]{background:transparent;border:0;box-shadow:none;padding:12px 0}
  table[data-mobcard] > tbody > tr[data-mobfull] > td{display:block!important;text-align:center!important}
  table[data-mobcard] > tbody > tr[data-mobfull] > td::before{display:none}
  /* Aktions-Spalten: Knöpfe nebeneinander statt gequetscht */
  table[data-mobcard] > tbody > tr > td .btn,
  table[data-mobcard] > tbody > tr > td button{flex:0 1 auto}
  /* im Kartenmodus gibt es keine „zu breite" Tabelle mehr -> Spaltenverstecken aufheben */
  .ra-tbl[data-mobcard] th,.ra-tbl[data-mobcard] td,
  .er-tbl[data-mobcard] th,.er-tbl[data-mobcard] td,
  #view_vorgaenge .kunden-table[data-mobcard] th,#view_vorgaenge .kunden-table[data-mobcard] td{display:flex!important}
  .ra-tbl[data-mobcard] thead,.er-tbl[data-mobcard] thead,
  #view_vorgaenge .kunden-table[data-mobcard] thead{display:none!important}

  /* ---- Firmen: Liste + Seitenpanel ---- */
  .kunden-wrapper{display:block!important;height:auto!important;border:0!important;background:transparent!important;border-radius:0!important;overflow:visible!important}
  .kunden-main{display:block!important}
  .kunden-table-wrap{overflow:visible!important}
  .kunden-toolbar{flex-wrap:wrap;gap:8px;padding:0 0 10px!important}
  .kunden-search-wrap{flex:1 1 100%!important;max-width:100%!important}
  .kunden-stats{flex:1 1 100%}
  /* geschlossenes Panel blaeht sonst die Seite auf (width:0 + Inhalt = riesige Hoehe),
     weil der Wrapper am Handy nicht mehr flex/overflow:hidden ist */
  .kunden-sidepanel{background:transparent}
  .kunden-sidepanel:not(.open){display:none!important}
  .kunden-sidepanel.open{
    position:fixed!important;inset:0!important;width:100vw!important;max-width:100vw!important;
    z-index:400;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--bg-main,var(--bg-card))!important;border-left:0!important;
    padding-bottom:24px;
  }
  body.mob-kd-open{overflow:hidden}
  .mob-kd-bar{position:sticky;top:0;z-index:5;background:var(--bg-card);border-bottom:1px solid var(--border);padding:8px 12px}
  .mob-kd-bar button{
    border:1px solid var(--border);background:var(--bg-elevated,transparent);color:var(--text-primary);
    border-radius:9px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  }

  /* ---- Rechnungen: Ein-/Ausgang ---- */
  #view_rechnungen .gp-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #view_rechnungen .gp-tab{white-space:nowrap;flex:none}
  #view_rechnungen .field-row,#view_rechnungen .field-group{width:100%!important;min-width:0!important}
  /* ER-Modal: Beleg oben (feste Höhe), Formular darunter — beides scrollbar */
  #erModalOverlay{padding:0!important}
  #erModalOverlay > div{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;border:0!important}
  #erModalOverlay > div > div:last-child{flex-direction:column!important;overflow-y:auto}
  #erBelegPane{flex:0 0 auto!important;width:100%!important;border-right:0!important;border-bottom:1px solid var(--border);min-height:0!important;padding:8px}
  #erModalRight{padding:14px 12px!important}

  /* ---- C. PDF-Ersatzkarte ---- */
  .mob-pdf{
    width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
    padding:18px 14px;text-align:center;
  }
  .mob-pdf-ico{font-size:34px;line-height:1}
  .mob-pdf-t{font-weight:700;font-size:14px;margin-top:6px}
  .mob-pdf-s{font-size:12px;color:var(--text-muted);margin:4px 0 12px}
  .mob-pdf-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .mob-pdf-btns .btn{flex:1 1 46%;min-width:130px;justify-content:center}
  .mob-pdf-link{margin-top:10px;font-size:11.5px;color:var(--accent-blue,#60a5fa);cursor:pointer;text-decoration:underline}

  /* ---- Generische Overlays/Modale (Vorgang, Verträge, Angebot, Timeline, …) ---- */
  .modal,.vt-modal,#tnUeb .tn-box{width:96vw!important;max-width:96vw!important}
  .modal-body,.vt-modal-body{max-height:none!important}
  /* Bildschirmfüllende Editoren/Vorschauen */
  [id$="Overlay"] > div:not(.mob-pdf){max-width:100vw!important}

  /* ---- Toolbars/Filterleisten generell umbrechen ---- */
  .kunden-toolbar,.panel-header,.gp-bar,.vt-bar,.auswertung-toolbar,.auswertung-filters{flex-wrap:wrap!important}
  .auswertung-filters > div{flex:1 1 46%;min-width:0}
  select.field-input,input.field-input{min-width:0!important}

  /* ---- Detail-/Formularraster einspaltig ---- */
  .gp-form-grid,.vt-form-grid,.er-form-grid{grid-template-columns:1fr!important}
}

/* Sehr schmal: Kartenbeschriftung über den Wert stellen */
@media (max-width:400px){
  table[data-mobcard] > tbody > tr > td{flex-direction:column;gap:1px}
  table[data-mobcard] > tbody > tr > td::before{flex:none}
}

/* =============================================================
 * MOBIL-DURCHGANG 3 — 08.10.2026
 * Matthias: "prüfe noch mal alle layouts, modale usw. auf tauglichkeit fürs handy"
 * Gemessen in 390 px Breite, eingeloggt, alle Navigationsziele + Hauptmodale.
 * Zusammenspiel mit js/mobile_fix2.js:
 *   body.mob-modal            = Modal/Vollbildpanel offen -> schwebende Knöpfe weg
 *   #view_whatsapp.wae-detail = Verlauf statt Chatliste
 * ALLES nur unter 820px — Desktop bleibt unberührt.
 * ============================================================= */
@media (max-width:820px){
  /* ---- Kopfzeile: Glocke und Aktualisieren lagen rechts außerhalb des Bildschirms ---- */
  .topbar-right{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:6px}
  .topbar-right > *{flex-shrink:0}
  .topbar-right > #tsWrap{flex:1 1 auto;flex-shrink:1;min-width:0;width:auto!important;max-width:none!important}
  #tsWrap input{width:100%!important;min-width:0!important}
  #pvBtn{display:none!important}                                   /* Privatmodus: nur für Vorführungen am PC */
  .topbar-right > button.refresh-btn:last-child > span{display:none} /* Aktualisieren nur als Symbol */
  .topbar-right > button.refresh-btn:last-child{padding:8px 10px}

  /* ---- Reiter-/Segmentleisten: wischen statt abschneiden, ohne grauen Balken ---- */
  .gp-tabs,.gf-seg,#akqTabs{overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gp-tabs::-webkit-scrollbar,.gf-seg::-webkit-scrollbar,#akqTabs::-webkit-scrollbar{display:none}
  .gp-tabs > *,.gf-seg > *,#akqTabs > *{flex:0 0 auto}

  /* ---- Einzelbefunde ---- */
  .akq-zwei > *{min-width:0}
  .mon-head,.mon-head-r{flex-wrap:wrap;row-gap:6px}
  #ticketDetailContent .mail-action-btn{flex:0 0 auto}

  /* ---- Schwebende Knöpfe nicht über Modal-Knöpfen ---- */
  body.mob-modal #gchatFab,body.mob-modal #sqHandle{display:none!important}

  /* ---- Geräte-Seitenpanel als Vollbild (wie Firmen seit Durchgang 2) ---- */
  .geraete-sidepanel:not(.open){display:none!important}
  .geraete-sidepanel.open{
    position:fixed!important;inset:0!important;width:100vw!important;max-width:100vw!important;
    z-index:400;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--bg-main,var(--bg-card))!important;border-left:0!important;padding-bottom:24px;
  }

  /* ---- WhatsApp: Liste ODER Verlauf; Verlauf mit festem Rahmen, Eingabe bleibt unten ---- */
  #view_whatsapp:not(.wae-detail) #waeVerlaufPanel{display:none!important}
  #view_whatsapp.wae-detail .wae-wrap > .panel:first-child{display:none!important}
  #view_whatsapp.wae-detail #waeVerlaufPanel{display:flex!important;flex-direction:column;height:calc(100dvh - 96px);min-height:0}
  #view_whatsapp #waeMsgs{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mob-wae-back{padding:8px 12px;border-bottom:1px solid var(--border);flex:0 0 auto}
  .mob-wae-back button{
    border:1px solid var(--border);background:var(--bg-elevated,transparent);color:var(--text-primary);
    border-radius:9px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  }

  /* ---- Formulare in Modalen: Felder dürfen schrumpfen ---- */
  .modal input,.modal select,.modal textarea{min-width:0;max-width:100%}
}
@media (display-mode:standalone) and (max-width:820px){
  #view_whatsapp.wae-detail #waeVerlaufPanel{height:calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}

/* Durchgang 3b: Stempel-Chip kommt nachträglich in die Kopfzeile und drückte die Suche auf 0 px.
   Suche bekommt eine eigene Zeile, der Chip zeigt nur Punkt + "Zeit". Team-Chat-Knopf lag im
   WhatsApp-Verlauf über "Senden". */
@media (max-width:820px){
  .topbar{align-items:flex-start}
  .topbar-right{flex-wrap:wrap;row-gap:8px}
  .topbar-right > #tsWrap{order:20;flex:1 1 100%!important}
  #zeitChip{padding:5px 9px!important}
  #zeitChipTxt{display:none}
  #zeitChip::after{content:"Zeit"}
  body:has(#view_whatsapp.wae-detail.active) #gchatFab,
  body:has(#view_whatsapp.wae-detail.active) #sqHandle{display:none!important}
}

/* Durchgang 3c: Kommunikations-Kopf (Notiz / Mailgateway / Mail an Kunden) lief rechts aus dem Bild;
   Kontext-Griff auch bei offenem Modal ausblenden. */
@media (max-width:820px){
  .comm-actions{flex-wrap:wrap;row-gap:6px}
  body.mob-modal #contextFab{display:none!important}
  #sqHandle,#contextFab{opacity:.85}
}

/* Durchgang 3d: Einstellungen-Reiter hatten inline max-width:fit-content und ragten aus dem Bild. */
@media (max-width:820px){
  #view_einstellungen > .gp-tabs{max-width:calc(100% - 24px)!important;margin:12px!important}
}