/* =========================================================
   GRID LAYOUT SYSTEM (DASHBOARD FRAMEWORK)
========================================================= */

/* =========================
   1. BASIC GRID VARIANTS
========================= */

.equal-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.unEqual-grid-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.sideMenu-grid-row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.full-grid-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* =========================
   2. DASHBOARD GRID SYSTEMS
========================= */

.triple-grid-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.quad-grid-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.chart-focus-grid-row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.three-panel-grid-row {
    display: grid;
    grid-template-columns: 1.5fr 2.5fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.split-grid-row {
    display: grid;
    grid-template-rows: auto auto;
    gap: 24px;
    margin-bottom: 24px;
}

/* =========================
   3. CARD SYSTEM
========================= */

.grid-card {
    background: var(--bg-card, #fff);
    border-radius: 24px;
    padding: 20px 24px;
    border: 1px solid var(--border-color, #e2e8f0);
    transition: all 0.25s ease;
}

.grid-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

/* =========================
   4. RESPONSIVE BREAKPOINTS
========================= */

@media (max-width: 1200px) {

    .quad-grid-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .three-panel-grid-row {
        grid-template-columns: 1fr 2fr;
    }
}

@media (max-width: 992px) {

    .triple-grid-row {
        grid-template-columns: 1fr 1fr;
    }

    .chart-focus-grid-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .equal-grid-row,
    .unEqual-grid-row,
    .sideMenu-grid-row,
    .three-panel-grid-row,
    .triple-grid-row,
    .quad-grid-row {
        grid-template-columns: 1fr;
    }

    .grid-card {
        padding: 16px;
    }
}

/* =========================
   5. OPTIONAL UI ENHANCEMENTS
========================= */

/* Smooth entrance animation */
.grid-card {
    animation: fadeInUp 0.3s ease both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Better spacing control utility */
.no-gap {
    gap: 0 !important;
}

.small-gap {
    gap: 12px !important;
}

.large-gap {
    gap: 32px !important;
}

/* Full width override helper */
.full-span {
    grid-column: 1 / -1;
}