/* ──────────────────────────────────────────────────────────────────────────
   Componenti propri, fuori da app.css per non perderli se il template
   viene riesportato. Usano i token definiti in app.css.
   ────────────────────────────────────────────────────────────────────────── */


/* ── Colonne mancanti nella griglia dei campi ─────────────────────────────── */

/* app.css definisce .span-2..6, .span-8 e .span-12, ma non 7, 9, 10 e 11.
   Un campo che usa una di queste, come la Categoria del modale ricambi,
   resta senza regola e si stringe a una sola colonna su dodici. */

.span-7 { grid-column: span 7; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }


/* ── Avvisi e conferme ────────────────────────────────────────────────────── */

/* Piu' stretti delle modali di contenuto: qui c'e' solo una frase */
dialog.modale-avviso { width: min(420px, calc(100vw - 32px)); }

dialog.modale-avviso .modale-testa h2 { font-size: 16px; }

.modale-testo {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--testo);
}

/* Senza intestazione il testo ha bisogno di un po' di respiro in piu' */
dialog.modale-avviso .modale-corpo:first-child { padding-top: 22px; }

@media (max-width: 560px) {
  dialog.modale-avviso { width: 100%; }
}


/* ── Selezione multipla ───────────────────────────────────────────────────── */

.multiselect { position: relative; }

.multiselect-campo {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 32px 6px 10px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font: inherit;
  color: var(--testo);
  text-align: left;
  cursor: pointer;
}

.multiselect-campo:hover { border-color: var(--bordo-forte); }

.multiselect.aperto .multiselect-campo,
.multiselect-campo:focus-visible {
  outline: none;
  border-color: var(--accento);
  box-shadow: 0 0 0 3px var(--accento-tenue);
}

.multiselect-vuoto { color: var(--testo-3); }

.multiselect-freccia {
  position: absolute;
  right: 10px;
  top: 19px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--testo-3);
  pointer-events: none;
  transition: transform .15s ease;
}

.multiselect.aperto .multiselect-freccia { transform: rotate(180deg); }

.multiselect .pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-right: 4px;
}

.multiselect-togli {
  border: 0;
  background: none;
  padding: 0 2px;
  cursor: pointer;
  color: inherit;
  opacity: .55;
  font-size: 14px;
  line-height: 1;
}

.multiselect-togli:hover { opacity: 1; }

.multiselect-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
}

.multiselect-menu[hidden] { display: none; }

.multiselect-cerca {
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 8px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
}

.multiselect-cerca:focus {
  outline: none;
  border-color: var(--accento);
}

.multiselect-cerca[hidden] { display: none; }

.multiselect-lista { list-style: none; margin: 0; padding: 0; }

.multiselect-lista label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.multiselect-lista label:hover { background: var(--superficie-2); }

.multiselect-lista input[type="checkbox"] { flex: none; }

.multiselect-niente {
  padding: 8px;
  color: var(--testo-3);
  font-size: 14px;
}

/* Dentro un <dialog> il menu non deve essere tagliato dal bordo della modale */
.modale .multiselect-menu { max-height: 200px; }


/* ── Allegati della scheda di riparazione ─────────────────────────────────── */

/* app.css veste la griglia (.allegati, .allegato, .thumb, .carica): qui c'e'
   solo quello che serve alla versione funzionante, cioe' il pulsante di
   rimozione appoggiato sulla miniatura e la miniatura come elemento cliccabile. */

.allegato { position: relative; }

.allegato .thumb {
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--bordo);
  font: inherit;
  cursor: pointer;
}

.allegato .thumb:hover { filter: brightness(.97); }

.allegato-elimina {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  box-shadow: var(--ombra);
}

.allegato-info strong { cursor: pointer; }

/* Il riquadro tratteggiato del template e' pensato per una <label>: qui e' un
   pulsante, perche' il campo file sta fuori dalla griglia e non viene ridisegnato */
button.carica { font: inherit; background: none; width: 100%; }

.allegati-vuoto { grid-column: 1 / -1; }

/* Anteprima a schermo: la modale si allarga oltre i 560px del template */
dialog.modale-anteprima { width: min(860px, calc(100vw - 32px)); }

