/* ==========================================================
   Bestatter-Portal – Mobile-Layer

   Wird als letztes Stylesheet in dashboard.html geladen und
   gilt ausschließlich für schmale Viewports. Die Desktop- und
   Tablet-Darstellung bleibt unverändert.

   Ziel des Layers: alle Portalfunktionen (Auftrag anlegen,
   Auftragsdetails, Abrechnung, Infos & Schulung) sind auf dem
   Telefon vollständig erreichbar und bedienbar.
   ========================================================== */

/* ── Grid-Blowout verhindern ─────────────────────────────
   `1fr` bedeutet `minmax(auto, 1fr)`: eine Spur kann dadurch
   breiter werden als ihr Container, sobald ein Kind eine große
   Mindestbreite hat. Auf schmalen Screens schiebt das die ganze
   Seite horizontal auf. `minmax(0, 1fr)` verhindert das. */
@media (max-width: 900px) {
    /* ── Kopfzeile: umbrechen statt überlaufen ───────────
       Die vier Aktionen plus Firmenname brauchen rund 850px.
       Ohne Umbruch schiebt sich "Abmelden" schon auf dem iPad
       im Hochformat aus dem Bild und die ganze Seite lässt
       sich seitlich schieben. */
    .portal-header-actions {
        justify-content: flex-end;
        min-width: 0;
    }

    /* Tablets werden ebenfalls mit dem Finger bedient. */
    .filter-tab { min-height: 2.4rem; }
    .order-actions .btn-sm { min-height: 2.4rem; }

    .portal-info-angebot,
    .billing-summary-card,
    .order-info,
    .order-facts {
        min-width: 0;
    }
    .portal-info-angebot,
    .order-name,
    .order-subline,
    .order-reference {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 680px) {

    /* ── Kopfzeile ───────────────────────────────────────
       Vorher: `.portal-header-actions` war eine nicht
       umbrechende Flex-Zeile mit `justify-content: flex-end`.
       Die Zeile war breiter als der Bildschirm, dadurch lag
       "Infos & Schulung" außerhalb des sichtbaren Bereichs und
       war mobil überhaupt nicht aufrufbar. */
    .portal-header {
        position: static; /* eine zweizeilige Sticky-Leiste würde ein Sechstel des Screens dauerhaft belegen */
    }
    /* Firmenname ueber die volle Breite, darunter die beiden Schaltflaechen
       nebeneinander. In einer Zeile passen alle drei auf einem Telefon nicht. */
    .portal-header-row {
        grid-template-columns: auto auto;
        justify-content: space-between;
        row-gap: 0.7rem;
        padding: 0.85rem 1rem;
    }
    /* Firmenname und Abmelden nebeneinander, darunter die Register über die
       volle Breite. In einer Zeile passen alle drei auf einem Telefon nicht. */
    /* Zeilen ausdruecklich zuweisen: Im Dokument stehen die Register zwischen
       Firmenname und Abmelden. Ohne diese Angabe rutschte "Abmelden" unter
       die Register statt neben den Namen. */
    .brand { grid-column: 1 / -1; grid-row: 1; }
    .portal-tabs { grid-column: 1 / -1; grid-row: 2; }
    /* Beide Schaltflaechen in eine eigene Zeile: Firmenname, "Neuer Auftrag"
       und "Abmelden" nebeneinander passen auf einem Telefon nicht. */
    .portal-header-actions {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: space-between;
    }
    /* Nicht zentriert, sobald die Register scrollen muessen: Bei zentriertem
       Inhalt in einem Scrollbereich liegt der erste Eintrag links ausserhalb
       und laesst sich nicht mehr heranscrollen. */
    .portal-tabs { justify-content: flex-start; }
    .brand { min-width: 0; }
    .brand-name {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    /* Hier steht nur noch "Abmelden" — das Zweispaltenraster von frueher
       stammt aus der Zeit, als vier Schaltflaechen nebeneinander standen. */
    .portal-header-actions .btn {
        min-height: 2.75rem; /* 44px Touch-Ziel */
        padding-left: 0.7rem;
        padding-right: 0.7rem;
        justify-content: center;
        white-space: nowrap;
    }
    .portal-tab { padding: 0.7rem 0.7rem; font-size: 0.82rem; }
    .portal-header-actions .btn-ghost {
        letter-spacing: 0.1em;
    }

    /* ── Inhaltsbereich ──────────────────────────────────── */
    .portal-body {
        padding: 1.25rem 1rem 2.25rem;
    }

    /* ── Suche und Filter ────────────────────────────────── */
    .toolbar {
        display: grid;
        gap: 0.6rem;
        padding: 0.75rem 0;
    }
    .search-box { width: 100%; }
    .filter-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-left: 0;
        overflow-x: visible;
    }
    .filter-tab {
        min-height: 2.6rem;
        padding: 0.45rem 0.3rem;
        justify-content: center;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        text-align: center;
    }

    /* ── Auftragskarten ──────────────────────────────────── */
    .order-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.5rem;
        width: 100%;
        justify-content: stretch;
    }
    .order-actions .btn-sm {
        min-height: 2.5rem;
        justify-content: center;
    }

    /* ── Formularfelder ──────────────────────────────────
       iOS Safari zoomt die Seite automatisch hinein, sobald ein
       fokussiertes Feld kleiner als 16px ist. Danach steht die
       Ansicht schief und muss manuell zurückgezoomt werden. */
    .form-input,
    .form-textarea,
    select.form-input,
    .search-box input,
    .billing-filter-fields input,
    .support-dialog textarea,
    .support-dialog input[type="email"] {
        font-size: 16px;
    }
    .form-input,
    select.form-input {
        min-height: 2.9rem;
    }
    .form-group { margin-bottom: 1rem; }

    /* ── Dialoge ─────────────────────────────────────────
       Vorher hatte `.modal` weder Höhenbegrenzung noch Scroll:
       Der "Neuer Auftrag"-Dialog war rund 1050px hoch, ragte
       oben und unten aus dem Viewport und ließ sich nicht
       scrollen – der Absenden-Button war unerreichbar.
       Jetzt: Sheet von unten, scrollbar, Aktionsleiste bleibt
       sichtbar. */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .modal {
        --modal-pad-x: 1.15rem;
        max-width: none;
        max-height: 94vh;
        max-height: 94dvh;
        border-radius: var(--a-radius-lg) var(--a-radius-lg) 0 0;
        padding: 1.35rem var(--modal-pad-x);
    }
    .modal-header h2 { font-size: 1.55rem; }
    .modal-header p { font-size: 0.92rem; }

    .modal:has(.modal-actions) { padding-bottom: 0; }
    .modal-actions {
        position: sticky;
        bottom: 0;
        z-index: 1;
        flex-direction: column-reverse; /* Hauptaktion oben */
        gap: 0.5rem;
        margin: 1.25rem calc(var(--modal-pad-x, 1.15rem) * -1) 0;
        padding: 0.85rem var(--modal-pad-x, 1.15rem);
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
        background: var(--a-card);
        border-top: 1px solid var(--a-rule-soft);
    }
    .modal-actions .btn {
        width: 100%;
        min-height: 2.85rem;
        justify-content: center;
    }
    .qr-modal .btn { min-height: 2.75rem; }
    .qr-modal > div:last-child { flex-wrap: wrap; }

    /* ── Anmeldung ───────────────────────────────────────── */
    .login-wrap {
        min-height: 100vh;
        min-height: 100dvh;
        align-items: flex-start;
        padding: 1.5rem 1rem 5.5rem;
    }
    .login-card { padding: 2rem 1.35rem 1.75rem; }
    .login-btn { min-height: 2.9rem; }

    /* ── Fußzeile ────────────────────────────────────────── */
    .footer {
        padding: 1.5rem 1rem;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
    .footer a {
        display: inline-block;
        padding: 0.4rem 0.3rem;
    }

    /* ── Abrechnung ──────────────────────────────────────── */
    .billing-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
    .billing-summary-card { padding: 0.8rem 0.85rem; }
    .billing-summary-card.emphasis { grid-column: 1 / -1; }
    .billing-filter-fields .btn { min-height: 2.85rem; }

    /* Die Tabelle brauchte 757px Breite in einem 303px breiten
       Container. Statt seitlich zu scrollen wird jede Zeile
       mobil zu einer Karte mit Beschriftung je Feld. */
    .billing-table-wrap { overflow-x: visible; }
    .billing-table {
        display: block;
        min-width: 0;
        font-size: 0.86rem;
    }
    .billing-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .billing-table tbody { display: block; }
    .billing-table tbody tr {
        display: block;
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--a-rule-soft);
    }
    .billing-table tbody tr:last-child { border-bottom: 0; }
    .billing-table td {
        display: grid;
        grid-template-columns: 8rem minmax(0, 1fr);
        align-items: baseline;
        gap: 0.15rem 0.7rem;
        padding: 0.2rem 0;
        border: 0;
        text-align: left;
    }
    .billing-table td::before {
        content: attr(data-label);
        color: var(--a-muted);
        font-family: ui-monospace, Menlo, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        line-height: 1.6;
        text-transform: uppercase;
    }
    .billing-table td:not([data-label])::before { content: none; }
    .billing-table td.amount { text-align: left; }
    .billing-table td small { display: block; }

    .invoice-card { padding: 1.15rem 1rem; }
    .invoice-totals div { justify-content: space-between; }

    /* ── Infos & Schulung ────────────────────────────────── */
    /* Die Leiste klebt sonst unter einer Kopfzeile, die mobil
       nicht mehr sticky ist. */
    .portal-info-anchor-nav {
        top: 0;
        scrollbar-width: none;
    }
    .portal-info-anchor-nav::-webkit-scrollbar { display: none; }
    .portal-info-help-actions .btn { min-height: 2.75rem; }
}

@media (max-width: 620px) {
    .portal-info-two-column,
    .portal-info-help,
    .portal-info-privacy-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Wie auf der Kundenseite: untereinander, ohne Ueberstand, mit Trennlinie
       oben statt links. */
    .portal-info-angebote {
        --ueberstand: 0px;
        grid-template-columns: minmax(0, 1fr);
    }
    .portal-info-angebot {
        padding: 1.1rem 0;
        border-left: 0;
        border-top: 1px solid var(--a-rule-soft);
    }
    .portal-info-angebot--held {
        margin-top: 0;
        padding: 1.3rem 1.15rem;
        border-top: 0;
    }
    /* Die Staffel bleibt zweispaltig -- Stufe links, Preis rechts --, aber die
       linke Spalte muss schrumpfen duerfen, sonst schiebt ein langer
       Stufentext den Preis aus dem Kasten. */
}

/* Sehr schmale Geräte (iPhone SE und ähnlich) */
@media (max-width: 380px) {
    .filter-tab { font-size: 0.58rem; letter-spacing: 0.04em; }
    .billing-table td { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .zugang-card { max-width: 100%; }
    .zugang-title { font-size: 21px; }
}