/* ═══ Responsive-Korrekturen — am echten Gerät gemessen ═════════════════════════
   Erhoben bei 375 px Viewport: das Dokument war 438 px breit, also 63 px horizontaler
   Überlauf auf JEDER der 75 Seiten. Dazu die Befunde vom iPhone: Inhalte lagen hinter
   der Dynamic Island, die Rail schob sich halb ins Bild.
   Wird NACH style.css geladen. Das Desktop-Layout bleibt unangetastet.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── A · Gerät-unabhängige Grundlage (gilt IMMER, jede Bildschirmgröße) ─────────
   Kein Breakpoint: diese Regeln verhindern, dass irgendeine Seite die Ansicht sprengt —
   auf dem Handy, auf dem Tablet, im geteilten Fenster und auf 4K. */
html { -webkit-text-size-adjust: 100%; }         /* iOS skaliert sonst beim Drehen eigenmächtig */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }
/* Die Shell ist ein Flex-Layout. Ohne min-width:0 übernimmt .main auf Desktop die
   Mindestbreite breiter Inhalte und zieht das Dokument über den Viewport hinaus. */
.layout, body.md-shell .main { min-width: 0; }

/* ── B · Sichere Bereiche ────────────────────────────────────────────────────────
   BEWUSST LEER: shell.css setzt die Safe-Area bereits an den richtigen Stellen
   (.main für den Inhalt, .md-topbar für den Leistenhintergrund unter der Notch).
   Hier zusätzlich am body zu polstern, würde den Abstand verdoppeln. */

