/* Reset base */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; }

.container { display: flex; min-height: 100vh; }

/* --- SIDEBAR DESKTOP --- */
.sidebar {
    width: 290px;
    background: #2c3e50;
    color: white;
    padding: 20px;
    transition: all 0.3s;
}

.sidebar ul { list-style: none; margin-top: 20px; }
.sidebar li { margin: 15px 0; }
.sidebar a { color: white; text-decoration: none; font-size: 1.1rem; }

.content { flex: 1; padding: 40px; background: #f4f4f4; }

/* --- MENU MOBILE --- */
.nav-toggle { display: none; } /* Nasconde il checkbox */

.nav-toggle-label {
    display: none; /* Nascosto su desktop */
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
    cursor: pointer;
    background: #2c3e50;
    padding: 10px;
    border-radius: 5px;
}

.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
    display: block;
    background: white;
    height: 2px;
    width: 25px;
    position: relative;
}
.nav-toggle-label span::before { content: ''; position: absolute; top: -8px; }
.nav-toggle-label span::after { content: ''; position: absolute; top: 8px; }

/* --- MEDIA QUERY SMARTPHONE --- */
@media (max-width: 768px) {
    .nav-toggle-label { display: block; } /* Mostra hamburger */

    .sidebar {
        position: fixed;
        left: -290px; /* Nasconde il menu a sinistra */
        height: 100%;
        z-index: 99;
    }

    /* Quando il checkbox è cliccato, mostra la sidebar */
    .nav-toggle:checked ~ .container .sidebar {
        left: 0;
    }

    .content { padding-top: 80px; }
}