/*
 * 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 --- */
.brand-wordmark {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--bs-body-color);
}

.brand-wordmark b { font-weight: 700; color: var(--bs-primary); }

.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); }

/* 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; }

/* --- 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); }

.thread-in { border-left: 4px solid var(--bs-warning); }
.thread-out { border-left: 4px solid var(--bs-success); margin-left: 2rem; }

/* 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; }

/* Elemento del thread aperto nel pannello di lettura: sfondo tenue e
   chevron a destra (il chevron esiste in ogni card, visibile solo qui). */
.thread-item-active { background: var(--bs-tertiary-bg); }
.thread-item-chevron { display: none; }
.thread-item-active .thread-item-chevron {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.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; }