/* ── C · Alles unter 900 px: Telefone und schmale Tablets ─────────────────────── */
@media (max-width: 900px) {

  /* C1 · Der Hauptverursacher: das Profil in der Topbar.
     Gemessen: #md-profile reichte bis 437 px bei 375 px Viewport. Der Profilname steht
     auf white-space:nowrap, konnte nicht schrumpfen und schob die gesamte Topbar —
     und mit ihr das ganze Dokument — nach rechts. Exakt die fehlenden 63 px. */
  /* Negative Seitenränder lassen den Hintergrund bis an beide Viewport-Kanten laufen;
     max-width:100% hatte die Leiste dabei exakt um das Main-Padding verkürzt. */
  .md-topbar { min-width: 100vw; max-width: 100vw; width: 100vw; }
  .md-top-right { min-width: 0; flex-shrink: 1; gap: 8px; }
  .md-profile { min-width: 0; flex-shrink: 1; }
  .md-profile-name, .md-profile-caret { display: none; }   /* der Avatar allein genügt */

  /* C2 · Letzte Instanz gegen seitliches Verrutschen. Auch wenn eine einzelne Seite
     künftig etwas zu Breites einbaut, darf das nie die ganze Ansicht verschieben. */
  html, body { max-width: 100%; overflow-x: hidden; }
  .page, .page > * { min-width: 0; max-width: 100%; }

  /* C3 · DIE NAVIGATION MUSS AUFGEHEN.
     Gemessen: Burger gedrückt, body.md-drawer gesetzt, Backdrop sichtbar, Hintergrund gesperrt —
     aber Rail und Flyout blieben bei -68px bzw. außerhalb des Bildes. Ergebnis: ein abgedunkelter
     Bildschirm ohne Menü, das Panel war auf dem Telefon nicht bedienbar.
     shell.css hat die passende Regel, sie setzt sich in der Praxis aber nicht durch. Da diese Datei
     zuletzt geladen wird, wird sie hier erzwungen — Navigation ist Grundfunktion, kein Feinschliff. */
  body.md-drawer .md-rail   { transform: none !important; }
  body.md-drawer .md-flyout { transform: none !important; }
  /* Der Flyout beginnt bei left:68px (neben der Rail) und muss auf dem Telefon in den Bildschirm passen. */
  body.md-drawer .md-flyout {
    max-width: calc(100vw - 68px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px);
  }

  /* C4 · Button-Leisten umbrechen lassen. Gemessen auf ticketstats und kontosperren
     (bis 408 px) sowie embed (bis 538 px). */
  .row, .btn-row, .actions, .card-head, .guild-bar { flex-wrap: wrap; min-width: 0; }
  .btn, .btn-sm { max-width: 100%; }
  /* Die eigentlichen Übeltäter tragen GAR KEINE Klasse, sondern ein Inline-Style
     `display:flex;gap:8px` ohne flex-wrap. Da flex-wrap im Inline-Style fehlt, darf
     diese Regel es setzen, ohne mit dem Inline-display zu kollidieren. */
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; min-width: 0; max-width: 100%; }

  /* C4b · Direkte Kinder einer Karte dürfen nie breiter sein als die Karte. Bei 320 px
     (iPhone SE) ragten so noch 9 Elemente auf dashboard, tebexstats und snapshot heraus.
     Tabellen ausgenommen: die sollen breit bleiben und in ihrem Bereich scrollen (siehe C8). */
  .card > *:not(table), .card-body > *:not(table) { max-width: 100%; }

  /* C5 · Eigene Auswahlfelder (div.cs / button.cs-trigger) — gemessen bis 385 px. */
  .cs, .cs-trigger, .cs-panel { max-width: 100%; min-width: 0; box-sizing: border-box; }

  /* C6 · Eingaben. 16 px ist Pflicht: darunter zoomt iOS beim Fokussieren hinein und
     das Layout bleibt danach verschoben. Gemessen auf embed: input bis 418 px. */
  /* Spezifität ist hier entscheidend: style.css:193 setzt .88rem über
     input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file])
     — das wiegt (0,5,1). Eine schlichte input-Regel (0,0,1) verliert IMMER, egal wie spät sie kommt.
     Gemessen waren dadurch 319 Felder auf 14.08px. iOS-Safari zoomt unter 16px beim Fokus hinein und
     kehrt NICHT zurück: das Panel bleibt danach dauerhaft verschoben. Deshalb hier mit !important. */
  input, select, textarea, .input, .cs-trigger { max-width: 100%; min-width: 0; box-sizing: border-box; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  textarea, select { font-size: 16px !important; }

  /* C7 · Lange Zeichenketten (IDs, Token, Pfade) — gemessen auf snapshot bis 389 px. */
  .card, .card-body, td, th, p, strong, code, pre, .muted { overflow-wrap: anywhere; }
  pre { white-space: pre-wrap; }
  .card-header > * { min-width: 0; max-width: 100%; }

  /* Kartenköpfe mit Auswahlfeld bekommen auf dem Handy eine eigene Bedienzeile.
     So können Titel, Icon und Select weder kollidieren noch sich gegenseitig quetschen. */
  .card-header > select,
  .card-header > .cs,
  .card-header > .mrole {
    flex: 1 1 100%; width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important;
  }

  /* C8 · Tabellen scrollen in ihrer Karte, nicht die Seite (table.dt hat min-width:480px,
     das ist für die Lesbarkeit richtig und muss nur eingefasst werden). */
  .card-body, .card-body.p0 { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* C9 · Der Kennzahlen-Ticker ist als Laufband 1855 px breit — korrekt, aber sein
     Rahmen muss den Überschuss abschneiden statt ihn weiterzureichen. */
  #db-ticker { max-width: 100%; overflow: hidden; }

  /* C10 · Hintergrundeffekt übernahm die Dokumentbreite (438 px) statt der Fensterbreite. */
  #bgfx { width: 100%; max-width: 100vw; left: 0; }

  /* C11 · Touch-Flächen: 44 px ist das von Apple und Google genannte Mindestmaß. */
  .btn, .btn-sm, .nav-item, .cs-trigger, button { min-height: 44px; }
  .btn-sm { padding-top: 10px; padding-bottom: 10px; }

  /* C12 · Modale Dialoge füllen den Bildschirm, statt schmal in der Mitte zu kleben. */
  .modal, .md-modal, .dialog { max-width: 100%; width: 100%; margin: 0; border-radius: 16px 16px 0 0; }
  .modal-body, .md-modal-body { max-height: 76vh; overflow-y: auto; }
  /* C13 · Grids mit harter Mindestbreite. minmax(380px,1fr) kann NICHT unter 380px schrumpfen —
     auto-fit hilft dort nicht. Bei 339px Inhaltsbreite (375px Gerät) ragen diese Kacheln heraus,
     sichtbar aber erst mit echten Daten. Gemessen: #os-list/#ob-list 380px, #gw-list 360px, #ap-forms 340px. */
  #os-list, #ob-list, #gw-list, #ap-forms, .grid-auto, [style*="minmax"] { grid-template-columns: 1fr !important; }
}

/* ── D · Schmale Geräte (iPhone SE, geteilter Bildschirm) ─────────────────────── */
@media (min-width: 901px) and (max-width: 1100px) {
  .md-topbar {
    margin-left: -22px;
    margin-right: -22px;
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (max-width: 420px) {
  h1 { font-size: 1.45rem; }
  h2 { font-size: .82rem; letter-spacing: .04em; }
  .card-body { padding-left: 16px; padding-right: 16px; }
  .card-header { padding-left: 16px; padding-right: 16px; }
}

/* ── E · Querformat auf Telefonen: wenig Höhe, dafür Einbuchtungen an den Seiten ── */
@media (max-height: 480px) and (orientation: landscape) {
  .md-topbar { position: static; }        /* klebende Leiste frisst sonst die halbe Höhe */
  body { padding-top: 8px; }
  .card { padding-top: 10px; padding-bottom: 10px; }
}

/* ── F · Große Bildschirme: der Inhalt soll nicht ins Unendliche laufen ───────── */
@media (min-width: 1800px) {
  .page { max-width: 1680px; margin-left: auto; margin-right: auto; }
}

/* ═══ Bild-Ablage (web/public/imagedrop.js) ═══════════════════════════════════════
   Ziehen, Einfügen, Datei wählen — sitzt über dem bestehenden Adressfeld.
   Farben aus dem Design-System: Near-Black + Grün #2ee043 / #098215. */
.idrop {
  position: relative; margin-bottom: 8px; padding: 18px 14px; min-height: 104px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--border, #232326); border-radius: 14px;
  background: rgba(255, 255, 255, .015); cursor: default; transition: border-color .15s, background .15s;
}
.idrop-over { border-color: #2ee043; background: rgba(46, 224, 67, .07); }
.idrop-busy { opacity: .6; pointer-events: none; }
.idrop-busy::after {
  content: attr(data-text); position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .85rem; font-weight: 700; color: #2ee043; background: rgba(10, 10, 11, .72); border-radius: 14px;
}
.idrop-hint { display: flex; flex-direction: column; gap: 5px; align-items: center; color: var(--muted, #8b8b92); font-size: .84rem; line-height: 1.45; }
.idrop-hint b { color: var(--fg, #f2f2f2); font-weight: 700; }
.idrop-ico { font-size: 1.4rem; color: #2ee043; line-height: 1; }
.idrop-sub { font-size: .74rem; opacity: .75; }
.idrop-pick {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: #2ee043; font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}
.idrop-thumb { max-width: 100%; max-height: 190px; border-radius: 10px; display: block; object-fit: contain; }
.idrop-clear {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--border, #232326); background: rgba(10, 10, 11, .82); color: var(--muted, #8b8b92);
  cursor: pointer; font-size: .78rem; line-height: 1; display: none;
}
.idrop:has(.idrop-thumb[src]) .idrop-clear { display: block; }
.idrop-clear:hover { color: #ff6b6b; border-color: rgba(255, 107, 107, .4); }