/**
 * 7GEN Dashboard - Flexbox Layout
 * Simple. Predictable. Works.
 */

.widget-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-lg);
    min-height: calc(100vh - 60px);
    align-items: flex-start;
    align-content: flex-start;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Widget sizing - default half width */
.widget {
    flex: 0 0 calc(50% - var(--space-md) / 2);
    min-height: 300px;
    max-height: 500px;
}

/* Size variations via data attribute */
.widget[data-size="small"] {
    flex: 0 0 calc(33.333% - var(--space-md));
    min-height: 200px;
    max-height: 300px;
}

.widget[data-size="large"] {
    flex: 0 0 calc(66.666% - var(--space-md) / 2);
    min-height: 350px;
    max-height: 600px;
}

.widget[data-size="full"] {
    flex: 0 0 100%;
    min-height: 400px;
    max-height: 700px;
}

/* Responsive */
@media (max-width: 1200px) {
    .widget {
        flex: 0 0 calc(50% - var(--space-md) / 2);
    }
    .widget[data-size="small"] {
        flex: 0 0 calc(50% - var(--space-md) / 2);
    }
    .widget[data-size="large"] {
        flex: 0 0 100%;
    }
}

@media (max-width: 768px) {
    .widget,
    .widget[data-size="small"],
    .widget[data-size="large"],
    .widget[data-size="full"] {
        flex: 0 0 100%;
        min-height: 250px;
        max-height: none;
    }
}