/* =========================================================================
   EasyMailing — foglio di stile del pannello
   =========================================================================

   Sostituisce integralmente il tema Star Admin (assets/css/style.css, 30.547
   righe) e il vecchio easy-mailing.css. Copre esclusivamente le classi che il
   markup dell'applicazione usa davvero.

   Ordine del file:
     1. Font
     2. Token di progetto
     3. Reset e base
     4. Impianto della pagina
     5. Griglia e utility
     6. Componenti
     7. Schermate specifiche

   Convenzioni:
   - Un solo colore primario. Prima "Salva Campagna" era blu e "Riprendi
     Spedizione" verde: il verde e il rosso restano riservati agli stati
     (riuscito, fallito), mai all'azione principale.
   - Le azioni di riga stanno a destra del contenuto e non hanno cornice; la
     piu' distruttiva e' l'ultima e resta smorzata finche' non ci passi sopra.
   - Nessuna misura arbitraria: spaziature e raggi vengono dai token.
   ========================================================================= */


/* =========================================================================
   1. FONT
   Solo woff2/woff e solo i quattro pesi realmente usati. Le varianti eot e
   ttf, e il peso Black, sono state rimosse da assets/fonts/Roboto.
   ========================================================================= */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Roboto/Roboto-Light.woff2') format('woff2'),
       url('../fonts/Roboto/Roboto-Light.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Roboto/Roboto-Regular.woff2') format('woff2'),
       url('../fonts/Roboto/Roboto-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Roboto/Roboto-Medium.woff2') format('woff2'),
       url('../fonts/Roboto/Roboto-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Roboto/Roboto-Bold.woff2') format('woff2'),
       url('../fonts/Roboto/Roboto-Bold.woff') format('woff');
}


/* =========================================================================
   2. TOKEN
   ========================================================================= */

:root {
  /*
  Neutri con una leggera deriva verso il blu del marchio: un grigio puro
  sembra non scelto. I passi sono radi di proposito, cosi' ogni livello si
  distingue senza bisogno di ombre.
  */
  --em-bg:          #eef1f5;
  --em-surface:     #ffffff;
  --em-ink:         #17212e;
  --em-muted:       #5a6b7d;
  --em-faint:       #8d9cac;
  --em-line:        #dde4ec;
  --em-line-soft:   #eef2f6;

  /* colore primario, unico */
  --em-primary:       #1c64c4;
  --em-primary-dark:  #17539f;
  --em-primary-soft:  #e9f0fa;

  /* stati: stessa famiglia, saturazione tenuta bassa */
  --em-ok:        #1f7355;
  --em-ok-soft:   #e2efe9;
  --em-warn:      #97560b;
  --em-warn-soft: #faeddd;
  --em-err:       #a83b31;
  --em-err-soft:  #f9e9e7;
  --em-info:      #3b5a73;
  --em-info-soft: #e8eef3;

  /* i dati (indirizzi, conteggi, identificativi) hanno un carattere proprio */
  --em-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* misure */
  --em-sidebar:   238px;
  --em-navbar:    58px;
  --em-radius:    5px;
  --em-radius-sm: 3px;

  --em-s1: 4px;
  --em-s2: 8px;
  --em-s3: 12px;
  --em-s4: 16px;
  --em-s5: 24px;
  --em-s6: 32px;

  --em-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --em-shadow: 0 1px 1px rgba(23, 33, 46, .04);
}

/*
Numeri sempre a larghezza fissa: nelle colonne di conteggi e nelle percentuali
le cifre restano incolonnate invece di ballare da una riga all'altra.
*/
body { font-variant-numeric: tabular-nums; }


/* =========================================================================
   3. RESET E BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--em-bg);
  color: var(--em-ink);
  font-family: var(--em-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

a {
  color: var(--em-primary);
  text-decoration: none;
  transition: color .12s ease;
}
a:hover { color: var(--em-primary-dark); text-decoration: underline; }

button { font-family: inherit; font-size: inherit; }

:focus-visible {
  outline: 2px solid var(--em-primary);
  outline-offset: 2px;
  border-radius: var(--em-radius-sm);
}

hr { border: 0; border-top: 1px solid var(--em-line); margin: var(--em-s4) 0; }

code, pre { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .92em; }
pre {
  background: var(--em-line-soft);
  padding: var(--em-s3);
  border-radius: var(--em-radius);
  overflow-x: auto;
}

.small, small { font-size: 12.5px; }
.h4 { font-size: 17px; font-weight: 500; }
.font-weight-medium { font-weight: 500; }


/* =========================================================================
   4. IMPIANTO DELLA PAGINA
   ========================================================================= */

/*
"clip" e non "hidden": overflow:hidden creerebbe un contesto di scorrimento e
annullerebbe il position:sticky della barra laterale, che tornerebbe a scorrere
via insieme al contenuto.
*/
.container-scroller { overflow-x: clip; }

/* --- barra superiore --- */

.navbar {
  height: var(--em-navbar);
  background: var(--em-surface);
  border-bottom: 1px solid var(--em-line);
  display: flex;
  align-items: stretch;
  padding: 0;
}
.navbar.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }

.navbar-brand-wrapper {
  width: var(--em-sidebar);
  flex: none;
  border-right: 1px solid var(--em-line);
  padding: 0 var(--em-s4);
}
.navbar-brand { display: inline-flex; align-items: center; }
.navbar-brand.brand-logo img { width: 132px; }
.navbar-brand.brand-logo-mini { display: none; }
.navbar-brand.brand-logo-mini img { width: 28px; }

.navbar-menu-wrapper { flex: 1 1 auto; padding: 0 var(--em-s5); min-width: 0; }

.navbar-toggler {
  background: none;
  border: 0;
  color: var(--em-muted);
  font-size: 17px;
  padding: var(--em-s2);
  border-radius: var(--em-radius-sm);
  cursor: pointer;
}
.navbar-toggler:hover { color: var(--em-ink); background: var(--em-line-soft); }
.navbar-toggler-right { margin-left: var(--em-s2); }

.navbar-nav { display: flex; flex-direction: row; align-items: center; margin: 0; }
.navbar-nav-right { margin-left: auto; }
.nav-profile .nav-link { padding: 0; display: flex; align-items: center; }
.nav-profile img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--em-line);
}

/* --- barra laterale --- */

.page-body-wrapper {
  display: flex;
  align-items: stretch;
  padding: 0;
  padding-top: var(--em-navbar);
  min-height: 100vh;
  width: 100%;
  max-width: none;
}
.full-page-wrapper { padding-top: 0; }

.sidebar {
  width: var(--em-sidebar);
  flex: none;
  background: var(--em-surface);
  border-right: 1px solid var(--em-line);
  padding: var(--em-s4) 0;
  /* la barra resta ferma mentre il contenuto scorre */
  position: sticky;
  top: var(--em-navbar);
  align-self: flex-start;
  height: calc(100vh - var(--em-navbar));
  overflow-y: auto;
}

.sidebar .nav { display: flex; flex-direction: column; }
.sidebar .nav-item { position: relative; }

.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: var(--em-s3);
  padding: 9px var(--em-s4);
  color: var(--em-muted);
  font-size: 14px;
  font-weight: 400;
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.sidebar .nav-link:hover { background: var(--em-line-soft); color: var(--em-ink); text-decoration: none; }

.sidebar .menu-icon { font-size: 16px; flex: none; width: 18px; text-align: center; }
.sidebar .menu-title { flex: 1 1 auto; min-width: 0; }

.sidebar .menu-arrow {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .5;
  transition: transform .15s ease;
  margin-right: 3px;
}
.sidebar .nav-link[aria-expanded="true"] .menu-arrow { transform: rotate(45deg); }

/*
Voce attiva (la classe la applica template.js in base all'URL): un segno
breve sul bordo invece di un blocco colorato pieno, che a fianco del
contenuto pesava piu' del contenuto stesso.
*/
.sidebar .nav-item.active > .nav-link {
  color: var(--em-primary);
  font-weight: 500;
  background: none;
  border-left-color: transparent;
  position: relative;
}
.sidebar .nav-item.active > .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 2px 2px 0;
  background: var(--em-primary);
}
.sidebar .sub-menu .nav-link.active { color: var(--em-primary); font-weight: 500; }

.sidebar .sub-menu { padding: 2px 0 var(--em-s2); }
.sidebar .sub-menu .nav-link {
  padding: 6px var(--em-s4) 6px 49px;
  font-size: 13.5px;
  border-left: 3px solid transparent;
}
.sidebar .sub-menu .nav-link::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  margin-left: -12px;
  margin-right: 8px;
  flex: none;
}

/* --- area principale --- */

.main-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.content-wrapper {
  flex: 1 0 auto;
  padding: var(--em-s5);
  max-width: 1320px;
  width: 100%;
}

.footer {
  padding: var(--em-s4) var(--em-s5);
  border-top: 1px solid var(--em-line);
  color: var(--em-faint);
  font-size: 12.5px;
  background: var(--em-surface);
}
.footer a { color: var(--em-muted); }

/* --- pagina di accesso --- */

.auth { min-height: 100vh; display: flex; align-items: center; }
.auth-form-light {
  background: var(--em-surface);
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  box-shadow: var(--em-shadow);
}
.auth .brand-logo { margin-bottom: var(--em-s5); }
.auth .brand-logo img { width: 168px; }
.auth-form-btn { width: 100%; }


/* =========================================================================
   5. GRIGLIA E UTILITY
   Solo le classi presenti nel markup.
   ========================================================================= */

