/* ==========================================================
   PROFILE COMPONENT
   Premium Admin UI
   Refactored Token Based
========================================================== */


/* ==========================================================
   PAGE
========================================================== */


.profile-page{

    min-height:100vh;

    padding:
        var(--space-12)
        var(--page-padding);


    background:
        var(--gradient-page);


    display:flex;

    justify-content:center;

    align-items:flex-start;

}



.profile-container{

    width:100%;

    max-width:var(--container-width);

}






/* ==========================================================
   CARD
========================================================== */


.profile-card{

    position:relative;

    overflow:hidden;


    background:
        var(--card-bg);


    border:
        var(--border-width)
        solid
        var(--card-border);


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


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

}





/* ==========================================================
   COVER
========================================================== */


.profile-cover{

    position:relative;


    height:
        var(--profile-cover-height,220px);


    display:flex;


    justify-content:center;


    align-items:flex-end;


    background:
        var(--gradient-primary);



    border-radius:

        var(--radius-2xl)
        var(--radius-2xl)
        0
        0;

}





.profile-cover-overlay{

    position:absolute;


    inset:0;


    background:

        linear-gradient(
            to bottom,
            var(--overlay-light),
            var(--overlay-dark)
        );


    z-index:1;

}





/* ==========================================================
   AVATAR
========================================================== */


.profile-avatar{

    position:relative;


    z-index:5;


    width:
        var(--profile-avatar-size,160px);


    height:
        var(--profile-avatar-size,160px);



    margin-bottom:
        calc(
            var(--profile-avatar-size,160px) / -2
        );



    padding:
        var(--space-2);



    background:
        var(--white);



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



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

}





.profile-avatar-img{


    width:100%;


    height:100%;


    object-fit:cover;



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



    border:

        var(--profile-avatar-border);


}





.profile-online-status{


    position:absolute;


    right:10px;


    bottom:15px;


    width:26px;


    height:26px;


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


    background:
        var(--success-color);



    border:

        4px solid
        var(--white);

}






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


.profile-header{

    display:flex;


    justify-content:space-between;


    align-items:center;

     background:
            var(--bg-secondary);

    gap:
        var(--space-8);



    padding:

        calc(
            var(--profile-avatar-size,160px) / 2 + 40px
        )
        var(--space-8)
        var(--space-8);



    border-bottom:

        var(--border-width)
        solid
        var(--border);

}






.profile-info{

    display:flex;


    flex-direction:column;


    gap:
        var(--space-3);

}






.profile-name{


    margin:0;


    font-size:
        var(--font-3xl);


    font-weight:
        var(--font-weight-bold);


    color:
        var(--text-secondary);

}





.profile-role{


    width:max-content;


    padding:

        6px 16px;



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



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



    font-weight:
        var(--font-weight-semibold);


    color:
        var(--white);

}

 /* ==========================================================
   PROFILE CONTACT
========================================================== */


.profile-contact{

    display:flex;

    flex-wrap:wrap;

    gap:
        var(--space-5);

}





.profile-contact-item{

    display:flex;


    align-items:center;


    gap:
        var(--space-3);



    color:
        var(--text-tertiary);


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

}





.profile-contact-item i{


    width:36px;


    height:36px;


    display:flex;


    justify-content:center;


    align-items:center;



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



    background:
        var(--primary-soft);



    color:
        var(--primary-color);

}






/* ==========================================================
   ACTION BUTTON
========================================================== */


.profile-actions{

    display:flex;

    align-items:center;

}





.profile-actions .btn{


    display:flex;


    align-items:center;


    justify-content:center;



    gap:
        var(--space-2);



    padding:

        12px 22px;



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



    font-weight:
        var(--font-weight-semibold);


    transition:
        var(--transition-base);

}





.profile-actions .btn:hover{

    transform:
        translateY(-2px);

}







/* ==========================================================
   BODY
========================================================== */


.profile-body{


    padding:
        var(--space-8);



    display:flex;


    flex-direction:column;



    gap:
        var(--space-8);

}







/* ==========================================================
   INFORMATION SECTION
========================================================== */


.profile-section{


    padding:
        var(--space-6);



    background:
        var(--surface);



    border:

        var(--border-width)
        solid
        var(--border);



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



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

}






.profile-section-title{


    display:flex;


    align-items:center;



    gap:
        var(--space-3);



    margin:

        0
        0
        var(--space-6);



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



    font-weight:
        var(--font-weight-bold);



    color:
        var(--text-warning);

}





.profile-section-title i{


    width:38px;


    height:38px;



    display:flex;


    justify-content:center;


    align-items:center;



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



    background:
        var(--primary-soft);



    color:
        var(--text-primary);

}








/* ==========================================================
   PROFILE GRID
========================================================== */


.profile-grid{


    display:grid;



    grid-template-columns:

        repeat(2,minmax(0,1fr));



    gap:
        var(--space-5);

}






.profile-item{


    padding:
        var(--space-5);



    background:
        var(--surface-muted);



    border:

        var(--border-width)
        solid
        var(--border);



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



    transition:
        var(--transition-base);

}





.profile-item:hover{


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



    transform:
        translateY(-2px);

}





.profile-full-width{

    grid-column:
        1/-1;

}







.profile-label{


    display:block;



    margin-bottom:
        var(--space-2);



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



    font-weight:
        var(--font-weight-semibold);



    color:
        var(--text-muted);

}





