/* ============================================================
   TEMA SCURO NAUTILUS — Fase 17 (31/08/2026)
   Tutti i colori, i font e le misure vengono da GUIDA-STILE.md,
   campionati dal sito nautilusdeals.com. QUESTO e' il punto unico:
   per cambiare un colore si cambia qui, mai dentro le pagine.
   Ogni pagina lo aggancia con una riga, DOPO style.css: cosi' il
   passaggio al buio avviene una pagina alla volta.
   ============================================================ */

/* Il font del sito: Inter, servito da casa nostra (niente Google a
   ogni caricamento). E' un font "variabile": un file solo copre i
   pesi dal 400 all'800. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/font/inter-var.woff2) format("woff2");
}

:root {
  /* --- la tavolozza della guida, codici esatti --- */
  --sfondo: #0A0F1C;            /* sfondo pagina */
  --sfondo-scuro: #070B14;      /* header e bande */
  --carta: #101929;             /* schede e riquadri */
  --sfondo-icona: #13233F;      /* quadratini icona, miniature vuote */
  --bordo: #1E2A3F;             /* bordo standard */
  --bordo-secondario: #2B3A55;  /* bordo dei pulsanti secondari */
  --testo: #EEF4FF;             /* testo principale, MAI bianco puro */
  --tenue: #889AB0;             /* testo secondario */
  --muto: #6A8096;              /* etichette, didascalie, timestamp */
  --blu: #2B7FFF;               /* UNICO colore d'azione */
  --blu-scuro: #1D6AE5;         /* il blu premuto (non in guida: blu abbassato) */
  --arancio: #FF9B21;           /* secondo accento, col contagocce */
  --verde: #22C55E;             /* successo */
  --rosso: #EF4444;             /* errore */
  --raggio: 12px;

  /* i campi e i menu del browser (date, tendine) nascono scuri */
  color-scheme: dark;
}

/* --- base --- */
body {
  background: var(--sfondo);
  color: var(--tenue);          /* il corpo e' grigio-azzurro, mai bianco pieno */
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 15px;
}

/* --- tipografia (scala "da dashboard" della guida) --- */
header h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--testo); }
.sottotitolo { color: var(--tenue); }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--testo); }
h3 { color: var(--testo); }
strong { color: var(--testo); }
label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muto);
}
.etichetta-secondaria { color: var(--muto); }
.meta { color: var(--muto); }
.conteggio { color: var(--muto); }
.vuoto { color: var(--muto); }
.in-rosso { color: var(--rosso); }

/* --- schede --- */
.card {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 20px 24px;
  box-shadow: none;             /* niente ombre: separa il contrasto, non l'ombra */
}

/* --- campi --- */
input[type="text"], input[type="number"], input[type="search"], input[type="date"],
select, textarea {
  background: var(--sfondo);
  color: var(--testo);
  border: 1px solid var(--bordo);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blu); outline-offset: 1px; }
::placeholder { color: var(--muto); opacity: 1; }