/*
.container-fluid non riceve regole proprie: nel markup compare solo insieme a
.page-body-wrapper, e una scorciatoia "padding: 0" a questo punto del foglio
sovrascriverebbe per ordine di cascata il padding-top che scosta il contenuto
da sotto la barra fissa.
*/
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--em-s4); }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--em-s3) * -1);
  margin-right: calc(var(--em-s3) * -1);
}
/*
Larghezza piena a OGNI figlio diretto, non solo a quelli con una classe col-*,
come fa Bootstrap 5 con ".row > *". Serve davvero: in campagne_modifica il
.row non viene mai chiuso (col-md-9 e la riga condividono la stessa </div>),
quindi meta' del modulo e' figlia della riga e senza questa regola si
dispone in orizzontale invece di impilarsi.
*/
.row > * {
  width: 100%;
  flex-shrink: 0;
  max-width: 100%;
  padding-left: var(--em-s3);
  padding-right: var(--em-s3);
}

.col-6  { width: 50%; }
.col-12 { width: 100%; }
@media (min-width: 576px) {
  .col-sm-4 { width: 33.3333%; }
  .col-sm-8 { width: 66.6667%; }
}
@media (min-width: 768px) {
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.3333%; }
  .col-md-6 { width: 50%; }
  .col-md-9 { width: 75%; }
}
@media (min-width: 992px) {
  .col-lg-4  { width: 33.3333%; }
  .col-lg-12 { width: 100%; }
}

