/**
 * Sensemaker AI - Stili CSS
 * Tema: Pastello professionale per ristorazione
 * Accessibilità: WCAG 2.1 AA
 */

/* =====================================================
   VARIABILI CSS - PALETTE PASTELLO
   ===================================================== */
:root {
    /* Colori primari pastello */
    --color-primario: #7B9E89;          /* Verde salvia pastello */
    --color-primario-chiaro: #A8C5B5;
    --color-primario-scuro: #5A7A66;

    /* Colori secondari pastello */
    --color-secondario: #E8B4B8;        /* Rosa pastello */
    --color-secondario-chiaro: #F2D4D6;
    --color-secondario-scuro: #C9999E;

    /* Colori accento */
    --color-accento: #F5E6CA;           /* Crema/beige pastello */
    --color-accento-chiaro: #FBF4E8;
    --color-accento-scuro: #D9C9A8;

    /* Colori semantici pastello */
    --color-successo: #A5D6A7;          /* Verde pastello */
    --color-successo-bg: #E8F5E9;
    --color-attenzione: #FFE082;        /* Giallo pastello */
    --color-attenzione-bg: #FFF8E1;
    --color-errore: #EF9A9A;            /* Rosso pastello */
    --color-errore-bg: #FFEBEE;
    --color-info: #B3E5FC;              /* Azzurro pastello */
    --color-info-bg: #E1F5FE;

    /* Colori sentiment */
    --color-positivo: #A5D6A7;
    --color-neutro: #B3E5FC;
    --color-negativo: #EF9A9A;

    /* Colori neutri */
    --color-bianco: #FFFFFF;
    --color-grigio-chiaro: #F5F5F5;
    --color-grigio: #E0E0E0;
    --color-grigio-medio: #9E9E9E;
    --color-grigio-scuro: #616161;
    --color-testo: #424242;
    --color-testo-chiaro: #757575;
    --color-nero: #212121;

    /* Sfondo */
    --color-sfondo: #FAFBFC;
    --color-sfondo-card: #FFFFFF;

    /* Tipografia */
    --font-famiglia: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */

    /* Spaziatura */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */

    /* Bordi */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    /* Ombre */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Transizioni */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Z-index */
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-loading: 1100;
    --z-notifica: 1200;
}

/* =====================================================
   TEMA SCURO
   ===================================================== */
[data-theme="dark"] {
    /* Colori primari scuri */
    --color-primario: #8FB5A0;
    --color-primario-chiaro: #A8C5B5;
    --color-primario-scuro: #6A9179;

    /* Colori secondari scuri */
    --color-secondario: #D8949A;
    --color-secondario-chiaro: #E8B4B8;
    --color-secondario-scuro: #B87580;

    /* Colori accento */
    --color-accento: #B8A373;
    --color-accento-chiaro: #C9B88A;
    --color-accento-scuro: #998760;

    /* Colori semantici scuri */
    --color-successo: #81C784;
    --color-successo-bg: #1B5E20;
    --color-attenzione: #FFD54F;
    --color-attenzione-bg: #F57F17;
    --color-errore: #E57373;
    --color-errore-bg: #B71C1C;
    --color-info: #4FC3F7;
    --color-info-bg: #01579B;

    /* Colori sentiment */
    --color-positivo: #81C784;
    --color-neutro: #64B5F6;
    --color-negativo: #E57373;

    /* Colori neutri scuri */
    --color-bianco: #1E1E1E;
    --color-grigio-chiaro: #2D2D2D;
    --color-grigio: #3D3D3D;
    --color-grigio-medio: #B0B0B0;
    --color-grigio-scuro: #E0E0E0;
    --color-testo: #E0E0E0;
    --color-testo-chiaro: #B0B0B0;
    --color-nero: #F5F5F5;

    /* Sfondo scuro */
    --color-sfondo: #121212;
    --color-sfondo-card: #1E1E1E;

    /* Ombre più intense per il tema scuro */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* =====================================================
   RESET E BASE
   ===================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-famiglia);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-testo);
    background-color: var(--color-sfondo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =====================================================
   ACCESSIBILITÀ
   ===================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primario);
    color: var(--color-bianco);
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: var(--z-notifica);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* Focus visibile per accessibilità */
:focus-visible {
    outline: 3px solid var(--color-primario);
    outline-offset: 2px;
}

/* =====================================================
   HEADER
   ===================================================== */
