/* ACM-e v2 · frontend — ACMe_fase5_mandato_frontend.md, Gruppo 1. */
body { font-family: Arial, sans-serif; margin: 0; color: #1B2A4A; background: #dde4ee; display: flex; height: 100vh; overflow: hidden; }

/* ---- guscio dell'app: sidebar sinistra + area principale (Fase 1 del ripristino grafico,
   ricalcata su v1.71 righe 12-48/5654-5676: stessi colori, stessa struttura) ---------------- */
/* height:100vh esplicito, non affidato allo stretch del flex del body: #sidebar non è un figlio
   diretto del body ma è dentro il <div> di ng-include (necessario per Angular), che come
   contenitore normale si adatta all'altezza del contenuto invece di riempire il body — senza
   questa riga la sidebar si fermava dove finiva l'ultima voce di menu invece di arrivare in
   fondo alla pagina. Trovato per davvero in un test, non un'ipotesi. */
#sidebar { width: 290px; min-width: 290px; height: 100vh; background: #1F3864; color: #fff; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 24px; }
.sidebar-header { padding: 16px; border-bottom: 1px solid #2E5FA3; }
.sb-logo { display: block; height: 30px; width: auto; max-width: 100%; margin-bottom: 12px; background: #fff; border-radius: 5px; padding: 5px 8px; }
.sidebar-header p { font-size: 11.5px; font-weight: bold; color: #7EB3E8; margin-top: 5px; letter-spacing: .5px; }
#sb-user { font-size: 10.5px; color: #7EB3E8; margin-top: 6px; font-weight: normal; }
.side-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.side-actions button { width: 100%; background: #2E5FA3; color: #fff; border: none; padding: 9px 10px; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: bold; }
.side-actions button:hover { background: #3A78C4; }
.nav-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #7EB3E8; padding: 14px 16px 6px; font-weight: bold; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; font-size: 11.5px; color: #C8DCF5; text-decoration: none; border-left: 3px solid transparent; cursor: pointer; line-height: 1.4; }
.nav-list li a:hover, .nav-list li a.active { background: #2E5FA3; color: #fff; border-left-color: #FFD97A; }
/* Pallino "c'è qualcosa in sospeso" sui progetti in sidebar (migrazione 018, punti 8-9).
   Giallo #FFD97A: lo stesso accento che la sidebar usa già per la voce attiva — un colore nuovo
   qui avrebbe voluto dire "una cosa nuova", mentre è la stessa "guarda qui" di sempre.
   flex:none perché il genitore è flex con space-between: senza, il pallino si lascerebbe
   comprimere dal nome del progetto quando questo è lungo. */
.pallino-segnalazione { flex: none; margin-left: 8px; color: #FFD97A; font-size: 13px; line-height: 1; }
#main { flex: 1; min-width: 0; overflow-y: auto; padding: 22px 28px; }
#sb-footer { margin-top: auto; padding: 12px 16px; border-top: 1px solid #2E5FA3; }

/* ---- selettore lingua a bandiera (Fase 1, ricalcato su v1.71 righe 37-48) ------------------ */
.lang-wrap { position: relative; width: 100%; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; background: transparent; color: #C8DCF5; border: 1px solid #3A5990; border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; font-weight: bold; }
.lang-btn:hover { background: #2E5FA3; color: #fff; }
.lang-caret { margin-left: auto; opacity: .7; font-size: 9px; transition: transform .12s; }
.lang-wrap.open .lang-caret { transform: rotate(180deg); }
.lang-flag { width: 19px; height: 13px; display: block; flex: 0 0 auto; border-radius: 1px; }
.lang-sigla { letter-spacing: .5px; }
.lang-menu { position: absolute; left: 0; bottom: calc(100% + 6px); min-width: 170px; background: #fff; color: #1F3864; border: 1px solid #cfd9ea; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.28); overflow: hidden; z-index: 60; }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 9px 12px; cursor: pointer; font-size: 13px; color: #1F3864; text-align: left; font-weight: normal; }
.lang-menu button:hover { background: #EAF1FB; }
.lang-menu button.active { background: #1F3864; color: #fff; font-weight: bold; }
.lang-menu button .lang-flag { width: 21px; height: 14px; }

/* Vista strette (login, form): non più applicata di default a tutto #main come prima, solo dove
   serve — vedi .schermo-login/.schermo-pending sotto, che si bastano da sole. */
.contenuto { padding: 24px; max-width: 720px; margin: 0 auto; }
/* Griglia con intestazione — v1.71 righe 56-58 (table.grid): prima c'era solo un
   border-bottom su th/td, niente sfondo di intestazione, niente griglia vera. Regola
   GENERALE: vale per ogni <table class="griglia"> del frontend, non solo dove è stata
   segnalata (richiesta esplicita — non ripetere la correzione schermata per schermata). */
.griglia { width: 100%; border-collapse: collapse; margin-bottom: 16px; background: #fff; }
.griglia th, .griglia td { text-align: left; padding: 7px 8px; border: 1px solid #dde3ee; }
.griglia th { background: #EEF3FA; color: #1F3864; font-size: 11px; }
.griglia td { border-color: #E8EDF4; vertical-align: middle; }
.griglia .colonna-azioni { width: 90px; text-align: right; }
/* Matrice ruoli (Utenti/Membri): una colonna per ruolo con una X dove si applica, invece di
   un'unica pillola col ruolo corrente — richiesta esplicita, tabella in sola lettura sul ruolo
   quando non c'è un pulsante di fianco (Membri) che lo cambi. */
.griglia .colonna-ruolo { width: 70px; text-align: center; font-weight: bold; color: #1B5EA8; }
/* Descrizioni dei livelli (settore, metodo parametrico): 1/5 · 1/5 · 3/5 — la descrizione è
   l'unico campo scritto a mano davvero, gli altri due sono un'etichetta e un numero. */
.griglia-livelli { table-layout: fixed; }
.griglia-livelli th:nth-child(1), .griglia-livelli td:nth-child(1) { width: 20%; }
.griglia-livelli th:nth-child(2), .griglia-livelli td:nth-child(2) { width: 20%; }
.griglia-livelli th:nth-child(3), .griglia-livelli td:nth-child(3) { width: 60%; }
.griglia-livelli textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid #cfd9ea; border-radius: 3px; padding: 4px 6px; font-size: 12px; font-family: Arial, sans-serif; line-height: 1.4; }
.griglia-livelli input[type=number] { width: 100%; box-sizing: border-box; }
/* Riga in etichetta+campo affiancati, campo a tutta larghezza (v1.71 righe 126-128: .frow) —
   diverso da .riga-campi (label sopra il campo, più campi per riga): qui serve l'altro
   layout, quello dei moduli a colonna singola come "Nuovo progetto". */
.riga-form { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.riga-form > label:first-child { width: 150px; flex: 0 0 auto; font-size: 13px; color: #445; }
.riga-form input, .riga-form select, .riga-form textarea { flex: 1; padding: 8px 9px; border: 1px solid #cfd9ea; border-radius: 5px; font-size: 13px; font-family: Arial, sans-serif; }
.riga-form-opzione { flex: 1; font-size: 12px; font-weight: normal; }
.riga-nuovo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.riga-nuovo input { padding: 6px 9px; border: 1px solid #cfd9ea; border-radius: 4px; font-size: 12px; font-family: Arial, sans-serif; }
.nota { font-size: 12px; color: #5A6B85; }
/* Login/attesa attivazione (Fase 8 del ripristino grafico — v1.71 righe 52-55, 120-122, 171:
   .auth-wrap/.card/.sumline). Un componente in più che tornerà utile anche altrove (cruscotto,
   export, settori), non solo qui — introdotto ora perché login è il primo posto che ne aveva
   bisogno per davvero. */
.auth-wrap { max-width: 440px; margin: 9vh auto 0; }
.auth-wrap .auth-logo { text-align: center; margin-bottom: 18px; }
.auth-wrap .auth-logo img { height: 34px; background: #fff; padding: 6px 10px; border-radius: 6px; border: 1px solid #d4ddea; }
.auth-wrap .auth-tagline { font-size: 12px; color: #5B6B82; margin-top: 10px; }
.card { background: #fff; border: 1px solid #d4ddea; border-radius: 8px; padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(31,56,100,.10); }
.card h3 { font-size: 15px; color: #1B5EA8; border-bottom: 1.5px solid #E0ECFF; padding-bottom: 8px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.card h3 .hint { font-size: 10.5px; color: #999; font-weight: normal; }
.card p.lead { font-size: 12.5px; color: #555; line-height: 1.6; margin-bottom: 10px; }
.sumline { font-size: 12px; padding: 8px 12px; border-radius: 6px; margin-top: 10px; }
.sumline.ok { background: #ECF7EE; color: #225C33; border-left: 3px solid #2F7A45; }
.sumline.warn { background: #FFF7E0; color: #7A5900; border-left: 3px solid #C99700; }
.sumline.err { background: #FBECEC; color: #8E2A2A; border-left: 3px solid #B23A3A; }

/* Fase 3 del ripristino grafico (cruscotto) — pillole di stato/classe (v1.71 righe 112-119) e
   piastrelle riassuntive (righe 129-134). */
.pill { display: inline-block; font-size: 10px; font-weight: bold; padding: 2px 9px; border-radius: 10px; }
.pill.ok { background: #D4F1D4; color: #155C33; }
.pill.warn { background: #FFF2CC; color: #7A5900; }
.pill.a { background: #F8CFCB; color: #A32C1E; }
.pill.b { background: #FCEEB5; color: #8A6D00; }
.pill.c { background: #C9E9D2; color: #1F7A3D; }
.pill.nd { background: #E7EAEE; color: #6B7280; }
.riepilogo-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.stat-tile { min-width: 130px; border-radius: 10px; padding: 14px 18px; text-align: center; }
.stat-num { font-size: 32px; font-weight: bold; line-height: 1.1; }
.stat-lbl { font-size: 12.5px; margin-top: 4px; line-height: 1.35; }
.stat-a { background: #F8CFCB; color: #A32C1E; }
.stat-b { background: #FCEEB5; color: #8A6D00; }
.stat-c { background: #C9E9D2; color: #1F7A3D; }
.stat-info { background: #DCE8F5; color: #1B5EA8; }

/* Barra reale-vs-target (v1.71: barraDist(), righe 8601-8614). */
.barra-dist { margin-bottom: 12px; }
.barra-dist-testa { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 4px; }
.barra-dist-track { position: relative; background: #EEF2F7; border: 1px solid #DDE3EE; border-radius: 3px; height: 16px; }
.barra-dist-fill { height: 100%; border-radius: 2px; }
.barra-dist-target { position: absolute; top: -4px; width: 2px; height: 24px; background: #1B2A4A; }

/* Istogramma dei punteggi (v1.71: istogrammaHtml(), righe 8617-8648). */
.istogramma { display: flex; align-items: flex-end; gap: 2px; height: 150px; border-bottom: 2px solid #1B2A4A; padding: 0 4px; }
.istogramma-colonna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.istogramma-barra { width: 82%; border-radius: 2px 2px 0 0; border-bottom: none; }
.nota-sviluppo { font-size: 12px; color: #8A6D00; background: #FFF7DA; border: 1px solid #E8D48A; padding: 8px; border-radius: 4px; }
.riga-checkbox { display: flex; align-items: center; gap: 6px; }
.errore { color: #8E2A2A; }
.nota-successo { color: #1B6E3C; }
button { cursor: pointer; }
.pulsante-link { display: inline-block; }
.pulsante-icona { border: none; background: none; cursor: pointer; }
.pulsante-pericolo { background: #8E2A2A; color: #fff; border: none; padding: 6px 10px; border-radius: 4px; }
.pillola { display: inline-block; background: #EDF1F9; color: #1B2A4A; border-radius: 12px; padding: 2px 10px; font-size: 12px; margin-right: 4px; }
.pillola.attiva { background: #DCF3E4; color: #1B6E3C; }
/* Varianti stato/ruolo utenti (Fase 7 del ripristino grafico — v1.71 righe 112-119, .pill.ok/
   .pill.warn/.pill.b/.pill.c): i colori di ruolo sono presi in prestito dalla stessa tavolozza
   delle classi A/B/C, non è un errore — è così anche nell'originale. */
.pillola.ok { background: #D4F1D4; color: #155C33; }
.pillola.warn { background: #FFF2CC; color: #7A5900; }
.pillola.err { background: #FBECEC; color: #8E2A2A; }
.pillola.ruolo-admin { background: #FCEEB5; color: #8A6D00; }
.pillola.ruolo-analista { background: #C9E9D2; color: #1F7A3D; }
.modulo-verticale { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.modulo-verticale fieldset { border: 1px solid #DDE3EE; border-radius: 4px; }
.riga-campi { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.riga-campi label { display: flex; flex-direction: column; font-size: 13px; gap: 2px; }
.riquadro { border: 1px solid #DDE3EE; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; }
/* Campo di testo lungo su riga propria: etichetta sopra, casella a tutta larghezza. Serve dove
   il testo libero è il campo principale (testo di una domanda) e stava stretto in una riga
   condivisa con codice e parametro. */
.campo-lungo { display: block; font-size: 13px; margin: 8px 0; }
.campo-lungo textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 2px;
  border: 1px solid #cfd9ea; border-radius: 4px; padding: 5px 7px; font-size: 12px;
  font-family: Arial, sans-serif; line-height: 1.4; resize: vertical; }
.pre-volo .riga-lacuna { border-bottom: 1px solid #DDE3EE; padding: 10px 0; }
.pre-volo textarea { width: 100%; max-width: 480px; }
.tabrow { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.tab-progetto { display: flex; gap: 4px; border-bottom: 1px solid #DDE3EE; margin: 16px 0; }
.tab-progetto a { padding: 8px 14px; cursor: pointer; color: #1B2A4A; text-decoration: none; border-bottom: 2px solid transparent; }
.tab-progetto a.attiva { border-bottom-color: #1B2A4A; font-weight: bold; }

/* Barra KPI accanto alla tabbar (Fase 2 del ripristino grafico — v1.71 righe 90-95: stessi
   colori per A/B/C/"da fare"). */
.mini-stats { display: flex; gap: 6px; align-items: center; padding-bottom: 5px; flex-wrap: wrap; }
.ms-tile { display: flex; align-items: baseline; gap: 5px; border-radius: 7px; padding: 4px 10px; font-size: 12px; }
.ms-tile b { font-size: 15px; font-weight: bold; }
.ms-a { background: #F8CFCB; color: #A32C1E; }
.ms-b { background: #FCEEB5; color: #8A6D00; }
.ms-c { background: #C9E9D2; color: #1F7A3D; }
.ms-n { background: #DCE8F5; color: #1B5EA8; }
.ms-tile.vuoto { background: #EEF2F7; color: #8895A8; }
.intestazione-progetto { margin-bottom: 8px; }
.griglia-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.mini-btn { display: inline-block; text-decoration: none; background: #1B5EA8; color: #fff; border: none; border-radius: 4px; padding: 6px 12px; font-size: 11px; cursor: pointer; font-weight: bold; }
.mini-btn:hover { background: #1456A0; }
.mini-btn.soft { background: #EEF3FA; color: #1B5EA8; border: 1px solid #cfd9ea; }
.mini-btn.ghost { background: #fff; color: #B23A3A; border: 1px solid #E3B7B7; }
.mini-btn:disabled, .mini-btn:disabled:hover { background: #E6EAF0; color: #98A2B0; border: 1px solid #DCE2EB; opacity: 1; cursor: not-allowed; }

/* Elenco settori a card (Fase 5 del ripristino grafico — v1.71 righe 82-84, 124-125). */
.sector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sector-card { background: #fff; border: 1px solid #d4ddea; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sector-card h4 { font-size: 14px; color: #1F3864; margin: 0; }
.sector-card-desc { font-size: 11px; color: #667; min-height: 30px; }
.sector-card-azioni { display: flex; gap: 6px; margin-top: 6px; }
.empty-state { text-align: center; color: #999; padding: 50px 20px; }
.empty-state h2 { color: #1F3864; font-size: 18px; margin-bottom: 8px; }
input.vuoto { border-color: #C99700; background: #FFF7E0; }
.filtri-griglia { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.filtri-griglia label { display: flex; flex-direction: column; font-size: 13px; gap: 2px; }
.griglia-asset th { cursor: pointer; }
.griglia-asset select { max-width: 160px; }
.banner-bulk { background: #FFF7DA; border: 1px solid #E8D48A; padding: 8px 12px; border-radius: 4px; margin-bottom: 10px; }
.paginazione { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.anteprima-logo { max-height: 60px; display: block; margin: 4px 0; }
.modale { position: fixed; inset: 0; background: rgba(27,42,74,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modale-contenuto { background: #fff; padding: 20px 24px; border-radius: 6px; max-width: 560px; max-height: 80vh; overflow: auto; }
.modale-contenuto ol { padding-left: 20px; }
.modale-contenuto li { margin-bottom: 6px; }
.modale-contenuto h3 { display: flex; justify-content: space-between; align-items: center; }

/* Diagramma dell'albero (Fase 2 del ripristino grafico — v1.71 righe 66-74, 6394-6453): usato
   sia dal percorso di un asset qui, sia — in una fase successiva — dall'editor del settore. */
.modale-albero { max-width: 90vw; width: 1000px; }
.tree-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tree-view { background: #fafbfc; border: 1px solid #dde3ee; border-radius: 6px; overflow: auto; height: 560px; cursor: grab; position: relative; }
.tree-view.dragging { cursor: grabbing; }
.tzoom-canvas { position: relative; }
.tzoom-scale { transform-origin: 0 0; position: absolute; top: 0; left: 0; padding: 16px; }
.tzoom-scale svg { max-width: none !important; height: auto !important; }
.legenda-aree { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12px; color: #5A6B85; }
.legenda-voce { display: flex; align-items: center; gap: 6px; }
.legenda-voce .legenda-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }