/* Navbar comune del gestionale.
   Stili condivisi da index, ordini, Media, credenziali (e pagine future).
   In passato erano duplicati identici in Index/styles.css, Media/styles.css,
   ordini/ordini.css, product/styles_product.css. Centralizzati qui. */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 6px 40px;
}

.navbar a {
    color: white;
    padding: 10px 12px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar a:hover {
    background-color: #575757;
    color: #fff;
}

.navbar a.active {
    background-color: #4CAF50;
    color: white;
}

/* La parte sinistra è iniettata da navbar.js dentro [data-navbar-links].
   La parte centrale è libera per ogni pagina (bottoni di azione contestuali).
   La parte destra contiene il widget utente loggato (iniettato da navbar.js
   dentro [data-navbar-user]). Con flex + space-between e tre figli,
   il primo va a sinistra, il terzo a destra, il secondo al centro. */
.navbar > div { display: flex; align-items: center; }

[data-navbar-user] {
    gap: 10px;
    color: #fff;
    font-size: 12px;
}
.navbar-user-label {
    white-space: nowrap;
}
.navbar-user-logout {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s ease;
}
.navbar-user-logout:hover {
    background: rgba(255, 255, 255, 0.28);
}