/*==============================
        LAYOUT GENERAL
==============================*/

body{

    margin:0;
    background:var(--page-bg);
    font-family:"Poppins",sans-serif;
    color:var(--text);

}

.page{

    width:100%;
    min-height:100vh;

}

.app-shell{

    display:flex;
    min-height:100vh;
    background:var(--page-bg);

}

.desktop-sidebar{

    width:260px;
    flex-shrink:0;
    padding:24px 20px;
    background:var(--overlay);
    backdrop-filter:blur(24px);
    border-right:1px solid var(--border);
    display:none;
    flex-direction:column;
    gap:18px;

}

.sidebar-brand{

    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 6px 18px;

}

.sidebar-brand-icon{

    width:48px;
    height:48px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white;
    box-shadow:var(--shadow-sm);

}

.sidebar-brand strong{

    display:block;
    font-size:18px;
    color:var(--text-strong);

}

.sidebar-brand span{

    color:var(--subtitle);
    font-size:12px;

}

.sidebar-nav{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.sidebar-link{

    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:16px;
    color:var(--subtitle);
    transition:var(--transition);
    text-decoration:none;

}

.sidebar-link:hover,
.sidebar-link.active{

    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white;
    box-shadow:var(--shadow-sm);

}

.sidebar-footer{

    margin-top:auto;
    padding:14px;
    border-radius:18px;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--subtitle);
    font-size:13px;

}

.desktop-main{

    flex:1;
    min-width:0;
    padding:24px 28px 32px;

}

.desktop-topbar{

    display:none;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    margin-bottom:24px;
    border-radius:24px;
    background:var(--overlay);
    backdrop-filter:blur(22px);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);

}

.topbar-title h2{

    margin:0;
    font-size:20px;
    color:var(--text-strong);

}

.topbar-title p{

    margin:2px 0 0;
    color:var(--subtitle);
    font-size:13px;

}

.topbar-actions{

    display:flex;
    align-items:center;
    gap:12px;

}

.theme-toggle{

    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);

}

.topbar-user{

    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:999px;
    background:var(--surface);
    border:1px solid var(--border);

}

.topbar-user .avatar,
.topbar-user .avatar-badge{

    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white;

}

.page-content{

    width:100%;
    max-width:1360px;
    margin:0 auto;

}

.bottom-nav{

    display:none;

}

@media(min-width:1024px){

    .desktop-sidebar{
        display:flex;
    }

    .desktop-topbar{
        display:flex;
    }

    .mobile-container{
        max-width:none;
        margin:0;
        min-height:auto;
        background:transparent;
        box-shadow:none;
        border:none;
        padding:0 0 24px;
    }

    .top-navbar,
    .topbar{
        display:none !important;
    }

    .bottom-nav{
        display:none !important;
    }

}

@media(max-width:1023px){

    .desktop-sidebar,
    .desktop-topbar{
        display:none;
    }

    .desktop-main{
        padding:0;
    }

}

@media(max-width:768px){

    .bottom-nav{
        position:fixed;
        bottom:15px;
        left:15px;
        right:15px;
        display:flex;
        justify-content:space-around;
        align-items:center;
        background:var(--surface);
        border:1px solid var(--border);
        border-radius:25px;
        box-shadow:0 15px 35px rgba(0,0,0,.15);
        padding:12px;
        z-index:999;
    }

    .bottom-nav a{
        color:var(--subtitle);
        font-size:22px;
    }

}