/* ==========================================================
   ADMIN HEADER
   File: layout/header.css
========================================================== */


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


.admin-header{

    position:fixed;

    top:0;

    left:0;

    right:0;

    height:var(--header-height);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 var(--header-padding);

    background:var(--header-bg);

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

    box-shadow:var(--header-shadow);

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

    transition:var(--transition);

}



/* ================= LEFT ================= */


.header-left{

    display:flex;

    align-items:center;

    gap:var(--space-3);

    flex:1;

    min-width:0;

}



/* ================= SIDEBAR BUTTON ================= */


.sidebar-toggle{

    display:none;

    width:var(--header-btn-size);

    height:var(--header-btn-size);

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:var(--radius-sm);

    background:transparent;

    color:var(--text);

    font-size:var(--font-lg);

    cursor:pointer;

    transition:var(--transition);

}


.sidebar-toggle:hover{

    background:var(--primary-light);

    color:var(--primary);

}



/* ================= BRAND ================= */


.header-brand{

    display:flex;

    align-items:center;

    gap:var(--space-2);

    color:inherit;

    text-decoration:none;

    min-width:0;

}



.header-brand img{

    width:var(--admin-header-logo-width);

    height:var(--admin-header-logo-width);

    border-radius:50%;

    object-fit:cover;

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

    flex-shrink:0;

}



.header-brand span{

    font-size:var(--font-lg);

    font-weight:700;

    color:var(--text-heading);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



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


.header-right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:var(--space-3);

    margin-left:auto;

    flex-shrink:0;

}



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


.user-profile{

    display:flex;

    align-items:center;

    gap:var(--space-2);

    color:inherit;

    text-decoration:none;

}



.user-profile img{

    width:var(--avatar-md);

    height:var(--avatar-md);

    border-radius:50%;

    object-fit:cover;

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

}



.user-info{

    display:flex;

    flex-direction:column;

    line-height:1.3;

}



.user-info strong{

    font-size:var(--font-sm);

    font-weight:700;

    color:var(--text);

    white-space:nowrap;

}



.user-info small{

    font-size:var(--font-xs);

    color:var(--warning);

    white-space:nowrap;

}



/* ================= LOGOUT ================= */


.logout-form{

    margin:0;

}



.logout-form .btn{

    height:var(--btn-height);

    padding:0 var(--space-4);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:var(--space-1);

    border-radius:var(--radius-sm);

    white-space:nowrap;

}



/* ==========================================================
   TABLET
========================================================== */


@media(max-width:991px){


    .sidebar-toggle{

        display:flex;

    }


    .admin-header{

        padding:0 var(--space-3);

    }


    .header-brand span{

        display:none;

    }


    .user-info{

        display:none;

    }


    .header-right{

        gap:var(--space-2);

    }


    .logout-form .btn{

        width:var(--header-btn-size);

        padding:0;

    }


    .logout-form span{

        display:none;

    }

}



/* ==========================================================
   MOBILE
========================================================== */


@media(max-width:576px){


    .admin-header{

        height:var(--header-mobile-height);

    }


    .sidebar-toggle{

        width:36px;

        height:36px;

    }


    .header-brand img{

        width:var(--logo-mobile-size);

        height:var(--logo-mobile-size);

    }


    .user-profile img{

        width:var(--avatar-mobile-size);

        height:var(--avatar-mobile-size);

    }


    .logout-form .btn{

        width:36px;

        height:36px;

    }


}