.profile-value{


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



    font-weight:
        var(--font-weight-semibold);



    color:
        var(--text-primary);

}








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


.status-badge{


    display:inline-flex;


    align-items:center;


    justify-content:center;



    width:max-content;



    padding:

        6px 14px;



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



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



    font-weight:
        var(--font-weight-semibold);

}






.status-active{


    background:
        var(--success-soft);



    color:
        var(--success-color);

}






.status-inactive{


    background:
        var(--danger-soft);



    color:
        var(--danger-color);

}









/* ==========================================================
   SUMMARY SECTION
========================================================== */


.profile-summary{


    display:grid;



    grid-template-columns:

        repeat(4,minmax(0,1fr));



    gap:
        var(--space-5);

}








.summary-card{


    display:flex;


    align-items:center;



    gap:
        var(--space-4);



    padding:
        var(--space-5);



    background:
        var(--surface);



    border:

        var(--border-width)
        solid
        var(--border);



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



    transition:
        var(--transition-base);

}






.summary-card:hover{


    transform:
        translateY(-3px);



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

}






.summary-icon{


    width:
        52px;



    height:
        52px;



    display:flex;


    align-items:center;


    justify-content:center;



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



    font-size:
        1.4rem;

}







.summary-icon.blue{

    background:
        var(--info-soft);

    color:
        var(--info-color);

}





.summary-icon.green{

    background:
        var(--success-soft);

    color:
        var(--success-color);

}





.summary-icon.orange{

    background:
        var(--warning-soft);

    color:
        var(--warning-color);

}





.summary-icon.purple{

    background:
        var(--purple-soft);

    color:
        var(--purple-color);

}






.summary-content{


    display:flex;


    flex-direction:column;



    gap:
        var(--space-1);

}






.summary-title{


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



    font-weight:
        var(--font-weight-semibold);



    color:
        var(--text-muted);

}






.summary-content strong{


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



    color:
        var(--text-primary);

}

 /* ==========================================================
   PROFILE RESPONSIVE SYSTEM
   Premium Admin UI
========================================================== */


/* ==========================================================
   LARGE DEVICE
========================================================== */


@media(max-width:1200px){


    .profile-summary{


        grid-template-columns:

            repeat(3,minmax(0,1fr));

    }


}







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


@media(max-width:992px){



    .profile-page{


        padding:

            var(--space-8)
            var(--space-5);

    }





    .profile-summary{


        grid-template-columns:

            repeat(2,minmax(0,1fr));

    }







    .profile-header{


        gap:

            var(--space-5);

    }





    .profile-name{


        font-size:

            var(--font-size-2xl);

    }



}








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


@media(max-width:768px){



    .profile-card{


        border-radius:

            var(--radius-xl);

    }






    .profile-cover{


        height:

            230px;

    }







    .profile-avatar{


        width:

            120px;



        height:

            120px;



        margin-bottom:

            -60px;

    }







    .profile-header{


        flex-direction:column;


        align-items:flex-start;



        padding:


            80px

            var(--space-5)

            var(--space-5);

    }








    .profile-contact{


        flex-direction:column;



        gap:

            var(--space-3);

    }







    .profile-actions{


        width:100%;

    }








    .profile-actions .btn{


        width:100%;

    }








    .profile-grid{


        grid-template-columns:

            1fr;

    }







    .profile-body{


        padding:

            var(--space-5);

    }







    .profile-section{


        padding:

            var(--space-5);

    }



}










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


@media(max-width:576px){



    .profile-page{


        padding:

            var(--space-4)

            var(--space-3);

    }







    .profile-cover{


        height:

            200px;

    }







    .profile-avatar{


        width:

            100px;



        height:

            100px;



        margin-bottom:

            -50px;

    }








    .profile-header{


        padding:


            65px

            var(--space-4)

            var(--space-4);

    }








    .profile-name{


        font-size:

            var(--font-size-xl);

    }








    .profile-section-title{


        font-size:

            var(--font-size-base);

    }








    .profile-summary{


        grid-template-columns:

            1fr;

    }








    .summary-card{


        padding:

            var(--space-4);

    }






}










/* ==========================================================
   DARK MODE SUPPORT
========================================================== */


[data-theme="dark"] .profile-card{


    background:

        var(--dark-card-bg);



    border-color:

        var(--dark-border);

}







[data-theme="dark"] .profile-section,


[data-theme="dark"] .summary-card{


    background:

        var(--dark-surface);



    border-color:

        var(--dark-border);

}







[data-theme="dark"] .profile-item{


    background:

        var(--dark-surface-muted);



    border-color:

        var(--dark-border);

}







[data-theme="dark"] .profile-name,


[data-theme="dark"] .profile-value,


[data-theme="dark"] .summary-content strong{


    color:

        var(--dark-text-primary);

}







[data-theme="dark"] .profile-label,


[data-theme="dark"] .summary-title,


[data-theme="dark"] .profile-contact-item{


    color:

        var(--dark-text-muted);

}








/* ==========================================================
   ACCESSIBILITY
========================================================== */



.profile-actions .btn:focus-visible,


.profile-item:focus-visible{


    outline:

        3px solid
        var(--primary-color);



    outline-offset:

        3px;

}








/* ==========================================================
   PRINT MODE
========================================================== */


@media print{


    .profile-page{


        background:#fff;

        padding:0;

    }





    .profile-card{


        box-shadow:none;

        border:

            1px solid #ddd;

    }





    .profile-actions{


        display:none;

    }



}