/* GWPTC site and legacy admin mobile refinement layer. */
html { scroll-padding-top: 5rem; }
body { min-width: 320px; }
img, video, canvas, svg, iframe { max-width: 100%; }
pre, code, .text-break { overflow-wrap: anywhere; }

.mobile-admin-menu-trigger,
.mobile-admin-sidebar-backdrop { display: none; }

@media (max-width: 767.98px) {
    html, body { max-width: 100%; }
    body { overflow-x: hidden; }
    main, header, footer, section, article, .container, .container-fluid { min-width: 0; }
    img, video { height: auto; }
    iframe { width: 100%; }
    pre, .overflow-x-auto, .overflow-auto, .table-responsive, .table-wrap, .table-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table { max-width: 100%; }
    table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    table table { display: table; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select, textarea { max-width: 100%; }
    button, .btn, input[type="submit"] { min-height: 42px; }
    h1 { font-size: clamp(1.75rem, 7vw, 2.45rem); line-height: 1.15; }
    h2 { font-size: clamp(1.35rem, 5.5vw, 1.9rem); line-height: 1.2; }
    .px-6, .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .p-8 { padding: 1.2rem !important; }
    .py-24, .py-20 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .grid.grid-cols-3, .grid.grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .bg-gray-50 #mobile-menu {
        width: min(100vw, 360px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .bg-gray-50 #mobile-menu .mobile-menu-link { min-height: 44px; }
    .mobile-admin-nav-ready { padding-top: 3.5rem !important; }
    html.mobile-admin-html { height: auto !important; min-height: 100%; overflow-y: auto !important; overflow-x: hidden !important; }
    body.mobile-admin-nav-ready { height: auto !important; min-height: 100vh; overflow-y: auto !important; }
    .mobile-admin-nav-ready .flex.h-screen.overflow-hidden { display: block !important; height: auto !important; min-height: 100vh; overflow: visible !important; }
    .mobile-admin-nav-ready .main-content { height: auto !important; min-height: 100vh; overflow: visible !important; }
    .mobile-admin-menu-trigger {
        position: fixed;
        z-index: 1202;
        top: .55rem;
        left: .65rem;
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        min-height: 44px;
        padding: .55rem .8rem;
        border: 1px solid rgba(255,255,255,.35);
        border-radius: 12px;
        background: var(--gwr-primary-dark, #7f1d1d);
        color: #fff;
        box-shadow: 0 6px 18px rgba(15,23,42,.22);
        font: 600 .9rem/1.1 system-ui, sans-serif;
    }
    .mobile-admin-sidebar-backdrop {
        position: fixed;
        z-index: 1200;
        inset: 0;
        border: 0;
        background: rgba(15,23,42,.56);
    }
    .mobile-admin-nav-ready .sidebar {
        position: fixed !important;
        z-index: 1201 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(18rem, 86vw) !important;
        max-width: 86vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        transform: translateX(-105%);
        transition: transform .24s ease;
        box-shadow: 18px 0 46px rgba(15,23,42,.28);
    }
    .mobile-admin-nav-ready.mobile-admin-nav-open .sidebar { transform: translateX(0); }
    .mobile-admin-nav-open .mobile-admin-sidebar-backdrop { display: block; }
    .mobile-admin-nav-open { overflow: hidden !important; }
}

@media (max-width: 520px) {
    .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .flex:not(.flex-col) { min-width: 0; }
    .text-5xl, .text-6xl { font-size: clamp(2.15rem, 11vw, 3rem) !important; }
    .gap-8 { gap: 1.15rem !important; }
    .gap-6 { gap: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-admin-nav-ready .sidebar { transition: none; }
}