/* =========================================================
   RESPONSIVE / iPhone + iPad
   Load AFTER MudBlazor.min.css and dialogs.css
   ========================================================= */

/* No grey flash when tapping buttons/links on iOS */
* {
    -webkit-tap-highlight-color: transparent;
}

html, body {
    /* Stop iOS enlarging text when the phone is turned sideways */
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

/* iPhone notch / home bar: keep content out of those areas */
.mud-appbar {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.mud-main-content {
    padding-bottom: env(safe-area-inset-bottom);
}

/* App bar logo scales down on small screens */
.appbar-logo {
    max-height: 40px;
    width: auto;
}


/* ── Phones and tablets (iPad portrait and smaller) ─────────────── */
@media (max-width: 960px) {

    /* iOS zooms in on any input with text smaller than 16px - prevent that */
    input, select, textarea,
    .mud-input > input.mud-input-root,
    .mud-input-slot {
        font-size: 16px !important;
    }

    /* Bigger tap targets for menu links */
    .mud-nav-link {
        min-height: 48px;
    }
}


/* ── Phones only ────────────────────────────────────────────────── */
@media (max-width: 600px) {

    /* Less side padding so content uses the full width */
    .mud-main-content .mud-container,
    .mud-main-content > .mud-paper {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .appbar-logo {
        max-height: 32px;
    }

    /* Dialogs use the full screen width on a phone */
    .mud-dialog-container .mud-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    .mud-dialog-container .mud-dialog .mud-dialog-title {
        border-radius: 0;
        padding-top: calc(16px + env(safe-area-inset-top));
        cursor: default;   /* no dragging on phones */
    }

    .mud-dialog-container .mud-dialog .mud-dialog-actions {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
}


/* ── Scroll areas inside dialogs: fit the real visible screen ──────
   100dvh = the height actually visible in Safari (excludes its toolbars).
   The first line is a fallback for older browsers. */
.mud-dialog .touch-scroll {
    max-height: calc(100vh - 260px) !important;
    max-height: calc(100dvh - 260px) !important;
}

@media (max-width: 600px) {
    .mud-dialog .touch-scroll {
        max-height: calc(100vh - 200px) !important;
        max-height: calc(100dvh - 200px) !important;
    }
}