/*
 * StagePoint mobile-wide improvements (site shell and shared components only).
 * Existing desktop layout and all PHP permission/data workflows stay intact.
 * At <=700px, JS enables an accessible drawer; without JS the original
 * mobile navigation remains visible as a progressive enhancement fallback.
 */
.sp-mobile-nav-backdrop,
.sp-mobile-nav-close,
.sp-mobile-nav-toggle { display:none; }
.sp-mobile-table-scroll { max-width:100%; min-width:0; }
@media (min-width:701px){
    .sp-mobile-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

@media (max-width:700px){
    /* The fixed drawer must not reserve a desktop grid column on phones. */
    .portal-shell { display:block; grid-template-columns:minmax(0,1fr); }
    .portal-main { display:block;grid-column:auto;width:100%;max-width:100%; }
    .portal-header-subtitle { display:none; }
    .portal-user { max-width:92px;min-width:0;overflow:hidden; }
    .portal-user-name,.portal-user-role { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .portal-theme-form { margin:0; }
    .portal-theme-toggle { font-size:.78rem;white-space:nowrap; }
    html,body { max-width:100%; }
    .portal-shell, .portal-main, main.page, main.page .container { min-width:0; }
    main.page { max-width:100%; padding:18px 13px calc(100px + env(safe-area-inset-bottom, 0px)); }
    main.page .container { width:100%; max-width:100%; }
    main.page :is(.card,.card-content,.dashboard-card,.shutdown-card,.shutdown-summary-card,.shutdown-details-card,.page-heading,.form-grid,.form-group,.form-row,.form-actions) {
        min-width:0;
    }
    main.page :is(p,h1,h2,h3,small,dd,dt,.field-help,.card-content) {
        overflow-wrap:break-word;
    }
    main.page img,main.page video {
        max-width:100%;height:auto;
    }
    main.page :is(input,select,textarea) {
        max-width:100%;box-sizing:border-box;
    }
    /* 16px prevents iOS zooming the viewport when the keyboard is opened. */
    main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
        font-size:max(16px, 1em);
    }
    main.page :is(button,.button,input[type="submit"],input[type="button"],select) {
        min-height:44px;
    }
    main.page .button { white-space:normal;text-align:center; }
    main.page :is(.table-container,.stagepoint-report-scroll,.sp-mobile-table-scroll) {
        max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
    }
    main.page .sp-mobile-table-scroll table { width:max-content;min-width:100%;max-width:none; }
    main.page .sp-mobile-table-scroll:focus-visible {
        outline:2px solid var(--sms-blue);outline-offset:2px;
    }
    main.page .portal-table th,main.page .portal-table td {
        white-space:nowrap;
    }
    main.page .page-heading { gap:12px; }
    main.page .page-heading h1 { font-size:clamp(1.32rem,5.4vw,1.85rem);line-height:1.2; }
    main.page .page-heading .button { width:100%; }
    main.page .dashboard-actions { flex-wrap:wrap;gap:9px; }
    main.page .dashboard-actions>* { min-width:0; }
    main.page :is(.shutdown-summary-grid,.shutdown-primary-actions,.shutdown-workspace-columns,.dashboard-grid) {
        min-width:0;
    }
    .portal-header-right { min-width:0;flex:0 0 auto;gap:7px; }
    .portal-header-left { flex:1;min-width:0;overflow:hidden; }
    .portal-header { max-width:100%;box-sizing:border-box; }
    .portal-header-title { max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap; }
    .portal-header-left { flex:1;min-width:0; }
    .portal-theme-toggle { min-height:44px;min-width:44px;padding:8px 10px; }
    .portal-header-tip { display:none; }

    /* The compact drawer replaces the huge vertical full-screen nav on phones. */
    html.sp-responsive-nav .portal-sidebar {
        position:fixed;inset:0 auto 0 0;
        display:flex;flex-direction:column;
        width:min(84vw,320px);max-width:320px;
        height:100vh;height:100dvh;
        overflow-y:auto;padding-bottom:env(safe-area-inset-bottom, 0px);
        z-index:210;
        transform:translateX(-105%);
        visibility:hidden;pointer-events:none;
        transition:transform .2s ease,visibility .2s;
        box-shadow:8px 0 32px #00000030;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
    html.sp-responsive-nav.sp-nav-open .portal-sidebar {
        transform:translateX(0);visibility:visible;pointer-events:auto;
    }
    html.sp-responsive-nav .portal-brand {
        position:sticky;top:0;z-index:2;
        display:flex;justify-content:space-between;gap:10px;
        height:70px;min-height:70px;padding:10px 12px;
        flex-direction:row;text-align:left;
    }
    html.sp-responsive-nav .portal-logo { max-width:175px;max-height:49px;object-fit:contain; }
    html.sp-responsive-nav .sp-grouped-nav {
        display:flex;flex-direction:column;align-items:stretch;
        gap:4px;padding:13px 12px 20px;
    }
    html.sp-responsive-nav .sp-grouped-nav>.portal-nav-link {
        width:100%;min-height:44px;gap:10px;padding:9px 12px;font-size:.86rem;
    }
    html.sp-responsive-nav .sp-grouped-nav>.sp-nav-label {
        display:block;margin:13px 10px 4px;grid-column:auto;
    }
    html.sp-responsive-nav .sp-grouped-nav>.sp-nav-label-account {
        margin:16px 0 5px;padding:13px 10px 0;
    }
    html.sp-responsive-nav .sp-grouped-nav>.sp-nav-group {
        display:block;width:100%;margin:6px 0 1px;
    }
    html.sp-responsive-nav .sp-nav-group-content { display:flex;flex-direction:column;gap:3px; }
    html.sp-responsive-nav .sp-nav-group-content .portal-nav-link {
        min-height:42px;padding:10px;font-size:.83rem;
    }
    html.sp-responsive-nav .portal-sidebar-footer { display:block; }
    html.sp-responsive-nav .portal-header {
        position:sticky;top:0;z-index:120;
        height:auto;min-height:64px;
        gap:9px;padding:8px calc(12px + env(safe-area-inset-right, 0px)) 8px calc(12px + env(safe-area-inset-left, 0px));
    }
    html.sp-responsive-nav .portal-header-title { font-size:clamp(.93rem,3.4vw,1.17rem); }
    html.sp-responsive-nav .sp-mobile-nav-toggle {
        flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center;
        width:44px;height:44px;padding:0;
        background:var(--card-background);color:var(--text-primary);
        border:1px solid var(--border);border-radius:9px;cursor:pointer;
    }
    html.sp-responsive-nav .sp-mobile-nav-close {
        flex:0 0 44px;display:flex;justify-content:center;align-items:center;
        width:44px;height:44px;border:1px solid #c8d5e4;
        background:#eef4fa;color:#1d4264;border-radius:9px;
        font-size:1.75rem;line-height:1;cursor:pointer;
    }
    html.sp-responsive-nav .sp-mobile-nav-bars { display:grid;gap:5px; }
    html.sp-responsive-nav .sp-mobile-nav-bars span {
        display:block;width:19px;height:2px;background:currentColor;border-radius:2px;
    }
    html.sp-responsive-nav .sp-mobile-nav-backdrop {
        position:fixed;inset:0;z-index:205;display:block;
        width:100%;height:100%;border:0;padding:0;
        background:#091c30a8;opacity:0;visibility:hidden;pointer-events:none;
        transition:opacity .2s ease,visibility .2s;
    }
    html.sp-responsive-nav.sp-nav-open .sp-mobile-nav-backdrop {
        opacity:1;visibility:visible;pointer-events:auto;
    }
    html.sp-responsive-nav.sp-nav-open body { overflow:hidden; }
    html.sp-responsive-nav .portal-main { min-width:0;max-width:100%; }
    html.sp-responsive-nav .sp-mobile-nav-toggle:focus-visible,
    html.sp-responsive-nav .sp-mobile-nav-close:focus-visible {
        outline:3px solid var(--sms-blue);outline-offset:2px;
    }
    html[data-theme="dark"].sp-responsive-nav .sp-mobile-nav-toggle {
        background:#25374b;color:#f1f7ff;border-color:#4c627e;
    }
    /* Forms, filters and dashboard actions need reasonable tap space. */
    .login-panel,.login-card { max-width:100%; }
    .login-page { padding:16px 12px; }
    .login-card { padding:22px 16px; }
    .login-body input:not([type="checkbox"]) { font-size:16px;max-width:100%; }
    .login-tv-link { min-height:58px; }
}
@media (max-width:380px){
    html.sp-responsive-nav .portal-header { gap:6px;padding:7px 9px; }
    html.sp-responsive-nav .portal-header-title { font-size:.9rem; }
    .portal-theme-toggle span:last-child { display:none; }
    .portal-theme-toggle { padding:8px; }
    main.page { padding:14px 10px 100px; }
    main.page .card-content { padding:17px 13px; }
}
@media(prefers-reduced-motion:reduce){
    html.sp-responsive-nav .portal-sidebar,
    html.sp-responsive-nav .sp-mobile-nav-backdrop { transition:none; }
}