/* 
===========================================
📊 ZAP EMPRESARIAL - LAYOUT DASHBOARD
===========================================
Design baseado no Figma - Novo Visual 2025
Cores: Sky Blue (#1174DA), Navy (#234365), Ice Blue (#EEF6FE)
Fonte: Inter
*/

/* ===========================================
   🎯 CONTAINERS PRINCIPAIS
   =========================================== */

/* Container do main com altura fixa e scroll interno */
.dashboard-main-scrollable {
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* Área de scroll do dashboard */
.dashboard-scroll-area {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
}

/* ===========================================
   🎨 CARDS DO DASHBOARD - ESTILO FIGMA
   =========================================== */

.dashboard-card {
    background: #FFFFFF;
    border: 1px solid rgba(195, 195, 195, 0.5);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.dashboard-card:hover {
    border-color: #1174DA;
    box-shadow: 0 4px 12px rgba(17, 116, 218, 0.1);
}

.dark .dashboard-card {
    background: #111E28;
    border-color: rgba(195, 195, 195, 0.25);
}

.dark .dashboard-card:hover {
    border-color: #1174DA;
}

/* Títulos das seções com barra azul */
.dashboard-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #44505F;
    border-bottom: 2px solid #1174DA;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.dark .dashboard-section-title {
    color: #EEF6FE;
}



/* ===========================================
   🎨 SCROLLBAR CUSTOMIZADA
   =========================================== */

.dashboard-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.dashboard-scroll-area::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
    border-radius: 4px;
}

.dashboard-scroll-area::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 4px;
}

.dashboard-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* Dark mode para scrollbar */
.dark .dashboard-scroll-area::-webkit-scrollbar-track {
    background: #334155; /* slate-700 */
}

.dark .dashboard-scroll-area::-webkit-scrollbar-thumb {
    background: #475569; /* slate-600 */
}

.dark .dashboard-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}

/* ===========================================
    RESPONSIVE DESIGN
   =========================================== */

/* Mobile adjustments */
@media (max-width: 768px) {
    .dashboard-main-scrollable {
        max-height: calc(100vh - 60px);
    }
    
    .dashboard-scroll-area {
        max-height: calc(100vh - 140px);
    }
}