/* ============================================================================
   STRUTTURA — l'impalcatura della pagina: menu, barra superiore, contenuto.
   Cambia raramente. I componenti che ci vivono dentro stanno in componenti.css.
   ============================================================================ */

.applicazione {
    display: grid;
    grid-template-columns: var(--larghezza-menu) 1fr;
    grid-template-rows: var(--altezza-barra) 1fr;
    grid-template-areas: "menu barra" "menu contenuto";
    min-height: 100vh;
}

/* ─────────────── Menu laterale ─────────────── */

.menu {
    grid-area: menu;
    background: var(--scuro);
    color: var(--menu-testo);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.menu__marchio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    height: var(--altezza-barra);
    flex: 0 0 auto;
    border-bottom: 1px solid var(--menu-separatore);
}
.menu__marchio, .menu__marchio:hover { color: inherit; text-decoration: none; }
.menu__marchio .marchio__nome { display: flex; align-items: center; gap: 10px; }
.menu__marchio .marchio__nome strong { color: var(--menu-testo-vivo); font-size: 1rem; letter-spacing: .2px; }
.menu__marchio .marchio__punto { color: var(--primario-chiaro); font-weight: 700; }
.menu__marchio .marchio__qualifica { color: var(--menu-testo-tenue); font-size: .8rem; }

/* Con il logo (il file è su fondo bianco) il marchio sta su una tessera bianca e il
   blocco cresce quanto serve; la qualifica «gestionale» resta sotto, piccola. */
.menu__marchio:has(.marchio__logo) {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 18px 10px;
}
.menu__marchio .marchio__logo {
    display: block;
    background: var(--superficie);
    border-radius: var(--raggio-piccolo);
    padding: 7px 10px;
}
.menu__marchio .marchio__logo img { display: block; width: 100%; height: auto; }
.menu__marchio:has(.marchio__logo) .marchio__qualifica {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: right;
}

.menu__gruppo { padding: 14px 10px 4px; }
.menu__titolo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--menu-testo-tenue);
    padding: 0 10px 6px;
}

.menu__voce {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 1px;
    border-radius: var(--raggio-piccolo);
    color: var(--menu-testo);
    font-size: .875rem;
}
.menu__voce:hover { background: var(--scuro-2); color: var(--menu-testo-vivo); text-decoration: none; }
.menu__voce[aria-current="page"] { background: var(--primario-pieno); color: var(--su-tinta); font-weight: 500; }
.menu__voce .icona { flex: 0 0 18px; text-align: center; opacity: .9; }
.menu__voce .pallino {
    margin-left: auto;
    background: var(--errore);
    color: var(--su-tinta);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: .7rem;
    font-weight: 600;
}

/* ─────────────── Barra superiore ─────────────── */

.barra {
    grid-area: barra;
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.barra__titolo { font-weight: 600; font-size: 1rem; margin: 0; }
.barra__spazio { flex: 1; }

.barra__utente {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--testo-tenue);
}
.barra__utente .iniziali {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--primario-tenue);
    color: var(--primario-pieno);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: .78rem;
}

/* ─────────────── Area dei contenuti ─────────────── */

.contenuto {
    grid-area: contenuto;
    padding: 18px;
    max-width: 1560px;
    width: 100%;
    /* Senza questo, una griglia interna larga (kanban, tabelle) allarga la colonna
       della griglia esterna e sposta l'intera pagina: il minimo di una traccia grid
       e' il contenuto, salvo dirgli di no. */
    min-width: 0;
}

/* Il pulsante del menu: su schermo stretto apre il pannello, su schermo largo
   riduce o riapre la colonna. La scelta resta memorizzata fra le pagine. */
.barra .apri-menu { display: inline-flex; }

.applicazione.menu-ridotto {
    grid-template-columns: 0 1fr;
}
.applicazione.menu-ridotto .menu { display: none; }

.intestazione-pagina {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.intestazione-pagina__testo { flex: 1 1 320px; }
.intestazione-pagina__testo p { color: var(--testo-tenue); margin: 2px 0 0; font-size: .86rem; }
.intestazione-pagina__azioni { display: flex; gap: 8px; flex-wrap: wrap; }

.griglia { display: grid; gap: 16px; }
.griglia--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.griglia--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.griglia--principale { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }