/* ============================================================
   Mobile-Responsiveness-Layer
   ------------------------------------------------------------
   Globale, seitenübergreifende Anpassungen, damit die App auf
   Telefonen (~360px) korrekt dargestellt wird. Alle Regeln sind
   auf kleine Bildschirme gescoped, damit Desktop unberührt bleibt.
   Siehe docs/superpowers/specs/2026-07-21-mobile-responsive-design.md
   ============================================================ */

/* --- Seitenbreiten-Schutz -----------------------------------
   Nichts darf die Seite breiter als den Viewport machen (sonst
   horizontales Scrollen / Herauszoomen). Zu breite Inhalte
   (z. B. Tabellen) scrollen stattdessen INNERHALB ihrer Box. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* --- Datagrids / Tabellen -----------------------------------
   MudBlazor setzt bereits overflow-x:auto auf .mud-table-container.
   Hier nur absichern: Touch-Scrolling aktivieren und Root-Element
   auf Viewport begrenzen, damit die Tabelle im Container scrollt
   statt die Seite zu verbreitern. */
.mud-table-container {
    -webkit-overflow-scrolling: touch;
}

.mud-table {
    max-width: 100%;
}

/* ============================================================
   Tablet und kleiner
   ============================================================ */
@media (max-width: 960px) {
    /* App-Bar: Standort-Menü-Label kürzen, damit die Leiste nicht
       über den Bildschirmrand hinauswächst. */
    .mud-appbar .mud-menu .mud-button-label,
    .mud-appbar .mud-menu .mud-button-root {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================================
   Telefon
   ============================================================ */
@media (max-width: 600px) {
    /* Container-Innenabstand reduzieren (mehr nutzbare Breite). */
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Seiten-Titel verkleinern, damit Titel + Aktions-Buttons in
       der Toolbar-Zeile nebeneinander passen. */
    .mud-typography-h4 {
        font-size: 1.35rem;
    }

    .mud-typography-h5 {
        font-size: 1.15rem;
    }

    /* Filterfelder mit fest verdrahteter Mindestbreite (inline
       style="min-width:…px") auf volle Breite entspannen. Die
       Regel schlägt das Inline-Style, da dieses kein !important hat. */
    .mud-input-control,
    .mud-picker,
    .mud-select {
        min-width: 0 !important;
    }

    /* Dialoge nahezu bildschirmfüllend statt zu breit / abgeschnitten. */
    .mud-dialog:not(.mud-dialog-fullscreen) {
        margin: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* Tab-Leisten dürfen die Seite nicht verbreitern (scrollen intern). */
    .mud-tabs-tabbar {
        max-width: 100%;
    }
}