/* ═══════════════════════════════════════════════════════════════════
   SYNTERA NEWSLETTER — MOBILE OVERRIDES
   ──────────────────────────────────────────────────────────────────
   Alles in diesem File ist in @media-Queries gewrappt (max-width: 900px
   für Phone/Small-Tablet). Desktop-Layout bleibt unangetastet.
   
   Kern-Idee: Am Handy wird aus dem Studio-3-Spalten-Grid eine einzige
   Canvas-Fläche + zwei Bottom-Sheets (Bibliothek + Inspector), die via
   untere Tab-Leiste aufgerufen werden. Text-Toolbar wird dünner und
   scrollt horizontal statt zu wrappen.
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. Grundlegende Mobile-Optimierungen (Admin-UI allgemein) ──── */
@media (max-width: 900px) {
  /* Safe-Area-Insets: Respektiere Notch/Home-Indicator bei iOS */
  body { padding-bottom: env(safe-area-inset-bottom); }

  /* KRITISCH: Horizontales Scrollen auf root-Ebene verhindern.
     Einzelne lange Elemente (Kampagnen-Namen, Subscriber-Emails, lange URLs)
     sollen nicht das gesamte Layout verbreitern. Stattdessen werden sie
     per ellipsis oder wrap innerhalb ihrer Container zurückgehalten. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* Admin-Shell + alle Top-Level-Container: begrenzen auf viewport-Breite */
  .admin-shell, .admin-main, .admin-body, .admin-topbar {
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Flex-Kinder brauchen explizit min-width:0 damit sie schrumpfen können.
     Ohne das expandieren sie auf den Content-Inhalt und brechen Flex-Parents. */
  .admin-body > *,
  .panel > *,
  .stats-grid > * {
    min-width: 0;
  }
  /* Alle Inhalte die Text enthalten und lang werden können:
     word-break damit lange Mail-Adressen, URLs, Token nicht das Layout dehnen */
  .admin-body {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Mono-formatierte Inhalte (URLs, Tokens, Emails, Slugs) sind typische
     Overflow-Kandidaten — die sind per Default nicht umbruchfähig (keine
     Spaces im Text). Hier explizit break-all erlauben, aber nur in
     Content-Panels, nicht in Inputs oder Buttons. */
  .admin-body .mono,
  .admin-body code,
  .admin-body pre,
  .admin-body .url,
  .admin-body a[href^="http"]:not(.btn):not(.pill) {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  /* Stats-Grid Mobile: mindestens 2 Spalten bei sehr schmalen Screens statt
     auto-fit auf 140px (was in sehr kleinen PWAs ggf. nur eine Spalte zeigt
     oder überläuft bei großen Zahlen). */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .stat-card {
    min-width: 0;
    padding: 14px 16px !important;
  }
  .stat-value {
    font-size: 1.4rem !important;
    word-break: break-all; /* lange Zahlen wie "1.234.567" schrumpfen lassen */
  }

  /* Panel-Titel dürfen umbrechen, wenn nötig */
  .panel-title, .panel-head h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* Panel-Head: auf Mobile soll der Titel + Action-Link untereinander,
     nicht horizontal brechen (sehr lange Titel überlappen sonst den Link). */
  .panel-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Admin-Body: weniger Padding, mehr Platz für Content */
  .admin-body { padding: 16px 14px 80px; }

  /* Tables mobil: horizontal scrollen statt squeezen */
  .admin-body table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

  /* Touch-Targets: min. 44px Höhe für Buttons (Apple HIG) */
  .btn { min-height: 40px; padding: 10px 14px; }
  .btn-sm { min-height: 34px; padding: 7px 10px; font-size: 12.5px; }

  /* Inputs: grösser damit iOS nicht reinzoomt (16px-Minimum) */
  .input, .textarea, .select { font-size: 16px; }

  /* Modal: volle Breite am Handy, weniger Padding */
  .modal { padding: 18px 16px; max-height: 92vh; width: 100%; margin: 2vh 0; border-radius: 6px; }
  .modal h3 { font-size: 1.15rem; }
  /* Modal-Backdrop im PWA: oben genug Platz damit der Close-Button und Titel
     NICHT unter der iOS-Zeitanzeige landen. padding-top kompensiert
     Statusbar-Höhe im Standalone-Modus. */
  .modal-backdrop {
    padding: calc(4vw + env(safe-area-inset-top)) 4vw calc(4vw + env(safe-area-inset-bottom));
    align-items: flex-start;
    overflow-y: auto;
  }
}


/* ─── 2. STUDIO-EDITOR: vollbild-Canvas + Bottom-Sheets ────────── */
@media (max-width: 900px) {
  /* Grid aufbrechen: Bibliothek + Inspector werden zu Overlays.
     Canvas füllt die gesamte Bühne. Min-Height runter, damit die
     Mobile-Tab-Leiste unten Platz hat. */
  .studio {
    display: block;
    height: auto;
    min-height: 0;
    margin: 0 -14px 0; /* negative Margins: Canvas soll bis zum Rand gehen */
    padding: 0;
  }

  /* Linke Schiene = Bibliothek-Drawer: fliegt von links rein */
  .studio-left {
    position: fixed;
    inset: 0 auto 0 0;     /* top:0; bottom:0; left:0; right:auto */
    width: 86vw;
    max-width: 380px;
    z-index: 2020;
    transform: translateX(-105%);  /* 105% damit auch Box-Shadow ausser Sichtweite ist */
    transition: transform .25s cubic-bezier(.2,.9,.3,1);
    box-shadow: 4px 0 40px rgba(0,0,0,.7);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;  /* iOS Momentum-Scroll */
    overscroll-behavior: contain;       /* Scroll-Bleed zum Background verhindern */
    padding: 14px 14px calc(80px + env(safe-area-inset-bottom));
    border-right: 1px solid var(--line-cool);
    border-radius: 0;
  }
  .studio-left.sr-mobile-open { transform: translateX(0); }

  /* Rechte Schiene = Inspector-Drawer: fliegt von rechts rein */
  .studio-right {
    position: fixed;
    inset: 0 0 0 auto;     /* top:0; bottom:0; right:0; left:auto */
    width: 92vw;
    max-width: 420px;
    z-index: 2020;
    transform: translateX(105%);
    transition: transform .25s cubic-bezier(.2,.9,.3,1);
    box-shadow: -4px 0 40px rgba(0,0,0,.7);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 14px calc(80px + env(safe-area-inset-bottom));
    border-left: 1px solid var(--line-cool);
  }
  .studio-right.sr-mobile-open { transform: translateX(0); }

  /* Canvas = einzige sichtbare Bühne; Höhe passt sich an Viewport an */
  .studio-stage {
    height: calc(100vh - 56px - 56px - env(safe-area-inset-bottom));
    /* Header (ca. 56px) + Mobile-Tabbar (ca. 56px) + Safe-Area */
    min-height: 440px;
    padding: 8px;
    border-radius: 0;
  }

  /* Preview iframe: volle Breite */
  .studio-stage-frame-wrap {
    max-width: 100% !important;
    margin: 0 auto;
  }

  /* Stage-Head: Actions kompakter */
  .studio-stage-head {
    padding: 8px 10px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .studio-stage-hint { display: none; }

  /* Backdrop: halbtransparenter Overlay wenn ein Drawer offen ist */
  .sr-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 2010;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .sr-mobile-backdrop.sr-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Body-Scroll sperren wenn Drawer offen (sonst scrollt der Hintergrund mit).
     WICHTIG: touch-action NICHT auf body setzen, sonst wird auch das
     Scrollen IM Drawer blockiert. Nur overflow:hidden reicht für den
     Scroll-Lock, ohne die Touch-Events zu killen. */
  body.sr-mobile-drawer-open {
    overflow: hidden;
  }
}


/* ─── Z-INDEX-HIERARCHIE am Handy ─────────────────────────────────
   Modals MÜSSEN über Drawers und Tabbar liegen, sonst sieht der User
   sie nicht wenn ein Drawer offen ist (HTML-Editor, Bildpicker, etc).
   
   Stack (von unten nach oben):
     sr-mobile-backdrop:  2010
     .sr-mobile-drawer-like (Drawers):  2020
     .sr-tb (Text-Toolbar):  2025
     .sr-mobile-tabbar:  2030
     .modal-backdrop (alle Modals):  2100  ← höchste Ebene
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .modal-backdrop {
    z-index: 2100 !important;
  }
  /* Modal selbst darf bis an den Rand gehen am Handy */
  .modal-backdrop .modal {
    max-width: 100% !important;
    width: calc(100% - 16px) !important;
    margin: 0 8px !important;
    max-height: calc(100vh - 60px) !important;
  }
  /* Wenn ein Modal offen ist, Tabbar verstecken damit sie nicht stört.
     Wir nutzen eine Body-Klasse (wird vom JS gesetzt) statt :has()
     weil Browser-Support für :has() auf älteren Mobile-Browsern lückig ist. */
  body.sr-modal-open .sr-mobile-tabbar {
    display: none;
  }
  /* Close-Button im Modal: touch-tauglich groß */
  .modal-backdrop .modal-close {
    min-width: 44px;
    min-height: 44px;
    font-size: 22px;
  }
}


/* ─── 3. MOBILE-TABBAR: unten, zeigt Drawer-Switcher ───────────── */
/* Container wird im JS dynamisch erzeugt. Hier nur das Styling. */
.sr-mobile-tabbar { display: none; } /* Desktop: unsichtbar */

@media (max-width: 900px) {
  .sr-mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2030; /* über Drawers, damit Close-Button klickbar bleibt */
    background: #0a0c12;
    border-top: 1px solid var(--line-cool);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    gap: 6px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.4);
  }
  .sr-mobile-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 48px;
    padding: 4px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted);
    font-family: Inter, sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    transition: color .15s, background .15s;
  }
  .sr-mobile-tab-btn .sr-tab-icon {
    font-size: 20px;
    line-height: 1;
  }
  .sr-mobile-tab-btn:active,
  .sr-mobile-tab-btn.sr-active {
    color: var(--gold, #c9a961);
    background: rgba(201,169,97,.08);
  }
  .sr-mobile-tab-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
  }
  /* Badge auf "Inspector"-Tab wenn Block selektiert */
  .sr-mobile-tab-btn .sr-tab-badge {
    display: none;
    position: absolute;
    top: 6px;
    right: calc(50% - 20px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold, #c9a961);
  }
  .sr-mobile-tab-btn.sr-has-selection .sr-tab-badge { display: block; }
}


