/* =========================================================
   BrioCom Solutions — Modular CSS
   navbar.css
   Refactored from the original Time Tracking Workspace CSS.
   ========================================================= */

/* =========================================================
   3. MAIN NAVIGATION
   ========================================================= */
.navbar {
    position: sticky;
    top: 0;
    z-index: 5000;

    width: 100%;
    min-height: 74px;

    display: flex;
    align-items: center;

    padding: 0 34px;

    background:
        rgba(5,5,5,.96);

    border-bottom: 1px solid #242424;

    box-shadow:
        0 8px 30px rgba(0,0,0,.35);

    backdrop-filter: blur(18px);
}
/* LOGO */

.navbar .logo {
    display: flex;
    align-items: center;

    margin-right: auto;

    text-decoration: none;
}

.navbar .logo img {
    display: block;

    width: 145px;
    height: auto;

    object-fit: contain;
}
/* NAV */

.navbar nav {
    display: flex;
    align-items: center;
    gap: 6px;

    height: 74px;
}


/* NORMAL NAV LINKS */

.navbar nav > a,
.navbar .dropdown-title {

    position: relative;

    display: flex;
    align-items: center;

    min-height: 44px;

    padding: 0 17px;

    color: #d5d5d5;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    border-radius: 9px;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}
.navbar nav > a:hover,
.navbar .dropdown-title:hover {

    color: #fff;

    background:
        rgba(220,38,38,.10);
}


/* ACTIVE */

.navbar nav > a.active,
.navbar .dropdown-title.active {

    color: #fff;

    background:
        rgba(220,38,38,.12);
}

/* RED ACTIVE LINE */

.navbar nav > a.active::after,
.navbar .dropdown-title.active::after {

    content: "";

    position: absolute;

    left: 16px;
    right: 16px;
    bottom: 3px;

    height: 2px;

    background: var(--red);

    border-radius: 10px;

    box-shadow:
        0 0 8px rgba(220,38,38,.55);
}


/* =========================================================


/* =========================================================
   4. NAV DROPDOWNS
   ========================================================= */

.nav-dropdown {
    position: relative;
    height: 100%;

    display: flex;
    align-items: center;
}


/* SMALL ARROW */

.nav-dropdown .dropdown-title::after {

    content: "⌄";

    margin-left: 8px;

    color: #777;

    font-size: 13px;

    transition:
        transform .2s ease,
        color .2s ease;
}


.nav-dropdown:hover .dropdown-title::after {

    color: var(--red);

    transform:
        translateY(1px);
}


/* DROPDOWN */

.dropdown-menu {

    position: absolute;

    top: calc(100% - 2px);
    left: 50%;

    transform:
        translateX(-50%)
        translateY(10px);

    width: 245px;

    padding: 10px;

    background:
        rgba(12,12,12,.98);

    border:
        1px solid #2d2d2d;

    border-top:
        2px solid var(--red);

    border-radius:
        0 0 12px 12px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.65);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}


/* OPEN */

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* DROPDOWN LINKS */

.dropdown-menu > a {

    display: flex;
    align-items: center;

    min-height: 42px;

    padding: 9px 12px;

    color: #cfcfcf;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    border-radius: 8px;

    transition:
        color .2s ease,
        background .2s ease,
        padding-left .2s ease;
}


.dropdown-menu > a:hover {

    color: #fff;

    background:
        rgba(220,38,38,.12);

    padding-left: 17px;
}


/* =========================================================


/* =========================================================
   5. EXPLORE DROPDOWN
   ========================================================= */

.dropdown-menu.explore-menu {

    width: 430px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    padding: 14px;
}


.dropdown-group {

    padding: 5px;
}


.dropdown-heading {

    display: block;

    margin:
        3px 7px
        8px;

    padding-bottom: 7px;

    color: var(--red);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

    border-bottom:
        1px solid #292929;
}


.dropdown-group a {

    display: flex;
    align-items: center;

    min-height: 37px;

    padding: 7px 9px;

    color: #bdbdbd;

    font-size: 12px;

    text-decoration: none;

    border-radius: 7px;

    transition:
        background .2s ease,
        color .2s ease,
        padding-left .2s ease;
}


.dropdown-group a:hover {

    color: #fff;

    background:
        rgba(220,38,38,.11);

    padding-left: 14px;
}


/* =========================================================