/* Handy-Anpassungen für den Adminbereich.
 *
 * Bewusst als EINE geteilte Datei statt vier umgebauter Seiten: die Admin-Seiten
 * benutzen dasselbe Design-System (.nav, .main, .page-header, .card, .toast),
 * deshalb greifen die meisten Regeln überall. Der Rest ist seitenspezifisch und
 * unten einzeln kommentiert.
 *
 * Diese Datei überschreibt nur — sie fügt keinem Element neues Verhalten hinzu.
 * Am Desktop ist sie wirkungslos, weil alles in Media Queries steckt.
 */

/* ── Ab hier Handy: iPhone SE (375) bis kleines Tablet ────────────────────── */
@media (max-width: 720px) {

  /* Kopfzeile: schmaler, damit Logo, Zurück-Link und Logout nebeneinander passen */
  .nav { padding: 0 0.9rem; height: 54px; gap: 0.4rem; }
  .nav-right { gap: 0.45rem; flex-wrap: nowrap; }
  .nav-logo img { height: 26px !important; }
  .nav-back, .btn-ghost { font-size: 0.66rem; padding: 0.35rem 0.6rem; }

  /* Inhaltsbereich: der Desktop-Rand von 2rem frisst auf 375px ein Achtel der Breite */
  .main { padding: 1.3rem 0.9rem 4rem; }

  /* Seitenkopf: Titel und Aktionsknopf untereinander statt nebeneinander */
  .page-header { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .page-title { font-size: 1.55rem; }
  .page-header .btn-primary { width: 100%; justify-content: center; }

  /* Fingerfreundliche Ziele. Apple empfiehlt 44px Kantenlänge; die Desktop-Knöpfe
     liegen mit ~26px deutlich darunter. */
  .btn-primary, .btn-secondary, .btn-ghost,
  .btn-gold-sm, .btn-danger-sm, .btn-sm {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ⚠️ iOS zoomt beim Antippen in ein Textfeld mit weniger als 16px hinein und
     kehrt danach nicht zur Ausgangsbreite zurück. Deshalb hier hart 16px.
     Bewusst OHNE select: Auswahlfelder öffnen auf iOS einen nativen Auswahldialog
     statt zu zoomen, und 16px würde sie nur unnötig verbreitern — was auf 375px
     Zeilen sprengt (siehe .search-row unten). */
  input, textarea { font-size: 16px !important; }

  /* Nichts darf breiter sein als der Bildschirm */
  img, table, pre, canvas { max-width: 100%; }

  /* Meldungen: am Desktop unten rechts neben dem Rand, am Handy über die
     volle Breite — sonst steht der Text in einer 3-Zeichen-Spalte. */
  .toast {
    left: 0.75rem; right: 0.75rem; bottom: 1rem;
    max-width: none; font-size: 0.82rem;
  }

  /* Dialoge: fast volle Breite, und scrollbar, falls sie höher als das Display sind */
  .modal { max-width: none; width: 100%; padding: 1.3rem; max-height: 88vh; overflow-y: auto; }
  .modal-actions { flex-direction: column; }
  .modal-actions button { width: 100%; }

  /* ── Kunden (customers.html) ──────────────────────────────────────────────
     Das Desktop-Raster "Name | Meta | Aktionen" quetscht auf 375px alle drei
     Spalten auf je gut 100px. Auf dem Handy gestapelt. */
  .customer-row { grid-template-columns: 1fr; gap: 0.55rem; padding: 0.9rem 1rem; }
  .customer-actions { justify-content: flex-start; flex-wrap: wrap; gap: 0.35rem; }
  .customer-meta { font-size: 0.66rem; }
  .assign-panel { margin: 0 0.65rem 0.9rem !important; padding: 0.9rem; }
  .assign-add-row { flex-direction: column; }
  .assign-add-row .btn-gold-sm { width: 100%; }
  .bill-grid { grid-template-columns: 1fr; }
  .bill-actions { flex-direction: column; align-items: stretch; }
  .bill-actions button { width: 100%; }
  .bill-check { flex-direction: row; align-items: flex-start; }
  .bill-link { flex-direction: column; }
  .bill-link button { width: 100%; }

  /* ── Touren-Übersicht (dashboard.html) ────────────────────────────────────
     Das Kachelraster ist mit auto-fill/minmax(320px) schon flexibel, aber 320px
     plus Rand überschreitet 375px knapp. */
  .tours-grid { grid-template-columns: 1fr; }

  /* Such- und Sortierzeile: ein Flex ohne Umbruch, in dem das Sortierfeld
     flex-shrink:0 trägt — es kann also nicht schmaler werden und schiebt die
     Zeile über den rechten Rand. Auf dem Handy gestapelt. */
  .search-row { flex-direction: column; gap: 0.55rem; }
  .sort-select { width: 100%; flex-shrink: 1; }

  /* ── Editor (editor.html) ─────────────────────────────────────────────────
     Szenenkacheln: zwei nebeneinander sind auf dem Handy noch gut greifbar. */
  .scenes-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
  .scene-thumb, .scene-thumb-placeholder { height: 92px; }

  /* Zweispaltige Blöcke, die per style-Attribut direkt im HTML gesetzt sind.
     Attributselektor plus !important ist hier der einzige Weg, ohne die
     Inline-Styles in 3582 Zeilen Editor anzufassen. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Regler und Auswahlfelder mit fester Mindestbreite dürfen umbrechen */
  .gt-scene-select { min-width: 0; width: 100%; }
  .gt-slider-wrap { min-width: 0; width: 100%; }
  .gt-thumb { width: 100% !important; height: auto !important; aspect-ratio: 16/9; }

  /* Die Hotspot-Vorschau bekommt die volle Breite, die Seitenspalte rutscht
     darunter (die 800px-Query der Seite greift hier schon, das ist Feinschliff). */
  .hs-layout { grid-template-columns: 1fr; }

  /* Karten und Abschnitte: weniger Innenabstand, mehr Inhalt */
  .card { padding: 1rem; }

  /* Breite Inhalte (Einbettungscode, lange IDs) dürfen scrollen statt die
     Seite aufzublähen */
  .embed-code, pre { overflow-x: auto; }
}

/* ── Sehr schmal (iPhone SE, iPhone 12/13 mini) ───────────────────────────── */
@media (max-width: 400px) {
  .page-title { font-size: 1.35rem; }
  .main { padding: 1rem 0.7rem 3.5rem; }
  /* Szenenkacheln bewusst WEITER zweispaltig: eine Tour hat schnell zwölf
     Szenen, und eine Kachel pro Bildschirmhöhe macht das Sortieren mühsam.
     Hier stand vorher 1fr — diese Regel greift zusätzlich zur 720px-Regel und
     hat deren zwei Spalten wieder aufgehoben. */
  .scenes-grid { gap: 0.5rem; }
  .scene-body { padding: 0.55rem; }
  .scene-id { display: none; }   /* die technische ID braucht auf 375px niemand */
}

/* ── Als App vom Home-Bildschirm gestartet ────────────────────────────────
   Dann fehlt die Safari-Leiste und der Inhalt läuft sonst in die Statusleiste
   bzw. hinter den Home-Indikator. */
@supports (padding: env(safe-area-inset-top)) {
  @media (display-mode: standalone) {
    .nav { padding-top: env(safe-area-inset-top); height: calc(54px + env(safe-area-inset-top)); }
    .main { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
    .toast { bottom: calc(1rem + env(safe-area-inset-bottom)); }
  }
}