/* RESET E BODY */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background-color: #f5f5f5; padding-top: 70px; }

/* TOPBAR - Rimossa la linea di bordo */
.topbar {
    height: 75px; /* Alzata leggermente per dare respiro */
    padding: 0 30px; /* Più spazio ai lati */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.logo { height: 60px; }
.title-link { text-decoration: none; color: #222; font-weight: bold; font-size: 1.4rem; }

/* SANDWICH A DESTRA */
.sandwich { cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.sandwich span { width: 25px; height: 3px; background: #333; border-radius: 2px; }

/* OVERLAY */
.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); display: none; z-index: 1001;
}
.overlay.active { display: block; }

/* SIDEBAR A SINISTRA */
.sidebar {
    position: fixed;
    top: 0; 
    left: -320px; 
    width: 300px; height: 100%;
    background: #fff; z-index: 1002;
    transition: 0.3s ease-in-out;
    padding: 20px; box-shadow: 5px 0 15px rgba(0,0,0,0.1);
}

.sidebar.active { left: 0; }

/* Contenitore interno per gestire il footer in basso */
.sidebar-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.close-sidebar {
    position: absolute; top: 10px; right: 15px;
    font-size: 28px; cursor: pointer; color: #888;
    line-height: 1;
}

.user-header { padding: 30px 0 15px; font-weight: bold; border-bottom: 1px solid #eee; text-align: center; }
.online-dot { height: 10px; width: 10px; background: #2ecc71; border-radius: 50%; display: inline-block; margin-left: 5px; }

.menu { list-style: none; margin-top: 20px; flex-grow: 1; } /* flex-grow spinge il footer giù */
.menu li { margin-bottom: 15px; }
.menu a { text-decoration: none; color: #444; font-size: 1.1rem; }

/* FOOTER SIDEBAR - Centrato e in basso */
.sidebar-bottom { 
    margin-top: auto; 
    padding: 20px 0;
    border-top: 1px solid #eee; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    text-align: center; 
}

.sidebar-bottom a { text-decoration: none; color: #999; font-size: 0.9rem; }
.sidebar-bottom a:hover { color: #333; }

.user-header {
    padding: 30px 0 15px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.user-header p {
    font-weight: bold;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 5px; /* Spazio per il link sotto */
}

/* Campanellino Mini */
.notification-bell {
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Spostiamolo verso l'alto */
    transform: translateY(-3px); 
    position: relative;
}

/* Regoliamo anche il badge per seguirlo correttamente */
.bell-badge {
    position: absolute;
    top: -5px; /* Alziamo anche il numerino rosso */
    right: -6px;
    background: #ff4d4d;
    color: white;
    font-size: 0.6rem;
    padding: 1px 4px;
    border-radius: 10px;
    font-weight: bold;
    border: 1.5px solid white; /* Bordo leggermente più spesso per farlo risaltare */
}

/* Dropdown proporzionato al campanellino piccolo */
.notif-dropdown {
    display: none;
    position: absolute;
    top: 35px; /* Più vicino alla topbar */
    right: -10px;
    background: white;
    width: 250px; /* Leggermente più stretto */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    z-index: 1001;
    border: 1px solid #eee;
}

.notif-title { padding: 10px; font-weight: bold; border-bottom: 1px solid #eee; font-size: 0.9rem; }
.notif-empty { padding: 20px; text-align: center; color: #888; font-size: 0.8rem; }
.notif-all { display: block; text-align: center; padding: 10px; background: #f9f9f9; color: #333; text-decoration: none; font-size: 0.8rem; font-weight: bold; }

/* Popup Flash (Notifiche a scomparsa) */
#flash-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 2000;
}

.flash-popup {
    background: #333;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: slideIn 0.5s ease-out forwards, fadeOut 0.5s 4s ease-in forwards;
}

@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

.user-profile-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.sidebar-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Rende la foto tonda */
    overflow: hidden;
    border: 2px solid #333;
    flex-shrink: 0;
}

.sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita che la foto si schiacci */
}

.user-info-text {
    display: flex;
    flex-direction: column;
}

.user-email {
    font-size: 0.85rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    word-break: break-all;
}

.status-badge {
    font-size: 0.7rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

.online-dot {
    width: 7px;
    height: 7px;
    background: #2ecc71;
    border-radius: 50%;
}

.logout-link-top {
    text-decoration: none;
    color: #ff4d4d; /* Rosso per indicare l'uscita */
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
}

.logout-link-top:hover {
    color: #cc0000;
}