/* ============================================================
   HEADER LAYOUT
============================================================ */
.main-header{
    width:100%;
    height:70px;
    background:var(--nav-bg);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 var(--spacing-md);
    box-shadow:var(--shadow-sm);
    position:relative;
    z-index:200;
}

.header-left{
    display:flex;
    align-items:center;
}

/* Logo animation */
.header-logo{
    height:58px;
    width:auto;
    transform-origin:center center;
}

.header-logo:hover{
    animation:smoothSwing 1s linear infinite;
}

@keyframes smoothSwing{
    0%{transform:rotate(-4deg);}
    50%{transform:rotate(4deg);}
    100%{transform:rotate(-4deg);}
}

/* ============================================================
   PRIMARY NAV BAR
============================================================ */
.nav-bar{
    list-style:none;
    display:flex;
    align-items:center;
    gap:24px;
    margin:0;
    padding:0;
}

/* ============================================================
   PRIMARY NAV ITEMS
============================================================ */
.nav-item{
    position:relative;
    cursor:pointer;
    color:var(--nav-text);
    font-size:16px;
    font-weight:500;
    padding:0 14px;
    height:70px;
    display:flex;
    align-items:center;
    transition:var(--transition);
}

.nav-item:hover{
    background:rgba(255,255,255,.05);
}

/* ============================================================
   LOGOUT LINK
============================================================ */
.logout-link{
    color:var(--nav-text);
    text-decoration:none;
    font-size:16px;
    display:flex;
    align-items:center;
}

.logout-link:hover{
    background:none!important;
}

/* ============================================================
   PROFILE BADGE
============================================================ */
.profile-badge{
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--nav-accent);
    color:var(--nav-bg);
    font-weight:700;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.profile-icon{
    width:70%;
    height:70%;
    fill:rgba(0,0,0,.28);
    position:absolute;
    top:15%;
    left:50%;
    transform:translateX(-50%);
}

.profile-initials{
    position:absolute;
    z-index:2;
    font-weight:700;
    font-size:15px;
    color:var(--nav-bg);
}

/* ============================================================
   PRIMARY DROPDOWNS
============================================================ */
.nav-item .dropdown,
.child-dropdown{
    background:var(--nav-bg);
    border:1px solid var(--border-strong);
    width:200px;
    padding:8px 6px;
    position:absolute;
    z-index:300;

    opacity:0;
    visibility:hidden;

    transform:translateY(6px) scale(.98);
    transition:
        opacity .22s ease-out,
        transform .28s cubic-bezier(.16,1,.3,1),
        visibility 0s linear .22s;
}

/* Show dropdowns */
.nav-item:hover>.dropdown,
.has-child:hover>.child-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

/* Level 1 dropdown — bottom-right */
.nav-item>.dropdown{
    top:100%;
    right:0;
    left:auto;
}

/* Level 2 dropdown — flies LEFT */
.has-child{
    position:relative;
}

.child-dropdown{
    top:0;
    right:100%;
    left:auto;
}

/* ============================================================
   DROPDOWN ITEMS (SHARED)
============================================================ */
.dropdown-item{
    height:46px;
    line-height:46px;
    padding:0 14px;
    color:var(--nav-text);
    font-size:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    transition:var(--transition);
}

.dropdown-item:hover{
    background:rgba(255,255,255,.06);
    border-radius:10px;
    margin:0 4px;
}

.dropdown-item a{
    width:100%;
    text-align:center;
    color:inherit;
    text-decoration:none;
}

/* ============================================================
   CARETS
============================================================ */
.item-label{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.has-child>.item-label::before{
    content:'‹';
    position:absolute;
    left:10px;
    font-size:19px;
    font-weight:900;
    opacity:.95;
    transition:var(--transition);
}

.has-child:hover>.item-label::before{
    transform:translateX(-3px);
    opacity:1;
}

/* ============================================================
   SECONDARY ROLE NAV
============================================================ */
.role-nav{
    width:100%;
    background:color-mix(in srgb,var(--nav-bg) 85%,#ffffff);
    border-bottom:1px solid var(--border);
    position:relative;
    z-index:180;
}

/* IMPORTANT: no left padding here */
.role-nav-list{
    list-style:none;
    margin:0;
    padding:0;                /* 🔑 removes left offset */
    height:50px;

    display:flex;
    align-items:center;
    gap:0;                    /* spacing handled by items */
    flex-wrap:nowrap;

    overflow:visible;
}

/* ============================================================
   ROLE NAV ITEMS (WIDTH OWNER)
============================================================ */
.role-nav-item{
    position:relative;
    display:flex;
    align-items:center;
    height:100%;

    padding:0 35px;           /* 🔑 parent width defined here */
}

/* Label / link */
.role-nav-item>a,
.role-nav-label{
    display:flex;
    align-items:center;
    height:100%;

    color:var(--nav-text);
    font-size:.95rem;
    font-weight:500;
    white-space:nowrap;
    text-decoration:none;

    transition:var(--transition);
}

.role-nav-item>a:hover,
.role-nav-item:hover>.role-nav-label{
    color:var(--nav-accent);
}

/* ============================================================
   ROLE DROPDOWN
   EXACT bottom-left → top-left alignment
============================================================ */
.role-dropdown{
    position:absolute;
    top:100%;
    left:0;                   /* 🔑 hard left alignment */
    width:100%;               /* 🔑 same width as parent li */

    padding:8px 6px;

    background:color-mix(in srgb,var(--nav-bg) 85%,#ffffff);
    border:1px solid var(--border-strong);

    z-index:300;

    opacity:0;
    visibility:hidden;

    transform:translateY(6px) scale(.98);
    transition:
        opacity .22s ease-out,
        transform .28s cubic-bezier(.16,1,.3,1),
        visibility 0s linear .22s;
}

/* Show dropdown */
.role-nav-item.has-dropdown:hover>.role-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

/* ============================================================
   ROLE DROPDOWN ITEMS
============================================================ */
.role-dropdown li{
    list-style:none;
    height:46px;
    line-height:46px;
    padding:0 14px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:.95rem;
    color:var(--nav-text);
    white-space:nowrap;

    transition:var(--transition);
}

.role-dropdown li:hover{
    background:rgba(255,255,255,.06);
    border-radius:10px;
    margin:0 4px;
}

.role-dropdown a{
    width:100%;
    text-align:center;
    color:inherit;
    text-decoration:none;
}