/* ============================================================
   sdb2.org — aggiunte ai fogli della grafica approvata
   styles.css (intestazione, menu e piede del portale) e style.css
   (archivio e pannelli) restano come sono stati consegnati: qui
   stanno solo le regole che la demo non poteva avere.
   ============================================================ */

/* un elemento con l'attributo hidden resta nascosto anche se la sua classe gli da' un display */
[hidden] { display: none !important; }

/* ------------------------------------------------------------
   TESTATA — formato unico su tutte le pagine (decisione dell'8/10)
   Circa due terzi dell'altezza della testata intera; l'immagine e'
   scalata sull'altezza e si taglia solo a destra, dove c'e' cielo;
   la citazione e' testo, tradotto per lingua. L'altezza si regola
   da qui con una sola variabile.
   ------------------------------------------------------------ */
:root {
  --testata-altezza: clamp(170px, 27.3vw, 560px);
  --testata-inizio-testo: 44%; /* dove finisce la scena e comincia il cielo libero */
}
.main-nav-wrap {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header-hero.testata-unica {
  position: relative;
  margin-top: 0;
  overflow: hidden;
  background: #cfe0f1;
}
.header-hero.testata-unica img {
  width: 100%;
  height: var(--testata-altezza);
  object-fit: cover;
  object-position: 0 50%;
}
.testata-citazione {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  max-width: 46%;
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(17px, 2.15vw, 40px);
  line-height: 1.32;
  color: #1c2b4d;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.75);
}
.testata-citazione p { margin: 0; }
.testo-right .testata-citazione { right: 5%; text-align: right; }
.testo-left .testata-citazione { left: var(--testata-inizio-testo); text-align: left; }
.testo-center .testata-citazione {
  left: calc(var(--testata-inizio-testo) + (100% - var(--testata-inizio-testo)) / 2);
  transform: translate(-50%, -50%);
  text-align: center;
}
/* telefono: la citazione scende sotto l'immagine */
@media (max-width: 768px) {
  .header-hero.testata-unica { margin-top: 0; line-height: 0; }
  .testata-unica .testata-citazione,
  .testata-unica.testo-center .testata-citazione {
    position: static;
    transform: none;
    max-width: none;
    padding: 16px 20px 18px;
    background: var(--band);
    font-size: 17px;
    line-height: 1.4;
    text-align: center;
    text-shadow: none;
  }
}

/* ------------------------------------------------------------
   MENU — il terzo livello e' un blocco con dentro il suo collegamento
   (HTML valido): stessa resa della demo
   ------------------------------------------------------------ */
.dropdown div.has-flyout { padding-right: 0; }
.dropdown div.has-flyout > a { padding-right: 34px; border-bottom: 1px solid var(--line); }
.dropdown div.has-flyout:last-child > a { border-bottom: none; }

/* lingua: le voci della finestra sono collegamenti alla stessa pagina nell'altra lingua */
a.lang-item { text-decoration: none; }
a.lang-item:hover { text-decoration: none; }

/* uscita: e' un modulo (richiesta POST), con l'aspetto del collegamento disegnato */
.logout-form { margin: 0; display: inline-flex; }
.nav-utente button.logout-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-65); cursor: pointer;
}
.nav-utente button.logout-link:hover { color: var(--gold-dark); }

/* ------------------------------------------------------------
   AVVISI di esito in cima al contenuto
   ------------------------------------------------------------ */
