/* css/header.css */

/* --- Header Base Styles --- */
header {
    background-color: rgba(255, 255, 255, 0.65);
    color: var(--text-color-dark);
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    border-bottom: 3px solid var(--primary-color);
}

#logo-img {
    /* max-height: 160px; */
    /* Initial: will be overridden by later global rule below */
    margin-right: 0;
    opacity: 0.7;
    vertical-align: middle;
    margin-right: 15px;
    /* Mantieni o aggiusta se necessario */
    flex-shrink: 0;
    /* Impedisce al logo di restringersi */
}

header h1 {
    font-size: 1.6em;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 0;
    text-align: center;
    flex-grow: 1;
    /* Permette al titolo di occupare lo spazio disponibile */
    margin-left: 15px;
    /* Aggiungi un po' di spazio se il logo è vicino */
    margin-right: 15px;
    /* Aggiungi un po' di spazio se il bottone è vicino */
}

header h1 small {
    font-size: 0.65em;
    font-weight: 300;
    opacity: 0.9;
    margin-left: 8px;
}

header button {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border: none;
    cursor: pointer;
    border-radius: var(--border-radius-md);
    font-weight: 500;
    font-family: var(--font-secondary);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-sm);
}

header button:hover {
    background-color: #2c3640;
    box-shadow: var(--shadow-md);
}

/* Logout Buttons (often associated with header) */
#logoutButtonEmployee {
    /* position: fixed; */
    /* Rimuovi se vuoi che scorra con l'header */
    /* top: 20px; */
    /* right: 20px; */
    /* z-index: 1030; */
    /* Assicurati che ci siano stili per margini/padding se necessario */
    flex-shrink: 0;
    /* Impedisce al bottone di restringersi */
}

#logoutButtonAdmin {
    /* position: fixed; */
    /* Rimosso */
    /* top: 20px; */
    /* Rimosso */
    /* right: 20px; */
    /* Rimosso */
    /* z-index: 1030; */
    /* Rimosso */
    /* Non è più necessario margin-left: auto; sull'elemento stesso se l'header è flex con space-between */
    flex-shrink: 0;
    /* Impedisce al bottone di restringersi */
}

/* --- Global Overrides/Additions for Header Elements (from later in original style.css) --- */
/* AGGIUNTO: Riduci la dimensione del logo del 20% sui dispositivi mobile (applied globally here) */
#logo-img {
    /* This overrides the max-height: 160px that might have been set above if uncommented */
    max-height: 128px;
}

/* AGGIUNTO: Riduci i margini per gli elementi della pagina di login in mobile (header part, applied globally here) */
header {
    /* This overrides the margin and padding defined earlier for header */
    margin: 5px 0 0px 0;
    padding: 0.8rem 1rem 0.8rem 16px !important;
    /* Imposta padding-left a 16px e aggiungi !important */
}

/* --- Responsive Header Styles --- */
@media (max-width: 768px) {
    header {
        /* Note: padding here overrides the global padding: 0.8rem 1rem for this breakpoint */
        flex-direction: column;
        gap: 10px;
        padding: 1rem;
        position: relative;
        /* Add this to make it a positioning context */
    }

    header h1 {
        font-size: 1.3em;
        /* text-align: center; is already global for header h1 */
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.2em;
    }

    header button {
        /* Note: padding and font-size here override global header button styles for this breakpoint */
        padding: 0.5rem 1rem;
        font-size: 0.9em;
    }
}

/* Aggiungi questo per centrare il logo nella pagina di login (index.html) */
body:has(main > .login-container) header {
    text-align: center;
}

/* Se vuoi assicurarti che l'immagine stessa non abbia margini che interferiscono */
body:has(main > .login-container) header #logo-img {
    margin-left: auto;
    margin-right: auto;
    /* display: block; /* Potrebbe essere necessario se text-align non basta */
}

/* Styles for the container of the return button, if you added this section */
.header-left-content {
    display: flex;
    align-items: center;
    margin-right: auto;
    /* If header padding-left is 0, and you want the button itself to have a small margin from the edge: */
    /* margin-left: 5px; */
    /* Example: small left margin for the button's container */
}

/* Modify this rule for the return button */
.header-left-content #returnToAdminButton {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0;
    margin-left: 0;
    margin-top: 10px;
    font-size: 1.3rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.header-left-content #returnToAdminButton:hover {
    background-color: #2c3640;
    box-shadow: var(--shadow-md);
}

/* Ensure the icon itself is white if not already handled by button's color property */
/* This might be redundant if the button's color: white; is sufficient */
.header-left-content #returnToAdminButton i {
    color: white;
}