/* display e flex */
.d-block { display: block !important; }
.d-flex  { display: flex !important; }
.flex-row    { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap   { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.align-self-center  { align-self: center !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end     { justify-content: flex-end !important; }
@media (min-width: 576px) {
  .d-sm-flex { display: flex !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .justify-content-sm-between { justify-content: space-between !important; }
  .float-sm-right { float: right !important; }
  .text-sm-left { text-align: left !important; }
  .mt-sm-0 { margin-top: 0 !important; }
}
/* .d-lg-none nasconde da lg in su, non fino a lg */
@media (min-width: 992px) { .d-lg-none { display: none !important; } }
.float-none { float: none !important; }

/* testo */
.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-muted   { color: var(--em-muted) !important; }
.text-primary { color: var(--em-primary) !important; }
.text-success { color: var(--em-ok) !important; }
.text-danger  { color: var(--em-err) !important; }

/* fondi */
.bg-light { background-color: var(--em-line-soft) !important; }
.bg-info  { background-color: var(--em-primary) !important; }

/* spaziature */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--em-s1) !important; }
.mb-2 { margin-bottom: var(--em-s2) !important; }
.mb-3 { margin-bottom: var(--em-s4) !important; }
.mb-4 { margin-bottom: var(--em-s5) !important; }
.mt-1 { margin-top: var(--em-s1) !important; }
.mt-2 { margin-top: var(--em-s2) !important; }
.mt-3 { margin-top: var(--em-s4) !important; }
.ml-2, .ms-1 { margin-left: var(--em-s2) !important; }
.me-2 { margin-right: var(--em-s2) !important; }
.me-5 { margin-right: var(--em-s5) !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.p-0 { padding: 0 !important; }
.p-2 { padding: var(--em-s2) !important; }
.p-3 { padding: var(--em-s4) !important; }
.pt-3 { padding-top: var(--em-s4) !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-4 { padding-left: var(--em-s5) !important; padding-right: var(--em-s5) !important; }
.py-5 { padding-top: var(--em-s6) !important; padding-bottom: var(--em-s6) !important; }
@media (min-width: 576px) { .px-sm-5 { padding-left: var(--em-s6) !important; padding-right: var(--em-s6) !important; } }

/* varie */
.w-100 { width: 100% !important; }
.border { border: 1px solid var(--em-line) !important; }
.rounded { border-radius: var(--em-radius) !important; }


/* =========================================================================
   6. COMPONENTI
   ========================================================================= */

/* --- riquadro --- */

.card {
  background: var(--em-surface);
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  box-shadow: var(--em-shadow);
  margin-bottom: var(--em-s4);
}
.card-body { padding: var(--em-s5); }

/*
Il reset azzera i margini dei paragrafi, ma dentro un riquadro il testo ha
bisogno del proprio respiro. I paragrafi pero' fanno due mestieri diversi:
- in fila fra loro sono elenchi di fatti (informazioni di sistema, scheda
  iscritto) e vanno tenuti stretti, altrimenti si sfilacciano;
- quando introducono altro (caselle da spuntare, un pulsante, una tabella)
  serve uno stacco vero, altrimenti il testo resta appiccicato a cio' che
  presenta.
Percio' il margine fra paragrafi e' piccolo, e lo stacco viene dato
all'elemento che segue l'ultimo paragrafo.
*/
.card-body > p,
.card-body > form > p,
.card-body > .form-group > p { margin-bottom: 6px; }

.card-body > p + :not(p),
.card-body > form > p + :not(p) { margin-top: var(--em-s4); }

.card-body > p:last-child,
.card-body > form > p:last-child { margin-bottom: 0; }

/* il titolo fa da soprattitolo: non compete con il contenuto della lista */
.card-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--em-faint);
  margin: 0 0 var(--em-s4);
}

/* --- pulsanti --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--em-s2);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: var(--em-radius);
  background: none;
  color: var(--em-ink);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn.disabled { opacity: .5; pointer-events: none; }

.btn-primary { background: var(--em-primary); color: #fff; }
.btn-primary:hover { background: var(--em-primary-dark); color: #fff; }

/* success/danger/warning restano per gli stati, non per l'azione principale */
.btn-success { background: var(--em-ok); color: #fff; }
.btn-success:hover { background: #24634a; color: #fff; }
.btn-danger { background: var(--em-err); color: #fff; }
.btn-danger:hover { background: #8f2b23; color: #fff; }
.btn-warning { background: var(--em-warn); color: #fff; }
.btn-warning:hover { background: #8a4d0a; color: #fff; }
.btn-info { background: var(--em-primary); color: #fff; }
.btn-info:hover { background: var(--em-primary-dark); color: #fff; }
.btn-dark { background: var(--em-ink); color: #fff; }
.btn-dark:hover { background: #0f1720; color: #fff; }
.btn-light {
  background: var(--em-surface);
  color: var(--em-ink);
  border-color: var(--em-line);
}
.btn-light:hover { background: var(--em-line-soft); }

.btn-lg { padding: 11px 22px; font-size: 15px; }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }

/*
Azioni di riga: erano cerchi con bordo, tutti dello stesso peso e allineati
prima del titolo. Diventano icone senza cornice, smorzate a riposo.
*/
.btn-outline-secondary {
  color: var(--em-faint);
  border-color: var(--em-line);
  background: var(--em-surface);
}

/*
L'altezza della riga di elenco la impone il pulsante, non il testo: tenuto
compatto, una lista di iscritti passa da 13 a una ventina di voci per schermata.
*/
.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  flex: none;
}
.btn-icon i { font-size: 14px; line-height: 1; }
/* quadrate: il nome della classe resta quello del markup, la forma no */
.btn-rounded { border-radius: var(--em-radius-sm); }

.btn-icon-text i, .btn-icon-prepend { font-size: 14px; }

/*
Tre livelli, in quest'ordine perche' l'ultimo deve poter vincere sui precedenti:
  1. riposo          bordo tenue, icona chiara
  2. riga puntata    l'icona si scurisce, per dire che la riga e' quella attiva
  3. pulsante puntato tinta piena, bordo compreso
*/
.em-list-item:hover > .btn-outline-secondary:not([href^="javascript:"]) {
  color: var(--em-muted);
  border-color: var(--em-line);
}

.btn-outline-secondary:hover,
.em-list-item:hover > .btn-outline-secondary:not([href^="javascript:"]):hover {
  color: var(--em-primary);
  background: var(--em-primary-soft);
  border-color: var(--em-primary);
}

/* la piu' distruttiva vira al rosso, ma solo quando la si punta davvero */
.btn-outline-secondary:has(.ti-trash):hover,
.em-list-item:hover > .btn-outline-secondary:has(.ti-trash):hover {
  color: var(--em-err);
  background: var(--em-err-soft);
  border-color: var(--em-err);
}

/* le azioni non disponibili devono essere leggibili come tali */
.btn-outline-secondary[href^="javascript:"] {
  color: #ccd5de;
  border-color: var(--em-line-soft);
  background: var(--em-line-soft);
  cursor: not-allowed;
}
.btn-outline-secondary[href^="javascript:"]:hover {
  color: #ccd5de;
  background: var(--em-line-soft);
  border-color: var(--em-line-soft);
}

/* --- etichette di stato --- */

.badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  border-radius: var(--em-radius-sm);
  white-space: nowrap;
  vertical-align: middle;
}
.badge-info    { background: var(--em-info-soft); color: var(--em-info); }
.badge-success { background: var(--em-ok-soft);   color: var(--em-ok); }
.badge-danger  { background: var(--em-err-soft);  color: var(--em-err); }
.badge-warning { background: var(--em-warn-soft); color: var(--em-warn); }

/* --- avvisi --- */

/*
Un solo segnale, la campitura. Prima ne convivevano tre per dire la stessa
cosa (fondo, cornice su quattro lati e banda spessa a sinistra) e su schermate
come API o Moduli HTML, dove l'avviso e' solo testo esplicativo, il riquadro
finiva per pesare piu' del contenuto della pagina.
Il testo prende un tono scuro della stessa famiglia del fondo, cosi' i quattro
stati si riconoscono senza doverli leggere.
*/
.alert {
  padding: 12px 15px;
  border: 0;
  border-radius: var(--em-radius);
  margin-bottom: var(--em-s4);
  font-size: 14px;
  line-height: 1.5;
}
.alert:last-child { margin-bottom: 0; }
.alert-info    { background: var(--em-info-soft); color: #2c4457; }
.alert-success { background: var(--em-ok-soft);   color: #17543e; }
.alert-warning { background: var(--em-warn-soft); color: #7a4508; }
.alert-danger  { background: var(--em-err-soft);  color: #8a2f26; }

/* --- moduli --- */

.form-group { margin-bottom: var(--em-s4); }
.forms-sample .form-group:last-of-type { margin-bottom: var(--em-s5); }

label { display: inline-block; margin-bottom: var(--em-s2); font-size: 13px; font-weight: 500; color: var(--em-muted); }

.form-control, .form-select {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--em-ink);
  background: var(--em-surface);
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control::placeholder { color: var(--em-faint); }

/* La select, lasciata al browser, si disegna con il proprio controllo di
   sistema: su macOS diventa piu' alta degli altri campi e mostra una doppia
   freccia che non appartiene a questa interfaccia. La si azzera e si ridisegna
   la freccia come immagine di sfondo, cosi' la select ha la stessa altezza,
   lo stesso bordo e lo stesso raggio di un input di testo. */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a6b7d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px 14px;
  cursor: pointer;
}
.form-select::-ms-expand { display: none; }
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--em-primary);
  box-shadow: 0 0 0 3px rgba(31, 111, 208, .13);
}
.form-control-lg { padding: 12px 14px; font-size: 15px; }
textarea.form-control { min-height: 96px; resize: vertical; }
input[type="file"].form-control { padding: 7px 12px; background: var(--em-surface); }

/* caselle e scelte: controlli nativi, coerenti col colore primario */
.form-check { position: relative; margin-bottom: var(--em-s2); }
.form-check-label {
  display: flex;
  align-items: center;
  gap: var(--em-s2);
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--em-ink);
  cursor: pointer;
}
.form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--em-primary);
  cursor: pointer;
}
/* segnaposto del vecchio tema, non piu' necessario */
.input-helper { display: none; }

/* --- tabelle --- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table th {
  text-align: left;
  padding: var(--em-s2) var(--em-s3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--em-faint);
  border-bottom: 1px solid var(--em-line);
  white-space: nowrap;
}
.table td {
  padding: 7px var(--em-s3);
  border-bottom: 1px solid var(--em-line-soft);
  vertical-align: middle;
}
/* prima colonna: indirizzi, trattati come dati anche qui */
.table td:first-child {
  font-family: var(--em-mono);
  font-size: 12.5px;
  letter-spacing: -.01em;
  color: var(--em-ink);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { background: var(--em-line-soft); }
/* il tema disegnava un bordo attorno a ogni cella: troppo rumore per i numeri */
.table-bordered th, .table-bordered td { border-left: 0; border-right: 0; }

/* nelle tabelle l'azione di riga non deve gridare piu' dei dati */
.table .btn-primary {
  background: none;
  color: var(--em-primary);
  padding: 3px 8px;
  font-weight: 500;
}
.table .btn-primary:hover { background: var(--em-primary-soft); color: var(--em-primary-dark); }

/* --- paginazione --- */

.pagination { display: flex; gap: var(--em-s1); margin: var(--em-s4) 0 0; }
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--em-s2);
  font-size: 13px;
  color: var(--em-muted);
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius-sm);
}
.page-link:hover { background: var(--em-line-soft); color: var(--em-ink); text-decoration: none; }
.page-item.active .page-link {
  background: var(--em-primary);
  border-color: var(--em-primary);
  color: #fff;
  font-weight: 500;
}

/* --- avanzamento e attesa --- */

.progress {
  height: 8px;
  background: var(--em-line);
  border-radius: 999px;
  overflow: hidden;
}
.progress-md { height: 10px; }
.progress-bar {
  height: 100%;
  background: var(--em-primary);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width .4s ease;
}
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.16) 75%, transparent 75%, transparent);
  background-size: 16px 16px;
}
.progress-bar-animated { animation: em-stripes 1s linear infinite; }
@keyframes em-stripes { from { background-position: 16px 0; } to { background-position: 0 0; } }

.spinner-border {
  display: inline-block;
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--em-primary-soft);
  border-right-color: var(--em-primary);
  border-radius: 50%;
  animation: em-spin .7s linear infinite;
}
@keyframes em-spin { to { transform: rotate(360deg); } }

/* --- menu a tendina (Bootstrap 5) --- */

.dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.dropdown-toggle::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .45;
  flex: none;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 190px;
  padding: var(--em-s1) 0;
  margin-top: var(--em-s1);
  background: var(--em-surface);
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  box-shadow: 0 4px 16px rgba(27, 39, 51, .1);
}
.dropdown-menu.show { display: block; }
.dropdown-menu-right { left: auto; right: 0; }
/* tendina del profilo nella barra superiore */
.navbar-dropdown { margin-top: var(--em-s2); min-width: 200px; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--em-s2);
  padding: 8px var(--em-s4);
  color: var(--em-ink);
  font-size: 13.5px;
}
.dropdown-item:hover { background: var(--em-line-soft); text-decoration: none; }

