/*
 * Layer applicativo sopra il tema SmartAdmin (Bootstrap 5): solo i
 * componenti propri di GestionalePEC. Colori agganciati alle variabili --bs-*
 * cosi' dark mode e skin del tema restano coerenti.
 */

/* --- Logo --- */
/* Logo del prodotto nella testata della navigazione: variante chiara, la
   navigazione e' sempre scura (set-nav-dark fisso sull'html). Larghezza
   fissa e non percentuale: e' quello che tiene la busta della stessa
   dimensione quando la navigazione si stringe. 16rem riempie il blocco
   (~224px di spazio utile: il tema usa 14px per rem) lasciando il respiro del padding. */
.brand-lockup { --brand-logo-width: 16rem; }

.brand-image { width: var(--brand-logo-width); max-width: 100%; height: auto; }

/* La busta e' ritagliata dal logo (logo-mark.svg) e tiene la stessa quota di
   larghezza che occupa li' dentro — 154 unita' su 1100 del viewBox — quindi
   e' identica al pixel: stesso disegno, stessa dimensione. Un solo numero da
   toccare, --brand-logo-width, e la busta lo segue. */
.brand-mark-mini {
  display: none;
  width: calc(var(--brand-logo-width) * 154 / 1100);
  height: auto;
}

/* Navigazione ridotta: il tema stringe il blocco del logo a
   --menu-width-minified e taglia il resto, quindi al posto del logo intero
   resta la sola busta. Quando il mouse entra nella sidebar il tema riapre il
   blocco: stessa condizione :has che usa lui, cosi' il logo torna insieme
   allo spazio per contenerlo. */
.set-nav-minified:not(.set-nav-collapsed) .app-header:not(:has(+ .app-sidebar:hover)) .app-logo .brand-image,
.set-nav-minified:not(.set-nav-collapsed) .app-sidebar:not(:hover) .brand-image { display: none; }

.set-nav-minified:not(.set-nav-collapsed) .app-header:not(:has(+ .app-sidebar:hover)) .app-logo .brand-mark-mini,
.set-nav-minified:not(.set-nav-collapsed) .app-sidebar:not(:hover) .brand-mark-mini { display: inline-block; }

.app-logo { padding: 0 1rem; }

/* --- Avatar iniziali (header) --- */
.profile-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--bs-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}

/* --- Icone nei bottoni --- */
/* Layout secondo il pattern del tema (profile.html): d-inline-flex
   align-items-center sul bottone + sa-icon me-2. Qui solo cio' che il
   tema non copre: colore ereditato dal bottone (le demo usano sa-icon
   solo su bottoni neutri) e taglia ridotta nei btn-sm. */
.btn .sa-icon,
.dropdown-item .sa-icon,
.btn-link-danger .sa-icon,
.btn-link-plain .sa-icon {
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.btn-sm .sa-icon,
.btn-link-danger .sa-icon,
.btn-link-plain .sa-icon {
  --sa-icon-size: 1em;
}

/* --- Badge di stato applicativi --- */
.badge-ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.badge-danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.badge-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.badge-muted { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); }

.badge { font-weight: 500; }

.overdue { color: var(--bs-danger); font-weight: 600; }

/* --- Intestazione pagina --- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.page-header h1 { font-size: 1.4rem; margin: 0; }

h2 { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; }

/* --- Tabelle dentro card --- */
.table { background: var(--bs-body-bg); }

/* max-width:0 + width % sblocca text-truncate nelle celle a layout auto
   (oggetto della coda conversazioni). */
.td-truncate { max-width: 0; }

/* Allegati come riquadri scaricabili (icona + nome + peso); su variabili
   --bs-* per reggere la dark mode. */
.attachment-tile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  text-decoration: none;
  max-width: 18rem;
}
.attachment-tile:hover { border-color: var(--bs-primary); }

/* Anteprima allegato: il visualizzatore riempie la modale, con un'altezza
   legata alla finestra perche' un PDF ha bisogno di spazio per essere
   leggibile. Il bianco sotto l'immagine e' voluto: le scansioni hanno lo
   sfondo bianco e su tema scuro, senza, sembrerebbero ritagliate male. */
.attachment-preview-frame {
  width: 100%;
  height: 70vh;
  border: 0;
  background: var(--bs-body-bg);
}

.attachment-preview-image {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  background: #fff;
}

/* Il testo di un allegato puo' essere largo (XML, tracciati a colonne): si
   scorre dentro il suo riquadro, non si porta dietro la modale. */
.attachment-preview .body-text {
  max-height: 70vh;
  overflow: auto;
}

/* Pagina conversazione: pannello di lettura a destra (master-detail).
   Sticky con scroll interno, cosi' il dettaglio resta visibile mentre si
   scorre il thread. */
.detail-pane {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* --- Dettagli chiave/valore --- */
.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.5rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  max-width: 900px;
}

.details dt { font-weight: 600; }
.details dd { margin: 0; }

/* Intestazione del messaggio aperto (mittente, destinatari, data): riquadro
   in evidenza dentro il pannello di lettura, con lo stesso segno di colore
   che il thread usa per distinguere ricevute e inviate. */
