/*
==========================================================
BRAVA HUB
LAYOUT
==========================================================
*/

:root{

    --sidebar-width:260px;
    --topbar-height:70px;

}

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

html,
body{

    margin:0;
    padding:0;
    width:100%;
    height:100%;

    overflow:hidden;

}

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

.sidebar{

    position:fixed;

    top:0;
    left:0;

    width:var(--sidebar-width);
    height:100vh;

    background:#1b1f2a;

    color:#FFF;

    display:flex;
    flex-direction:column;

    transition:.25s;

    z-index:1000;

}

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

.sidebar-header{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;
    
    flex-shrink:0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.sidebar-logo{

    display:flex;

    align-items:center;

    gap:15px;

    color:#FFF;

    text-decoration:none;

}

.sidebar-logo img{

    width:42px;

}

.sidebar-brand{

    display:flex;

    flex-direction:column;

}

.sidebar-brand strong{

    font-size:17px;

}

.sidebar-brand small{

    opacity:.6;

}

/* ==========================================================
MENU
========================================================== */

.sidebar-menu{

    flex:1;

    overflow-y:auto;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.sidebar-menu::-webkit-scrollbar{

    width:0;

    display:none;

}

.sidebar-menu ul{

    list-style:none;

    margin:0;

    padding:0;

}

.sidebar-menu li{

    margin:2px 0;

}

.menu-title{

    font-size:11px;

    text-transform:uppercase;

    color:#777;

    padding:18px 22px 8px;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:13px 22px;

    color:#ddd;

    text-decoration:none;

    transition:.2s;

}

.sidebar-menu a:hover{

    background:#262c3d;

    color:#FFF;

}

.sidebar-menu a.active{

    background:var(--primary);

    color:#000;

    font-weight:600;

}

.sidebar-menu i{

    font-size:18px;

    width:22px;

    text-align:center;

}



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

.sidebar-footer{

    padding:16px;

    flex-shrink:0;

    border-top:1px solid rgba(255,255,255,.08);

}                                   

.user-info{

    display:flex;

    gap:12px;

    align-items:center;

}

.user-info .avatar{

    font-size:38px;

}

.user-info strong{

    display:block;

}

.user-info small{

    opacity:.6;

}

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

.main{

    margin-left:var(--sidebar-width);

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

    height:100vh;

    display:flex;

    flex-direction:column;

}

/* ==========================================================
TOPBAR
========================================================== */

.topbar{

    height:var(--topbar-height);

    background:#FFF;

    border-bottom:1px solid #EEE;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 25px;

}

/* ==========================================================
LEFT
========================================================== */

.topbar-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.page-title h4{

    margin:0;

}

.page-title small{

    color:#777;

}

/* ==========================================================
CENTER
========================================================== */

.search-box{

    width:420px;

    display:flex;

    align-items:center;

    gap:10px;

    background:#f4f5f7;

    border-radius:8px;

    padding:10px 15px;

}

.search-box input{

    border:none;

    background:none;

    width:100%;

    outline:none;

}

/* ==========================================================
RIGHT
========================================================== */

.topbar-right{

    display:flex;

    align-items:center;

    gap:15px;

}

.btn-topbar{

    width:42px;

    height:42px;

    border:none;

    background:#FFF;

    border-radius:8px;

    cursor:pointer;

    transition:.2s;

}

.btn-topbar:hover{

    background:#F5F5F5;

}

.btn-user{

    border:none;

    background:none;

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

}

.btn-user .avatar{

    font-size:36px;

}

.btn-user .user{

    text-align:left;

}

/* ==========================================================
CONTEÚDO
========================================================== */

#conteudo{

    flex:1;

    overflow:auto;

    background:#f5f7fb;

    padding:25px;

}

/* ==========================================================
LOADER
========================================================== */

#loader{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.65);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:99999;

}