/* ===== LAYOUT PRINCIPALE ===== */

/* La sidebar deve restare sempre ferma: nessuno scroll della pagina
   intera. Tutto il contenuto scrolla dentro i suoi contenitori interni
   (.flex-1.overflow-y-auto già presenti in ogni pagina), mai a livello di
   html/body — così la sidebar (altezza 100vh) non si sposta mai, e se il
   suo stesso menu è più lungo dello schermo scrolla solo lei internamente
   (vedi overflow-y su .sidebar qui sotto). */
html, body {
    height: 100%;
    overflow: hidden;
}

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

/* Bug classico del flexbox, causa del "devo ruotare il telefono per
   vedere la tabella": un elemento flex (qui <main>, dentro il
   contenitore .flex-1.flex-col accanto alla sidebar) di default NON può
   restringersi oltre la larghezza minima intrinseca del suo contenuto —
   se dentro c'è una tabella larga, <main> si allarga oltre lo schermo
   invece di lasciarla scrollare al proprio interno. "min-width: 0"
   toglie quel limite: da qui in poi lo scroll orizzontale dei
   contenitori interni (.overflow-x-auto sulle tabelle) funziona
   davvero, su ogni pagina, senza dover ruotare nulla. */
main {
    min-width: 0;
}

/* Stesso discorso del punto sopra, un livello più in alto: il
   contenitore che avvolge <main> (accanto alla sidebar) ha sempre questa
   esatta combinazione di classi in ogni pagina del backoffice. */
.flex-1.flex.flex-col.min-h-screen {
    min-width: 0;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 260px;
    background: #e3ecff;
    border-right: 1px solid #e5e7eb;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100vh;
    /* Il menu può essere più lungo dello schermo (tante voci, agenzie con
       molte pagine collegate, ecc.): senza overflow-y lo scroll interno
       non funziona, soprattutto in mobile dove la sidebar è "position:
       fixed" e non può appoggiarsi allo scroll della pagina. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* LOGO */
.sidebar h2 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 14px;
    color: #111827;
}

/* LINK */
.sidebar a {
    padding: 7px 10px;
    border-radius: 8px;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: 0.2s;
    width: 100%;
}

.sidebar a:hover {
    background: #f3f4f6;
    transform: translateX(4px);
}

/* ===== MAIN ===== */
.main-content {
    flex: 1;
    padding: 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
}
.sidebar-header {
    width:100%;
    background-color: #e5e7eb;
    padding: 5px;
    border-radius: 10px;
    text-align: center!important;
}

/* Il pulsante toggle esiste solo per mobile: nascosto su desktop.
   Definito PRIMA del media query, che lo sovrascrive con display:flex
   sugli schermi piccoli (l'ordine nel file conta quando la specificità
   CSS è identica). */
.sidebar-toggle-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 60;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        max-width: 80vw;
        height: 100vh;
        min-height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 50;
        box-shadow: 2px 0 16px rgba(0,0,0,0.15);
        /* Ribadito qui: in mobile la sidebar è "fixed" e occupa tutta
           l'altezza dello schermo, quindi è l'UNICO elemento che può
           scrollare il proprio contenuto (la pagina sotto non aiuta).
           Un po' di padding in fondo assicura che l'ultima voce non resti
           incollata al bordo dello schermo/notch. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 32px;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        z-index: 40;
    }

    .sidebar-overlay.mobile-open {
        display: block;
    }

    .sidebar-toggle-btn {
        display: flex;
    }

    /* Spazio per il pulsante toggle in alto, su tutte le pagine, senza
       dover modificare il markup di ciascuna: il tag <main> è comune a
       tutte le pagine del backoffice. */
    main {
        padding-top: 64px !important;
    }
}


/* ===== FOOTER ===== */
.footer {
    background: #000;
    color: #9ca3af;
    padding: 15px 20px;
    font-size: 13px;
    border-top: 1px solid #1f2937;
}

/* CONTENUTO */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* PARTE DESTRA */
.footer-right {
    color: #6b7280;
}

/* HOVER (leggero, professionale) */
.footer a {
    color: #d1d5db;
    text-decoration: none;
}

.footer a:hover {
    color: #ffffff;
}