.details-highlight {
  background: var(--bs-tertiary-bg);
  border-left: 4px solid var(--bs-secondary-color);
}

.details-in { border-left-color: var(--bs-warning); }
.details-out { border-left-color: var(--bs-success); }

/* --- Corpo messaggio --- */
.message-body {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  max-width: 900px;
  overflow-x: auto;
}

.body-text {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
}

/* --- Pannello workflow --- */
/* Barra azioni della pratica: bottoni nudi, senza card. */
.workflow-panel {
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

.workflow-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.workflow-assign summary { cursor: pointer; font-weight: 600; }

.inline-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

/* --- Thread di conversazione --- */
.thread { max-width: 900px; }

.thread-item {
  position: relative; /* ancora per lo stretched-link: tutta la card e' cliccabile */
  cursor: pointer;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
}
.thread-item:hover { background: var(--bs-tertiary-bg); }

/* Le icone della card spiegano se stesse con un tooltip, ma l'oggetto e' uno
   stretched-link: il suo ::after copre tutta la card e intercetta il mouse
   prima di loro (z-index 1), cosi' il tooltip non comparirebbe mai. Vanno
   alzate sopra l'overlay — in cambio il click su quei pochi pixel non apre
   piu' il messaggio, il resto della card si'. */
.thread-item [data-bs-toggle="tooltip"] { position: relative; z-index: 2; }

.thread-in { border-left: 4px solid var(--bs-warning); }

/* Inviate specchiate, come in una chat: la colonna dei segni passa a destra e
   il testo si allinea di conseguenza. Il ribaltamento e' solo di disposizione
   (row-reverse), non di contenuto: numero, icone e spunte restano leggibili.
   Il colore sta sul lato che guarda il contenuto — a destra, dov'e' finita la
   colonna dei segni; a sinistra resta il bordo normale della card. */
.thread-out {
  flex-direction: row-reverse;
  border-right: 4px solid var(--bs-success);
  text-align: right;
}

.thread-out .thread-item-head,
.thread-out .thread-item-meta { justify-content: flex-end; }

/* Stato invio a spunte nel thread: 1 = accettata, 2 = consegnata
   (sovrapposte come nei client di messaggistica). */
.ticks { display: inline-flex; align-items: center; justify-content: center; }
/* La doppia spunta sta nella stessa larghezza di una singola icona della
   colonna (20px): due check ravvicinate, la seconda sovrapposta. */
.ticks-double { width: 20px; }
.ticks-double .sa-icon { width: 15px !important; height: 15px !important; }
.ticks-double .sa-icon + .sa-icon { margin-left: -10px; }

/* Esito per destinatario nel dettaglio di un invio: una riga per indirizzo,
   icona a sinistra e motivo dell'errore sotto. Il fallito si vede subito —
   e' l'unica cosa che serve davvero quando i destinatari sono piu' di uno. */
.recipient-outcomes { list-style: none; margin: 0; padding: 0; }

.recipient-outcomes li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.1rem 0.5rem;
  align-items: center;
  padding: 0.2rem 0;
}

.recipient-outcomes .recipient-address { font-weight: 500; }

.recipient-outcomes .recipient-outcome-state,
.recipient-outcomes .recipient-outcome-detail {
  grid-column: 2;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.recipient-outcomes .recipient-failed .recipient-address,
.recipient-outcomes .recipient-failed .recipient-outcome-state { color: var(--bs-danger); }

/* Avviso di uscita: il dominio e' la cosa che si deve leggere, quindi sta
   grande; l'indirizzo per esteso sotto, piu' piccolo e spezzabile perche' le
   URL di phishing sono lunghe apposta. */
.external-link-host {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  word-break: break-all;
}

.external-link-url {
  font-family: var(--bs-font-monospace);
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  word-break: break-all;
  margin-bottom: 0;
}

.external-link-mismatch {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bs-border-radius);
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

/* Un link nel corpo di una PEC si vede che porta fuori. */
.message-body a[data-external-host]::after {
  content: "\2197"; /* freccia in alto a destra */
  font-size: 0.75em;
  margin-left: 0.15em;
  vertical-align: super;
}

/* Elemento del thread aperto nel pannello di lettura: sfondo tenue. */
.thread-item-active { background: var(--bs-tertiary-bg); }

.thread-item-head { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

.thread-item-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

/* Anteprima compatta: massimo due righe. */
.thread-item-preview {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fw-600 { font-weight: 600; }

/* Timeline: componente nativo del tema (.timeline/.timeline-item/
   .timeline-marker), nessun CSS custom. */

/* --- Board di supervisione --- */
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 1rem;
  align-items: start;
  overflow-x: auto;
}

.board-column {
  background: var(--bs-secondary-bg-subtle);
  border-radius: var(--bs-border-radius);
  padding: 0.75rem;
}

.board-column h3 { margin: 0 0 0.75rem; font-size: 0.95rem; }

.board-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  padding: 0.6rem;
  margin-bottom: 0.6rem;
}

.board-card-overdue { border-left: 4px solid var(--bs-danger); }

.board-card-title { display: block; font-weight: 600; text-decoration: none; margin-bottom: 0.3rem; }

.board-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
}

