/* ==========================================================================
   LAYOUT.CSS
   Globale Layoutstruktur für CrewHub
   ========================================================================== */


/* ==========================================================================
   APP LAYOUT
   ========================================================================== */

.app-container{
    display:flex;
    min-height:100vh;
    background:var(--bg-main);
}



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

.sidebar{
    display:flex;
    flex-direction:column;
    flex-shrink:0;
}

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

.sidebar-nav{
    display:flex;
    flex-direction:column;
    flex:1;
}

.sidebar-footer{
    margin-top:auto;
}



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

.main-content{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
}



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

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
}

.section-header h3{
    margin-bottom:0;
}


/* ==========================================================================
   PAGE CONTENT
   ========================================================================== */

.page-content{
    display:flex;
    flex-direction:column;
    gap:24px;
}



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

.content-wrapper{
    width:100%;
    max-width:1800px;
    margin:0 auto;
}



/* ==========================================================================
   GRID HELPERS
   ========================================================================== */

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

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

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

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



/* ==========================================================================
   FLEX HELPERS
   ========================================================================== */

.flex{
    display:flex;
}

.flex-column{
    display:flex;
    flex-direction:column;
}

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

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



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

@media (max-width:1200px){

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

}

@media (max-width:768px){

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

        grid-template-columns:1fr;

    }

}