/*
 * Cross-browser compatibility layer.
 * Keep this file limited to progressive enhancements and browser fixes:
 * it must not redefine the product's visual language.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* `overflow: clip` is preferable where available, but older WebKit releases
   ignore it. Keep `hidden` as the interoperable baseline so a single oversized
   descendant cannot widen the whole document on phones. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/*
 * Keep 100vh as the baseline supplied by the existing styles and prefer the
 * dynamic viewport only where the browser supports it. This avoids content
 * being hidden behind expanding/collapsing mobile browser chrome.
 */
@supports (height: 100dvh) {
    html,
    body {
        min-height: 100dvh;
    }

    body.min-vh-100 {
        min-height: 100dvh !important;
    }

    .mm-app-sidebar {
        min-height: 100dvh;
        height: 100dvh;
    }

    .mm-legal-shell {
        min-height: calc(100dvh - 7rem);
    }

    .mm-notfound-page {
        min-height: 100dvh;
    }
}

/* Prevent intrinsically sized media from forcing horizontal overflow on
   narrow screens without changing their requested aspect ratio. */
img,
video,
canvas {
    max-width: 100%;
}

/* Long technical values and user-provided strings must not widen cards or
   grids beyond the viewport on small devices. */
.mm-body pre,
.mm-body code,
.mm-body .text-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* iOS/WebKit inherits form typography differently in a few controls. */
button,
input,
select,
textarea {
    font: inherit;
}

/* Home belongs to the smartphone drawer, not to the desktop sidebar. */
.mm-mobile-home-link {
    display: none !important;
}

/*
 * Mobile application shell.
 *
 * musicmaster-golden-theme.css is intentionally reloaded at the end of the
 * application layout. Its desktop rule restores the sidebar padding after the
 * mobile rule in site.css has already run. Reassert the responsive shell here,
 * which is the final compatibility layer in the cascade.
 *
 * The second media query covers landscape phones and compact foldables whose
 * CSS viewport can exceed Bootstrap's md breakpoint while still being a
 * coarse-pointer touch device.
 */
@media (max-width: 767.98px),
       (max-width: 991.98px) and (hover: none) and (pointer: coarse) {
    body.mm-app-body,
    .mm-sidebar-collapsed body.mm-app-body {
        width: 100%;
        max-width: 100%;
        padding-left: 0 !important;
        padding-inline-start: 0 !important;
    }

    body.mm-app-body > .mm-app-sidebar,
    .mm-sidebar-collapsed body.mm-app-body > .mm-app-sidebar {
        width: min(86vw, 280px) !important;
        max-width: calc(100vw - 1rem);
        transform: translateX(-105%) !important;
        box-shadow: 12px 0 36px rgba(0, 0, 0, .45);
    }

    body.mm-app-body.mm-mobile-sidebar-open > .mm-app-sidebar,
    .mm-sidebar-collapsed body.mm-app-body.mm-mobile-sidebar-open > .mm-app-sidebar {
        transform: translateX(0) !important;
    }

    body.mm-app-body.mm-mobile-sidebar-open {
        overflow: hidden;
    }

    .mm-app-body .mm-sidebar-toggle {
        display: none !important;
    }

    .mm-app-body .mm-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1035;
        display: none;
        border: 0;
        background: rgba(0, 0, 0, .62);
    }

    .mm-app-body.mm-mobile-sidebar-open .mm-sidebar-backdrop {
        display: block !important;
    }

    .mm-app-body .mm-mobile-home-link {
        display: flex !important;
    }

    .mm-app-body .mm-app-main,
    .mm-app-body .mm-main-content,
    .mm-app-body .mm-page-host,
    .mm-app-body .mm-page-shell {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-inline: 0;
    }

    .mm-app-body .mm-page-host {
        padding-inline: clamp(.5rem, 2.5vw, .85rem) !important;
    }

    /* The mobile header is always the anchor of the reserved area. Keep it
       visible while the page scrolls and expose the drawer trigger that the
       existing sidebar JavaScript already understands. */
    .mm-app-body .mm-topbar.mm-topbar--page-context {
        position: sticky !important;
        top: 0;
        z-index: 1050;
        display: flex !important;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 3.75rem;
        padding: .5rem clamp(.55rem, 2.5vw, .85rem) !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        gap: .55rem !important;
        overflow: visible;
    }

    .mm-app-body .mm-mobile-menu-button {
        display: inline-grid !important;
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
        flex: 0 0 2.75rem;
        place-items: center;
        align-self: flex-start;
        padding: 0;
        border: 1px solid var(--mm-border);
        border-radius: var(--mm-radius-sm, .618rem);
        color: var(--mm-text);
        background: rgba(10, 28, 47, .92);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
        line-height: 1;
    }

    .mm-app-body .mm-mobile-menu-button:focus-visible {
        outline: 3px solid rgba(67, 162, 255, .34);
        outline-offset: 2px;
    }

    .mm-app-body .mm-mobile-menu-button > i {
        font-size: 1.35rem;
        line-height: 1;
    }

    .mm-topbar-page-context,
    .mm-topbar-page-context > .mm-page-header,
    .mm-topbar-page-context .mm-page-header__row,
    .mm-topbar-page-context .mm-page-header__content,
    .mm-topbar-page-context .mm-page-header__actions {
        min-width: 0;
        max-width: 100%;
    }

    .mm-topbar-page-context {
        width: auto !important;
        flex: 1 1 auto;
    }

    .mm-topbar-system-actions {
        flex: 0 0 auto;
        align-self: flex-start;
        min-width: 0;
    }

    .mm-topbar-page-context .mm-page-header__title {
        overflow-wrap: anywhere;
    }

    .mm-topbar-page-context .mm-page-header__actions {
        width: 100%;
    }

    .mm-topbar-page-context .mm-page-header__actions > a,
    .mm-topbar-page-context .mm-page-header__actions > button {
        flex: 1 1 9rem;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    .mm-topbar-page-context .archive-header-storage {
        flex: 1 1 9rem;
        min-width: 0;
        max-width: 100%;
    }

    .table-responsive,
    .overflow-auto {
        -webkit-overflow-scrolling: touch;
    }
}

