/* ==========================================================
   JOEL MARKET
   NAVBAR FINAL
========================================================== */

:root{

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --navbar-height:68px;

    --navbar-bg:#ffffff;
    --navbar-color:#212529;

    --navbar-hover:#2563eb;

    --navbar-border:#e5e7eb;

    --dropdown-bg:#ffffff;

    --shadow:0 .5rem 1rem rgba(0,0,0,.08);

}

/* ==========================================================
   Navbar
========================================================== */

.navbar{

    min-height:var(--navbar-height);

    background:var(--navbar-bg)!important;

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

    box-shadow:var(--shadow);

    z-index:1045;

}

.navbar>.container-fluid{

    gap:15px;

}

/* ==========================================================
   Brand
========================================================== */

.navbar-brand{

    display:flex;

    align-items:center;

    gap:10px;

    color:#111827!important;

    text-decoration:none;

    font-weight:700;

}

.navbar-logo{

    width:40px;

    height:40px;

    object-fit:contain;

}

.navbar-title{

    font-size:18px;

    font-weight:700;

    color:#111827;

}

.navbar-subtitle{

    font-size:11px;

    color:#6b7280;

}

/* ==========================================================
   Menu
========================================================== */

.navbar-nav{

    align-items:center;

}

.navbar .nav-link{

    color:#212529!important;

    font-weight:500;

    padding:.75rem 1rem;

    transition:.25s;

}

.navbar .nav-link i{

    width:20px;

    text-align:center;

}

.navbar .nav-link:hover{

    color:var(--primary)!important;

}

.navbar .nav-link.active{

    color:var(--primary)!important;

    font-weight:700;

}

/* ==========================================================
   Search
========================================================== */

.navbar .input-group{

    width:420px;

    max-width:100%;

}

.navbar .form-control{

    border-color:#dee2e6;

    box-shadow:none;

}

.navbar .form-control:focus{

    border-color:var(--primary);

    box-shadow:none;

}

.navbar .input-group-text{

    background:#fff;

}

/* ==========================================================
   Date Time
========================================================== */

.navbar-datetime{

    font-size:14px;

    color:#6b7280;

    white-space:nowrap;

    user-select:none;

}

/* ==========================================================
   Notification
========================================================== */

.navbar .badge{

    font-size:10px;

}

.dropdown-menu{

    border:none;

    border-radius:14px;

    box-shadow:var(--shadow);

}

.dropdown-item{

    transition:.25s;

}

.dropdown-item:hover{

    background:#f8fafc;

}

.dropdown-item.bg-light{

    border-left:4px solid var(--primary);

}

/* ==========================================================
   User
========================================================== */

.navbar-user img{

    object-fit:cover;

}

.dropdown-menu img{

    object-fit:cover;

}

/* ==========================================================
   Mega Menu
========================================================== */

.mega-menu{

    width:950px;

    max-width:95vw;

    border-radius:18px;

    padding:24px;

}

.mega-menu .list-group-item{

    border:none;

    padding:.55rem 0;

}

.mega-menu .list-group-item:hover{

    color:var(--primary);

    background:transparent;

}

.mega-menu .card{

    transition:.25s;

}

.mega-menu .card:hover{

    transform:translateY(-3px);

}

.mega-menu img{

    border:1px solid #eee;

}

/* ==========================================================
   Mobile Bottom Navbar
========================================================== */

.mobile-navbar{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:62px;

    background:#fff;

    display:flex;

    justify-content:space-around;

    align-items:center;

    border-top:1px solid #e5e7eb;

    box-shadow:0 -4px 12px rgba(0,0,0,.08);

    z-index:1040;

}

.mobile-navbar a{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#64748b;

    font-size:11px;

    position:relative;

}

.mobile-navbar i{

    font-size:18px;

    margin-bottom:3px;

}

.mobile-navbar a.active{

    color:var(--primary);

    font-weight:600;

}

.mobile-navbar .badge{

    position:absolute;

    top:4px;

    right:20%;

}

/* ==========================================================
   Dark Mode
========================================================== */

body.dark-mode .navbar{

    background:#1f2937!important;

    border-color:#374151;

}

body.dark-mode .navbar-brand,

body.dark-mode .navbar-title,

body.dark-mode .nav-link{

    color:#f8fafc!important;

}

body.dark-mode .dropdown-menu{

    background:#1f2937;

}

body.dark-mode .dropdown-item{

    color:#f8fafc;

}

body.dark-mode .dropdown-item:hover{

    background:#374151;

}

body.dark-mode .form-control{

    background:#374151;

    border-color:#4b5563;

    color:#fff;

}

body.dark-mode .input-group-text{

    background:#374151;

    color:#fff;

}

/* ==========================================================
   Scrollbar
========================================================== */

.dropdown-menu::-webkit-scrollbar{

    width:6px;

}

.dropdown-menu::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

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

@media(max-width:1200px){

    .navbar-datetime{

        display:none!important;

    }

}

@media(max-width:991.98px){

    .navbar .input-group{

        width:100%;

    }

    .mega-menu{

        width:100%;

        border-radius:0;

        padding:15px;

    }

    .navbar-collapse{

        margin-top:15px;

    }

}

@media(min-width:992px){

    .mobile-navbar{

        display:none;

    }

}

#fullscreenToggle{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    transition:.25s;

}

#fullscreenToggle:hover{

    background:#2563eb;

    color:#fff;

    border-color:#2563eb;

}

body:fullscreen{

    background:#f8fafc;

}