/* =========================================
   MORZO SocietyOS
   Layout System
========================================= */


/* =========================================
   GLOBAL CONTAINER
========================================= */


.container {

    width:

    min(
        100% - 40px,
        var(--container-width)
    );


    margin-inline:

    auto;


}



/* =========================================
   APPLICATION ROOT
========================================= */


#app {

    min-height:

    100vh;

    display:

    flex;

    flex-direction:

    column;

}





/* =========================================
   PAGE WRAPPER
========================================= */


.page {


    width:

    100%;


    min-height:

    100vh;


}




/* =========================================
   SECTION SYSTEM
========================================= */


.section {


    width:

    100%;


    padding-block:

    var(--space-16);


}



.section-sm {


    padding-block:

    var(--space-8);


}



.section-lg {


    padding-block:

    var(--space-20);


}




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


.flex {


    display:

    flex;


}



.flex-column {


    flex-direction:

    column;


}



.flex-row {


    flex-direction:

    row;


}



.flex-center {


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


}



.flex-between {


    display:

    flex;


    align-items:

    center;


    justify-content:

    space-between;


}



.flex-start {


    display:

    flex;


    align-items:

    flex-start;


}





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


.grid{


    display:grid;


}



.grid-2{

    display:grid;

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

    gap:var(--space-8);

    align-items:start;

}



.grid-3{


    grid-template-columns:

    repeat(3,1fr);


    gap:

    var(--space-8);


}



.grid-4 {


    grid-template-columns:

    repeat(4,1fr);


    gap:

    var(--space-6);


}


.grid-contact{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:start;

}






/* =========================================
   DASHBOARD LAYOUT
========================================= */


.dashboard-layout {


    display:

    grid;


    grid-template-columns:

    var(--sidebar-width) 1fr;


    min-height:

    100vh;


}




/* =========================================
   SIDEBAR AREA
========================================= */


.sidebar {


    width:

    var(--sidebar-width);


    height:

    100vh;


    position:

    fixed;


    top:

    0;


    left:

    0;


}





/* =========================================
   MAIN CONTENT AREA
========================================= */


.main-content {


    margin-left:

    var(--sidebar-width);


    width:

    calc(
        100% - var(--sidebar-width)
    );


}




/* =========================================
   HEADER SPACE
========================================= */


.app-header {


    height:

    var(--header-height);


}





/* =========================================
   CONTENT WRAPPER
========================================= */


.content-wrapper {


    padding:

    var(--space-8);


}





/* =========================================
   CARD GRID
========================================= */


.card-grid {


    display:

    grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            280px,
            1fr
        )
    );


    gap:

    var(--space-6);


}





/* =========================================
   WIDGET GRID
========================================= */


.widget-grid {


    display:grid;

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

    gap:32px;

    margin-top:48px;


}





/* =========================================
   TABLE RESPONSIVE WRAPPER
========================================= */


.table-wrapper {


    width:

    100%;


    overflow-x:

    auto;


}





/* =========================================
   WIDTH UTILITIES
========================================= */


.w-full {


    width:

    100%;


}



.w-half {


    width:

    50%;


}



.max-content {


    max-width:

    var(--content-width);


}





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


.mt-1 {

    margin-top:

    var(--space-1);

}


.mt-2 {

    margin-top:

    var(--space-2);

}


.mt-4 {

    margin-top:

    var(--space-4);

}


.mt-6 {

    margin-top:

    var(--space-6);

}


.mt-8 {

    margin-top:

    var(--space-8);

}




.mb-4 {

    margin-bottom:

    var(--space-4);

}



.mb-8 {

    margin-bottom:

    var(--space-8);

}





/* =========================================
   RESPONSIVE LAYOUT
========================================= */


@media(max-width:1024px){


    .grid-4 {


        grid-template-columns:

        repeat(2,1fr);


    }



    .widget-grid {


        grid-template-columns:

        repeat(2,1fr);


    }



}





@media(max-width:768px){


    .container {


        width:

        calc(
            100% - 24px
        );


    }



    .grid-2,
    .grid-3,
    .grid-4 {


        grid-template-columns:

        1fr;


    }



    .dashboard-layout {


        display:

        block;


    }



    .sidebar {


        position:

        relative;


        width:

        100%;


        height:

        auto;


    }



    .main-content {


        margin-left:

        0;


        width:

        100%;


    }



    .content-wrapper {


        padding:

        var(--space-4);


    }



}