/* Archive has a dense desktop toolbar. On a phone, explicitly make every
   layout track shrinkable instead of relying on intrinsic widths from selects,
   labels or translated text. This prevents the entire page from being pushed
   outside the viewport on Android Chromium, Firefox Android and iOS WebKit. */
@media (max-width: 767.98px) {
    .archive-page {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
    }

    .archive-page .archive-toolbar {
        box-sizing: border-box;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: .6rem !important;
    }

    .archive-page .archive-toolbar__stats {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100%;
        min-width: 0;
    }

    .archive-page .archive-toolbar-stat,
    .archive-page .archive-toolbar-stat__content,
    .archive-page .archive-toolbar-stat__content small,
    .archive-page .archive-toolbar-stat__content strong {
        min-width: 0;
    }

    .archive-page .archive-search {
        grid-column: 1 / 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .archive-page .archive-search input {
        width: 100%;
        min-width: 0;
    }

    .archive-page .archive-sort {
        grid-column: 1 / 2 !important;
    }

    .archive-page .archive-page-size {
        grid-column: 2 / 4 !important;
    }

    .archive-page .archive-toolbar .form-select,
    .archive-page .archive-sort,
    .archive-page .archive-page-size {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .archive-page .archive-toolbar__context {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 2.75rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        gap: .6rem !important;
    }

    .archive-page .archive-project-filter {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .archive-page .archive-toolbar__context .archive-search-button {
        grid-column: 2 !important;
        width: 2.75rem !important;
        min-width: 2.75rem !important;
        max-width: 2.75rem !important;
        padding-inline: 0 !important;
    }

    .archive-page #archive-results,
    .archive-page #archive-results .archive-table-card,
    .archive-page #archive-results .table-responsive {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .archive-page #archive-results .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }
}

/* Very narrow legacy phones still exist in the wild. Avoid two squeezed KPI
   columns and let translated header actions use the complete row. */
@media (max-width: 359.98px) {
    .archive-page .archive-toolbar__stats {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mm-topbar-page-context .mm-page-header__actions > a,
    .mm-topbar-page-context .mm-page-header__actions > button,
    .mm-topbar-page-context .archive-header-storage {
        flex-basis: 100%;
        width: 100%;
    }
}