/**
 * layout-patterns.css
 * Extracted from inline styles across EnigmAPI frontend
 * Contains reusable grid and flexbox layout patterns
 * Found in 48+ files across all portals
 */

/* ========================================
   GRID LAYOUT PATTERNS
   Most duplicated patterns extracted from user portal
   ======================================== */

/**
 * Stats Grid - Most common pattern
 * Extracted from: dashboard.html, analytics.html, and 40+ other files
 * Auto-fit grid with responsive breakpoints
 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* Compact variant */
.stats-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Wide variant */
.stats-grid-wide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/**
 * Metrics Grid
 * Extracted from: analytics.html, dashboard analytics sections
 */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/**
 * Pages Grid
 * Extracted from: index.html, navigation pages
 */
.pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/**
 * Bots Grid
 * Extracted from: assigned-bots.html, bot management pages
 */
.bots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

/**
 * Cards Grid - 2 Column Layout
 * Common in dashboard sections
 */
.cards-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/**
 * Cards Grid - 3 Column Layout
 */
.cards-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/**
 * Cards Grid - 4 Column Layout
 */
.cards-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/**
 * Auto-fit Grid - Generic responsive grid
 */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

/**
 * Auto-fill Grid - Generic responsive grid
 */
.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* ========================================
   FLEXBOX LAYOUT PATTERNS
   ======================================== */

/**
 * Flex Row - Horizontal layout
 */
.flex-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.flex-row-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.flex-row-between {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.flex-row-start {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

.flex-row-end {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 1rem;
}

/**
 * Flex Column - Vertical layout
 */
.flex-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.flex-col-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

/**
 * Flex Wrap
 */
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ========================================
   CONTAINER PATTERNS
   ======================================== */

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-medium {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-full {
    width: 100%;
    padding: 0 1rem;
}

/* ========================================
   GUIDE CONTAINER
   Extracted from: api-key-setup.html, setup guides
   ======================================== */

.guide-container {
    max-width: 900px;
    margin: 0 auto;
}

/* ========================================
   SPACING PATTERNS
   ======================================== */

.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }
.gap-2xl { gap: 3rem; }

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

@media (max-width: 1200px) {
    .cards-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .bots-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

@media (max-width: 992px) {
    .cards-grid-3,
    .cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .cards-grid-2,
    .cards-grid-3,
    .cards-grid-4 {
        grid-template-columns: 1fr;
    }

    .stats-grid,
    .metrics-grid,
    .pages-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .bots-grid {
        grid-template-columns: 1fr;
    }

    .flex-row-between {
        flex-direction: column;
        align-items: flex-start;
    }

    .flex-wrap {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .gap-lg { gap: 1rem; }
    .gap-xl { gap: 1.5rem; }
    .gap-2xl { gap: 2rem; }

    .container-narrow,
    .container-medium,
    .container-wide {
        padding: 0 0.75rem;
    }
}

/* ========================================
   SIDEBAR LAYOUTS
   ======================================== */

.sidebar-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

.sidebar-layout-wide {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
}

@media (max-width: 992px) {
    .sidebar-layout,
    .sidebar-layout-wide {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ========================================
   DASHBOARD LAYOUTS
   ======================================== */

.dashboard-layout {
    display: grid;
    gap: 2rem;
}

.dashboard-2-col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.dashboard-3-col {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
}

@media (max-width: 992px) {
    .dashboard-2-col,
    .dashboard-3-col {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ========================================
   CENTERED LAYOUTS
   ======================================== */

.center-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.center-vertical {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.center-horizontal {
    display: flex;
    justify-content: center;
}

/* ========================================
   STACK LAYOUTS
   ======================================== */

.stack {
    display: flex;
    flex-direction: column;
}

.stack > * + * {
    margin-top: 1rem;
}

.stack-sm > * + * {
    margin-top: 0.5rem;
}

.stack-lg > * + * {
    margin-top: 1.5rem;
}

.stack-xl > * + * {
    margin-top: 2rem;
}

/* ========================================
   INLINE GRID UTILITY
   For quick inline usage like: style="display: grid; gap: 1rem;"
   ======================================== */

.grid { display: grid; }
.inline-grid { display: inline-grid; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }