/* =========================================================
   MAHA SHIKSHAN AWAAZ
   COMMON LAYOUT SYSTEM

   BREAKPOINTS
   ---------------------------------------------------------
   Mobile        : <= 599px
   Tablet        : 600px - 1023px
   Desktop       : >= 1024px

   IMPORTANT:
   - Common containers/grid/spacing belong here.
   - Page-specific arrangement belongs in page CSS.
   ========================================================= */


/* =========================================================
   MAIN PAGE STRUCTURE
   ========================================================= */

.site-wrapper {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background: var(--bg-page);
}

.site-main {
    flex: 1 0 auto;

    width: 100%;
}


/* =========================================================
   COMMON CONTENT CONTAINER
   ========================================================= */

.container {
    width: 100%;
    max-width: var(--content-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--desktop-padding);
    padding-right: var(--desktop-padding);
}


/* Wider container for admin tables / reports */

.container-wide {
    width: 100%;
    max-width: var(--content-wide);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--desktop-padding);
    padding-right: var(--desktop-padding);
}


/* Full width but still padded */

.container-fluid {
    width: 100%;

    padding-left: var(--desktop-padding);
    padding-right: var(--desktop-padding);
}


/* =========================================================
   PAGE SECTION
   ========================================================= */

.page-section {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

.page-section-sm {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.page-section-lg {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
}


/* =========================================================
   PAGE HEADER AREA
   ========================================================= */

.page-heading {
    margin-bottom: var(--space-6);
}

.page-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-4);
}

.page-title {
    margin: 0;

    color: var(--text-primary);

    font-size: var(--font-3xl);
    font-weight: 700;
    line-height: 1.25;
}

.page-subtitle {
    margin-top: var(--space-2);

    max-width: 760px;

    color: var(--text-secondary);
}


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

.d-flex {
    display: flex !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-center {
    align-items: center !important;
}

.align-end {
    align-items: flex-end !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.flex-grow {
    flex-grow: 1 !important;
}


/* =========================================================
   COMMON GAP UTILITIES
   ========================================================= */

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

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

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

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

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

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


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

.grid {
    display: grid;
    gap: var(--space-5);
}

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

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

.grid-4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* Automatically responsive cards */

.grid-auto {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 260px), 1fr)
        );

    gap: var(--space-5);
}


/* =========================================================
   TWO-COLUMN CONTENT LAYOUT
   ========================================================= */

.content-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap: var(--space-6);

    align-items: start;
}

.content-main {
    min-width: 0;
}

.content-sidebar {
    min-width: 0;
}


/* =========================================================
   CENTERED CONTENT
   ========================================================= */

.centered-page {
    min-height:
        calc(
            100vh - var(--header-height)
        );

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        var(--space-7)
        var(--desktop-padding);
}

.centered-box {
    width: 100%;
    max-width: 520px;
}


/* =========================================================
   CARD / PANEL LAYOUT WRAPPERS
   ========================================================= */

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

    gap: var(--space-5);
}

.inline-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-2);
}


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

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }


/* =========================================================
   TABLE / WIDE CONTENT SCROLL WRAPPER
   ========================================================= */

.table-responsive {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   VIDEO / MEDIA RESPONSIVE WRAPPER
   ========================================================= */

.media-responsive {
    position: relative;

    width: 100%;
    overflow: hidden;

    border-radius: var(--radius-lg);

    background: #000;
}

.media-responsive::before {
    display: block;
    content: "";

    padding-top: 56.25%;
}

.media-responsive > iframe,
.media-responsive > video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}


/* Vertical reel / Shorts */

.media-reel {
    position: relative;

    width: min(100%, 420px);

    margin-left: auto;
    margin-right: auto;

    overflow: hidden;

    aspect-ratio: 9 / 16;

    border-radius: var(--radius-lg);

    background: #000;
}

.media-reel > iframe,
.media-reel > video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* =========================================================
   MOBILE
   <= 599px
   ========================================================= */

@media (max-width: 599px) {

    .container,
    .container-wide,
    .container-fluid {
        padding-left: var(--mobile-padding);
        padding-right: var(--mobile-padding);
    }


    /* ---------------------------------------------
       Sections
       --------------------------------------------- */

    .page-section {
        padding-top: var(--space-5);
        padding-bottom: var(--space-5);
    }

    .page-section-lg {
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }


    /* ---------------------------------------------
       Heading
       --------------------------------------------- */

    .page-heading {
        margin-bottom: var(--space-5);
    }

    .page-heading-row {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title {
        font-size: 1.65rem;
    }


    /* ---------------------------------------------
       Grids
       --------------------------------------------- */

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


    /* ---------------------------------------------
       Main + Sidebar
       --------------------------------------------- */

    .content-layout {
        grid-template-columns: 1fr;
    }


    /* ---------------------------------------------
       Actions
       --------------------------------------------- */

    .mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mobile-full {
        width: 100% !important;
    }


    /* ---------------------------------------------
       Centered pages / login
       --------------------------------------------- */

    .centered-page {
        min-height: auto;

        padding:
            var(--space-5)
            var(--mobile-padding);
    }
}


/* =========================================================
   TABLET
   600px - 1023px
   ========================================================= */

@media (min-width: 600px) and (max-width: 1023px) {

    .container,
    .container-wide,
    .container-fluid {
        padding-left: var(--tablet-padding);
        padding-right: var(--tablet-padding);
    }


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


    .content-layout {
        grid-template-columns:
            minmax(0, 1fr)
            280px;

        gap: var(--space-5);
    }


    .centered-page {
        padding:
            var(--space-7)
            var(--tablet-padding);
    }
}


/* =========================================================
   DESKTOP
   >= 1024px
   ========================================================= */

@media (min-width: 1024px) {

    .desktop-only {
        display: initial;
    }

    .mobile-only {
        display: none !important;
    }
}


/* =========================================================
   MOBILE + TABLET
   < 1024px
   ========================================================= */

@media (max-width: 1023px) {

    .desktop-only {
        display: none !important;
    }
}


/* =========================================================
   PRINT LAYOUT
   ========================================================= */

@media print {

    .container,
    .container-wide,
    .container-fluid {
        max-width: none;

        padding-left: 0;
        padding-right: 0;
    }

    .page-section {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}