/* ===============================================
   GRID.CSS - Unified Grid System
   IDENTICAL visual styling to Operator app
   =============================================== */

/* ===================================
   BASE UNIFIED GRID
   =================================== */

.unified-grid {
    display: grid;
    gap: var(--space-md);
    width: 100%;
    position: relative;
}

/* ===================================
   GRID TYPE: AUTO-FIT (Responsive)
   =================================== */

.unified-grid[data-grid-type="auto-fit"] {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width, 240px), 1fr));
}

/* Preset column widths */
.unified-grid[data-grid-cols="2"] {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.unified-grid[data-grid-cols="3"] {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.unified-grid[data-grid-cols="4"] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.unified-grid[data-grid-cols="5"] {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ===================================
   GRID TYPE: FIXED COLUMNS
   =================================== */

.unified-grid[data-grid-type="fixed"] {
    grid-template-columns: var(--grid-columns);
}

/* ===================================
   GAP VARIATIONS
   =================================== */

.unified-grid[data-gap="none"] {
    gap: 0;
}

.unified-grid[data-gap="xs"] {
    gap: var(--space-xs);
}

.unified-grid[data-gap="sm"] {
    gap: var(--space-sm);
}

.unified-grid[data-gap="md"] {
    gap: var(--space-md);
}

.unified-grid[data-gap="lg"] {
    gap: var(--space-lg);
}

.unified-grid[data-gap="xl"] {
    gap: var(--space-xl);
}

/* ===================================
   PRESET GRID PATTERNS
   =================================== */

.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.three-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-lg);
}

.four-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--space-lg);
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 1024px) {
    .unified-grid[data-grid-cols="2"],
    .unified-grid[data-grid-cols="3"],
    .unified-grid[data-grid-cols="4"],
    .unified-grid[data-grid-cols="5"] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    
    .four-col-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .unified-grid[data-grid-cols="2"],
    .unified-grid[data-grid-cols="3"],
    .unified-grid[data-grid-cols="4"],
    .unified-grid[data-grid-cols="5"],
    .unified-grid[data-grid-type="auto-fit"] {
        grid-template-columns: 1fr;
    }
    
    .two-col-grid,
    .three-col-grid,
    .four-col-grid {
        grid-template-columns: 1fr;
    }
}