/* ─── 4. TEXT-TOOLBAR (.sr-tb) am Handy: schmaler, scrollbar ───── */
@media (max-width: 900px) {
  /* Toolbar fixiert oberhalb der Mobile-Tabbar statt floating */
  .sr-tb {
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    max-width: none !important;
    padding: 6px 8px !important;
    z-index: 2025;
    box-shadow: 0 -2px 16px rgba(0,0,0,.6);
    transform: none !important;
  }

  /* Zeile wird scrollbar statt zu wrappen: Platz sparen, alle Tools
     bleiben mit horizontaler Geste erreichbar */
  .sr-tb-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    gap: 2px !important;
    padding-bottom: 2px; /* damit Focus-Ring nicht beschnitten wird */
  }
  .sr-tb-row::-webkit-scrollbar { display: none; }

  /* Buttons kompakter — 32px statt 36+, damit mehr in die Reihe passt */
  .sr-tb-btn {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 6px !important;
    flex-shrink: 0;
  }
  .sr-tb-square {
    width: 32px !important;
  }

  /* Separatoren dünner */
  .sr-tb-sep {
    width: 1px !important;
    margin: 0 2px !important;
    flex-shrink: 0;
  }

  /* Popups: am Handy vollbildig wie ein Bottom-Sheet */
  .sr-tb-popup {
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    max-width: none !important;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 2028;
  }
}