dialog.modale-anteprima .modale-corpo {
  display: grid;
  place-items: center;
  background: var(--superficie-2);
  padding: 12px;
}

dialog.modale-anteprima img {
  max-width: 100%;
  max-height: calc(100vh - 240px);
  border-radius: 6px;
}


/* ── Pagina dei testi ─────────────────────────────────────────────────────── */

/* Le cinque caselle una sotto l'altra, a tutta larghezza della colonna */
.campi-testi { display: flex; flex-direction: column; gap: 16px; }

.campi-testi textarea { line-height: 1.45; resize: vertical; }

/* I segnaposto si leggono meglio a larghezza fissa */
.mono-testi { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

.elenco-segnaposto { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.pill-segnaposto {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  cursor: pointer;
  border: 1px solid var(--bordo);
  background: var(--superficie-2);
}

.pill-segnaposto:hover { border-color: var(--accento); color: var(--accento-testo); }

/* Saldo della riconsegna: in attesa del costo, oppure da rendere al cliente */
.saldo.saldo-attesa { font-size: 16px; font-weight: 600; color: var(--testo-2); }
.saldo.saldo-rendere { color: var(--errore); }


/* ── Paginatore ───────────────────────────────────────────────────────────── */

/* app.css da' a .paginazione display:flex, che vince sull'attributo hidden:
   senza questa regola un elenco corto mostrerebbe una barra vuota */
.paginazione[hidden] { display: none; }

/* I puntini fra la prima pagina e quelle vicine alla corrente: stessa
   misura dei bottoni, cosi' la fila non balla quando compaiono */
.paginazione .pagine-salto {
  min-width: 20px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--testo-3);
}

/* Se le pagine non ci stanno vanno a capo invece di uscire dallo schermo */
.paginazione .pagine { flex-wrap: wrap; }

@media (max-width: 768px) {
  .paginazione .pagine-salto { height: 42px; min-width: 16px; }
}


/* ── Ricerca del ricambio nella scheda ────────────────────────────────────── */

/* Nella barra di aggiunta il campo di ricerca prende il posto che aveva la
   tendina: occupa lo spazio libero e, su schermo stretto, la riga intera */
.aggiungi .suggerimenti { flex: 1 1 260px; min-width: 0; }

.suggerimenti-lista .vuoto { padding: 8px 10px; color: var(--testo-3); font-size: 14px; }


/* ── E-mail al cliente ────────────────────────────────────────────────────── */

/* Anteprima di quello che partira': si legge, non si scrive */
.email-anteprima {
  margin-top: 12px;
  padding: 12px 14px;
  min-height: 120px;
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font-size: 14px;
  line-height: 1.5;
}

.email-oggetto {
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--bordo);
  font-weight: 600;
}

.email-oggetto .etichetta { display: block; font-weight: 400; }

.email-corpo { color: var(--testo-2); }

/* Storico: stessa impostazione della timeline degli stati, senza il filo */
.email-storico { list-style: none; margin: 8px 0 0; padding: 0; }

.email-storico li {
  padding: 10px 0;
  border-bottom: 1px solid var(--bordo);
  font-size: 14px;
}

.email-storico li:last-child { border-bottom: 0; }

.email-storico .quando { color: var(--testo-3); font-size: 12.5px; }

.email-riga { margin: 4px 0 2px; }

.email-errore { margin: 6px 0 0; color: var(--errore); font-size: 13px; }

.email-storico details { margin-top: 6px; font-size: 13px; color: var(--testo-2); }

.email-storico summary { cursor: pointer; color: var(--accento-testo); }

.email-storico .vuoto { color: var(--testo-3); border-bottom: 0; }


/* ── Logo del cliente ─────────────────────────────────────────────────────── */

/* Il logo e' su fondo trasparente con il marchio in magenta e grigio: sulla
   testata scura si perderebbe, quindi sta su una piastrella chiara. */
.topbar .wordmark {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  background: #fff;
  border-radius: 6px;
  letter-spacing: 0;
}

.topbar .wordmark img { height: 22px; width: auto; display: block; }

/* Nel riquadro della login il fondo e' gia' chiaro: il logo sta da solo */
.login-card .logo-cliente {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
}

.login-card .logo-cliente + .sottotitolo { margin-top: 14px; }