/* --- pieghevole (Bootstrap 5) --- */

.collapse:not(.show) { display: none; }
.collapsing { height: 0; overflow: hidden; transition: height .2s ease; }


/* =========================================================================
   7. SCHERMATE SPECIFICHE
   ========================================================================= */

/* --- intestazione "La tua lista" --- */

/*
Riga di contesto sopra il contenuto: dice su quale lista si sta lavorando e se
l'applicazione e' in prova. Tenuta come didascalia, non come titolo.
*/
.content-wrapper > p.mb-3:first-child {
  font-size: 12.5px;
  color: var(--em-faint);
  display: flex;
  align-items: center;
  gap: var(--em-s2);
}
.nl_name, .nl_demo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--em-radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.nl_name { background: var(--em-surface); color: var(--em-ink); border: 1px solid var(--em-line); }
.nl_demo { background: var(--em-warn-soft); color: var(--em-warn); }

/* --- righe di elenco ---
   Il contenuto viene prima e le azioni vanno a destra: nel markup i pulsanti
   precedono il testo, quindi l'ordine visivo si ottiene con flex order.
   .em-list-label e' il contenitore aggiunto attorno al titolo, che nel markup
   originale era un nodo di testo nudo e come tale non ordinabile.
*/
/*
La riga si estende fino ai bordi del riquadro: il margine negativo compensa il
padding di .card-body, cosi' l'evidenziazione al passaggio del mouse copre
tutta la larghezza invece di fermarsi in un rettangolo sospeso.
*/
.em-list-item {
  display: flex;
  align-items: center;
  gap: var(--em-s1);
  padding: 3px var(--em-s5);
  margin: 0 calc(var(--em-s5) * -1);
  border-bottom: 1px solid var(--em-line-soft);
  transition: background .1s ease;
}
.em-list-item:last-child { border-bottom: 0; }
.em-list-item:hover { background: var(--em-line-soft); }