/* ─── 5. BLOCK-TOOLBAR (.studio-block-toolbar): kompakter ──────── */
@media (max-width: 900px) {
  .studio-block-toolbar {
    padding: 4px !important;
    gap: 2px !important;
  }
  .studio-block-toolbar button {
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 4px !important;
    font-size: 13px !important;
  }
}


/* ─── 6. Inspector-Inhalt: padding/spacing kompakter ──────────── */
@media (max-width: 900px) {
  .studio-inspector-head {
    position: sticky;
    top: 0;
    background: var(--bg-card, #0f1219);
    z-index: 2;
    margin: -14px -14px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-cool);
  }
  .studio-inspector-body .ins-field { margin-bottom: 12px; }
  /* Sticky-Close-Button in Drawer-Header */
  .sr-mobile-drawer-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line-cool);
    background: rgba(10,12,18,.7);
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
  }
  .sr-mobile-drawer-close:active { color: var(--gold); background: rgba(201,169,97,.1); }
}


/* ─── 7. Automation-Flow-Editor: Canvas horizontal scrollbar ──── */
@media (max-width: 900px) {
  .flow-canvas-wrap {
    height: 70vh !important;
  }
  .flow-canvas-wrap svg {
    min-width: 900px; /* Flow braucht Mindestbreite für Lesbarkeit */
  }
}


