/*
 * ==========================================================
 * SIHU21TV PORTAL MOBILE V1
 * ==========================================================
 *
 * Additive Mobile-Korrekturschicht.
 * Desktop-Regeln werden nicht ersetzt.
 */


/* ==========================================================
   TABLET / MOBILE SHELL
   ========================================================== */

@media (max-width: 980px) {

    html,
    body {
        max-width: 100%;
    }


    body {
        overflow-x: hidden;
    }


    .portal-shell,
    .portal-simple-shell,
    .portal-main,
    .simple-content {
        min-width: 0 !important;
        max-width: 100%;
    }


    .portal-simple-shell {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .portal-main {
        width: 100%;
        margin: 0;
    }


    /*
     * Mobile Sidebar.
     * Bestehende Open/Close-Logik bleibt erhalten.
     */
    .simple-sidebar {
        width:
            min(
                340px,
                calc(100vw - 18px)
            ) !important;

        max-width:
            calc(100vw - 18px);

        height:
            100vh;

        height:
            100dvh;

        max-height:
            100dvh;

        padding-top:
            env(safe-area-inset-top);

        padding-bottom:
            env(safe-area-inset-bottom);

        overflow-x:
            hidden;

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    .simple-brand {
        min-width: 0;
    }


    .simple-brand > div:not(.brand-icon) {
        min-width: 0;
    }


    .simple-brand strong,
    .simple-brand span {
        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    .simple-sidebar-close {
        flex:
            0 0 44px;

        width:
            44px;

        height:
            44px;

        min-width:
            44px;

        min-height:
            44px;
    }


    .simple-group-switcher,
    .portal-group-switcher,
    .portal-group-switcher-form,
    .portal-group-switcher-card {
        min-width: 0;

        max-width: 100%;
    }


    .portal-group-switcher-card {
        min-height: 58px;
    }


    .portal-group-switcher-copy {
        min-width: 0;
    }


    .portal-group-switcher-copy strong,
    .portal-group-switcher-copy small,
    .portal-group-switcher-copy select {
        max-width: 100%;
    }


    .simple-navigation .simple-nav-link {
        min-height: 48px;
    }


    /*
     * Topbar bleibt beim Scrollen erreichbar.
     */
    .simple-topbar {
        position: sticky;

        top: 0;

        z-index: 50;

        width: 100%;

        min-width: 0;

        min-height:
            calc(
                62px
                + env(safe-area-inset-top)
            );

        padding-top:
            env(safe-area-inset-top);

        padding-left:
            calc(
                16px
                + env(safe-area-inset-left)
            );

        padding-right:
            calc(
                16px
                + env(safe-area-inset-right)
            );

        background:
            rgba(255, 255, 255, .96);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }


    .simple-topbar .mobile-menu,
    .topbar-account-link {
        flex:
            0 0 44px;

        width:
            44px;

        height:
            44px;

        min-width:
            44px;

        min-height:
            44px;
    }


    .topbar-heading {
        min-width: 0;
    }


    .topbar-heading strong,
    .topbar-heading span {
        display: block;

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    /*
     * Hauptinhalt darf niemals die Viewport-Breite sprengen.
     */
    .simple-content {
        width: 100%;

        padding:
            20px
            max(
                18px,
                env(safe-area-inset-right)
            )
            calc(
                24px
                + env(safe-area-inset-bottom)
            )
            max(
                18px,
                env(safe-area-inset-left)
            );
    }


    .simple-content > *,
    .simple-content section,
    .simple-content article,
    .simple-content form,
    .simple-content header,
    .simple-content footer {
        min-width: 0;
    }


    .simple-content img,
    .simple-content video,
    .simple-content canvas {
        max-width: 100%;

        height: auto;
    }


    .simple-content input,
    .simple-content select,
    .simple-content textarea {
        max-width: 100%;

        min-width: 0;
    }


    /*
     * Popups / native Dialoge.
     */
    dialog {
        max-width:
            calc(100vw - 24px);

        max-height:
            calc(100dvh - 24px);
    }


    .gf-dialog,
    .wd2-dialog {
        width:
            min(
                620px,
                calc(100vw - 24px)
            ) !important;

        max-height:
            calc(100dvh - 24px);

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain;
    }


    .gf-menu-card,
    .wd2-popover {
        max-width:
            calc(100vw - 24px);

        max-height:
            min(
                70dvh,
                520px
            );

        overflow-y:
            auto;

        overscroll-behavior:
            contain;
    }


    /*
     * Große Datenbereiche dürfen innerhalb ihres Bereichs
     * horizontal scrollen, statt die komplette Seite zu verbreitern.
     */
    .gf-sheet,
    .calendar-month-scroll,
    .calendar-scroll,
    .table-scroll,
    .table-responsive,
    .responsive-table {
        max-width: 100%;

        overflow-x: auto;

        overscroll-behavior-inline:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }

}


/* ==========================================================
   HANDY
   ========================================================== */

@media (max-width: 760px) {

    /*
     * iOS zoomt Eingabefelder unter 16px automatisch.
     */
    input,
    select,
    textarea {
        font-size:
            16px;
    }


    .simple-content {
        padding:
            16px
            max(
                14px,
                env(safe-area-inset-right)
            )
            calc(
                22px
                + env(safe-area-inset-bottom)
            )
            max(
                14px,
                env(safe-area-inset-left)
            );
    }


    /*
     * Bedienflächen mindestens etwa 44px.
     */
    .primary-button,
    .secondary-button,
    .danger-button {
        min-height:
            44px;
    }


    /*
     * Lange Seitentitel dürfen nicht das Header-Layout sprengen.
     */
    .topbar-heading strong {
        font-size:
            clamp(
                .9rem,
                4vw,
                1rem
            );
    }


    .topbar-heading span {
        margin-top:
            1px;

        font-size:
            .72rem;
    }


    /*
     * Allgemeine Karten auf kleinen Displays.
     */
    .panel {
        max-width:
            100%;
    }


    /*
     * Datei-Modul
     */
    .gf-toolbar {
        width:
            100%;

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .gf-search {
        width:
            100%;

        min-width:
            0 !important;
    }


    .gf-actions {
        width:
            100%;

        justify-content:
            stretch;
    }


    .gf-actions > * {
        min-height:
            44px;

        flex:
            1 1 130px;
    }


    .gf-row {
        min-width:
            0;
    }


    .gf-main {
        min-width:
            0;
    }


    .gf-copy {
        min-width:
            0;
    }


    .gf-copy strong,
    .gf-copy small {
        max-width:
            100%;
    }


    .gf-empty,
    .wd-empty {
        padding:
            28px 18px !important;
    }


    .gf-editor-head {
        gap:
            12px;
    }


    .gf-text-editor {
        min-height:
            420px !important;

        padding:
            20px 14px !important;

        overflow-wrap:
            anywhere;
    }


    /*
     * Arbeitstage / Eventplanung
     */
    .wd-grid,
    .wd2-template-grid,
    .wd2-personnel-board {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .wd-event-card,
    .wd-open-event,
    .wd-plan,
    .wd-planner,
    .wd-plan-position,
    .wd2-event-row,
    .wd2-service-card,
    .wd2-task,
    .wd2-template-card {
        min-width:
            0;
    }


    .wd-event-card footer,
    .wd-template-actions,
    .wd2-template-actions,
    .wd2-signup-actions {
        flex-wrap:
            wrap;
    }


    .wd-event-card footer > *,
    .wd-template-actions > *,
    .wd2-template-actions > * {
        min-height:
            44px;
    }


    .wd2-event-tabs {
        max-width:
            100%;

        overflow-x:
            auto;

        overscroll-behavior-inline:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    .wd2-event-tabs a {
        min-height:
            44px;
    }


    /*
     * Formulare
     */
    .simple-content label,
    .simple-content fieldset {
        min-width:
            0;
    }


    .simple-content textarea {
        resize:
            vertical;
    }


    /*
     * Lange Wörter, Dateinamen und URLs dürfen Karten
     * nicht verbreitern.
     */
    .simple-content p,
    .simple-content small,
    .simple-content dd,
    .simple-content td {
        overflow-wrap:
            anywhere;
    }

}


/* ==========================================================
   SEHR KLEINE HANDYS
   ========================================================== */

@media (max-width: 480px) {

    .simple-topbar {
        padding-left:
            calc(
                10px
                + env(safe-area-inset-left)
            );

        padding-right:
            calc(
                10px
                + env(safe-area-inset-right)
            );

        gap:
            8px;
    }


    .simple-content {
        padding-left:
            max(
                12px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                12px,
                env(safe-area-inset-right)
            );
    }


    /*
     * Gruppenname steht im Drawer weiterhin zur Verfügung.
     * Im sehr kleinen Header sparen wir Platz.
     */
    .topbar-heading > span {
        display:
            none;
    }


    .gf-actions {
        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            8px;
    }


    .gf-actions > * {
        width:
            100%;
    }


    .wd2-metrics {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

}


/* ==========================================================
   LOGIN
   ========================================================== */

@media (max-width: 760px) {

    .login-body {
        width:
            100%;

        min-width:
            0;

        min-height:
            100vh;

        min-height:
            100dvh;

        overflow-x:
            hidden;
    }


    .login-page {
        width:
            100%;

        min-width:
            0;

        min-height:
            100vh;

        min-height:
            100dvh;

        padding:
            calc(
                18px
                + env(safe-area-inset-top)
            )
            calc(
                14px
                + env(safe-area-inset-right)
            )
            calc(
                18px
                + env(safe-area-inset-bottom)
            )
            calc(
                14px
                + env(safe-area-inset-left)
            );
    }


    .login-card {
        width:
            min(
                100%,
                460px
            ) !important;

        max-width:
            100% !important;

        max-height:
            calc(
                100dvh
                - 28px
                - env(safe-area-inset-top)
                - env(safe-area-inset-bottom)
            );

        padding:
            24px !important;

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    .login-header {
        display:
            grid;

        grid-template-columns:
            auto
            minmax(0, 1fr);

        align-items:
            center;

        gap:
            14px;
    }


    .login-header > div:last-child {
        min-width:
            0;
    }


    .login-header h1 {
        margin-bottom:
            5px;

        font-size:
            clamp(
                1.65rem,
                7vw,
                2rem
            );

        line-height:
            1.08;
    }


    .login-header p {
        margin-bottom:
            0;

        font-size:
            .9rem;

        line-height:
            1.45;
    }


    .login-card form,
    .login-field,
    .login-input {
        width:
            100%;

        min-width:
            0;
    }


    .login-input input {
        width:
            100%;

        min-width:
            0;

        font-size:
            16px;
    }


    .login-card .primary-button,
    .login-secondary-form .secondary-button {
        width:
            100%;

        min-height:
            48px;
    }


    .login-message {
        min-width:
            0;

        align-items:
            flex-start;
    }


    .login-message > span:last-child {
        min-width:
            0;

        overflow-wrap:
            anywhere;
    }

}


@media (max-width: 380px) {

    .login-card {
        padding:
            19px !important;

        border-radius:
            16px !important;
    }


    .login-header {
        gap:
            11px;
    }


    .login-logo,
    .portal-branding-login-logo {
        max-width:
            42px;
    }

}


/* ==========================================================
   LANDSCAPE HANDY
   ========================================================== */

@media (
    max-width: 900px
) and (
    orientation: landscape
) and (
    max-height: 520px
) {

    .login-page {
        align-items:
            flex-start;

        padding-top:
            calc(
                10px
                + env(safe-area-inset-top)
            );

        padding-bottom:
            calc(
                10px
                + env(safe-area-inset-bottom)
            );
    }


    .login-card {
        max-height:
            none;
    }

}