/* Responsive rules for phones (down to 360px) and tablets.
   Linked after site.css/override.css. Breakpoints follow MudBlazor: xs < 600, sm < 960, md >= 960.
   Colors must come from palette variables (var(--mud-palette-*)); never hard-code light colors here. */

/* ---- Page level: never scroll the page sideways (grids scroll inside .mud-table-container) ---- */
/* overflow-x: clip does not create a scroll container, so position: sticky keeps working. */
.mud-layout,
.mud-main-content {
    max-width: 100%;
    overflow-x: clip;
}

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

.mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- App bar: logo + title may shrink; actions never do ---- */
.mud-appbar .mud-toolbar {
    min-width: 0;
}

.mud-appbar .th-appbar-logo,
.mud-appbar .mud-icon-button,
.mud-appbar .mud-button-root {
    flex-shrink: 0;
}

.mud-appbar .th-appbar-title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Phones and tablets (< md) ---- */
@media (max-width: 959.98px) {
    /* List toolbars wrap: search grows, Add button and deleted switch drop to the next line. */
    .mud-table-toolbar {
        height: auto;
        min-height: var(--mud-internal-toolbar-height);
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .mud-table-toolbar > .mud-input-control {
        flex: 1 1 200px;
        min-width: 0;
        max-width: 100%;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Beats the 320px cap in override.css (same !important, loaded later). */
    .mud-table-toolbar > .th-toolbar-search {
        flex: 1 1 200px !important;
        max-width: 100% !important;
        min-width: 0;
    }

    /* iOS Safari zooms the page when a focused field renders below 16px. */
    .mud-input-root,
    .mud-input > input,
    .mud-input > textarea,
    .mud-input-slot,
    .mud-select-input,
    .mud-select .mud-input-slot {
        font-size: 16px !important;
    }

    /* Tabs keep their scroll buttons but never push the page wider. */
    .mud-tabs,
    .mud-tabs-toolbar {
        max-width: 100%;
    }

    /* Action rows (Save / Cancel / Back ...) wrap instead of overflowing. */
    .sticky-action-bar .mud-stack,
    .sticky-action-bar .d-flex,
    .mud-card-actions,
    .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .sticky-action-bar {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---- Phones (xs) ---- */
@media (max-width: 599.98px) {
    /* Dialogs: 8px margin, scrollable body, never wider than the screen. */
    .mud-dialog:not(.mud-dialog-fullscreen) {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
        max-height: calc(100% - 16px);
    }

    .mud-dialog.mud-dialog-width-full {
        width: calc(100% - 16px);
    }

    .mud-dialog .mud-dialog-content {
        overflow-y: auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    .mud-dialog .mud-dialog-title {
        padding: 12px 16px;
    }

    .mud-snackbar {
        max-width: calc(100vw - 16px);
    }
}

/* ---- Label + field rows (th-form-row): label above the field once the column gets narrow ---- */
@media (max-width: 959.98px) {
    .th-form-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    .th-form-row > .mud-input-control {
        width: 100%;
        align-self: stretch !important;
    }

    .th-form-row .mud-text.pt-3 {
        padding-top: 4px !important;
    }
}

@media (max-width: 599.98px) {
    .notification-page > .notification-period-tabs {
        min-width: 0;
        width: 100%;
    }
}

/* Overlay surfaces do not scroll the page behind them; taps respond without the double-tap delay. */
.mud-drawer-temporary,
.mud-dialog {
    overscroll-behavior: contain;
}

.mud-button-root,
.mud-icon-button,
.mud-nav-link {
    touch-action: manipulation;
}