/* ============================================================================
   Leadvault am Handy (30.09.2026)

   Philipp: „viel zu unübersichtlich und es bewegt sich auch hin und her“.
   Ursachen (gemessen bei 390 px):
   - Gitter drückten Karten über den Rand (Dashboard 407 px, Auswertung 571 px,
     Sales-Controlling 1.215 px) → die ganze Seite ließ sich seitlich schieben.
   - Kontakt- und Pipeline-Tabellen mit 11–12 Spalten, nur seitlich scrollbar.
   - Menü-Knopf oben links erschien nur, wenn beim Start eine bestimmte
     Funktion lief.
   Hier gesammelt, damit styles.css nicht weiter wächst. Gilt nur unter 769 px.
   ========================================================================== */

@media (max-width: 768px) {
  html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* ── Rahmen: nichts darf die Seite seitlich verschieben ─────────────────── */
  .content { overflow-x: hidden; overscroll-behavior-x: none; }
  .page { max-width: 100%; }
  .dgrid > *, .tgrid > *, .sgrid > *, .kgrid > *, #anC > div > *, #moOv > div > * { min-width: 0; }

  /* Menü-Knopf immer zeigen (stand vorher inline auf display:none) */
  #mobileMenuBtn { display: flex !important; }
  /* Kopfzeile: Datum weglassen, Platz für Titel und „+ Neuer Lead“ */
  #dateD { display: none !important; }
  #mobileMenuBtn { color: var(--white); }

  /* ── Kontakte und Pipeline-Listen: Zeilen werden Karten ─────────────────── */
  .tw { overflow-x: visible; border: 0; background: none; }
  .tw table { display: block; width: 100%; min-width: 0; border: 0; }
  .tw thead { display: none; }
  .tw tbody { display: flex; flex-direction: column; gap: 8px; }
  .tw tr.lead-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 12px 14px; border-radius: 12px;
    background: var(--black3); border: 1px solid var(--black4);
  }
  .tw tr.lead-row.selected { border-color: rgba(249, 196, 50, .6); }
  .tw tr.lead-row > td {
    display: block; padding: 0 !important; border: 0 !important;
    background: none !important; text-align: left !important; min-width: 0;
    font-size: 12px; color: var(--gray);
  }
  .tw tr.lead-row:nth-child(even) td { background: none !important; }
  .tw tr.lead-row > td.m-leer { display: none !important; }   /* nur „-“ drin (js/mobil.js) */
  .tw tr.lead-row > td { max-width: none !important; white-space: normal !important; overflow: visible !important; }

  /* Kontakte: 1 #, 2 Lead-Nr, 3 Name, 4 Firma, 5 Pipeline, 6 Dealphase,
     7 Objekte, 8 RP, 9 Telefon, 10 Follow-up, 11 Kalender */
  #tblC tr.lead-row > td:nth-child(1), #tblC tr.lead-row > td:nth-child(2),
  #tblC tr.lead-row > td:nth-child(7), #tblC tr.lead-row > td:nth-child(11) { display: none; }
  #tblC tr.lead-row > td:nth-child(3) { order: 1; flex: 1 1 55%; font-size: 15px; font-weight: 600; color: var(--white); }
  #tblC tr.lead-row > td:nth-child(10) { order: 2; flex: 0 0 auto; margin-left: auto; }
  #tblC tr.lead-row > td:nth-child(4) { order: 3; flex: 1 1 100%; font-size: 13px; }
  #tblC tr.lead-row > td:nth-child(5) { order: 4; }
  #tblC tr.lead-row > td:nth-child(6) { order: 5; }
  #tblC tr.lead-row > td:nth-child(8) { order: 6; }
  #tblC tr.lead-row > td:nth-child(9) { order: 7; margin-left: auto; }

  /* Pipelines: 1 #, 2 Lead-Nr, 3 Name, 4 Firma, 5 Dealphase, 6 Objekte, 7 RP,
     8 Telefon, 9 Follow-up, 10 Uhrzeit, 11 Kalender, 12 Aktion (nur Eingang) */
  [id^="page-pl-"] tr.lead-row > td:nth-child(1), [id^="page-pl-"] tr.lead-row > td:nth-child(2),
  [id^="page-pl-"] tr.lead-row > td:nth-child(6), [id^="page-pl-"] tr.lead-row > td:nth-child(11) { display: none; }
  [id^="page-pl-"] tr.lead-row > td:nth-child(3) { order: 1; flex: 1 1 55%; font-size: 15px; font-weight: 600; color: var(--white); }
  [id^="page-pl-"] tr.lead-row > td:nth-child(9) { order: 2; flex: 0 0 auto; margin-left: auto; }
  [id^="page-pl-"] tr.lead-row > td:nth-child(10) { order: 3; flex: 0 0 auto; }
  [id^="page-pl-"] tr.lead-row > td:nth-child(4) { order: 4; flex: 1 1 100%; font-size: 13px; }
  [id^="page-pl-"] tr.lead-row > td:nth-child(5) { order: 5; }
  [id^="page-pl-"] tr.lead-row > td:nth-child(7) { order: 6; }
  [id^="page-pl-"] tr.lead-row > td:nth-child(8) { order: 7; margin-left: auto; }
  [id^="page-pl-"] tr.lead-row > td:nth-child(12) { order: 8; flex: 1 1 100%; }

  /* Werkzeugleisten umbrechen statt seitlich scrollen */
  .tc { flex-wrap: wrap !important; overflow-x: visible !important; }
  .tc .sbox { flex: 1 1 100%; min-width: 0; }
  .tc .fi { flex: 1 1 40%; width: auto !important; }
  .suchzeile > * { flex-shrink: 0; }
  #filterMenuDrop { position: fixed !important; left: 12px !important; right: 12px !important; top: 110px !important; min-width: 0 !important; max-height: 70vh; overflow-y: auto; }
  #filterMenuDrop > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #pgB { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }

  /* ── Sales-Controlling: ein Tag statt fünf nebeneinander ─────────────────── */
  .tgrid { grid-template-columns: 1fr !important; }
  .tgrid .dc { padding: 12px !important; }
  .tgrid .tt { width: 100%; min-width: 0; }
  .tgrid .tt th, .tgrid .tt td { padding: 8px 6px; }
  .tgrid .ti { width: 100%; min-width: 44px; font-size: 16px; }   /* 16 px: iOS zoomt sonst */
  /* Spalten: 1 Kennzahl, 2–6 Mo–Fr, 7 Gesamt, 8 Quote. Nur der gewählte Tag bleibt. */
  .tgrid[data-tag="1"] .tt tr > :is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6)),
  .tgrid[data-tag="2"] .tt tr > :is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6)),
  .tgrid[data-tag="3"] .tt tr > :is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6)),
  .tgrid[data-tag="4"] .tt tr > :is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(6)),
  .tgrid[data-tag="5"] .tt tr > :is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) { display: none; }
  .trk-tage { display: flex !important; }
  .tgrid .dc > div:first-child { flex-wrap: wrap; gap: 8px; }
  #moOv > div { grid-template-columns: 1fr !important; }
  #moOv .tt, #einwandTbl table { width: 100%; }
  #einwandTbl { overflow-x: auto; }
  .trc { flex-wrap: wrap; gap: 8px; }

  /* ── Auswertung: Spalten untereinander ──────────────────────────────────── */
  #anC > div { grid-template-columns: 1fr !important; }
  #anC .tt { width: 100%; }
  .anc { gap: 6px; }
  .anc input[type="date"] { width: 120px !important; }

  /* ── Eingabefelder: 16 px, sonst zoomt das iPhone beim Antippen und die Seite
     verschiebt sich (eine Hauptursache für „bewegt sich hin und her“) ───────── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }

  /* ── Lead-Fenster ───────────────────────────────────────────────────────── */
  /* Nur senkrecht scrollen. .pb hat overflow-y:auto — dann ist overflow-x
     automatisch auch „auto“, und Safari lässt schon bei einem halben Pixel
     Überstand seitlich wippen (Philipp, 30.09.: „wackelt immer noch“). */
  .lpanel { left: 0; right: 0; width: 100% !important; overflow: hidden; height: 100vh; height: 100dvh; }
  .lpanel .pb { overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .lpanel .pb > * { max-width: 100%; }
  /* Scrollen „hing“ (Philipp, 30.09.): Hinter dem offenen Lead lag die scrollbare
     Liste. Am Ende eines Wischers übernahm das iPhone die Liste dahinter, das
     Lead-Fenster reagierte erst beim nächsten Wischen. Liste sperren, solange
     ein Lead offen ist. touch-action bewusst NICHT gesetzt — bricht auf iOS den
     Scroll-Schwung ab. */
  #mc.panel-open { overflow: hidden !important; }
  .app, #app, .layout { height: 100vh; height: 100dvh; }
  .fgrid { grid-template-columns: 1fr 1fr !important; }
  .fgrid > * { min-width: 0; }
  .fgrid .fi, .fgrid .fsel, .fgrid .fta { width: 100%; min-width: 0; }
  .cgr > * { min-width: 0; }
  .lpanel .fsec { padding: 14px; }

  /* ── Dashboard ──────────────────────────────────────────────────────────── */
  .dc { padding: 14px; }
}

/* Tagesauswahl im Sales-Controlling: am Laptop nie zeigen */
.trk-tage { display: none; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.trk-tage button {
  flex: 1 1 0; min-width: 0; padding: 8px 4px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 12px; background: var(--black3); color: var(--gray);
  border: 1px solid var(--black5);
}
.trk-tage button.aktiv { background: var(--gold); color: #04071e; border-color: var(--gold); font-weight: 600; }