/* Template 2 unified application width
   Desktop/tablet landscape: fixed 480px centered
   Mobile: full viewport width */
:root {
    --template2-app-width: 480px;
}

html {
    width: 100%;
    min-height: 100%;
    background: #020d20;
}

body {
    width: 100% !important;
    max-width: var(--template2-app-width) !important;
    min-height: 100vh;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
}

/* Bootstrap containers must never expand beyond the app shell. */
body .container,
body .container-sm,
body .container-md,
body .container-lg,
body .container-xl,
body .container-xxl,
body .container-fluid,
body .main-container,
body .page-container,
body .content-container,
body .profile-container,
body .page-shell {
    max-width: 100% !important;
}

/* Any full-width/fixed bottom navigation iframe follows the same shell. */
iframe[src="nav.html"],
iframe[src="./nav.html"] {
    width: min(100vw, var(--template2-app-width)) !important;
    max-width: var(--template2-app-width) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* Common fixed/sticky app bars should visually align with the 480px shell. */
body > .bottom-nav,
body > .bottom-navigation,
body > .mobile-bottom-nav,
body > nav.fixed-bottom,
body > .fixed-bottom {
    width: min(100vw, var(--template2-app-width)) !important;
    max-width: var(--template2-app-width) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* Prevent desktop-only Bootstrap breakpoints from introducing wider margins. */
@media (min-width: 481px) {
    body {
        box-shadow: 0 0 0 1px rgba(18, 81, 145, .10), 0 0 32px rgba(0, 0, 0, .20);
    }

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    body {
        max-width: 100% !important;
        box-shadow: none !important;
    }

    iframe[src="nav.html"],
    iframe[src="./nav.html"] {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}




/* Exact desktop alignment: only the bottom navigation iframe follows app shell.
   Page-specific fixed elements must be handled by their own component CSS. */
@media (min-width:481px) {
    iframe[src="nav.html"],
    iframe[src="./nav.html"] {
        width:480px !important;
        max-width:480px !important;
        left:50% !important;
        right:auto !important;
        transform:translateX(-50%) !important;
    }
}