.dash-section { margin: 1.5rem 0; }

.dash-queues { list-style: none; padding: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* Elenco code in dashboard: spaziatura propria, identica in light e dark
   (la list-group del tema perde il padding in dark mode). */
.dash-queue { list-style: none; padding: 0; margin: 0; }

.dash-queue li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 0.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.dash-queue li:last-child { border-bottom: none; }

/* --- Azioni di riga --- */
.row-actions { display: flex; gap: 0.75rem; align-items: center; }

.row-actions form { display: inline; }

.btn-link-danger {
  background: none;
  border: none;
  padding: 0;
  color: var(--bs-danger);
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
}

/* --- Impersonificazione --- */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.4rem 1rem;
  background: var(--bs-warning);
  color: #212529;
  font-weight: 500;
}

.btn-link-plain {
  background: none;
  border: none;
  padding: 0;
  color: var(--bs-primary);
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
}

/* --- Login --- */
/* Hero di auth-login in tinta con il backgroundColor dell'effetto Vanta
   (nessun flash di colore diverso mentre l'animazione carica). */
.hero-section.hero-light {
  background: #0761a5;
}

/* --- Utility --- */
.muted { color: var(--bs-secondary-color); }

.hint { font-size: 0.85rem; color: var(--bs-secondary-color); margin: 0.25rem 0 0; }

.field { margin-bottom: 1rem; max-width: 480px; }

/* --- Modale di accorpamento --- */
/* Elenco con altezza proporzionata: scorre internamente senza allungare la
   modale fino ai bordi dello schermo (modal-dialog-scrollable la limita
   comunque al viewport, questo la tiene piu' bassa su schermi alti). */
#merge-modal .modal-body { max-height: 55vh; }

/* --- Allegati: zona di trascinamento --- */
/* Cornice attorno al campo file, non un suo sostituto: senza JS resta solo
   un riquadro e l'input continua a funzionare. Colori dalle variabili del
   tema, cosi' regge dark mode e skin "earth". */
.dropzone {
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  transition: border-color .15s ease, background-color .15s ease;
}

.dropzone-over {
  border-color: var(--bs-primary);
  background: var(--bs-tertiary-bg);
}

.dropzone-hint { margin-bottom: .5rem; color: var(--bs-secondary-color); font-size: .875rem; }
.dropzone-empty { margin-top: .5rem; font-size: .875rem; }

.attachment-list { list-style: none; margin: .5rem 0 0; padding: 0; }

.attachment-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
  border-top: 1px solid var(--bs-border-color-translucent);
}

.attachment-item:first-child { border-top: 0; }
.attachment-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.attachment-size { flex: 0 0 auto; font-size: .875rem; }

/* Caricamento diretto: avanzamento per allegato. La barra vive solo finche'
   il file sale; poi lascia il posto alla spunta. */
.attachment-state { flex: 0 0 auto; display: inline-flex; align-items: center; min-width: 4rem; }
.attachment-progress { width: 4rem; height: .5rem; }

/* --- Corpo formattato della PEC --- */
/* L'area di scrittura e' un contenteditable: prende l'aspetto di un campo
   del tema, ma cresce col contenuto invece di scorrere. */
.rich-text-toolbar {
  gap: .25rem;
  margin-bottom: .375rem;
}

.rich-text-toolbar .btn.active {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-secondary-color);
}

.rich-text-glyph { font-weight: 600; font-size: .8125rem; line-height: 1; }

.rich-text-editor {
  min-height: 14rem;
  height: auto;
  overflow-y: auto;
  max-height: 60vh;
}

.rich-text-editor:focus {
  outline: 0;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* Il markup ammesso e' poco: si danno margini sensati a quel poco, senza
   ereditare spaziature da altre parti del tema. */
.rich-text-editor p { margin: 0 0 .75rem; }
.rich-text-editor p:last-child { margin-bottom: 0; }
.rich-text-editor ul,
.rich-text-editor ol { margin: 0 0 .75rem 1.25rem; padding: 0; }

/* Segnaposto della risposta in scrittura: si distingue dai messaggi veri
   (tratteggio, colore attenuato) perche' non e' ancora successo niente. */
.thread-draft {
  border-left: 4px dashed var(--bs-success);
  opacity: .75;
}

/* L'attributo hidden da solo non basta: le utility display di Bootstrap
   (qui .d-flex) sono !important e lo scavalcano, cosi' il segnaposto restava
   a video su ogni pratica anche senza nessun form aperto. */
.thread-draft[hidden] { display: none !important; }

.thread-draft .thread-item-head { font-style: italic; }

/* Citazione del messaggio a cui si risponde: filetto a sinistra e colore
   attenuato, sia mentre si scrive sia quando si rilegge l'invio. */
.rich-text-editor blockquote,
.message-body blockquote {
  margin: .5rem 0 .5rem .25rem;
  padding-left: .75rem;
  border-left: 3px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
}