/* ===================================
   NAVBAR
=================================== */

.top-navbar{

    height:72px;

    padding:0 30px;

    background:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #edf2f7;

    position:sticky;

    top:0;

    z-index:999;

}

.navbar-left{

    display:flex;

    align-items:center;

    gap:15px;

}

.menu-toggle{

    border:none;

    background:none;

    font-size:24px;

    cursor:pointer;

}

.page-title{

    font-size:18px;

    margin:0;

    font-weight:700;

    color:#1b2559;

}

.navbar-center{

    flex:1;

    display:flex;

    justify-content:center;

}

.search-box{

    width:340px;

    background:#f5f7fb;

    border-radius:30px;

    padding:10px 18px;

    display:flex;

    align-items:center;

    gap:10px;

}

.search-input{

    width:100%;

    border:none;

    background:transparent;

    outline:none;

}

.notification-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#f5f7fb;

    color:#64748b;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

}

.notification-btn:hover{

    background:#2563eb;

    color:#fff;

}

.search-box i{

    color:#888;

}

.search-box input{

    border:none;

    outline:none;

    background:none;

    width:100%;

    margin-left:10px;

}

.navbar-right{

    display:flex;

    align-items:center;

    gap:15px;

}

.user-info{

    display:flex;

    align-items:center;

    gap:12px;

}

.user-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#0d6efd;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    font-size:18px;

}

.user-dropdown{

    display:flex;

    align-items:center;

    gap:12px;

    border:none;

    background:none;

}

.user-detail{

    display:flex;

    flex-direction:column;

    line-height:1.2;

}

.user-detail small{

    color:#888;

}

.page-info{

    display:flex;

    flex-direction:column;

}

.page-breadcrumb{

    color:#94a3b8;

    font-size:12px;

}