/* ============================
   KitchenCloud – Handy-Darstellung
   ============================
   Wird im Layout NACH Bootstrap geladen, damit diese Regeln Bootstraps
   Tabellen-/Layout-Defaults zuverlässig überschreiben.

   0. Eingabefelder >= 16 px (kein iPhone-Zoom beim Antippen)
   1. Admin-Tabellen als Karten (table.kc-table-cards)
   2. Feste Navigationsleiste unten (.kc-bottom-nav)
*/

/* ============================================
   0. Kein automatisches Hineinzoomen am iPhone
   Safari zoomt beim Antippen in jedes Eingabefeld mit weniger als 16 px Schrift hinein
   (am Handy ist die Grundschrift 14 px, Felder hatten damit ~13 px). 16 px für alle
   Eingabefelder verhindert das, ohne das Zoomen der Seite generell zu sperren.
   ============================================ */
@media (max-width: 767.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=file]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ============================================
   1. Tabellen als Karten
   Jede Zeile wird eine Karte, jede Zelle eine Zeile "Beschriftung: Wert".
   Die Beschriftung kommt aus data-label (setzt kc-tabelle.js aus dem Spaltenkopf).
   ============================================ */
@media (max-width: 767.98px) {

    table.kc-table-cards,
    table.kc-table-cards tbody {
        display: block;
        width: 100%;
        min-width: 0;
        table-layout: auto;
    }

    /* Sortieren per Spaltenkopf gibt es am Handy nicht - die Suche bleibt */
    table.kc-table-cards thead {
        display: none;
    }

    table.kc-table-cards tr {
        display: block;
        background: var(--kc-flaeche);
        border: 1px solid var(--kc-linie);
        border-radius: 14px;
        padding: 0.6rem 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    table.kc-table-cards.table > :not(caption) > * > * {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.4rem 0.75rem;
        padding: 0.45rem 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        text-align: right;
        overflow-wrap: anywhere;
    }

    table.kc-table-cards td::before {
        content: attr(data-label);
        flex-shrink: 0;
        /* Beschriftung links, Werte (auch mehrere, z.B. Berechtigungs-Abzeichen) rechts,
           bei Platzmangel umbrechend statt über den Kartenrand hinaus */
        margin-right: auto;
        font-weight: 600;
        color: var(--kc-primary);
        text-align: left;
    }

    /* Zellen mit Eingabefeldern (Benutzerverwaltung): Beschriftung über dem Feld */
    table.kc-table-cards.table > :not(caption) > * > td:has(input:not([type=hidden]), select) {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        text-align: left;
    }

    /* Letzte Zelle mit Knöpfen = Aktionen: große, gut treffbare Knöpfe über die ganze Breite
       (Tabellen ohne Aktionsspalte, z.B. das Benutzeraktionen-Log, bleiben normale Zeilen) */
    table.kc-table-cards.table > :not(caption) > * > td:last-child:has(.btn, button) {
        flex-wrap: wrap;
        justify-content: stretch;
        margin-top: 0.35rem;
        padding-top: 0.7rem;
        border-top: 1px solid var(--kc-linie-hell);
    }

        table.kc-table-cards td:last-child:has(.btn, button)::before {
            content: none;
        }

        table.kc-table-cards td:last-child .btn,
        table.kc-table-cards td:last-child button,
        table.kc-table-cards td:last-child form {
            flex: 1 1 0;
            min-height: 44px;
            margin: 0;
        }

            table.kc-table-cards td:last-child form .btn,
            table.kc-table-cards td:last-child form button {
                width: 100%;
            }

    /* Seitenknöpfe am Handy umbrechen statt aus dem Bild zu laufen */
    .kc-pagination {
        flex-wrap: wrap;
    }
}

/* ============================================
   2. Navigationsleiste unten (nur Handy, nur angemeldet)
   ============================================ */
.kc-bottom-nav {
    display: none;
}

@media (max-width: 767.98px) {

    .kc-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        background: var(--kc-flaeche);
        border-top: 1px solid var(--kc-linie);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
        /* iPhone ohne Home-Button: Abstand zur Wischleiste */
        padding-bottom: env(safe-area-inset-bottom);
    }

    .kc-bottom-nav-link {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 56px;
        padding: 6px 2px;
        color: var(--kc-primary);
        opacity: 0.7;
        font-size: 0.72rem;
        font-weight: 600;
        text-decoration: none;
    }

        .kc-bottom-nav-link.aktiv {
            opacity: 1;
            color: var(--kc-terracotta-dark);
        }

    /* Mittlerer "+"-Knopf zum Erfassen hervorgehoben */
    .kc-bottom-nav-plus {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-top: -14px;
        border-radius: 50%;
        background: var(--kc-knopf);
        color: #fff;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }

    /* Platz schaffen, damit die Leiste keinen Inhalt verdeckt */
    body.kc-hat-bottom-nav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

        /* Nachrichten-Knopf (samt aufklappendem Panel) über die Leiste heben */
        body.kc-hat-bottom-nav #kc-nachricht-widget {
            bottom: calc(76px + env(safe-area-inset-bottom));
        }
}

/* ==================================================
   Kacheln (Startseite "Schnellzugriff", Admin Bereich) am Handy kompakt (UX-Durchgang
   06.10.2026): Symbol links, Titel daneben, ohne Beschreibung - vorher war jede Kachel gut
   160 px hoch und lange Wörter wurden mitten im Wort getrennt. ":root .kc-main" wegen der
   (historisch) in ":root { }" verschachtelten Grundregeln in kc-theme.css und kc-admin.css.
   ================================================== */
@media (max-width: 576px) {
    :root .kc-main .row:has(> div > .kc-tile-link) {
        --bs-gutter-x: 0.6rem;
        --bs-gutter-y: 0.6rem;
    }

    :root .kc-main .kc-tile-link {
        flex-direction: row;
        align-items: center;
        gap: 0.65rem;
        min-height: 64px;
        padding: 0.65rem 0.75rem;
        border-width: 1.5px;
        border-radius: 14px;
    }

        :root .kc-main .kc-tile-link:hover,
        :root .kc-main div:hover > .kc-tile-link {
            transform: none;
        }

        :root .kc-main .kc-tile-link .kc-tile-icon {
            flex: 0 0 40px;
            width: 40px;
            height: 40px;
            margin: 0;
        }

            :root .kc-main .kc-tile-link .kc-tile-icon svg {
                width: 21px;
                height: 21px;
            }

        :root .kc-main .kc-tile-link h4 {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.2;
            hyphens: auto;
        }

        :root .kc-main .kc-tile-link p {
            display: none;
        }
}

/* Menüleiste selbst zusammenstellbar (20.10.2026): ausgeblendete Einträge wirklich weg (display:flex oben würde
   [hidden] sonst überstimmen); längere Namen ("Sammlungen", "Überrasch mich") kürzen statt umbrechen */
.kc-bottom-nav-link[hidden] {
    display: none !important;
}

.kc-bottom-nav-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}