/* --- pulsanti (misure e colori della guida) --- */
.bottone { border-radius: 10px; font-weight: 600; }
.bottone.principale { background: var(--blu); color: #FFFFFF; border: none; }
.bottone.principale:active { background: var(--blu-scuro); }
.bottone.principale:disabled { background: var(--bordo-secondario); color: var(--muto); opacity: 1; }
.bottone.secondario {
  background: transparent;
  color: var(--testo);
  border: 1px solid var(--bordo-secondario);
}
.bottone.secondario:hover { border-color: var(--blu); }
.bottone.copia { background: var(--sfondo-icona); color: var(--blu); border-color: var(--bordo-secondario); }
.bottone.copia.fatto { background: rgba(34, 197, 94, 0.12); color: var(--verde); border-color: rgba(34, 197, 94, 0.4); }
.bottone.pericolo { background: transparent; color: var(--rosso); border: 1px solid rgba(239, 68, 68, 0.4); }

/* --- menu di navigazione: pillole scure, l'attiva e' blu --- */
.menu a {
  background: transparent;
  color: var(--tenue);
  border: 1px solid var(--bordo-secondario);
}
.menu a:hover { border-color: var(--blu); color: var(--testo); }
.menu a.attivo { background: var(--blu); color: #FFFFFF; border-color: var(--blu); }

/* --- righe elenco (magazzino, registro, vendite) --- */
.prodotto { background: var(--carta); border-color: var(--bordo); }
a.prodotto:hover { border-color: var(--blu); }
a.prodotto:active { background: var(--sfondo-icona); }
.titolo-prodotto { color: var(--testo); }
.miniatura, .senza-foto, .foto-grande { background: var(--sfondo-icona); }
.giacenza { color: var(--verde); }
.giacenza.esaurito { color: var(--muto); }
.prezzo { color: var(--testo); }

/* --- targhette a pillola (regola della guida: bordo al 40%, testo pieno) --- */
.targhetta {
  background: transparent;
  border: 1px solid rgba(136, 154, 176, 0.4);
  color: var(--tenue);
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

/* --- tendine --- */
summary { color: var(--blu); }
details .card, .anteprima-html { background: var(--sfondo); }

/* --- messaggi --- */
.errore {
  background: rgba(239, 68, 68, 0.1);
  color: var(--rosso);
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.successo {
  background: rgba(34, 197, 94, 0.1);
  color: var(--verde);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

/* --- barre e dettagli ricorrenti --- */
.spinner { border-color: var(--bordo); border-top-color: var(--blu); }
.riga-dato strong { color: var(--testo); }

/* ============================================================
   MAGAZZINO (e classi che il magazzino usa per primo)
   ============================================================ */

/* Il toast: sopra il tema chiaro era testo-su-scuro; qui e' una scheda
   scura col bordo, come vuole la guida (niente ombre). */
.toast {
  background: var(--carta);
  color: var(--testo);
  border: 1px solid var(--bordo-secondario);
  box-shadow: none;
}

/* La fascia d'allarme in cima: rosso della guida, stesso stile dei
   messaggi d'errore, ben visibile sul buio. */
.fascia-allarme.grave {
  background: #2A1215;
  color: var(--rosso);
  border-bottom: 1px solid rgba(239, 68, 68, 0.4);
}

/* Le targhette "dove e' pubblicato": pillole della guida — sfondo
   trasparente, bordo del colore al 40%, testo pieno. */
.pubblicato.veri {
  background: transparent;
  color: var(--verde);
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.pubblicato.prove {
  background: transparent;
  color: var(--tenue);
  border: 1px solid rgba(136, 154, 176, 0.4);
}
.pubblicato.in-pausa {
  background: transparent;
  color: var(--arancio);
  border: 1px solid rgba(255, 155, 33, 0.4);
}
.pubblicato.spento {
  background: transparent;
  color: var(--muto);
  border: 1px solid var(--bordo);
}
.dove.non-pubblicato { color: var(--muto); }

/* L'elenco dell'import da eBay. */
.annuncio-ebay img { background: var(--sfondo-icona); }
.annuncio-ebay { border-bottom-color: var(--bordo); }

/* Un bottone senza variante (ce n'e' uno nell'import) sul buio sarebbe
   invisibile: prende l'aspetto del secondario. */
.bottone:not(.principale):not(.copia):not(.pericolo) {
  background: transparent;
  color: var(--testo);
  border: 1px solid var(--bordo-secondario);
}
.bottone.principale { background: var(--blu); color: #FFFFFF; border: none; }

/* ============================================================
   SCHEDA PRODOTTO
   ============================================================ */

/* La barra "Salva" fluttuante: da scheda bianca a scheda scura. Resta dove
   sta e si comporta uguale; l'ombra sparisce (guida: niente ombre), la
   stacca il bordo. */
.barra-salva {
  background: var(--carta);
  border: 1px solid var(--bordo-secondario);
  box-shadow: none;
}

/* I comandi sopra le foto (frecce e X): scuri e leggibili sulle immagini. */
.frecce-foto button {
  background: rgba(16, 25, 41, 0.92);
  color: var(--testo);
  border-color: var(--bordo-secondario);
}
.togli-foto {
  background: rgba(16, 25, 41, 0.92);
  color: var(--testo);
  border-color: var(--bordo-secondario);
}

/* Da dove viene un valore (targhette accanto agli attributi): pillole della
   guida. Blu = scritto da te, arancio = da Amazon, grigio = scelto dall'AI.
   Due accenti al massimo per schermata: l'AI resta neutra apposta. */
.targhetta.origine-tuo {
  background: transparent;
  color: var(--blu);
  border: 1px solid rgba(43, 127, 255, 0.4);
}
.targhetta.origine-amazon {
  background: transparent;
  color: var(--arancio);
  border: 1px solid rgba(255, 155, 33, 0.4);
}
.targhetta.origine-ai {
  background: transparent;
  color: var(--tenue);
  border: 1px solid rgba(136, 154, 176, 0.4);
}

/* ============================================================
   PREPARA LA PUBBLICAZIONE
   ============================================================ */

/* I link nel corpo pagina ("Vedi l'annuncio su eBay →"): il blu d'azione. */
a { color: var(--blu); }
.menu a { color: var(--tenue); }
.menu a.attivo { color: #FFFFFF; }

/* La fascia "stai pubblicando sul vero": rosso della guida su fondo scuro,
   come gli altri avvisi gravi. */
.fascia-produzione {
  background: #2A1215;
  color: var(--rosso);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* La targhetta dell'ambiente: pillola arancio. */
.targhetta.ambiente {
  background: transparent;
  color: var(--arancio);
  border: 1px solid rgba(255, 155, 33, 0.4);
}

/* L'avviso forte ("manca una cosa nella scheda"): arancio della guida. */
.avviso-forte {
  border-left: 3px solid var(--arancio);
  background: rgba(255, 155, 33, 0.1);
  color: var(--testo);
}

/* Un riquadro account dentro la card: leggermente piu' scuro della scheda,
   cosi' si vede dove comincia. */
.card .conto { background: var(--sfondo); }

/* ============================================================
   ACCOUNT EBAY (+ resti condivisi trovati passando)
   ============================================================ */

/* La targhetta "veri" resta piena e rossa apposta (non si deve confondere);
   quella "prove" diventa pillola neutra. */
.targhetta.prove {
  background: transparent;
  color: var(--tenue);
  border: 1px solid rgba(136, 154, 176, 0.4);
}

/* Le targhette della condizione (nuovo/usato/per parti) a pillola. */
.condizione.usato {
  background: transparent;
  color: var(--arancio);
  border: 1px solid rgba(255, 155, 33, 0.4);
}
.condizione.parti {
  background: transparent;
  color: var(--rosso);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* I codici scritti come `codice` (percorsi, chiavi): riquadrino scuro. */
code { background: var(--sfondo-icona); color: var(--testo); }

/* Un campo attributo sbagliato: bordo rosso, fondo appena arrossato. */
.attributo input.superato, .attributo select.superato {
  background: rgba(239, 68, 68, 0.08);
}

/* Le proposte di riempimento (scheda) e le spunte attributo (pubblica). */
.proposta { background: var(--sfondo); }
.proposta.in-conflitto {
  background: rgba(255, 155, 33, 0.08);
  border-color: rgba(255, 155, 33, 0.4);
}
.spunte-attributo { background: var(--sfondo); }
.spunte-attributo.superato { border-color: var(--rosso); }

/* ============================================================
   PANNELLO DI CONTROLLO
   ============================================================ */

/* I riquadri del riepilogo e dei gettoni usano gia' una variabile:
   basta darle il valore scuro. */
:root { --sfondo-riquadro: var(--carta); }

/* La tabella degli utenti. */
table.elenco-utenti th {
  background: var(--sfondo-scuro);
  color: var(--muto);
}
table.elenco-utenti th:hover { background: var(--sfondo-icona); }
table.elenco-utenti th .freccia { color: var(--muto); }
table.elenco-utenti th.ordinata,
table.elenco-utenti th.ordinata .freccia { color: var(--testo); }
table.elenco-utenti tbody tr:hover { background: rgba(238, 244, 255, 0.03); }

/* Il pallino "attivo adesso" e le righe particolari. */
.pallino { background: var(--bordo-secondario); }
.pallino.acceso { background: var(--verde); }
.riga-sospesa td { background: rgba(239, 68, 68, 0.08); }
.ai-finita { color: var(--rosso); }
.ai-quasi { color: var(--arancio); }

/* La barra dei gettoni di oggi. */
.gettoni-oggi .barra { background: var(--sfondo-icona); }
.gettoni-oggi .barra-piena { background: var(--verde); }
.gettoni-oggi.superata {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}
.gettoni-oggi.superata .barra-piena { background: var(--rosso); }

/* ============================================================
   PAGINE RESTANTI: nuovo prodotto, chi sono, registro, privacy
   ============================================================ */

/* Le due scelte grandi di "Nuovo prodotto": il quadratino dell'icona e'
   quello della guida (56x56, sfondo scuro dedicato). */
.scelta-grande:active { background: var(--sfondo-icona); }
.segno-scelta { background: var(--sfondo-icona); }

/* L'anteprima dell'immagine incollata (nuovo da testo/foto). */
#anteprima img { background: var(--sfondo-icona); border-color: var(--bordo); }