/**
 * Bootstrap Compatibility Layer - Grid & Layout
 * Grid system, spacing, display, and flex utilities
 */

/* ============================================
   GRID SYSTEM
   ============================================ */

.container-fluid {
    width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
}

.col, [class*="col-"] {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.col-12 { width: 100%; }
.col-6 { width: 50%; }
.col-4 { width: 33.333333%; }
.col-3 { width: 25%; }

@media (min-width: 576px) {
    .col-sm-6 { width: 50%; }
    .col-sm-4 { width: 33.333333%; }
    .col-sm-3 { width: 25%; }
}

@media (min-width: 768px) {
    .col-md-6 { width: 50%; }
    .col-md-4 { width: 33.333333%; }
    .col-md-3 { width: 25%; }
    .col-md-2 { width: 16.666667%; }
}

@media (min-width: 992px) {
    .col-lg-6 { width: 50%; }
    .col-lg-4 { width: 33.333333%; }
    .col-lg-3 { width: 25%; }
    .col-lg-2 { width: 16.666667%; }
}

@media (min-width: 1200px) {
    .col-xl-4 { width: 33.333333%; }
    .col-xl-3 { width: 25%; }
    .col-xl-2 { width: 16.666667%; }
}

@media (min-width: 1400px) {
    .col-xxl-2 { width: 16.666667%; }
}

/* Gap utilities for row */
.g-4 {
    --gutter-x: var(--space-6);
    --gutter-y: var(--space-6);
}

.g-4 > * {
    padding-left: calc(var(--gutter-x) / 2);
    padding-right: calc(var(--gutter-x) / 2);
    margin-bottom: var(--gutter-y);
}

/* ============================================
   SPACING UTILITIES
   ============================================ */

.py-4 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-5 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.p-3 { padding: var(--space-4) !important; }
.p-4 { padding: var(--space-6); }
.p-5 { padding: var(--space-8); }
.px-3 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }

.mb-3 { margin-bottom: var(--space-4) !important; }
.mb-4 { margin-bottom: var(--space-6) !important; }
.mt-2 { margin-top: var(--space-3) !important; }
.mt-3 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-8) !important; }
.me-1 { margin-right: var(--space-1) !important; }
.me-auto { margin-right: auto !important; }
.ms-2 { margin-left: var(--space-2) !important; }
.ms-auto { margin-left: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }

/* ============================================
   DISPLAY UTILITIES
   ============================================ */

.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-inline-block { display: inline-block !important; }
.d-inline { display: inline !important; }

/* ============================================
   FLEX UTILITIES
   ============================================ */

.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
.flex-wrap { flex-wrap: wrap !important; }

/* ============================================
   SIZE UTILITIES
   ============================================ */

.h-100 { height: 100% !important; }
.vh-100 { height: 100vh !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* ============================================
   POSITION UTILITIES
   ============================================ */

.position-relative { position: relative !important; }
.overflow-auto { overflow: auto !important; }