.header {
    background-color: var(--color-bianco);
    border-bottom: 1px solid var(--color-grigio);
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-sm);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.logo-icon {
    font-size: var(--font-size-2xl);
}

.logo h1 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primario-scuro);
}

.nav-principale {
    flex: 1;
}

.nav-lista {
    display: flex;
    list-style: none;
    gap: var(--spacing-xs);
}

.nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-testo);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.nav-link:hover {
    background-color: var(--color-accento);
    color: var(--color-primario-scuro);
}

.nav-link.attivo {
    background-color: var(--color-primario);
    color: var(--color-bianco);
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

/* Toggle tema scuro */
.theme-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background-color: var(--color-grigio-chiaro);
}

/* Menu hamburger per mobile */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--spacing-sm);
    color: var(--color-testo);
}

/* =====================================================
   BOTTONI
   ===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primario {
    background-color: var(--color-primario);
    color: var(--color-bianco);
}

.btn-primario:hover:not(:disabled) {
    background-color: var(--color-primario-scuro);
}

.btn-secondario {
    background-color: var(--color-grigio-chiaro);
    color: var(--color-testo);
    border: 1px solid var(--color-grigio);
}

.btn-secondario:hover:not(:disabled) {
    background-color: var(--color-grigio);
}

.btn-pericolo {
    background-color: var(--color-errore);
    color: var(--color-bianco);
}

.btn-pericolo:hover:not(:disabled) {
    background-color: #E57373;
}

.btn-grande {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
}

/* =====================================================
   CONTENUTO PRINCIPALE
   ===================================================== */
.main-content {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    width: 100%;
}

.sezione {
    margin-bottom: var(--spacing-2xl);
}

.sezione-titolo {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-nero);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-primario);
}

/* =====================================================
   STATISTICHE CARDS
   ===================================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background-color: var(--color-sfondo-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--color-primario);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-icona {
    font-size: var(--font-size-3xl);
    opacity: 0.8;
}

.stat-icona.positivo {
    color: var(--color-successo);
}

.stat-contenuto {
    display: flex;
    flex-direction: column;
}

.stat-valore {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-nero);
}

.stat-etichetta {
    font-size: var(--font-size-sm);
    color: var(--color-testo-chiaro);
}

/* =====================================================
   GRAFICI
   ===================================================== */
.grafici-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.grafico-container {
    background-color: var(--color-sfondo-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    min-height: 280px;
}

/* =====================================================
   FILTRI
   ===================================================== */
.filtri-container {
    background-color: var(--color-sfondo-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

.filtri-gruppo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.filtro-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 150px;
}

.filtro-item label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-testo);
}

.input-filtro,
.select-filtro {
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-grigio);
    border-radius: var(--border-radius-md);
    background-color: var(--color-bianco);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-filtro:focus,
.select-filtro:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-primario-chiaro);
    outline: none;
}

.filtri-azioni {
    display: flex;
    gap: var(--spacing-sm);
}

/* =====================================================
   BARRA AZIONI E RICERCA
   ===================================================== */
.azioni-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.ricerca-wrapper {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.input-ricerca {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    border: 1px solid var(--color-grigio);
    border-radius: var(--border-radius-md);
    background-color: var(--color-bianco);
    transition: all var(--transition-fast);
}

.input-ricerca:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-primario-chiaro);
    outline: none;
}

.azioni-gruppo {
    display: flex;
    gap: var(--spacing-sm);
}

/* =====================================================
   LISTA RECENSIONI
   ===================================================== */
.lista-recensioni {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
}

.lista-vuota {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-testo-chiaro);
}

.lista-vuota .suggerimento {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
}