/*
Cancellazione massiva (elenco iscritti e risultati di ricerca): la checkbox
della riga e la barra con "seleziona tutti" e il bottone, che resta spento
finche' non c'e' una selezione.
*/
.em-list-check {
  width: 15px;
  height: 15px;
  margin: 0 var(--em-s1) 0 0;
  cursor: pointer;
  accent-color: var(--em-primary);
  flex: 0 0 auto;
}

/* la riga selezionata si riconosce anche a colpo d'occhio */
.em-list-item:has(.em-multi-riga:checked) {
  background: var(--em-primary-soft);
}

/*
La barra si allarga fino ai bordi del riquadro come le righe (stessi margini
negativi) cosi' checkbox e separatore risultano in colonna con quelli
dell'elenco, e resta agganciata sotto la barra superiore durante lo
scorrimento: con cinquanta righe il bottone non va perso in fondo alla pagina.
Il bottone sta a destra, sulla colonna delle azioni.
*/
.em-multi-toolbar {
  display: flex;
  align-items: center;
  gap: var(--em-s2);
  padding: var(--em-s2) var(--em-s5);
  margin: 0 calc(var(--em-s5) * -1);
  border-bottom: 1px solid var(--em-line);
  background: var(--em-surface);
  position: sticky;
  top: var(--em-navbar);
  z-index: 5;
}
.em-multi-toolbar label {
  display: flex;
  align-items: center;
  gap: var(--em-s2);
  margin: 0;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--em-muted);
  user-select: none;
}
.em-multi-toolbar label:hover { color: var(--em-ink); }
.em-multi-toolbar .btn {
  margin-left: auto;
  flex: 0 0 auto;
}

.em-list-label {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
Seconda riga di una voce di elenco: i risultati che prima si potevano vedere
solo entrando nelle statistiche, una campagna alla volta.
*/
.em-list-item:has(.em-list-meta) { padding: 6px var(--em-s5); }
.em-list-meta {
  display: flex;
  gap: var(--em-s3);
  flex-wrap: wrap;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
  color: var(--em-faint);
}
.em-list-meta b { font-weight: 600; color: var(--em-muted); }
.em-list-meta .em-warn { color: var(--em-warn); }
.em-list-meta .em-warn::before { content: "· "; color: var(--em-faint); }
.em-list-meta .em-mono {
  font-family: var(--em-mono);
  font-size: 11.5px;
  letter-spacing: -.01em;
  color: var(--em-muted);
}
/* gruppi di appartenenza: etichette leggere, non badge di stato */
.em-list-meta .em-tag {
  background: var(--em-line-soft);
  color: var(--em-muted);
  padding: 1px 6px;
  border-radius: var(--em-radius-sm);
  font-size: 11px;
}

/*
Gli indirizzi email sono dati, non prosa: in tondo a spaziatura fissa si
confrontano a colpo d'occhio e i refusi nel dominio saltano fuori.
*/
.em-list-label.em-data {
  font-family: var(--em-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.01em;
}

/*
Niente sfumatura sulle azioni a riposo: le renderebbe indistinguibili da
quelle disabilitate, che devono restare riconoscibili. A distinguerle e' il
colore, che passa da grigio a primario quando si punta la riga.
*/
.em-list-item:hover > .btn:not([href^="javascript:"]) { color: var(--em-muted); }
.em-list-item > .badge { order: 2; flex: none; }
/* Le distanze le decide solo il gap di .em-list-item: nessun margine sui
   singoli bottoni, altrimenti la fila risulta irregolare. L'azione distruttiva
   resta riconoscibile perche' e' sempre l'ultima e perche' diventa rossa al
   passaggio del mouse -- non serve allontanarla. */
.em-list-item > .btn { order: 3; margin: 0; }
.em-list-item > .btn:has(.ti-trash) { order: 4; }

/* Fila di pulsanti in fondo a una scheda. Le distanze le decide il gap;
   l'azione distruttiva sta all'estremo opposto delle altre, perche' qui non
   e' una fila di icone ma di pulsanti con etichetta, e un rosso accanto a
   "Torna all'elenco" si clicca per sbaglio. */
.em-scheda-azioni {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--em-s2);
}
.em-scheda-azioni .em-azione-distruttiva { margin-left: auto; }

@media (max-width: 575.98px) {
  .em-scheda-azioni .em-azione-distruttiva { margin-left: 0; }
}

/* Campo del codice di verifica: cifre monospaziate e distanziate, perche' si
   copiano da una email e si controllano a occhio una a una. */
.em-codice {
  font-family: var(--em-mono);
  font-size: 20px;
  letter-spacing: 6px;
  text-align: center;
}

/* Titolo di scheda che porta accanto un'etichetta di stato. Il titolo e'
   maiuscolo e minuto; il badge no, altrimenti "Attiva" e "Non attiva"
   diventerebbero due blocchi di maiuscole indistinguibili a colpo d'occhio. */
.em-titolo-stato {
  display: flex;
  align-items: center;
  gap: var(--em-s2);
}
.em-titolo-stato .badge {
  text-transform: none;
  letter-spacing: 0;
}

/* Riga di spiegazione sotto un comando: dice la conseguenza di cio' che si sta
   per fare, quindi si legge dopo il comando e non prima. */
.em-nota {
  margin-top: var(--em-s2);
  font-size: 13px;
  color: var(--em-muted);
}

/* --- anteprime --- */

.em-msg-preview {
  width: 100%;
  height: 520px;
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  background: var(--em-surface);
}
.form-preview { position: relative; }
.form-preview iframe {
  width: 100%;
  height: 300px;
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  background: var(--em-surface);
}
.form-preview a.btn { position: absolute; top: var(--em-s2); right: var(--em-s2); }
.form-iframe { width: 100%; border: 0; }

/* --- schermata di spedizione --- */

#em-send-app .progress { height: 22px; border-radius: var(--em-radius); }
#em-send-app .progress-bar { font-size: 12px; font-weight: 600; border-radius: 0; }

/* i riquadri con i numeri: e' il modello visivo che il resto del pannello segue */
#em-send-app .border {
  border: 1px solid var(--em-line) !important;
  border-radius: var(--em-radius) !important;
  background: var(--em-surface);
}
#em-send-app .h4 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }

#em-log {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  font-size: 12.5px;
}
#em-log div { padding: 3px var(--em-s2); border-bottom: 1px solid var(--em-line-soft); }
#em-log div:last-child { border-bottom: none; }

@keyframes em-fadein {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#em-send-done .em-done-inner { animation: em-fadein .5s ease; }

/* --- statistiche --- */

/*
Intestazione di una scheda: chi e' il soggetto della pagina. Il nominativo fa
da titolo e l'indirizzo lo qualifica, in tondo a spaziatura fissa come in ogni
altro punto in cui compare un'email.
*/
.em-subject {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: var(--em-s4);
  margin-bottom: var(--em-s4);
  border-bottom: 1px solid var(--em-line);
}
.em-subject-name {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.em-subject-mail {
  font-family: var(--em-mono);
  font-size: 13px;
  color: var(--em-muted);
  letter-spacing: -.01em;
}

/*
Riquadri con i numeri principali. E' il linguaggio gia' usato dalla schermata
di spedizione, esteso alle statistiche di una campagna: prima i dati erano
righe di testo tutte uguali, e le percentuali - che sono il motivo per cui si
apre la pagina - andavano calcolate a mente.
*/
.em-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--em-s3);
  margin-bottom: var(--em-s4);
}
.em-tile {
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  padding: var(--em-s3) var(--em-s4);
}
.em-tile .k { font-size: 11.5px; color: var(--em-muted); letter-spacing: .02em; }
.em-tile .v {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 2px;
  letter-spacing: -.02em;
}
.em-tile .s { font-size: 11.5px; color: var(--em-faint); margin-top: 1px; }
.em-tile.warn .v { color: var(--em-warn); }

.em-stats-extra { font-size: 13px; color: var(--em-muted); }
.em-stats-extra strong { color: var(--em-ink); }

/*
Campo di ricerca sopra un elenco. Il contorno appartiene al gruppo, non al
singolo campo: il testo, l'icona e il pulsante stanno dentro la stessa cornice.
*/
.em-search {
  display: flex;
  align-items: center;
  gap: var(--em-s2);
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  padding: 4px 4px 4px var(--em-s3);
  margin-bottom: var(--em-s4);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.em-search:focus-within {
  border-color: var(--em-primary);
  box-shadow: 0 0 0 3px rgba(28, 100, 196, .12);
}
.em-search i { color: var(--em-faint); font-size: 14px; flex: none; }
.em-search input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--em-ink);
  padding: 4px 0;
}
.em-search input[type="text"]::placeholder { color: var(--em-faint); }

