.layout-container {
    min-height: var(--app-dvh);
    display: flex;
    background: var(--bg-light);
    overflow-x: clip;
    --layout-primary: var(--primary-600);
    --layout-secondary: var(--primary-500);
}

#layoutRoot.subscription-locked {
    position: relative;
}

#layoutRoot.subscription-locked::after {
    content: "";
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: var(--z-modal);
    pointer-events: auto;
}

.modern-sidebar {
    width: var(--sidebar-width);
    height: var(--app-dvh);
    background: var(--primary-800);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--z-sidebar);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease;
    overflow: hidden;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
    transform: translateX(0);
}

.sidebar-header {
    padding: var(--sidebar-header-pad-y) var(--sidebar-header-pad-x);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: clamp(12px, calc(var(--section-gap) - 13px), 15px);
}

.logo-container {
    background: white;
    padding: 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.logo-image {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.brand-text {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.brand-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    margin-top: 2px;
}

.layout-container .main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: var(--app-dvh);
    transition: margin-left 0.3s ease;
}

#layoutRoot:not(.sidebar-open) .main-content,
.layout-container:not(.sidebar-open) .main-content {
    margin-left: 0;
    width: 100%;
}

.page-content {
    /* Override BlazorBootstrap global `main { height: 100vh; }` to avoid extra page scroll. */
    height: auto;
    min-height: max(0px, calc(var(--app-dvh) - var(--topbar-height) - var(--layout-footer-height)));
    min-width: 0;
    overflow: visible;
    background: var(--bg-light);
    container-type: inline-size;
}

.page-content > * {
    min-width: 0;
    max-width: 100%;
}

.page-content > * > * {
    min-width: 0;
}

.page-content img,
.page-content video,
.page-content canvas,
.page-content svg,
.page-content iframe,
.page-content embed,
.page-content object {
    max-width: 100%;
}

.page-content :where(.container, .container-fluid, .row, [class^="col-"], [class*=" col-"]) {
    min-width: 0;
    max-width: 100%;
}

.page-content :where(.container, .container-fluid) {
    padding-left: max(16px, var(--page-gutter-x));
    padding-right: max(16px, var(--page-gutter-x));
}

.page-content :where(
    [class$="-page"],
    [class$="-shell"],
    [class$="-hero"],
    [class$="-grid"],
    [class$="-card"],
    [class$="-panel"],
    [class$="-content"],
    [class$="-header"],
    [class$="-body"],
    [class$="-toolbar"],
    [class$="-filters"],
    [class$="-actions"],
    [class$="-stats"],
    [class$="-meta"],
    [class$="-section"],
    [class$="-detail"],
    [class$="-list"],
    [class$="-table"],
    [class$="-module"],
    [class$="-topic"],
    [class$="-resource"],
    [class$="-result"],
    [class$="-video"],
    [class$="-vocabulary"],
    [class$="-tips"],
    [class$="-grammar"],
    [class$="-toeic"],
    [class$="-aptis"],
    [class$="-vstep"]
) {
    min-width: 0;
    max-width: 100%;
}

.page-content :where(
    [class^="toeic700-"],
    [class*=" toeic700-"],
    [class^="grammar-"],
    [class*=" grammar-"],
    [class^="tips-"],
    [class*=" tips-"],
    [class^="vocabulary-"],
    [class*=" vocabulary-"],
    [class^="results-"],
    [class*=" results-"],
    [class^="resource-"],
    [class*=" resource-"],
    [class^="video-"],
    [class*=" video-"],
    [class^="module-"],
    [class*=" module-"],
    [class^="part-"],
    [class*=" part-"],
    [class^="notify-"],
    [class*=" notify-"],
    [class^="about-"],
    [class*=" about-"],
    [class^="support-"],
    [class*=" support-"],
    [class^="terms-"],
    [class*=" terms-"],
    [class^="profile-"],
    [class*=" profile-"],
    [class^="settings-"],
    [class*=" settings-"],
    [class^="seo-landing__"],
    [class*=" seo-landing__"]
) {
    min-width: 0;
    max-width: 100%;
}

.page-content :where(
    .do-test-container,
    .test-wrapper,
    .test-header-bar,
    .progress-bar-section,
    .display-mode-bar,
    .part-navigation,
    .test-content,
    .question-container,
    .test-action-bar,
    .test-translation-bar,
    .results-table,
    .table-wrap,
    .resource-preview,
    .toeic700-language-table-wrap,
    .toeic700-reading-intro-table-wrap,
    .tips-key-table-wrap
) {
    min-width: 0;
    max-width: 100%;
}

.page-content :where(
    .test-info,
    .test-header-actions,
    .selection-step-header,
    .selection-toolbar,
    .selection-actions,
    .results-control-row,
    .results-filter-group,
    .results-search,
    .resource-section-header,
    .video-title-row,
    .hero-actions,
    .hero-tags,
    .topbar-community-links,
    .user-profile
) {
    min-width: 0;
}

.page-content :where(
    .results-table,
    .table-wrap,
    .toeic700-language-table-wrap,
    .toeic700-reading-intro-table-wrap,
    .tips-key-table-wrap,
    .resource-preview
) {
    overflow-x: auto;
}

.page-content :where(h1, h2, h3, h4, h5, h6, p, blockquote, li) {
    min-width: 0;
}

.page-content :where(
    .hero-title,
    .hero-lead,
    .module-options-title,
    .part-selection-title,
    .card-title,
    .resource-title,
    .video-title-row h2,
    .toeic700-card-title,
    .review-board-title
) {
    overflow-wrap: anywhere;
}

.layout-footer {
    flex-shrink: 0;
    min-height: var(--layout-footer-height);
    background: white;
    padding: var(--footer-pad-y) var(--footer-pad-x);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--section-gap);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.footer-links {
    display: flex;
    gap: clamp(16px, calc(var(--section-gap) - 3px), 25px);
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--layout-primary);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: var(--z-sidebar-overlay);
    pointer-events: none;
}

#layoutRoot:not(.sidebar-open) .modern-sidebar,
.layout-container:not(.sidebar-open) .modern-sidebar {
    transform: translateX(-100%);
}

#layoutRoot.sidebar-open .top-navbar,
.layout-container.sidebar-open .top-navbar {
    z-index: var(--z-topbar-elevated);
}

/* Keep mobile drawer hidden until JS resolves first viewport state. */
#layoutRoot.sidebar-open:not(.layout-ready) .modern-sidebar {
    transform: translateX(-100%);
}

#layoutRoot.sidebar-open:not(.layout-ready) .sidebar-overlay {
    display: none;
}

#blazor-error-ui {
    background: var(--danger-gradient);
    bottom: 0;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 15px 20px;
    position: fixed;
    width: 100%;
    z-index: var(--z-blazor-error);
    color: white;
    font-weight: 500;
}

#blazor-error-ui .reload {
    color: white;
    margin-left: 15px;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
}

.modern-sidebar::-webkit-scrollbar {
    width: 6px;
}

.modern-sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.modern-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.modern-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1024px) {
    .layout-footer {
        padding: 16px 20px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .footer-links {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    #layoutRoot.sidebar-open .sidebar-overlay,
    .layout-container.sidebar-open .sidebar-overlay,
    .sidebar-overlay.active {
        display: block;
        pointer-events: auto;
    }

    .modern-sidebar {
        width: min(96vw, 360px);
        max-width: 360px;
        z-index: var(--z-sidebar-mobile);
    }

    .layout-container .main-content {
        margin-left: 0;
        width: 100%;
    }

    .layout-footer {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
}