/* ==========================================================
   iPC Account Desktop UI
   File: resources/shell/shell.css
   Purpose: Main Desktop Layout
   ========================================================== */

/* ==========================================================
   ROOT SHELL
   ========================================================== */

.shell{
    width:100%;
    height:100vh;

    /*display:grid;*/

    /*grid-template-columns:240px 1fr;*/
    grid-template-rows:64px 1fr;

    grid-template-areas:
        "header header"
        "sidebar content";

    background:var(--bg);

    overflow:hidden;
    position: relative;
}

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

.shell-header{
    grid-area:header;

    position:relative;

    z-index:100;

    background:var(--panel);

    border-bottom:0px solid var(--border);

    overflow:hidden;
}

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

.shell-sidebar{ 
    position:fixed;  bottom: 0; left: 0;
    width: 100%; height: 50px;

    background:var(--panel);
   

    border-top:1px solid var(--border);

    overflow:hidden;

}

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

.shell-content{

    grid-area:content;
   height: 100vh;
    position:relative;

    overflow-x:hidden; overflow-y: scroll;

    background:var(--bg);

    padding:24px 24px 140px 24px;

}

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

.page{

    width:100%;

    min-height:100%;

    display:flex;

    flex-direction:column;

    gap:24px;

}

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

.page-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.page-title{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.page-title h1{

    margin:0;

}

.page-title p{

    margin:0;

}

/* ==========================================================
   PAGE TOOLBAR
   ========================================================== */

.page-toolbar{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

/* ==========================================================
   PAGE BODY
   ========================================================== */

.page-body{

    display:flex;

    flex-direction:column;

    gap:24px;

    flex:1;

}

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

.section{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

}

.section-title{

    font-size:1.1rem;

    font-weight:600;

}

/* ==========================================================
   CONTENT GRID
   ========================================================== */

.content-grid{

    display:grid;

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

    gap:24px;

}

.content-grid-2{

    display:grid;

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

    gap:24px;

}

.content-grid-3{

    display:grid;

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

    gap:24px;

}

/* ==========================================================
   CONTENT ROW
   ========================================================== */

.content-row{

    display:flex;

    gap:24px;

    align-items:flex-start;

}

.content-column{

    flex:1;

}

/* ==========================================================
   PANEL HELPERS
   ========================================================== */

.panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.panel-title{

    font-size:1rem;

    font-weight:600;

}

.panel-body{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.panel-footer{

    margin-top:20px;

    padding-top:16px;

    border-top:1px solid var(--border);

}

/* ==========================================================
   TABLE CONTAINER
   ========================================================== */

.table-container{

    overflow:auto;

    border-radius:12px;

    border:1px solid var(--border);

}

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

.card-grid{

    display:grid;

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

    gap:20px;

}

/* ==========================================================
   EMPTY PAGE
   ========================================================== */

.page-empty{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   LOADING PAGE
   ========================================================== */

.page-loading{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   FOOTER (OPTIONAL)
   ========================================================== */

.page-footer{

    margin-top:auto;

    padding-top:20px;

    border-top:1px solid var(--border);

}

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

@media (max-width:1200px){

    .content-grid-3{

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

    }

}

@media (max-width:900px){

    .shell{

        /*grid-template-columns:72px 1fr;*/

    }

    .content-grid-2,
    .content-grid-3{

        grid-template-columns:1fr;

    }

    .content-row{

        flex-direction:column;

    }

}

@media (max-width:768px){

   
    .page-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .page-toolbar{

        width:100%;

    }

}