/* ========================================
   LAYOUT PERSONALIZZATO - TEMA GRIGIO
   ======================================== */

/* Page container */
#page {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
    min-height: 100vh;
    background-color: #e5e5e5;
}

#page.isSidebarClosed {
    grid-template-columns: 0 1fr;
}

/* Header */
#customHeader {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0.75rem 1.5rem;
}

/* Sidebar */
#customSidebar {
    grid-area: sidebar;
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow-y: auto;
    background-color: #2d2d2d;
    width: 280px;
    transition: transform 0.3s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

#page.isSidebarClosed #customSidebar {
    transform: translateX(-100%);
}

/* Main content */
main {
    grid-area: main;
    padding: 2rem;
    background-color: #e5e5e5;
    min-height: calc(100vh - 60px);
}

main .content {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 768px) {
    #page {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main";
    }

    #customSidebar {
        position: fixed;
        left: 0;
        top: 60px;
        z-index: 999;
        transform: translateX(-100%);
    }

    #page.isSidebarOpen #customSidebar {
        transform: translateX(0);
    }

    main {
        padding: 1rem;
    }
}