/**
 * 7GEN Dashboard - Responsive Flexbox Layout
 * 
 * Widget sizes:
 *   small  (width=1) → 33% desktop, 50% tablet, 100% mobile
 *   small2 (width=4) → 66% desktop (2 smalls), 66% tablet, 100% mobile
 *   medium (width=2) → 50% desktop, 50% tablet, 100% mobile
 *   large  (width=3) → 100% everywhere
 */

.widget-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    min-height: calc(100vh - 60px);
    align-items: flex-start;
    align-content: flex-start;
    max-width: 1400px;
    margin: 0 auto;
}

/* Base widget - medium by default (50%) */
.widget {
    flex: 0 0 calc(50% - 8px);
    min-height: 280px;
    max-height: 500px;
    display: flex;
    flex-direction: column;
}

/* Small - 33% (3 per row) */
.widget[data-size="small"] {
    flex: 0 0 calc(33.333% - 11px);
    min-height: 220px;
    max-height: 350px;
}

/* Small2 - 66% (same as 2 smalls) */
.widget[data-size="small2"] {
    flex: 0 0 calc(66.666% - 11px);
    min-height: 220px;
    max-height: 350px;
}

/* Large - 100% (full width) */
.widget[data-size="large"] {
    flex: 0 0 100%;
    min-height: 300px;
    max-height: 600px;
}

/* Tablet (< 1024px): small becomes 50%, large stays 100% */
@media (max-width: 1024px) {
    .widget-grid {
        padding: 16px;
        gap: 12px;
    }
    
    .widget,
    .widget[data-size="small"] {
        flex: 0 0 calc(50% - 6px);
    }
    
    .widget[data-size="small2"] {
        flex: 0 0 calc(66.666% - 6px);
    }
    
    .widget[data-size="large"] {
        flex: 0 0 100%;
    }
}

/* Mobile (< 768px): everything stacks */
@media (max-width: 768px) {
    .widget-grid {
        padding: 12px;
        gap: 12px;
    }
    
    .widget,
    .widget[data-size="small"],
    .widget[data-size="small2"],
    .widget[data-size="large"] {
        flex: 0 0 100%;
        min-height: 200px;
        max-height: none;
    }
}

/* Widget content should scroll if needed */
.widget-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}