/* ==========================================================================
   Layout dell'area riservata: sidebar scura, header bianco, contenuto, footer.
   ========================================================================== */

.salta-al-contenuto {
    position: absolute;
    left: -9999px;
    top: .5rem;
    z-index: 2000;
    background: var(--ania-primario);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: var(--ania-raggio-piccolo);
}

.salta-al-contenuto:focus { left: .5rem; }

/* ---------- Sidebar ---------- */

#app-sidebar.e-sidebar {
    background: var(--ania-sidebar);
    color: var(--ania-sidebar-testo);
    border: 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    z-index: 1030;
}

.sidebar-marchio {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--ania-header-altezza);
    padding: 0 1.25rem;
    background: var(--ania-primario);
    color: #fff;
    font-weight: 600;
    font-size: 1.0625rem;
    flex-shrink: 0;
}

.sidebar-marchio img { width: 44px; height: auto; }

.sidebar-menu {
    padding: .75rem 0 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.sidebar-menu ul { list-style: none; margin: 0; padding: 0; }

.sidebar-sezione {
    padding: 1.1rem 1.5rem .4rem;
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ania-sidebar-titolo);
}

.sidebar-voce {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1px .75rem;
    padding: .55rem .75rem;
    border-radius: var(--ania-raggio-piccolo);
    border-left: 3px solid transparent;
    color: var(--ania-sidebar-testo);
    text-decoration: none;
    font-size: .9rem;
    transition: background-color .15s, color .15s;
}

.sidebar-voce i { font-size: 1.05rem; width: 1.25rem; text-align: center; }

.sidebar-voce:hover { background: var(--ania-sidebar-hover); color: #fff; }

.sidebar-voce.active {
    background: var(--ania-sidebar-attiva);
    border-left-color: var(--ania-primario-accento);
    color: #fff;
    font-weight: 600;
}

.sidebar-voce.admin, .sidebar-voce.admin:hover { color: var(--ania-oro); }
.sidebar-voce.admin.active { border-left-color: var(--ania-oro); }

/* ---------- Area principale ---------- */

.app-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ania-sfondo);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--ania-header-altezza);
    padding: 0 1.25rem;
    background: var(--ania-superficie);
    box-shadow: var(--ania-ombra-header);
}

.header-icona {
    color: var(--ania-testo-secondario);
    font-size: 1.35rem;
    padding: .25rem .5rem;
    line-height: 1;
}

.header-icona:hover { color: var(--ania-primario); }

.header-contesto {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
    min-width: 0;
}

.header-campo { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.header-campo label { font-size: .8125rem; font-weight: 600; color: var(--ania-testo-secondario); margin: 0; }
.header-impresa { flex: 0 1 380px; }
.header-impresa .e-ddl { flex: 1; min-width: 0; }

.header-os {
    font-weight: 600;
    color: var(--ania-primario);
    background: var(--ania-primario-chiaro);
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .8125rem;
    white-space: nowrap;
}

.header-azioni { display: flex; align-items: center; gap: .5rem; }

.header-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: #c62828;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.15rem;
}

/* Menu utente */

.menu-utente { position: relative; }

.menu-utente-pulsante {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem .5rem;
    border: 0;
    border-radius: var(--ania-raggio);
    background: transparent;
    color: var(--ania-testo);
}

.menu-utente-pulsante:hover { background: var(--ania-sfondo); }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--ania-primario);
    color: #fff;
    font-size: .8125rem;
    font-weight: 650;
}

.menu-utente-testo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.menu-utente-testo .nome { font-weight: 600; font-size: .875rem; }
.menu-utente-testo .profilo { font-size: .75rem; color: var(--ania-testo-secondario); }

.menu-utente-sfondo { position: fixed; inset: 0; z-index: 1040; }

.menu-utente-popup {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 1050;
    min-width: 240px;
    background: var(--ania-superficie);
    border-radius: var(--ania-raggio);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .16);
    padding-bottom: .35rem;
}

.menu-utente-voce {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem 1rem;
    border: 0;
    background: transparent;
    color: var(--ania-testo);
    text-decoration: none;
    font-size: .875rem;
    text-align: left;
}

.menu-utente-voce:hover { background: var(--ania-sfondo); color: var(--ania-primario); }

/* ---------- Contenuto e footer ---------- */

.app-contenuto {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    padding: 1.75rem 1.75rem 2rem;
}

.app-contenuto:focus { outline: none; }

.app-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--ania-bordo);
    color: var(--ania-testo-secondario);
    font-size: .8125rem;
}

.app-footer nav { display: flex; gap: 1.25rem; }
.app-footer a { color: var(--ania-testo-secondario); }
.app-footer a:hover { color: var(--ania-primario); }

/* ---------- Home ---------- */

.card-scorciatoia {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    height: 100%;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
}

.card-scorciatoia:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, .1); color: inherit; }

.card-scorciatoia .icona {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ania-raggio);
    background: var(--ania-primario-chiaro);
    color: var(--ania-primario);
    font-size: 1.3rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
    .app-header { padding: 0 .75rem; gap: .5rem; }
    .app-contenuto { padding: 1.25rem 1rem 1.5rem; }
    .menu-utente-testo, .header-campo label { display: none; }
    .header-impresa { flex: 1 1 auto; }
}

/* Sotto i 768px anno e impresa vanno su una seconda riga dell'header, a tutta larghezza. */
@media (max-width: 767.98px) {
    .app-header { flex-wrap: wrap; height: auto; padding-top: .5rem; padding-bottom: .5rem; row-gap: .5rem; }
    .header-azioni { margin-left: auto; }
    .header-contesto { order: 3; flex: 1 0 100%; gap: .75rem; }
    .header-campo label { display: inline; }
    .header-impresa { flex: 1 1 auto; }
    .header-os { white-space: normal; }
}

/* ---------- Riconnessione Blazor ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: #fff8e1;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---------- Profilo (ANIA, Impresa, OOSS) sempre riconoscibile ---------- */

.profilo-ania { --ania-profilo: #005a8e; --ania-profilo-chiaro: #e5eff5; }
.profilo-impresa { --ania-profilo: #0f6e62; --ania-profilo-chiaro: #e3f3f0; }
.profilo-ooss { --ania-profilo: #6b3fa8; --ania-profilo-chiaro: #f0eafa; }

.app-shell .app-header { border-top: 4px solid var(--ania-profilo); }
.app-shell .avatar { background: var(--ania-profilo); }

.badge-profilo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--ania-profilo);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
}

.sidebar-area {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.5rem;
    background: var(--ania-profilo);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.profilo-ania .sidebar-area { background: #00476f; }

/* Banner dell'accesso ANIA come altro utente (impersonazione) */
.banner-impersonazione { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem 1rem; background: #8a4b00; color: #fff; font-size: .9rem; }