/* ─── 8. Sidebar-Navigation (Admin-Menü) mobil ─────────────────── */
@media (max-width: 900px) {
  /* Der Admin-Sidebar-Hamburger existiert schon; hier nur feintunen */
  .admin-sidebar { width: 82vw; max-width: 320px; }
}


/* ─── 9. FORM-DESIGNER: gleiche Drawer-Architektur wie Studio ─── */
@media (max-width: 900px) {
  /* Shell: stackt-nicht-mehr, Preview füllt Höhe */
  .fd-shell {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 -14px !important;
  }

  /* Palette = Left-Drawer */
  .fd-col-palette.sr-mobile-drawer-like {
    position: fixed;
    inset: 0 auto 0 0;
    width: 86vw;
    max-width: 380px;
    z-index: 2020;
    transform: translateX(-105%);
    transition: transform .25s cubic-bezier(.2,.9,.3,1);
    box-shadow: 4px 0 40px rgba(0,0,0,.7);
    max-height: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    border-radius: 0;
  }
  .fd-col-palette.sr-mobile-open { transform: translateX(0); }

  /* Props = Right-Drawer */
  .fd-col-props.sr-mobile-drawer-like {
    position: fixed;
    inset: 0 0 0 auto;
    width: 92vw;
    max-width: 420px;
    z-index: 2020;
    transform: translateX(105%);
    transition: transform .25s cubic-bezier(.2,.9,.3,1);
    box-shadow: -4px 0 40px rgba(0,0,0,.7);
    max-height: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    border-radius: 0;
  }
  .fd-col-props.sr-mobile-open { transform: translateX(0); }

  /* Preview-Fläche = Hauptbühne */
  .fd-preview-wrap {
    min-height: calc(100vh - 56px - 140px - env(safe-area-inset-bottom)) !important;
    /* Header + Tabbar + Mode-Banner + Safe-Area */
    max-height: none !important;
  }
  .fd-preview-frame {
    height: calc(100vh - 56px - 180px - env(safe-area-inset-bottom)) !important;
  }

  /* Mode-Banner: kompakter */
  .fd-mode-banner {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
  }
}


/* ─── 10. LISTEN-TABELLEN: Cards statt scrollende Tabelle ──── */
/* Trick: display-contents auf <thead> damit Spaltennamen verschwinden,
   <tr> wird zu Card, <td> wird zu "Label: Wert"-Zeile.
   Voraussetzung: jede Seite setzt `data-label` auf den <td>-Zellen,
   oder wir fallen zurück auf die Spalten-Überschrift (erkennbar über
   CSS-nth-child mit thead-Mapping).

   Hier der pragmatische Ansatz: <td data-label="Name">Wert</td>.
   Bei existierenden Tabellen ohne data-label fällt man auf Scroll
   zurück (CSS-Fallback via class `.table-mobile-cards`). */

/* Desktop: unverändert */
.table-mobile-cards { width: 100%; }

@media (max-width: 900px) {
  /* Tabelle sprengt in Cards auf */
  .table-mobile-cards {
    display: block;
    border: none;
  }
  .table-mobile-cards thead {
    display: none;
  }
  .table-mobile-cards tbody,
  .table-mobile-cards tr,
  .table-mobile-cards td {
    display: block;
    width: 100%;
  }
  .table-mobile-cards tr {
    background: var(--bg-card, #0f1219);
    border: 1px solid var(--line-cool, #2a2620);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .table-mobile-cards td {
    padding: 6px 0;
    border: none;
    display: flex;
    gap: 10px;
    align-items: baseline;
    min-height: 0;
  }
  .table-mobile-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    min-width: 90px;
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted, #7a7465);
    font-weight: 600;
  }
  .table-mobile-cards td:empty,
  .table-mobile-cards td[data-label=""] {
    display: none; /* leere Action-Cells verstecken; Actions kommen in eigene Reihe */
  }
  /* Erste Zelle (Name/Titel) prominent, ohne Label */
  .table-mobile-cards td[data-label="hidden"] {
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 0 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-cool);
  }
  .table-mobile-cards td[data-label="hidden"]::before {
    display: none;
  }
  .table-mobile-cards td[data-label="hidden"] .row-title {
    font-size: 15px;
    font-weight: 500;
  }
  /* Fallback für Tabellen die data-label noch nicht haben: das Label
     wird einfach weggelassen, aber die Zellen stacken sauber als Card.
     Ohne ::before-Selector wird kein Label gerendert → natürliche Lesart. */
  .table-mobile-cards td:not([data-label])::before {
    content: none;
  }
  .table-mobile-cards td:not([data-label]) {
    display: block;
    padding: 4px 0;
  }
}


/* ─── 11. AUTOMATION-FLOW-EDITOR mobile ───────────────────────── */
@media (max-width: 900px) {
  /* Shell: statt stacken-untereinander → Canvas füllt Höhe,
     Palette + Inspector collapsible oben/unten */
  .flow-editor-shell {
    display: block !important;
    height: auto !important;
    border-radius: 0;
  }
  .flow-canvas {
    order: 0 !important;
    height: 60vh !important;
    min-height: 340px;
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Palette als sticky "Werkzeug-Zeile" oben, scrollt horizontal */
  .flow-palette {
    order: -1 !important;
    max-height: none !important;
    position: sticky;
    top: 56px;
    z-index: 15;
    padding: 8px 10px !important;
    background: #0a0c12;
    border-bottom: 1px solid var(--line-cool);
    border-right: none !important;
  }
  .flow-palette h4 {
    display: none;
  }
  .flow-palette > * {
    display: inline-flex !important;
    margin-right: 6px !important;
  }
  .flow-palette {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .flow-palette::-webkit-scrollbar { display: none; }
  .flow-palette-item {
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
  }
  /* Inspector als Collapse unter dem Canvas */
  .flow-inspector {
    order: 99 !important;
    max-height: none !important;
    border-top: 1px solid var(--line-cool);
    border-left: none !important;
    padding: 14px;
  }
}


/* ─── 12. Campaign-edit / Settings allgemein mobil ────────────── */
@media (max-width: 900px) {
  /* Two-Column field-rows flach klappen */
  .field-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .field-row .field {
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }
  /* Grid-2, Grid-3 etc. auf 1 Spalte */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
  /* Panel-Padding kompakter */
  .panel {
    padding: 14px 14px !important;
  }
  .panel-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }
  /* Filter-Bars scrollen horizontal statt zu wrappen wenn viele */
  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar > * {
    flex: 0 0 auto;
  }
  /* Topbar-Actions am Handy: Buttons kleiner */
  .admin-topbar .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
  }
  .admin-topbar .topbar-actions .btn {
    font-size: 11.5px;
    padding: 7px 9px;
    min-height: 34px;
  }
}


/* ─── 13. Campaign-view Stats-Boxen auf 1 Spalte ──────────── */
@media (max-width: 760px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .stats-grid .stat-big {
    font-size: 24px !important;
  }
}


/* ─── 14. Topbar-Feinschliff ──────────────────────────────── */
@media (max-width: 900px) {
  /* PWA-Standalone-Modus (iOS "Zum Home-Bildschirm"): der Content
     startet per apple-mobile-web-app-status-bar-style="black-translucent"
     unter der Statusbar. Ohne Padding würde die Zeit-/Batterie-Anzeige
     über dem Topbar-Titel und dem Menü-Button stehen.
     env(safe-area-inset-top) holt die genaue Statusbar-Höhe vom OS. */
  .admin-topbar {
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap;
    /* Sticky top muss auch den safe-area-Bereich mit abdecken, damit
       beim Scrollen der Header nicht unter die Statusbar wandert. */
    top: 0 !important;
  }
  /* Body-Top-Padding kompensiert in non-PWA-Browsern nicht nötig, aber
     im PWA-standalone: iOS addiert kein eigenes Chrome über dem viewport,
     deshalb der manuelle Ausgleich oben im Topbar. */

  .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px !important;
  }
  .topbar-title {
    min-width: 0;
    flex: 1 1 auto;
  }
  .topbar-heading {
    font-size: 18px !important;
    line-height: 1.2 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-kicker {
    font-size: 9.5px !important;
  }
  .topbar-actions {
    flex: 0 1 auto;
    width: 100%;
    justify-content: flex-end;
  }
}


/* ─── 15. Modals + Float-Elements allgemein mobil ─────────── */
@media (max-width: 900px) {
  /* Toast-Stack: vollbreit unten, über Tabbar */
  .toast-stack {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
  }
  /* Quick-Test Modal: volle Breite */
  .quick-test-modal .modal {
    max-width: none !important;
  }
  /* Studio-Head Device-Preview-Buttons: kompakter */
  .studio-stage-head .btn-sm {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  /* Studio-Head-Divider am Handy verstecken (spart Platz) */
  .studio-toolbar-divider {
    display: none !important;
  }
}


/* ─── 16. Pagination + Bulk-Action-Bars ───────────────────── */
@media (max-width: 760px) {
  .pagination {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
  .bulk-action-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px !important;
  }
}