.avviso {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 6px; padding: 11px 14px; font-size: 13.5px; margin: 0 0 16px;
}
.avviso-ok { border-color: #bfe0c8; background: #e6f4ea; color: #17602a; }
.avviso-errore { border-color: #f3c1c1; background: var(--red-tint); color: var(--red); }
.avviso-info { border-color: #cfdcee; background: var(--tint); color: var(--blue-dark); }

/* errori e note sotto i campi dei moduli */
.campo .errore-campo, .errore-campo { display: block; margin-top: 5px; font-size: 12.5px; color: var(--red); }
.campo.con-errore input, .campo.con-errore select, .campo.con-errore textarea { border-color: var(--red); }
.campo .nota-campo { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-55); }
.riga-spunta { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13px; }
.riga-spunta input { margin-top: 3px; }

/* ------------------------------------------------------------
   ELENCO DOCUMENTI — righe nascoste dai filtri, riga "nessun risultato"
   ------------------------------------------------------------ */
table.crm tbody tr[hidden] { display: none; }
table.crm td.titolo-cell .link-esterno { font-size: 11px; color: var(--ink-55); margin-inline-start: 6px; white-space: nowrap; }

/* scheda del documento (indirizzo stabile, quello che si cita) */
.scheda-documento { max-width: 860px; }
.scheda-documento dl { display: grid; grid-template-columns: 190px 1fr; gap: 10px 18px; margin: 0; font-size: 14px; }
.scheda-documento dt { color: var(--ink-55); }
.scheda-documento dd { margin: 0; }
.scheda-documento .permalink { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
@media (max-width: 640px) {
  .scheda-documento dl { grid-template-columns: 1fr; gap: 2px 0; }
  .scheda-documento dd { margin-bottom: 10px; }
}

/* pagina di errore */
.errore-pagina { max-width: 640px; margin: 24px auto; text-align: center; }
.errore-pagina h1 { font-size: 34px; margin: 0 0 10px; }
.errore-pagina p { color: var(--ink-65); }

/* anteprima del file dentro la scheda (PDF, immagini, audio, video) */
.anteprima-documento { margin-top: 20px; }
.anteprima-documento iframe { width: 100%; height: 82vh; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.anteprima-documento img, .anteprima-documento video { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.anteprima-documento audio { width: 100%; max-width: 560px; }
.scheda-documento .azioni-forma { margin-top: 20px; }

/* accesso: riga sotto il modulo con il pulsante "nuovo codice" */
form.accesso-reg { display: block; }
.accesso-box .azioni-forma { margin-top: 18px; }

/* ------------------------------------------------------------
   CARICAMENTO — zona di rilascio attiva, motivo dell'errore sotto la barra
   ------------------------------------------------------------ */
.dropzone.sopra, .dropzone-mini.sopra { border-color: var(--gold); background: var(--gold-tint); }
.riga-file .motivo-errore { display: block; margin-top: 4px; font-size: 12px; color: var(--red); }
#p2-avanti:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.scheda-file .alert { margin-bottom: 0; }

/* menu delle azioni: le voci sono collegamenti o pulsanti di un modulo */
.menu-azioni a {
  display: block; width: 100%; text-align: left; font: 500 13px/1.4 var(--font); color: var(--ink);
  padding: 8px 10px; border-radius: 6px; text-decoration: none;
}
.menu-azioni a:hover { background: var(--band); color: var(--ink); }
.menu-azioni form { margin: 0; }
.azioni-row .menu-azioni button { font-size: 13px; padding: 8px 10px; }

/* pagina del documento nei pannelli */
.campo input[readonly].mono { font-family: var(--mono); font-size: 12.5px; }
.zona-pericolo { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn-rosso { background: #fff; border: 1px solid var(--red); color: var(--red); border-radius: 6px; padding: 9px 18px; font-weight: 600; cursor: pointer; }
.btn-rosso:hover { background: var(--red-tint); }

/* ------------------------------------------------------------
   UTENTI — riga con i dati della verifica, paginazione con collegamenti
   ------------------------------------------------------------ */
table.crm tr.riga-dettaglio td { background: #fffaf0; font-size: 12.5px; color: var(--ink-65); padding-top: 8px; padding-bottom: 10px; }
table.crm tr.riga-dettaglio .voce-verifica { margin-inline-end: 14px; }
.select-ruolo.rosso, .select-stato.rosso, .select-area.rosso { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-tint); }
.paginazione a.pag, .paginazione span.pag {
  border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 5px 11px; color: var(--ink-65); text-decoration: none;
}
.paginazione span.pag.attiva { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; font-weight: 600; }
.chip[hidden], .non-applicabile[hidden] { display: none; }

/* ------------------------------------------------------------
   CARTELLE e MENU — righe come collegamenti, trascinamento, nuova voce
   ------------------------------------------------------------ */
.riga-cartella .nome-cartella { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.riga-cartella .nome-cartella:hover { color: var(--gold-dark); }
.riga-cartella button.handle { background: none; border: 0; padding: 0 2px; font: inherit; color: inherit; cursor: grab; }
.riga-cartella.in-movimento { opacity: 0.45; }
.riga-cartella.spenta .nome-cartella { color: var(--ink-55); text-decoration: line-through; }
.riga-cartella .azioni-row { display: inline-flex; align-items: center; }
.riga-cartella .azioni-row form { margin: 0; }
.nuova-cartella { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--band); }
.nuova-cartella[hidden] { display: none; }
.nuova-cartella input[type="text"] { flex: 1; min-width: 0; font: 400 13.5px/1.2 var(--font); padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; }
.aggiungi-sotto .nuova-cartella { margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; }
.form-grid.tre-colonne { grid-template-columns: repeat(3, 1fr); }
.campo label .nota-lingua { font-weight: 400; color: var(--ink-55); margin-inline-start: 4px; }
@media (max-width: 1100px) { .form-grid.tre-colonne { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .form-grid.tre-colonne { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   TESTATA e REGISTRO
   ------------------------------------------------------------ */
.scelta-posizione { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; }
.scelta-posizione label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
details.altre-lingue { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
details.altre-lingue summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--blue-dark); }
.campo textarea { resize: vertical; min-height: 64px; }
.campo input[type="file"] { padding: 7px 10px; }
/* etichette colorate delle operazioni anche nella tabella del registro (nella demo solo nei pannelli) */
table.crm .op { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 12px; padding: 3px 10px; white-space: nowrap; background: var(--band); color: var(--ink-65); }
table.crm .op.op-caricamento { background: #e6f4ea; color: var(--green); }
table.crm .op.op-cancellazione { background: var(--red-tint); color: var(--red); }
table.crm .op.op-modifica { background: var(--tint); color: var(--blue-dark); }
table.crm .op.op-ruolo { background: #fdf0e7; color: var(--amber); }
table.crm .op.op-approvazione { background: var(--gold-tint); color: var(--gold-dark); }
.filtri a.btn-ghost, .filtri button.btn-ghost { padding: 9px 16px; }

/* ------------------------------------------------------------
   TABELLE DEI PANNELLI — molte colonne: celle piu' strette perche'
   stiano in pagina a 1440 px senza scorrere di lato
   ------------------------------------------------------------ */
table.crm.fitta th { padding: 9px 5px; font-size: 11px; letter-spacing: 0.02em; }
table.crm.fitta td { padding: 10px 5px; font-size: 13px; }
table.crm.fitta .imbuto { margin-left: 4px; }
table.crm.fitta .num { font-size: 12px; }
/* utenti: le aree assegnate vanno a capo, la colonna non si allarga sulle etichette */
#utenti table.crm td.colonna-riservata, #utenti table.crm th.colonna-riservata { white-space: normal; width: auto; min-width: 190px; text-align: left; }
#utenti table.crm td.colonna-riservata .chip { margin: 2px 4px 2px 0; }
#utenti .select-ruolo, #utenti .select-stato { max-width: 150px; }
#utenti .azioni-row form { margin: 0; }

/* telefono: i titoli di sezione dei pannelli vanno a capo invece di stringersi in colonna */
@media (max-width: 768px) {
  .sezione-num { display: block; }
  .sezione-num .nota { display: block; margin-top: 2px; }
}

/* ------------------------------------------------------------
   RICERCA — casella su tutto l'archivio sotto la testata, brano
   di testo sotto il titolo, colonna della cartella nei risultati
   ------------------------------------------------------------ */
.ricerca-archivio { max-width: 1600px; margin: 0 auto; padding: 28px 24px 0; }
.ricerca-archivio form.filtri { margin-bottom: 0; }
.ricerca-archivio input[type="search"] { flex: 1 1 320px; max-width: 720px; min-width: 0; }
.ricerca-archivio .btn { padding: 10px 24px; cursor: pointer; }
/* con la casella sopra, il corpo non ha piu' bisogno di tutto il respiro sotto l'immagine */
.crm-shell.con-ricerca { padding-top: 36px; }
table.crm .titolo-cell .brano { margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--ink-65); font-weight: 400; max-width: 640px; white-space: normal; }
table.crm .titolo-cell .brano mark { background: #fbeebf; color: var(--ink); padding: 0 2px; border-radius: 2px; }
table.crm .cartella-cell a { color: var(--blue-dark); text-decoration: none; font-size: 12.5px; }
table.crm .cartella-cell a:hover { color: var(--gold-dark); text-decoration: underline; }
.nota-ricerca { margin: -6px 0 14px; font-size: 13px; color: var(--ink-65); }
.page-head .sub a { color: var(--gold-dark); white-space: nowrap; margin-inline-start: 6px; }
.page-head .sub.nota-contenuto { margin-top: 6px; font-size: 12.5px; color: var(--ink-55); }
/* risultati della ricerca: la colonna della cartella toglie spazio al titolo e al brano, quindi sugli schermi
   meno larghi escono le colonne secondarie (i dati restano nella scheda del documento) */
@media (max-width: 1500px) {
  table.crm.con-cartella .col-vol, table.crm.con-cartella .col-ed, table.crm.con-cartella .col-kb { display: none; }
}
@media (max-width: 1100px) {
  table.crm.con-cartella .col-info { display: none; }
}
@media (max-width: 768px) {
  .ricerca-archivio { padding: 18px 16px 0; }
  .ricerca-archivio input[type="search"] { flex-basis: 100%; max-width: none; }
  /* tendina e pulsante sulla stessa riga: la tendina si stringe quanto serve */
  .ricerca-archivio select { flex: 1 1 0; min-width: 0; }
  .crm-shell.con-ricerca { padding-top: 22px; }
  .page-head .sub a { white-space: normal; margin-inline-start: 0; display: inline-block; }
}

/* ------------------------------------------------------------
   ELENCO DELLE CARTELLE sui portatili (fino a 1340 px): con la
   barra laterale la tabella non stava in pagina per poche decine
   di pixel e scorreva di lato; celle un po' piu' strette e casella
   di ricerca che cede spazio alle tendine
   ------------------------------------------------------------ */
.filtri input[type="search"][data-f="cerca"] { flex: 1 1 260px; min-width: 260px !important; max-width: 420px; }
@media (max-width: 1340px) {
  table.crm:not(.fitta) th, table.crm:not(.fitta) td { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 768px) {
  .filtri input[type="search"][data-f="cerca"] { min-width: 0 !important; max-width: none; flex-basis: 100%; }
}

/* ------------------------------------------------------------
   TRADUZIONI — quanto e' tradotto per lingua
   ------------------------------------------------------------ */
#copertura td.quota-piena { color: var(--green); font-weight: 600; }
#copertura td.quota-vuota { color: var(--ink-55); }
#copertura td svg { vertical-align: -2px; margin-inline-end: 4px; }

/* ------------------------------------------------------------
   LINGUE DA DESTRA A SINISTRA (arabo, ebraico, persiano, urdu)
   Con dir="rtl" il browser specchia da solo l'ordine degli elementi
   e l'allineamento del testo. Qui si specchiano le posizioni che i
   fogli approvati fissano a sinistra o a destra. La testata no:
   l'immagine non si specchia e la citazione resta sul cielo libero.
   ------------------------------------------------------------ */
/* menu: la tendina parte dal bordo destro della voce, i sotto-menu si aprono verso sinistra */
[dir="rtl"] .dropdown { left: auto; right: 0; }
[dir="rtl"] .nav-item:last-child .dropdown,
[dir="rtl"] .nav-item:nth-last-child(2) .dropdown { right: auto; left: 0; }
[dir="rtl"] .dropdown div.has-flyout > a { padding-right: 20px; padding-left: 34px; }
[dir="rtl"] .dropdown .has-flyout svg { right: auto; left: 12px; transform: translateY(-50%) rotate(90deg); }
[dir="rtl"] .dropdown .flyout {
  left: auto; right: 100%;
  border-radius: var(--radius) 0 0 var(--radius);
  transform: translateX(-6px);
}
[dir="rtl"] .nav-item:nth-last-child(-n+2) .flyout {
  right: auto; left: 100%;
  border-radius: 0 var(--radius) var(--radius) 0;
  transform: translateX(6px);
}
[dir="rtl"] .dropdown .has-flyout:hover .flyout,
[dir="rtl"] .dropdown .has-flyout:focus-within .flyout { transform: translateX(0); }
/* divisori accanto alla lingua e al nome di chi e' entrato */
[dir="rtl"] .lang-btn { padding: 10px 24px 10px 4px; border-left: 0; border-right: 2px solid #7a623321; }
[dir="rtl"] .nav-utente {
  margin-left: 0; padding-left: 0; border-left: 0;
  margin-right: 14px; padding-right: 14px; border-right: 2px solid #7a623321;
}
[dir="rtl"] .logout-link { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .nav-utente .logout-link { margin-right: 0; }
/* il collegamento "salta al contenuto" aspetta fuori schermo dal lato che non allunga la pagina: a destra */
[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { right: 0; }
[dir="rtl"] .footer-brand { padding-right: 0; padding-left: 24px; }
/* barra laterale: il segno della voce attiva sta sul lato verso il contenuto */
[dir="rtl"] .side-nav a { border-left: 0; border-right: 3px solid transparent; }
[dir="rtl"] .side-nav a.active { border-right-color: var(--gold); }
[dir="rtl"] .tree-group-btn { text-align: right; }
[dir="rtl"] .tree-group-btn .badge-area { margin-left: 0; margin-right: auto; }
[dir="rtl"] .tree-group-items a.active { border-right: 0; border-left: 3px solid #33415c; }
[dir="rtl"] .tree-docs a { padding: 6px 24px 6px 10px; }
/* filtri: lente e freccia delle tendine dall'altra parte */
[dir="rtl"] .filtri input[type="search"] { background-position: left 14px center; }
[dir="rtl"] .filtri select { padding-right: 12px; padding-left: 40px; background-position: left 14px center; }
[dir="rtl"] .filtri .spinta { margin-left: 0; margin-right: auto; }
[dir="rtl"] .select-stato, [dir="rtl"] .select-ruolo, [dir="rtl"] .select-area {
  padding: 9px 14px 9px 36px; background-position: left 12px center;
}
/* tabelle: intestazioni allineate all'inizio della riga, separatore tra le colonne sul lato giusto */
[dir="rtl"] table.crm th { text-align: right; border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] table.crm td { border-right: 0; border-left: 1px solid #eef1f5; }
[dir="rtl"] table.crm th:last-child, [dir="rtl"] table.crm td:last-child { border-left: 0; }
[dir="rtl"] .colonna-riservata { border-left: 0; border-right: 1px solid #f3c1c1; }
[dir="rtl"] table.crm.fitta .imbuto { margin-left: 0; margin-right: 4px; }
[dir="rtl"] #utenti table.crm td.colonna-riservata, [dir="rtl"] #utenti table.crm th.colonna-riservata { text-align: right; }
[dir="rtl"] #utenti table.crm td.colonna-riservata .chip { margin: 2px 0 2px 4px; }
[dir="rtl"] .menu-azioni { right: auto; left: 0; text-align: right; }
[dir="rtl"] .menu-azioni button, [dir="rtl"] .menu-azioni a { text-align: right; }
/* i dati dei documenti (titolo, autore, note, nome del file, brano trovato) sono scritti nella loro lingua: ognuno
   prende il verso dal proprio testo, cosi' l'anno in testa a un nome di file o il punto in fondo a un titolo
   restano al loro posto. L'allineamento resta quello della pagina. */
[dir="rtl"] table.crm td { unicode-bidi: plaintext; }
[dir="rtl"] table.crm td:not(.num):not(.azioni-row) { text-align: right; }
[dir="rtl"] h1, [dir="rtl"] dd, [dir="rtl"] .brano, [dir="rtl"] .permalink, [dir="rtl"] .info-file,
[dir="rtl"] .file-head .nome, [dir="rtl"] .nome-file { unicode-bidi: plaintext; text-align: right; }
/* griglia delle aree: la freccia che compare al passaggio punta nel verso della lettura */
[dir="rtl"] .area-card li a::after { content: "←"; margin-left: 0; margin-right: auto; transform: translateX(4px); }
[dir="rtl"] .area-card li a:hover::after,
[dir="rtl"] .area-card li a:focus-visible::after { transform: translateX(0); }
/* pannelli */
[dir="rtl"] .stat-ico { right: auto; left: 18px; }
[dir="rtl"] .riga-cartella .azioni-row { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sotto-cartelle { padding-left: 0; padding-right: 30px; }
@media (max-width: 768px) {
  /* la barra laterale a scomparsa entra dal lato da cui si legge */
  [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(105%); }
  [dir="rtl"] .sidebar.aperta { transform: translateX(0); }
  [dir="rtl"] .nav-utente { margin-right: 6px; padding-right: 10px; border-right: 0; }
}

/* gestione cartelle: l'indirizzo di una lingua sotto il suo nome, in grigio quando e' automatico */
.cartelle-grid .campo .indirizzo-lingua { margin-top: 4px; font-size: 12px; }
.cartelle-grid .campo .indirizzo-lingua::placeholder { color: #9a9a9a; }