.recensione-card {
    background-color: var(--color-sfondo-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 4px solid var(--color-grigio);
}

.recensione-card:hover,
.recensione-card:focus {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.recensione-card.positiva {
    border-left-color: var(--color-positivo);
}

.recensione-card.neutra {
    border-left-color: var(--color-neutro);
}

.recensione-card.negativa {
    border-left-color: var(--color-negativo);
}

.recensione-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.recensione-autore {
    font-weight: 600;
    color: var(--color-nero);
}

.recensione-data {
    font-size: var(--font-size-sm);
    color: var(--color-testo-chiaro);
}

.recensione-valutazione {
    display: inline-flex;
    align-items: baseline;
    margin-bottom: var(--spacing-sm);
}

.valutazione-numero {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primario-scuro);
}

.valutazione-max {
    font-size: var(--font-size-sm);
    color: var(--color-testo-chiaro);
}

.recensione-testo {
    font-size: var(--font-size-sm);
    color: var(--color-testo);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.recensione-footer {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-testo-chiaro);
}

/* =====================================================
   SEZIONE ANALISI
   ===================================================== */
.analisi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.analisi-azione-panel,
.suggerimenti-panel,
.alert-panel,
.parole-chiave-panel {
    background-color: var(--color-sfondo-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.panel-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-nero);
}

.panel-descrizione {
    font-size: var(--font-size-sm);
    color: var(--color-testo-chiaro);
    margin-bottom: var(--spacing-lg);
}

.stato-ok {
    color: var(--color-successo);
    font-weight: 500;
}

.stato-warning {
    color: var(--color-attenzione-scuro);
    font-weight: 500;
}

/* Suggerimenti */
.lista-suggerimenti {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.suggerimento-card {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    background-color: var(--color-grigio-chiaro);
}

.suggerimento-card.priorita-alta {
    background-color: var(--color-errore-bg);
    border-left: 3px solid var(--color-errore);
}

.suggerimento-card.priorita-media {
    background-color: var(--color-attenzione-bg);
    border-left: 3px solid var(--color-attenzione);
}

.suggerimento-card.priorita-bassa {
    background-color: var(--color-successo-bg);
    border-left: 3px solid var(--color-successo);
}

.suggerimento-categoria {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-testo-chiaro);
    margin-bottom: var(--spacing-xs);
}

.suggerimento-testo {
    font-size: var(--font-size-sm);
    color: var(--color-testo);
}

.nessun-suggerimento,
.nessuna-parola {
    color: var(--color-testo-chiaro);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--spacing-md);
}

/* Alert */
.lista-alert {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.alert-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
}

.alert-card.tipo-positivo {
    background-color: var(--color-successo-bg);
}

.alert-card.tipo-attenzione {
    background-color: var(--color-attenzione-bg);
}

.alert-card.tipo-critico {
    background-color: var(--color-errore-bg);
}

/* Parole chiave cloud */
.cloud-parole-chiave {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
    padding: var(--spacing-md);
}

.parola-chiave {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-grigio-chiaro);
    color: var(--color-testo);
    transition: transform var(--transition-fast);
}

.parola-chiave:hover {
    transform: scale(1.1);
}

.parola-chiave.positiva {
    background-color: var(--color-successo-bg);
    color: var(--color-primario-scuro);
}

.parola-chiave.negativa {
    background-color: var(--color-errore-bg);
    color: #C62828;
}

/* =====================================================
   SEZIONE IMPOSTAZIONI
   ===================================================== */
.impostazioni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.impostazione-card {
    background-color: var(--color-sfondo-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
}

.impostazione-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-nero);
    margin-bottom: var(--spacing-sm);
}

.impostazione-descrizione {
    font-size: var(--font-size-sm);
    color: var(--color-testo-chiaro);
    margin-bottom: var(--spacing-lg);
}

.form-gruppo {
    margin-bottom: var(--spacing-md);
}

.form-gruppo label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.input-con-azione {
    display: flex;
    gap: var(--spacing-sm);
}

.input-testo {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    border: 1px solid var(--color-grigio);
    border-radius: var(--border-radius-md);
}

.input-testo:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-primario-chiaro);
    outline: none;
}

.azioni-verticali {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.info-lista {
    font-size: var(--font-size-sm);
}

.info-lista dt {
    font-weight: 600;
    color: var(--color-testo);
    margin-top: var(--spacing-sm);
}

.info-lista dd {
    color: var(--color-testo-chiaro);
}

/* =====================================================
   MODALE
   ===================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-overlay.attivo {
    opacity: 1;
    visibility: visible;
}

.modal-contenitore {
    background-color: var(--color-bianco);
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: auto;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    transition: transform var(--transition-base);
}

.modal-overlay.attivo .modal-contenitore {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-grigio);
}

.modal-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.modal-chiudi {
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    cursor: pointer;
    color: var(--color-testo-chiaro);
    transition: color var(--transition-fast);
}

.modal-chiudi:hover {
    color: var(--color-nero);
}

.modal-body {
    padding: var(--spacing-lg);
}

.dettaglio-recensione header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.dettaglio-recensione h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.dettaglio-recensione .valutazione {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primario-scuro);
}

.dettaglio-recensione .data {
    font-size: var(--font-size-sm);
    color: var(--color-testo-chiaro);
    margin-bottom: var(--spacing-lg);
}

.dettaglio-recensione .testo-completo {
    font-size: var(--font-size-base);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.dettaglio-recensione footer {
    display: flex;
    gap: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-testo-chiaro);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-grigio);
}

/* =====================================================
   LOADING OVERLAY
   ===================================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: var(--z-loading);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.loading-overlay.attivo {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-grigio);
    border-top-color: var(--color-primario);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-messaggio {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-testo);
}

/* =====================================================
   NOTIFICHE TOAST
   ===================================================== */
.notifica-toast {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-bianco);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-notifica);
    animation: slideIn var(--transition-base) ease;
}

.notifica-toast.uscita {
    animation: slideOut var(--transition-base) ease forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notifica-toast.tipo-successo {
    border-left: 4px solid var(--color-successo);
}

.notifica-toast.tipo-errore {
    border-left: 4px solid var(--color-errore);
}

.notifica-toast.tipo-attenzione {
    border-left: 4px solid var(--color-attenzione);
}

.notifica-toast.tipo-info {
    border-left: 4px solid var(--color-info);
}

.notifica-chiudi {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--color-testo-chiaro);
    padding: var(--spacing-xs);
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
    background-color: var(--color-grigio-chiaro);
    border-top: 1px solid var(--color-grigio);
    padding: var(--spacing-lg);
    margin-top: auto;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    color: var(--color-testo-chiaro);
    font-size: var(--font-size-sm);
}

.footer-note {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* Tablet e piccoli desktop */
@media (max-width: 1024px) {
    .main-content {
        padding: var(--spacing-md);
    }

    .grafici-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lista-recensioni {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet */
@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap;
        padding: var(--spacing-md);
    }

    .logo h1 {
        font-size: var(--font-size-xl);
    }

    .menu-toggle {
        display: block;
        order: 2;
    }

    .nav-principale {
        order: 3;
        width: 100%;
        margin-top: var(--spacing-sm);
        display: none;
    }

    .nav-principale.active {
        display: block;
    }

    .nav-lista {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .nav-link {
        width: 100%;
        text-align: center;
    }

    .header-actions {
        order: 1;
        margin-left: auto;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .stat-card {
        padding: var(--spacing-md);
    }

    .grafici-grid {
        grid-template-columns: 1fr;
    }

    .filtri-gruppo {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .filtro-item {
        width: 100%;
    }

    .azioni-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .ricerca-wrapper {
        max-width: 100%;
    }

    .azioni-gruppo {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-sm);
    }

    .lista-recensioni {
        grid-template-columns: 1fr;
    }

    .analisi-grid {
        grid-template-columns: 1fr;
    }

    .impostazioni-grid {
        grid-template-columns: 1fr;
    }

    .modal-dialog {
        width: 90%;
        margin: var(--spacing-md);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .header-container {
        padding: var(--spacing-sm);
    }

    .logo h1 {
        font-size: var(--font-size-lg);
    }

    .logo-icon {
        font-size: var(--font-size-xl);
    }

    .main-content {
        padding: var(--spacing-sm);
    }

    .sezione-titolo {
        font-size: var(--font-size-xl);
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .stat-card {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .stat-valore {
        font-size: var(--font-size-2xl);
    }

    .stat-etichetta {
        font-size: var(--font-size-xs);
    }

    .grafici-grid {
        grid-template-columns: 1fr;
    }

    .grafico-container {
        padding: var(--spacing-sm);
    }

    .btn {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .btn-grande {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .azioni-gruppo .btn {
        width: 100%;
    }

    .modal-dialog {
        width: 95%;
        margin: var(--spacing-xs);
        max-height: 95vh;
    }

    .modal-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .modal-body {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .recensione-card {
        padding: var(--spacing-sm);
    }

    .form-group {
        margin-bottom: var(--spacing-sm);
    }
}

/* =====================================================
   STAMPA
   ===================================================== */
@media print {
    .header,
    .footer,
    .filtri-container,
    .azioni-container,
    .btn {
        display: none !important;
    }

    .main-content {
        max-width: 100%;
        padding: 0;
    }

    .sezione {
        page-break-inside: avoid;
    }

    .recensione-card {
        box-shadow: none;
        border: 1px solid var(--color-grigio);
    }
}