/*
 * Site-wide responsive safety layer.
 * Uses fluid sizing and dynamic viewport units instead of fixed device resolutions.
 */
:root {
    --site-fluid-pad: clamp(12px, 3vw, 28px);
    --site-fluid-gap: clamp(10px, 2.4vw, 24px);
    --site-radius: clamp(12px, 2vw, 24px);
    --site-touch-target: 44px;
}

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

body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    min-width: 0;
    box-sizing: border-box;
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}

button,
.btn,
.button,
.nav-item,
.function-item,
.sub-function-item,
.tab-btn,
.modal-close {
    min-height: var(--site-touch-target);
    touch-action: manipulation;
}

.header,
.top-bar,
.admin-header,
.page-header {
    padding-left: max(var(--site-fluid-pad), env(safe-area-inset-left));
    padding-right: max(var(--site-fluid-pad), env(safe-area-inset-right));
}

.main-container,
.materials-main-container,
.user-center-container,
.membership-container,
.admin-container,
.db-app,
.bim-shell,
.specs-container {
    max-width: 100%;
}

.uc-content {
    width: min(100%, 1200px);
    max-width: 100%;
}

.content-area,
.materials-content,
.specs-content,
.uc-main,
.admin-main,
.table-container,
.result-section,
.calculation-container {
    min-width: 0;
}

.table-wrapper,
.table-container,
.comparison-table,
.logs-table-container,
.orders-table-container,
.ai-models-table-container,
.modules-table-container,
.specs-table-container,
.users-table-container,
.backup-table-container,
.materials-table-container,
.security-events-table-container,
.communication-table-container,
.compliance-table-wrapper,
.article-rich-html,
.spec-full-content-body {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.modal,
.home-auth-modal {
    padding:
        max(10px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        max(10px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left));
}

.modal-content,
.home-auth-dialog,
.module-param-editor-modal,
.module-specs-browser-modal,
.module-detail-modal,
.module-edit-modal,
.config-menu-modal,
.spec-edit-modal-shell,
.auth-container {
    width: min(100%, var(--modal-max-width, 1120px));
    max-width: calc(100vw - max(20px, calc(env(safe-area-inset-left) + env(safe-area-inset-right))));
    max-height: calc(100dvh - max(20px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom))));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-body,
.modules-modal-body {
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.form-row,
.form-grid,
.settings-grid,
.filter-grid,
.stats-grid,
.cards-grid,
.feature-cards-container,
.membership-plans,
.material-grid,
.materials-grid,
.process-details-grid,
.compliance-results,
.module-meta-grid,
.module-param-editor-layout,
.module-param-editor-stage,
.module-param-form-grid,
.module-specs-browser-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.process-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.article-rich-html table,
.spec-full-content-body table,
.data-table,
.compliance-table,
.regulation-table {
    max-width: none;
}

@media (max-width: 900px) {
    :root {
        --site-fluid-pad: clamp(12px, 4vw, 20px);
        --site-fluid-gap: clamp(10px, 3vw, 18px);
    }

    .header,
    .top-bar,
    .admin-header,
    .page-header {
        flex-wrap: wrap;
        gap: var(--site-fluid-gap);
    }

    .header-center,
    .nav-container,
    .tabs-container,
    .category-tabs,
    .uc-sidebar,
    .sidebar-content {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .main-container,
    .materials-main-container,
    .user-center-container,
    .admin-container,
    .module-param-editor-layout,
    .module-param-editor-stage,
    .module-specs-browser-grid,
    .articles-two-column {
        display: flex;
        flex-direction: column;
    }

    .sidebar,
    .materials-sidebar,
    .articles-sidebar,
    .uc-sidebar,
    .module-param-sidebar {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
    }

    .uc-content {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .uc-main,
    .uc-card,
    .uc-tab-content {
        width: 100%;
        max-width: 100%;
    }

    .uc-nav {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .uc-nav-item {
        flex: 0 0 auto;
    }

    .admin-sidebar {
        max-width: min(86vw, 320px);
    }

    .content-area,
    .materials-content,
    .specs-content,
    .uc-main,
    .admin-main,
    .articles-main {
        width: 100%;
        max-width: 100%;
    }

    .search-section,
    .materials-toolbar,
    .filters-row,
    .toolbar,
    .actions-row,
    .modal-footer,
    .modules-modal-footer,
    .modal-actions {
        flex-wrap: wrap;
        gap: var(--site-fluid-gap);
    }

    .search-input-row,
    .materials-search-row,
    .module-filter-grid,
    .module-edit-grid,
    .config-menu-grid,
    .spec-edit-modal-body,
    .form-row {
        grid-template-columns: 1fr;
    }

    .modal-content,
    .modal-content-wide,
    .home-auth-dialog,
    .module-param-editor-modal,
    .module-specs-browser-modal {
        border-radius: var(--site-radius);
    }

    .calculation-steps,
    .result-grid,
    .membership-plans,
    .feature-cards-container,
    .materials-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    body {
        font-size: clamp(14px, 3.7vw, 16px);
    }

    .header,
    .top-bar,
    .page-header,
    .admin-header {
        align-items: stretch;
    }

    .header-left,
    .header-right,
    .top-bar-left,
    .top-bar-right,
    .admin-header-left,
    .admin-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .main-container,
    .materials-main-container,
    .user-center-container,
    .membership-container,
    .admin-main,
    .db-app,
    .bim-shell,
    .specs-container {
        padding-left: var(--site-fluid-pad);
        padding-right: var(--site-fluid-pad);
    }

    .sidebar,
    .materials-sidebar,
    .content-area,
    .materials-content,
    .specs-content,
    .uc-main,
    .card,
    .spec-card,
    .material-card,
    .membership-card,
    .tool-card,
    .function-card,
    .modal-content,
    .auth-container {
        border-radius: var(--site-radius);
    }

    .btn,
    .button,
    .modal-footer .btn,
    .modal-actions button,
    .modules-modal-footer button {
        width: 100%;
    }

    .modal-header,
    .modal-body,
    .modal-footer,
    .modules-modal-header,
    .modules-modal-body,
    .modules-modal-footer {
        padding-left: var(--site-fluid-pad);
        padding-right: var(--site-fluid-pad);
    }

    .data-table {
        min-width: 680px;
    }

    .home-auth-dialog {
        width: 100%;
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    :root {
        --site-fluid-pad: 10px;
        --site-fluid-gap: 8px;
    }

    .header,
    .top-bar,
    .admin-header,
    .page-header {
        min-height: 48px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .main-container,
    .materials-main-container,
    .user-center-container,
    .membership-container,
    .admin-main,
    .db-app,
    .bim-shell,
    .specs-container {
        min-height: calc(100dvh - 54px);
    }

    .sidebar,
    .materials-sidebar,
    .articles-sidebar,
    .uc-sidebar,
    .module-param-sidebar {
        max-height: 42dvh;
        overflow: auto;
    }

    .modal-content,
    .home-auth-dialog,
    .module-param-editor-modal,
    .module-specs-browser-modal,
    .auth-container {
        max-height: calc(100dvh - 16px);
    }

    .home-auth-left,
    .auth-side-panel {
        display: none;
    }
}