/*======================================
EIVOX HEADER CSS
Version: 1.0
======================================*/


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

.header{

    position:sticky;
    top:0;
    left:0;
    width:100%;

    height:var(--header-height);

    background:rgba(7,11,22,.85);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    z-index:var(--z-sticky);

}


/*======================================
HEADER CONTAINER
======================================*/

.header-container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


/*======================================
LOGO
======================================*/

.header-logo{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

.header-logo img{

    width:42px;
    height:42px;
    object-fit:contain;

}

.header-logo h2{

    margin:0;

    font-size:1.25rem;

    font-weight:700;

    color:var(--text);

}


/*======================================
SEARCH
======================================*/

.header-search{

    flex:1;

    max-width:650px;

    position:relative;

}

.header-search input{

    width:100%;

    height:48px;

    padding:0 55px 0 20px;

    background:var(--surface);

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

    border-radius:999px;

    color:var(--text);

    transition:var(--transition);

}

.header-search input:focus{

    border-color:var(--primary);

}

.header-search button{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    color:var(--text-muted);

}


/*======================================
HEADER ACTIONS
======================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:12px;

}


/*======================================
HEADER ICON
======================================*/

.header-icon{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--surface);

    color:var(--text);

    transition:var(--transition);

    cursor:pointer;

}

.header-icon:hover{

    background:var(--primary);

    color:#fff;

}


/*======================================
BADGE
======================================*/

.header-badge{

    position:absolute;

    top:-2px;

    right:-2px;

    min-width:18px;

    height:18px;

    padding:0 5px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--danger);

    color:#fff;

    font-size:10px;

    font-weight:700;

    border-radius:999px;

}


/*======================================
USER
======================================*/

.header-user{

    display:flex;

    align-items:center;

    gap:12px;

}

.header-user img{

    width:46px;

    height:46px;

    border-radius:50%;

    object-fit:cover;

}

.header-user-info{

    display:flex;

    flex-direction:column;

}

.header-user-info span{

    font-size:.8rem;

    color:var(--text-muted);

}

.header-user-info strong{

    color:var(--text);

}


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

.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--surface);

    align-items:center;

    justify-content:center;

    color:var(--text);

    cursor:pointer;

}


/*======================================
DIVIDER
======================================*/

.header-divider{

    width:1px;

    height:30px;

    background:var(--border);

}


/*======================================
RESPONSIVE
======================================*/

@media(max-width:991px){

    .header-search{

        max-width:none;

    }

    .header-user-info{

        display:none;

    }

}


@media(max-width:767px){

    .header{

        height:64px;

    }

    .header-container{

        gap:10px;

    }

    .header-logo h2{

        display:none;

    }

    .header-search{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .header-actions{

        gap:8px;

    }

    .header-icon{

        width:42px;

        height:42px;

    }

}


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

.top-navbar{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:rgba(8,12,22,.94);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

}


/*======================================
TOP ROW
======================================*/

.top-row{

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    max-width:1400px;

    margin:auto;

}


/*======================================
LOGO
======================================*/

.logo-area{

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

}

.logo-area img{

    width:48px;

    height:48px;

    object-fit:contain;

    transition:var(--transition);

}

.logo-area:hover img{

    transform:scale(1.05);

}


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

.top-actions{

    display:flex;

    align-items:center;

    gap:12px;

}


/*======================================
NAV ICON
======================================*/

.nav-icon{

    position:relative;

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:50%;

    background:var(--surface);

    color:var(--text);

    transition:var(--transition);

    text-decoration:none;

}

.nav-icon:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-2px);

}

.nav-icon svg{

    width:22px;

    height:22px;

}


/*======================================
NOTIFICATION
======================================*/

.notification-dot{

    position:absolute;

    top:4px;

    right:4px;

    min-width:18px;

    height:18px;

    padding:0 5px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:#ff3b30;

    color:#fff;

    font-size:.7rem;

    font-weight:700;

    border:2px solid var(--body);

}


/*======================================
WELCOME AREA
======================================*/

.welcome-area{

    max-width:1400px;

    margin:auto;

    padding:0 20px 18px;

}

.welcome-area small{

    display:block;

    color:var(--text-muted);

    font-size:.85rem;

    margin-bottom:4px;

}

.welcome-area h2{

    color:var(--text);

    font-size:1.6rem;

    font-weight:700;

    line-height:1.3;

}


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

#menuToggle{

    flex-shrink:0;

}


/*======================================
RESPONSIVE
======================================*/

@media(max-width:991px){

    .top-row{

        height:68px;

        padding:0 16px;

    }

    .welcome-area{

        padding:0 16px 16px;

    }

    .welcome-area h2{

        font-size:1.4rem;

    }

}


@media(max-width:767px){

    .top-row{

        height:64px;

    }

    .logo-area img{

        width:42px;

        height:42px;

    }

    .nav-icon{

        width:42px;

        height:42px;

    }

    .nav-icon svg{

        width:20px;

        height:20px;

    }

    .welcome-area h2{

        font-size:1.25rem;

    }

}


@media(max-width:480px){

    .top-row{

        padding:0 12px;

    }

    .top-actions{

        gap:8px;

    }

    .nav-icon{

        width:40px;

        height:40px;

    }

    .notification-dot{

        min-width:16px;

        height:16px;

        font-size:.65rem;

    }

}