/*
Tabelle di documentazione (parametri API). La prima colonna eredita gia' il
carattere a spaziatura fissa dalla regola generale delle tabelle, che qui e'
esattamente quel che serve: sono nomi di campo, non prosa.
*/
.em-params { margin-bottom: var(--em-s2); }
.em-params td em {
  font-family: var(--em-mono);
  font-style: normal;
  font-size: 12.5px;
  background: var(--em-line-soft);
  padding: 1px 5px;
  border-radius: var(--em-radius-sm);
}
.em-params .badge { font-size: 10.5px; padding: 2px 7px; }

.stats-page p { margin-bottom: 5px; }
.stats-page strong { color: var(--em-muted); font-weight: 500; }

/*
Riepilogo di una campagna. Le etichette arretrano e i valori avanzano: prima
"Subject" e "Email Inviate" avevano lo stesso peso del dato che introducono.
Le due colonne restano divise da una linea sottile invece che dal vuoto.
*/
.em-stats { margin-bottom: var(--em-s5); }
.em-stats p {
  margin: 0;
  padding: 5px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--em-line-soft);
}
.em-stats p:last-child { border-bottom: 0; }
.em-stats strong {
  display: inline-block;
  min-width: 132px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--em-faint);
  vertical-align: baseline;
}
@media (min-width: 768px) {
  .em-stats > .col-md-6:last-child { border-left: 1px solid var(--em-line); }
  .em-stats > .col-md-6:last-child p { padding-left: var(--em-s4); }
}


/* =========================================================================
   STATI DELLA BARRA LATERALE
   Classi applicate da template.js e off-canvas.js.
   ========================================================================= */

/* barra ridotta alle sole icone */
body.sidebar-icon-only .sidebar { width: 62px; }
body.sidebar-icon-only .navbar-brand-wrapper { width: 62px; }
body.sidebar-icon-only .navbar-brand.brand-logo { display: none; }
body.sidebar-icon-only .navbar-brand.brand-logo-mini { display: inline-flex; }
body.sidebar-icon-only .sidebar .menu-title,
body.sidebar-icon-only .sidebar .menu-arrow,
body.sidebar-icon-only .sidebar .sub-menu { display: none; }
body.sidebar-icon-only .sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }

/* al passaggio del mouse la voce si espande (hoverable-collapse.js) */
body.sidebar-icon-only .sidebar .nav-item.hover-open > .nav-link { justify-content: flex-start; padding-left: var(--em-s4); }
body.sidebar-icon-only .sidebar .nav-item.hover-open .menu-title {
  display: flex;
  position: absolute;
  left: 62px;
  top: 0;
  width: 190px;
  padding: 9px var(--em-s4);
  background: var(--em-surface);
  border: 1px solid var(--em-line);
  border-radius: 0 var(--em-radius) var(--em-radius) 0;
  z-index: 20;
}
body.sidebar-icon-only .sidebar .nav-item.hover-open .sub-menu {
  display: block;
  position: absolute;
  left: 62px;
  top: 38px;
  width: 190px;
  background: var(--em-surface);
  border: 1px solid var(--em-line);
  border-radius: 0 0 var(--em-radius) var(--em-radius);
  z-index: 20;
}
body.sidebar-icon-only .sidebar .nav-item.hover-open .sub-menu .nav-link { padding-left: var(--em-s4); }
body.sidebar-icon-only .sidebar .nav-item.hover-open .sub-menu .nav-link::before { display: none; }

/* barra nascosta */
body.sidebar-hidden .sidebar { display: none; }


/* =========================================================================
   SCHERMI STRETTI
   ========================================================================= */

@media (max-width: 991.98px) {
  .navbar-brand-wrapper { width: auto; border-right: 0; }
  .navbar-menu-wrapper { padding: 0 var(--em-s4); }

  .sidebar {
    position: fixed;
    top: var(--em-navbar);
    left: 0;
    height: calc(100vh - var(--em-navbar));
    z-index: 1020;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 6px 24px rgba(27, 39, 51, .12);
  }
  /* off-canvas.js applica .active al tocco del pulsante */
  .sidebar.sidebar-offcanvas.active { transform: translateX(0); }

  .content-wrapper { padding: var(--em-s4); }

  .em-list-item { flex-wrap: wrap; }
  .em-list-label { flex: 1 1 100%; white-space: normal; padding-left: 0; }
}

@media (max-width: 575.98px) {
  .col-6 { width: 100%; }
  .card-body { padding: var(--em-s4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Versione dell'applicazione, nel footer: un contorno la stacca dalla frase
   senza darle il peso di un colore pieno. */
.em-versione {
  display: inline-block;
  font-family: var(--em-mono);
  font-size: 10.5px;
  line-height: 1;
  color: var(--em-faint);
  padding: 3px 6px;
  margin: 0 2px;
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius-sm);
  vertical-align: 1px;
}