/* ATLAS Voice AI Studio — DEMO Mobile-Optimierung.
   Greift nur <= 768px. Wandelt Datentabellen in lesbare Karten, passt Heatmap ein,
   sorgt für Abstand zum schwebenden Tour-Button. Verändert NICHT die echte Studio-CSS. */

@media (max-width: 768px) {

  /* ===== Große Seitentitel: einpassen statt überlaufen (z.B. „Wissensdatenbank") ===== */
  main header h2, main h2.uppercase {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.1; overflow-wrap: anywhere; word-break: break-word;
  }

  /* ===== Datentabellen (Anrufe, Letzte Anrufe, Leads) als Karten ===== */
  /* Nur table.text-left — die Heatmap (border-collapse w-full, kein text-left) bleibt unberührt. */
  table.text-left { display: block; width: 100%; min-width: 0 !important; }
  table.text-left thead { display: none; }
  table.text-left tbody { display: block; }
  table.text-left tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px;
    padding: 14px 15px; margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
    background: rgba(255,255,255,.025);
  }
  table.text-left tbody tr:hover { background: rgba(0,245,212,.05); }
  table.text-left td {
    display: inline-flex; align-items: center;
    padding: 0 !important; border: none !important;
    font-size: 13px; line-height: 1.2; white-space: nowrap;
  }
  /* Checkbox-Spalte + leere Aktions-Spalte mobil ausblenden (Read-Only-Demo) */
  table.text-left td:has(input[type="checkbox"]),
  table.text-left td:empty { display: none; }
  /* Persona-Name prominent, volle Zeile als "Titel" der Karte */
  table.text-left td:nth-child(2) { order: -1; flex: 1 1 100%; font-size: 15px; font-weight: 700; }
  /* Zahlen/Nummern dezent */
  table.text-left td.font-mono, table.text-left td .font-mono { font-size: 12px; }

  /* ===== Heatmap: in den Viewport einpassen statt 600px-Scroll ===== */
  #kommandozentrale ~ * table[style*="min-width"], table[style*="min-width: 600px"] { min-width: 0 !important; }
  #heatmap-body td { padding: 1px !important; }
  #heatmap-body td > div { height: 12px !important; }
  /* Wochentag-Label-Spalte schmaler */
  #heatmap-body td:first-child { font-size: 9px !important; padding-right: 4px !important; }

  /* ===== Demo-Leiste scrollt mit (nicht fix) — verdeckt sonst beim Scrollen Karten-Köpfe ===== */
  #demo-chrome { position: absolute !important; top: 12px !important; }

  /* ===== Abstand: Seitentitel unter der Demo-Leiste + Platz für Tour-Button ===== */
  main { padding-top: 58px !important; padding-bottom: 88px !important; }
  #tour-restart { bottom: 14px !important; right: 14px !important; padding: 9px 13px !important; font-size: 12px !important; }
  #tour-restart span:not(.material-symbols-outlined) { font-size: 0; }
  #tour-restart span:not(.material-symbols-outlined)::after { content: "Tour"; font-size: 12px; }

  /* ===== Tabellen-Wrapper: Scroll-Schatten weg, wenn nicht mehr nötig ===== */
  .overflow-x-auto:has(table.text-left) { overflow-x: visible; }
}

/* Sehr schmale Geräte: Filter-Pills + Suche enger */
@media (max-width: 420px) {
  table.text-left tr { padding: 12px 13px; }
  table.text-left td:nth-child(2) { font-size: 14px; }
}