/* 
 * Macro Layout Fix - Giải quyết vấn đề tràn chiều ngang
 * Fix horizontal overflow issues in macro templates
 */

/* ==================== GLOBAL OVERFLOW FIXES ==================== */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    position: relative;
}

/* Fix navbar không gây overflow */
.navbar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    left: 0 !important;
    right: 0 !important;
}

.navbar .container {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* ==================== MACRO CONTAINER FIXES ==================== */
.macro-container {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
}

/* Main content không tràn */
.main-content {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 32px 20px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* ==================== FRED IFRAME FIXES ==================== */
.fred-iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 500px !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
}

/* Chart item containers */
.chart-item {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* ==================== CARD FIXES ==================== */
.card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Content header không tràn */
.content-header {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 35px 20px !important;
}

/* ==================== CHARTS GRID FIXES ==================== */
.charts-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.chart-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.chart-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ==================== DESCRIPTION BOXES FIXES ==================== */
.chart-description,
.detailed-description,
.guide-content,
.fomc-analysis-content,
.analysis-section,
.importance-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
}

/* ==================== TAB NAVIGATION FIXES ==================== */
.tab-navigation {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}

.tab-navigation::-webkit-scrollbar {
    height: 4px !important;
}

.tab-navigation::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

.tab-navigation::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 4px !important;
}

/* ==================== TIMELINE CONTROLS FIXES ==================== */
.timeline-controls {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.control-buttons {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ==================== SPX CHART FIXES ==================== */
.spx-chart-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.spx-chart-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ==================== RESPONSIVE FIXES ==================== */
@media (max-width: 1400px) {
    .navbar .container {
        max-width: 1200px !important;
    }
    
    .main-content {
        max-width: 1200px !important;
    }
}

@media (max-width: 1200px) {
    .navbar .container {
        max-width: 960px !important;
    }
    
    .main-content {
        max-width: 960px !important;
        padding: 32px 15px !important;
    }
}

@media (max-width: 992px) {
    .navbar .container {
        max-width: 720px !important;
    }
    
    .main-content {
        max-width: 720px !important;
        padding: 24px 15px !important;
    }
    
    .content-header {
        padding: 25px 15px !important;
    }
}

@media (max-width: 768px) {
    .navbar .container {
        max-width: 540px !important;
        padding: 0 15px !important;
    }
    
    .main-content {
        max-width: 100% !important;
        padding: 20px 15px !important;
    }
    
    .content-header {
        padding: 20px 15px !important;
    }
    
    .card {
        padding: 20px 15px !important;
    }
    
    .fred-iframe {
        height: 400px !important;
    }
    
    .chart-controls,
    .control-buttons {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .tab-navigation {
        justify-content: flex-start !important;
        padding-bottom: 8px !important;
    }
}

@media (max-width: 576px) {
    .navbar .container {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    .main-content {
        padding: 16px 10px !important;
    }
    
    .content-header {
        padding: 16px 10px !important;
    }
    
    .card {
        padding: 16px 10px !important;
    }
    
    .fred-iframe {
        height: 350px !important;
    }
    
}

/* ==================== FORCE NO HORIZONTAL SCROLL ==================== */
* {
    max-width: 100% !important;
}

/* Exceptions for elements that need to be wider */
.nav-dropdown-menu,
.nav-submenu,
.user-dropdown-menu {
    max-width: none !important;
}

/* Canvas elements need special handling */
canvas {
    max-width: 100% !important;
}

/* ==================== PLOTLY RESPONSIVE FIXES ==================== */
.js-plotly-plot,
.plotly,
.plotly .plot-container {
    width: 100% !important;
    max-width: 100% !important;
}

.plotly .svg-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==================== SIDEBAR FIXES (if exists) ==================== */
.sidebar {
    max-width: 280px !important;
    overflow-x: hidden !important;
}

/* ==================== UTILITY CLASSES ==================== */
.no-overflow {
    overflow-x: hidden !important;
}

.full-width {
    width: 100% !important;
}

.max-full-width {
    max-width: 100% !important;
}

.box-border {
    box-sizing: border-box !important;
}