/* =============================================================
   ZeonTools — Shared Utility CSS
   Merged from: append.css + mobile-grid-fix.css
   ============================================================= */

/* Global Container (Missing from style.css) */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Global Flex/Grid Blowout Preventer */
.studio-layout > *, .workspace-shell > *, .workspace-block > *, .sandbox-card, .workspace-panel, .ui-component-preview-container, .code-pre-box,
.fts-studio-layout > *, .fav-layout > *, .mixer-layout > *, .db-layout-grid > * {
    min-width: 0 !important;
}

@media (max-width: 1023px) {
    .calc-controls {
        position: static !important;
        top: auto !important;
        height: auto !important;
        overflow: visible !important;
        z-index: auto !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 2% !important;
        padding-right: 2% !important;
    }
    .static-content, .seo-article-body {
        padding: 0 6px !important;
        text-align: left !important;
        border-radius: 6px !important;
        border-left: none !important;
        border-right: none !important;
        gap: 6px !important;
    }
    .seo-article-body > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .seo-article-body .tool-guide {
        padding: 18px 16px !important;
        border-radius: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .seo-article-body .tool-guide h2 {
        font-size: 1.15rem !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }
    .seo-article-body .tool-guide p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
    }
    .seo-article-body .guide-table-wrap {
        margin: 12px 0 !important;
        width: 100% !important;
        overflow-x: auto !important;
        border-radius: 8px !important;
    }
    .seo-article-body .guide-table th,
    .seo-article-body .guide-table td {
        padding: 8px 8px !important;
        font-size: 0.8rem !important;
    }
    .seo-article-body .guide-callout {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        margin: 12px 0 !important;
    }
    .seo-article-body .alert-box-seo {
        padding: 14px 12px !important;
        margin-top: 14px !important;
        margin-bottom: 20px !important;
        font-size: 0.85rem !important;
        border-radius: 10px;
    }
    .seo-article-body .stat-highlight-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
        gap: 8px !important;
        margin: 12px 0 !important;
    }
    .seo-article-body .stat-highlight {
        padding: 10px 8px !important;
    }
    .seo-article-body .glossary-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 8px !important;
    }
    .seo-article-body .glossary-card {
        padding: 12px 10px !important;
    }
}

/* ============================================================
   UNIVERSAL MOBILE OVERFLOW FIX (Prevent Left-Clipping)
   ============================================================ */
@media (max-width: 768px) {
    /* Critical Flexbox Blowout Safeguards */
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        margin: 0;
        padding: 0;
    }
    
    .studio-layout, .workspace-block, .workspace-shell, .studio-stage,
    .fts-studio-layout, .fts-workspace, .fav-layout, .fav-workspace, .mixer-layout, .mixer-workspace, .db-layout-grid, .stage-area {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    main {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .tool-page-header {
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    /* Force containers to stay within viewport and prevent pushing */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Force any deeply nested flex items that might be forcing width to shrink or blowout */
    .studio-layout, .studio-controls, .studio-sidebar, .workspace-block, .workspace-shell, .ui-component-preview-container, .score-matrix-grid, .component-matrix-studio, .palette-matrix-table-wrap, .sandbox-card, .workspace-panel, .workspace-tabs-nav,
    .fts-studio-layout, .fts-controls, .fts-workspace, .fav-layout, .fav-controls, .fav-workspace, .mixer-layout, .mixer-controls, .mixer-workspace, .db-layout-grid, .db-header, .stage-area {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    
    /* Ensure the privacy banner wraps correctly */
    .privacy-banner {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}