/*  */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--gradient-primary);
}

.page {
    width: 100%;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
}

.auth-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    max-width: 420px;
}

.index-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.landing-index {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid {
    display: grid;
    gap: 20px;
}

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

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* =========================
   DASHBOARD LAYOUT (FUTURE)
========================= */

.dashboard {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 20px;
}

.main-content {
    background: var(--gray-background);
    padding: 20px;
}

/* =========================
   RESPONSIVE DESIGN
========================= */

@media (max-width: 480px) {

    .container {
        padding: 0 15px;
    }

    .auth-page {
        padding: 15px;
    }
}

@media (max-width: 768px) {

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

    .sidebar {
        display: none; /* or convert to mobile menu later */
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

}