/* =========================================================
   Trustomat Dashboards – Mobile Optimierung
   Eingebunden in ALLE HTML-Dashboards.
   Greift ab ≤ 820px (Tablet hoch) und ≤ 520px (Phone).
   ========================================================= */

/* ── Globaler Schutz vor horizontalem Overflow ──
   Verhindert, dass irgendein Element die Seite breiter zieht
   und der Nutzer horizontal panen muss. */
html, body { max-width: 100vw; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

@media (max-width: 820px) {

  /* ── Allgemein ───────────────────────────────────────── */
  body { font-size: 14px; -webkit-text-size-adjust: 100%; }

  /* Touch-freundliche Buttons */
  button, .btn, input[type=button], input[type=submit] {
    min-height: 40px;
  }
  .btn.sm, button.sm { min-height: 32px; }

  /* Container – mehr Luft nach außen weg */
  .container, main, .main, .content-wrap {
    padding: 12px !important;
  }

  /* ── Topbar ──────────────────────────────────────────── */
  .topbar {
    padding: 0 12px !important;
    height: auto !important;
    min-height: 52px;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 6px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .topbar h1, .topbar-title { font-size: 15px !important; }
  .topbar .tag, .topbar .badge { font-size: 10px !important; padding: 2px 6px !important; }
  .topbar .user { font-size: 12px !important; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar button { padding: 6px 10px !important; font-size: 12px !important; }

  /* Buttons im Topbar: Icons sichtbar, Labels verstecken */
  .topbar .hide-mobile { display: none !important; }

  /* ── Tabellen horizontal scrollbar ──────────────────── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  table thead, table tbody, table tr { display: table; width: 100%; table-layout: auto; }
  table th, table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  /* ── Detail-Panel (Leads/Mitarbeiter) als Full-Screen ── */
  .detail-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    right: -100vw !important;
  }
  .detail-panel.open { right: 0 !important; }

  /* ── Formular-Zeilen vertikal stapeln ────────────────── */
  .row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .row .field,
  .row > div {
    min-width: 0 !important;
    width: 100% !important;
  }
  .field input, .field select, .field textarea {
    width: 100% !important;
    font-size: 14px !important; /* >= 14 verhindert iOS-Zoom */
  }

  /* ── KPI-Grid: volle Breite bei schmalen Screens ─────── */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .kpi { padding: 14px 12px !important; }
  .kpi-val { font-size: 20px !important; }
  .kpi-lbl { font-size: 10px !important; }

  /* ── Tabs: horizontal scrollen ───────────────────────── */
  .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 0 12px 4px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    flex-shrink: 0;
    font-size: 13px !important;
    padding: 10px 14px !important;
  }

  /* ── Filter-Bar (Leads) ─────────────────────────────── */
  .filter-bar, .filters, .toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .filter-bar > *, .filters > *, .toolbar > * {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
  }

  /* ── Bulk-Bar ───────────────────────────────────────── */
  .bulk-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  /* ── Modals ─────────────────────────────────────────── */
  .modal-box, .modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 18px !important;
  }

  /* ── Portal Launcher ────────────────────────────────── */
  .pl-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .pl-modal { padding: 0 4px; }
  .pl-title { font-size: 22px !important; }
  .pl-sub { font-size: 12px !important; margin-bottom: 18px !important; }
  .pl-card { padding: 18px !important; }

  /* ── World-Jump Button ──────────────────────────────── */
  .world-jump-btn {
    bottom: 16px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 48px;
    text-align: center;
  }
  .world-jump-btn .wj-label { display: none; }

  /* ── Login-Box ──────────────────────────────────────── */
  .login-box {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 24px 20px !important;
  }

  /* ── Cards ──────────────────────────────────────────── */
  .card {
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
  }
  .card h2 { font-size: 15px !important; }

  /* ── Academy Lesson-View ───────────────────────────── */
  .lesson-wrap, .lesson-grid {
    grid-template-columns: 1fr !important;
  }
  .sidebar, .lesson-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    height: auto !important;
  }

  /* ── Pagination ─────────────────────────────────────── */
  .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ── Sehr kleine Phones (≤ 520px) ──────────────────────── */
@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .filter-bar > *, .filters > *, .toolbar > * { flex: 1 1 100% !important; }
  .topbar .user { max-width: 90px; }
  .btn.sm, button.sm { padding: 4px 8px !important; font-size: 11px !important; }

  /* Scroll-Hinweis für Tabellen */
  table::before {
    content: '← wischen →';
    display: block;
    text-align: center;
    font-size: 10px;
    color: #9ca3af;
    padding: 4px 0;
    font-weight: 500;
  }
}

/* ── Landscape-Phone: Topbar kompakt ──────────────────── */
@media (max-width: 820px) and (orientation: landscape) and (max-height: 500px) {
  .topbar { min-height: 44px; }
  .topbar h1, .topbar-title { font-size: 14px !important; }
}

/* ══════════════════════════════════════════════════════════
   Mobile-Overrides: Detail-Panel innerhalb-Layout
   (Leads/Mitarbeiter Right-Side flying)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Detail-Panel auf Mobile als FullScreen mit eigener Scroll-Area */
  .detail-panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dp-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dp-tabs::-webkit-scrollbar { display: none; }
  .dp-tabs button, .dp-tabs > * {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Tab-Navigation in mitarbeiter.html (.tab-nav) */
  .tab-nav {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    scrollbar-width: none;
    margin: 0 -12px !important;
    padding: 0 12px !important;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav > * { flex-shrink: 0 !important; }

  /* Topbar-Aktionen rechts: Wrap-Verhalten fixen */
  .topbar > div { flex-wrap: wrap; gap: 6px; }
  /* #7028: Aktions-Gruppe bricht auf eigene volle Zeile um statt rechts abgeschnitten zu werden */
  .topbar > div:last-child { width: 100%; justify-content: flex-start; }
  .topbar > div:last-child > button,
  .topbar > div:last-child > .presence-wrap,
  .topbar > div:last-child > .ws-toggle { flex: 0 1 auto; }

  /* Suche in topbar nicht erzwungen — passt sich an */
  .search-wrap {
    min-width: 0 !important;
    width: 100%;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Tabellen-Wrapper falls vorhanden */
  .table-wrap, .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Lange Listen / Karten-Grids: 1 Spalte */
  .stats-grid, .grid-2, .grid-3, .three-col, .two-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Kommentar-/Notiz-Listen flexibler */
  .note-list, .activity-list { padding: 0 !important; }

  /* iOS Tap-Highlight auf transparent setzen, sieht professioneller aus */
  a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }

  /* Scrollable Zeilen-Container */
  [class*="scroll"], [class*="overflow"] {
    -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════════════════
   Sehr schmale Phones (≤ 380px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  body { font-size: 13px; }
  .topbar h1, .topbar-title { font-size: 13px !important; }
  .topbar button { padding: 5px 8px !important; font-size: 11px !important; }
  .pl-card { padding: 14px 12px !important; }
  .pl-card .pl-name { font-size: 15px !important; }
  .pl-card .pl-desc { font-size: 11px !important; }
  .modal-box, .modal-content {
    padding: 14px !important;
    border-radius: 12px !important;
  }
}