/* =========================================
   layout.css
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:

        Inter,

        "Segoe UI",

        Arial,

        sans-serif;

    background:#f4f7fb;

    color:#222;
}

/* ==========================
    App
========================== */

.app{

    display:flex;

    width:100%;

    height:100vh;
}

/* ==========================
    Sidebar
========================== */

.sidebar{

    width:240px;

    background:#1f2937;

    color:white;

    display:flex;

    flex-direction:column;

    flex-shrink:0;
}

/* Logo */

.logo{

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    border-bottom:

        1px solid

        rgba(255,255,255,.08);
}

/* Menu */

.sidebar nav{

    flex:1;

    overflow:auto;

    padding-top:12px;
}

.sidebar ul{

    list-style:none;
}

.sidebar li{

    height:48px;

    display:flex;

    align-items:center;

    padding-left:28px;

    cursor:pointer;

    transition:.2s;

    font-size:15px;
}

.sidebar li:hover{

    background:#374151;
}

.sidebar li.active{

    background:#2563eb;

    font-weight:600;
}

/* ==========================
    Main
========================== */

.main{

    flex:1;

    display:flex;

    flex-direction:column;

    overflow:hidden;
}

/* ==========================
    TopBar
========================== */

.topbar{

    height:72px;

    background:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:

        0 28px;

    border-bottom:

        1px solid #e5e7eb;

    flex-shrink:0;
}

.topbar h1{

    font-size:28px;

    font-weight:600;
}

.user{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#2563eb;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:700;
}

/* ==========================
    Content
========================== */

#content{

    flex:1;

    overflow:auto;

    padding:28px;
}

/* ==========================
    Dashboard Cards
========================== */

.cards{

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:20px;

    margin-bottom:24px;
}

/* ==========================
    Panel
========================== */

.panel{

    background:white;

    border-radius:12px;

    padding:24px;

    box-shadow:

        0 3px 12px

        rgba(0,0,0,.05);
}

.panel-title{

    font-size:20px;

    font-weight:600;

    margin-bottom:20px;
}

/* ==========================
    Responsive
========================== */

@media (max-width:1200px){

    .cards{

        grid-template-columns:

            repeat(2,1fr);
    }

}

@media (max-width:768px){

    .sidebar{

        width:72px;
    }

    .logo{

        font-size:14px;

        text-align:center;

        padding:0 8px;
    }

    .sidebar li{

        justify-content:center;

        padding-left:0;

        font-size:12px;
    }

    .cards{

        grid-template-columns:

            1fr;
    }

    .topbar{

        padding:0 16px;
    }

    .topbar h1{

        font-size:22px;
    }

}