/* ===============================================
   Unified Header Button Styles
   =============================================== */

.header-btn {
    height: 30px !important; /* Standard Bootstrap button height */
    min-width: 30px !important; /* Ensure icon-only buttons are square */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.375rem 0.75rem !important; /* Standard Bootstrap padding */
    line-height: 1.5 !important;
}

/* Ensure icon-only buttons don't have extra padding */
.header-btn > i:only-child {
    margin: 0 !important;
    padding: 0 !important;
}

.app-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; border-radius: 50%; font-weight: 600;
    color: #ffffff; overflow: hidden; flex-shrink: 0; text-transform: uppercase;
    background-color: var(--bs-secondary, #6c757d); 
}
.app-avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-avatar.app-avatar-default { width: 40px; height: 40px; font-size: 1.2rem; }
.app-avatar.app-avatar-small { width: 32px; height: 32px; font-size: 1rem; }
.app-avatar.app-avatar-large { width: 100px; height: 100px; font-size: 3rem; border: 3px solid var(--bs-border-color); }