/* Sistema de Grid Responsivo - Dashboard SSMA */

/* Container base */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Grid principal */
.grid-12 {
    display: grid;
    gap: 20px;
    width: 100%;
}

/* Desktop - 12 colunas */
@media (min-width: 1024px) {
    .grid-12 {
        grid-template-columns: repeat(12, 1fr);
    }
    
    .col-1 { grid-column: span 1; }
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 5; }
    .col-6 { grid-column: span 6; }
    .col-7 { grid-column: span 7; }
    .col-8 { grid-column: span 8; }
    .col-9 { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
}

/* Tablet - 8 colunas */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid-12 {
        grid-template-columns: repeat(8, 1fr);
    }
    
    .col-1 { grid-column: span 1; }
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 4; }
    .col-6 { grid-column: span 6; }
    .col-7 { grid-column: span 6; }
    .col-8 { grid-column: span 8; }
    .col-9 { grid-column: span 8; }
    .col-10 { grid-column: span 8; }
    .col-11 { grid-column: span 8; }
    .col-12 { grid-column: span 8; }
}

/* Mobile - 4 colunas */
@media (max-width: 767px) {
    .grid-12 {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    
    .col-1 { grid-column: span 2; } /* KPIs ficam 2 col no mobile */
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 4; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 4; }
    .col-6 { grid-column: span 4; }
    .col-7 { grid-column: span 4; }
    .col-8 { grid-column: span 4; }
    .col-9 { grid-column: span 4; }
    .col-10 { grid-column: span 4; }
    .col-11 { grid-column: span 4; }
    .col-12 { grid-column: span 4; }
}

/* Layout principal Dashboard */
.dashboard-layout {
    display: grid;
    gap: 20px;
    min-height: calc(100vh - 80px);
}

/* Desktop Layout - Sidebar + Main */
@media (min-width: 1024px) {
    .dashboard-layout {
        grid-template-columns: 280px 1fr;
        grid-template-areas: "sidebar main";
    }
    
    .sidebar {
        grid-area: sidebar;
    }
    
    .main-content {
        grid-area: main;
    }
}

/* Tablet Layout - Sidebar recolhível */
@media (min-width: 768px) and (max-width: 1023px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "main";
    }
    
    .sidebar {
        position: fixed;
        left: -400px;
        top: 80px;
        width: 400px;
        height: calc(100vh - 80px);
        z-index: 1000;
        transition: left 0.3s ease;
        background: white;
        border-right: 1px solid #e0e0e0;
    }
    
    .sidebar.open {
        left: 0;
    }
    
    .main-content {
        grid-area: main;
    }
}

/* Mobile Layout - Filtros em acordeão */
@media (max-width: 767px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "sidebar"
            "main";
    }
    
    .sidebar {
        grid-area: sidebar;
        order: 1;
    }
    
    .main-content {
        grid-area: main;
        order: 2;
    }
}

/* Seções do dashboard */
.kpis-section,
.fila-aging-section,
.tendencia-section,
.riscos-section,
.rankings-positivos-section,
.aprendizados-section {
    margin-bottom: 32px;
}

/* Alturas padrão dos containers */
.kpi-card {
    min-height: 120px;
    max-height: 160px;
}

.chart-container,
.content-container {
    min-height: 350px; /* Increased 25% from 280px */
    /* AIDEV-NOTE: TASK-048 - Removed max-height to prevent clipping of waterfall chart X-axis labels */
    /* max-height: 425px; */
}

.rank-card {
    min-height: 200px;
    max-height: 280px;
}