/* ==========================================================================
   Warehouse Suite — foglio di stile
   --------------------------------------------------------------------------
   Scelte strutturali (non estetiche), in ordine di importanza:

   1. Scala di spaziatura a 8px. Ogni margine e padding e' un multiplo: senza
      una scala, le sezioni "sembrano sbagliate" senza che si sappia perche'.
   2. Larghezza di lettura limitata a ~68ch sul testo corrente. Le righe lunghe
      su schermo largo sono il difetto piu' comune delle dashboard tecniche.
   3. Due breakpoint soli (720px, 1080px). Con tre la griglia diventa
      impossibile da tenere in testa su un progetto che sta crescendo.
   4. Colore con significato: verde = verificato, ambra = stub/da decidere,
      rosso = guasto. Non decorativo: un operatore deve capire lo stato dal
      colore prima di leggere.
   5. Contrasto e focus visibile. Il sito deve essere usabile da tastiera.
   ========================================================================== */

:root {
  /* Spaziatura: base 8 */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;
  --s4: 2rem;    --s5: 3rem;   --s6: 4rem;

  /* Tipografia */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --measure: 68ch;

  /* Colori */
  --ink:        #10151c;
  --ink-2:      #3d4a5c;
  --ink-3:      #6b7a8f;
  --line:       #dfe4ec;
  --surface:    #ffffff;
  --surface-2:  #f5f7fa;
  /* Colori campionati dal logo wareIQ: navy del capannone, verde del rack. */
  --brand:      #103060;
  --brand-2:    #1d4a86;
  --brand-green: #007030;
  --ok:         #1a7f4b;
  --ok-bg:      #e7f5ee;
  --wip:        #8a5a00;
  --wip-bg:     #fdf1dc;
  --bad:        #b3261e;
  --bad-bg:     #fdeceb;
  --radius: 10px;
  --radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8edf5; --ink-2: #b6c2d2; --ink-3: #8896a8;
    --line: #2a3442; --surface: #141a23; --surface-2: #1b2430;
    --brand: #7aa6dd; --brand-2: #9cc4f0; --brand-green: #4fbf87;
    --ok: #5cc98d; --ok-bg: #12301f; --wip: #e0b355; --wip-bg: #33280f;
    --bad: #f18b85; --bad-bg: #3a1815;
  }
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s2); letter-spacing: -0.015em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 var(--s2); }
a { color: var(--brand); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: var(--s1) var(--s2);
}
.skip:focus { left: var(--s2); top: var(--s2); }

:focus-visible {
  outline: 3px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { width: min(1120px, 100% - var(--s4)); margin-inline: auto; }

/* ---------- Topbar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 64px; padding-block: var(--s1);
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: inherit; }
/* Il logo e' il marchio: nessun riquadro CSS che lo imiti.
   Il PNG ha trasparenza gia' ritagliata, quindi sta su chiaro e su scuro. */
.brand-logo {
  width: 34px; height: 34px; flex: none;
  object-fit: contain;
  /* il disegno e' a matita: un filo di contrasto in piu' lo tiene leggibile */
  filter: contrast(1.08) saturate(1.05);
  /* marchio su carta chiara: su tema scuro il navy sparirebbe */
  background: #f7f8fa;
  border-radius: 6px;
  padding: 2px;
  box-sizing: content-box;
}
.brand-iq { color: var(--brand-green); letter-spacing: 0.01em; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 0.98rem; }
.brand-text em { font-style: normal; font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.02em; }

.topbar nav { display: flex; gap: var(--s2); margin-left: auto; flex-wrap: wrap; }
.topbar nav a {
  text-decoration: none; color: var(--ink-2); font-size: 0.88rem; font-weight: 500;
  padding: 0.35rem 0.1rem; border-bottom: 2px solid transparent;
}
.topbar nav a:hover { color: var(--ink); border-bottom-color: var(--brand); }

.env-badge {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 0.2rem 0.5rem;
  border-radius: 999px; background: var(--wip-bg); color: var(--wip);
  border: 1px solid color-mix(in srgb, var(--wip) 35%, transparent);
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(var(--s5), 8vw, 5.5rem);
  background:
    radial-gradient(70ch 40ch at 85% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    var(--surface);
  border-bottom: 1px solid var(--line);
}
.hero-inner { max-width: var(--measure); }
.eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--brand); margin-bottom: var(--s2);
}
.hl { color: var(--brand); }
.lede { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink-2); max-width: 58ch; }
.hero-actions { display: flex; gap: var(--s1); flex-wrap: wrap; margin-block: var(--s3) var(--s2); }
.note {
  font-size: 0.85rem; color: var(--ink-3);
  border-left: 3px solid var(--line); padding-left: var(--s1);
}

/* ---------- Bottoni ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 0.6rem 1.15rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-small { font-size: 0.82rem; padding: 0.4rem 0.75rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Sezioni ---------- */

.section { padding-block: clamp(var(--s5), 6vw, var(--s6)); }
.section-alt { background: var(--surface-2); border-block: 1px solid var(--line); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4);
}
.section-head h2 { margin-bottom: 0; }
.section-head .muted { margin: 0; max-width: 46ch; font-size: 0.9rem; }

.muted { color: var(--ink-3); }
.hint { font-size: 0.8rem; color: var(--ink-3); margin: var(--s2) 0 0; }
code { font-family: var(--font-mono); font-size: 0.86em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 4px; }

/* ---------- Griglia e card ---------- */

.grid { display: grid; gap: var(--s2); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3);
}
.section-alt .card { background: var(--surface); }
.card-head { display: flex; align-items: start; justify-content: space-between; gap: var(--s1); margin-bottom: var(--s1); }
.card-head h3 { margin: 0; }
.card p { color: var(--ink-2); font-size: 0.92rem; margin-bottom: var(--s1); }

.facts { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; }
.facts li { display: flex; gap: 0.5rem; padding-block: 0.2rem; border-top: 1px dashed var(--line); }
.facts li span { color: var(--ink-3); flex: 0 0 5.5rem; }

/* ---------- Tag di stato ---------- */

.tag {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.tag-ok  { color: var(--ok);  background: var(--ok-bg);  border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.tag-wip { color: var(--wip); background: var(--wip-bg); border-color: color-mix(in srgb, var(--wip) 35%, transparent); }
.tag-bad { color: var(--bad); background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }

/* ---------- Stato moduli ---------- */

.mod { display: flex; flex-direction: column; gap: 0.35rem; }
.mod-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; }
.mod-state { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ink-3); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-up { background: var(--ok); }
.dot-down { background: var(--bad); }

/* ---------- Split + form ---------- */

.split { display: grid; gap: var(--s2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

fieldset { border: 0; padding: 0; margin: 0; }
legend {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: var(--s2); padding: 0;
}
.form label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--ink-2); }
input[type="number"], input[type="text"] {
  font: inherit; font-size: 0.9rem; width: 100%;
  padding: 0.45rem 0.6rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
input:hover { border-color: var(--ink-3); }

.rows { display: grid; gap: 0.5rem; margin-block: var(--s2); }
.row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 0.4rem; align-items: end; }
.row .rm {
  background: transparent; border: 1px solid var(--line); color: var(--ink-3);
  border-radius: var(--radius-sm); cursor: pointer; padding: 0.4rem 0.55rem;
  font: inherit; line-height: 1;
}
.row .rm:hover { color: var(--bad); border-color: var(--bad); }
.form-actions { margin-top: var(--s3); }
.form-actions .btn { width: 100%; }

/* ---------- Risultato ---------- */

.result h3 { margin-bottom: var(--s2); }
.result-meta { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s2); }
.bars { display: grid; gap: 0.35rem; margin-block: var(--s2); }
.bar-row { display: grid; grid-template-columns: 5.5rem 1fr 2.5rem; gap: 0.5rem; align-items: center; font-size: 0.82rem; }
.bar-track { background: var(--surface-2); border-radius: 999px; height: 10px; overflow: hidden; }
/* display:block obbligatorio: .bar-fill e' uno <span>, e un inline box ignora
   width/height. Senza questa riga le barre misurano 0x0 e restano invisibili
   pur avendo la larghezza impostata via style. */
.bar-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius: 999px;
  transition: width .3s ease;
}
.bar-sku { font-family: var(--font-mono); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-idx { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.warnbox {
  margin-top: var(--s2); padding: var(--s1) var(--s2);
  background: var(--wip-bg); color: var(--wip);
  border-left: 3px solid var(--wip); border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.warnbox ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.errbox {
  padding: var(--s1) var(--s2); background: var(--bad-bg); color: var(--bad);
  border-left: 3px solid var(--bad); border-radius: var(--radius-sm); font-size: 0.85rem;
}

/* ---------- Steps ---------- */

.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-width: 76ch; }
.steps li { counter-increment: s; position: relative; padding-left: 3rem; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 0.85rem; font-weight: 700;
}
.steps h3 { margin-bottom: 0.25rem; }
.steps p { color: var(--ink-2); font-size: 0.92rem; margin: 0; }

/* ---------- Tabella ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 560px; }
thead th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-3); padding: 0.7rem var(--s2); background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody th, tbody td { padding: 0.7rem var(--s2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
tbody th { font-weight: 600; white-space: nowrap; }
tbody td { color: var(--ink-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--line); padding-block: var(--s3); background: var(--surface-2); }
.footer-inner { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; font-size: 0.82rem; }
.footer p { margin: 0; }

/* ---------- Breakpoint 720px ---------- */

@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; gap: var(--s1); }
  .topbar nav { order: 3; width: 100%; margin-left: 0; gap: var(--s2); padding-bottom: 0.4rem; }
  .env-badge { margin-left: auto; }
  .row { grid-template-columns: 1fr 1fr; }
  .row .rm { grid-column: 1 / -1; justify-self: end; }
  .bar-row { grid-template-columns: 4rem 1fr 2rem; }
  .facts li { flex-direction: column; gap: 0; }
  .facts li span { flex: none; }
}

/* ==========================================================================
   Sezione cliente (OMEST)
   --------------------------------------------------------------------------
   Componenti aggiunti per /omest. Stanno qui e non in un foglio separato
   perche' condividono la stessa scala di spaziatura e gli stessi colori con
   significato: due fogli divergono, uno no.
   ========================================================================== */

.section-tight { padding-block: var(--s4) 0; }

.cust-hero { padding-block: clamp(var(--s4), 6vw, var(--s5)); }

.warnbox-lg {
  padding: var(--s2) var(--s3);
  font-size: 0.9rem;
  border-left-width: 4px;
}
.warnbox-lg strong { display: block; margin-bottom: 0.3rem; font-size: 0.95rem; }
.warnbox-lg p { color: inherit; margin: 0 0 0.4rem; }
.warnbox-lg .hint { color: inherit; opacity: .85; margin: 0; }

.tag-neutral {
  color: var(--ink-2); background: var(--surface-2);
  border-color: var(--line);
}

/* --- famiglie di scenari --- */

.fam { margin-bottom: var(--s4); }
.fam:last-child { margin-bottom: 0; }
.fam-head { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; margin-bottom: 0.25rem; }
.fam-head h3 { margin: 0; }
.fam-note { font-size: 0.88rem; color: var(--ink-3); max-width: 62ch; margin-bottom: var(--s2); }

.sc-card { padding: var(--s2); display: flex; flex-direction: column; gap: 0.4rem; }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; }
.sc-id { font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.02em; }
.sc-meta { font-size: 0.78rem; color: var(--ink-3); margin: 0; font-variant-numeric: tabular-nums; }
.sc-img { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; }
.sc-btn { align-self: start; margin-top: 0.2rem; }
.sc-card .tag { font-size: 0.62rem; }

/* --- KPI --- */

.kpi { display: flex; flex-direction: column; gap: 0.15rem; }
.kpi-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin: 0; }
.kpi-value { font-size: 1.6rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi-unit { font-size: 0.8rem; color: var(--ink-3); margin: 0; }
.kpi-prov { margin-top: 0.35rem; }

/* --- confronti --- */

.q { font-size: 0.9rem; color: var(--ink-2); }
.pair { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pair.big { font-size: 1.05rem; margin-block: var(--s1); }
.vs {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 700;
}

@media (max-width: 720px) {
  .kpi-value { font-size: 1.35rem; }
}

/* Voce di navigazione verso la sezione cliente: distinguibile dalle sezioni
   interne, perche' porta fuori da questa pagina. */
.nav-cust {
  color: var(--brand) !important;
  font-weight: 600;
}

/* --- dati di campagna nella scheda scenario --- */

.sc-name { font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 0; }
.sc-desc { font-size: 0.85rem; color: var(--ink-2); margin: 0; }

.conf { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; margin: 0; font-size: 0.8rem; }
.conf dt { color: var(--ink-3); }
.conf dd { margin: 0; color: var(--ink); }

.run { border-top: 1px solid var(--line); padding-top: var(--s1); margin-top: 0.2rem; }
.run-head { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.run-cap {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 700; margin: 0.6rem 0 0.3rem;
}
.run-sub { font-size: 0.8rem; font-weight: 600; margin: var(--s1) 0 0.25rem; }

/* barre dei punteggi: label | barra | valore | peso */
.scores { display: grid; gap: 0.25rem; }
.score-row {
  display: grid; grid-template-columns: 9.5rem 1fr 2.6rem 2.2rem;
  gap: 0.4rem; align-items: center; font-size: 0.78rem;
}
.score-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.score-track { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
.score-fill { display: block; height: 100%; border-radius: 999px; }
.fill-good { background: var(--ok); }
.fill-mid { background: var(--wip); }
.fill-low { background: var(--bad); }
.score-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.score-w { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.vals { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; margin: 0; font-size: 0.78rem; }
.vals dt { color: var(--ink-3); }
.vals dd { margin: 0; font-variant-numeric: tabular-nums; }

.run-det { margin-top: var(--s1); font-size: 0.8rem; }
.run-det summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.run-det .facts { margin-top: 0.4rem; }
.constraints, .openpoints { margin: 0.25rem 0 0; padding-left: 1.1rem; color: var(--ink-2); }
.constraints li, .openpoints li { margin-bottom: 0.2rem; }
.openpoints .tag { margin-left: 0.3rem; font-size: 0.6rem; }

@media (max-width: 720px) {
  .score-row { grid-template-columns: 6.5rem 1fr 2.2rem; }
  .score-w { display: none; }
}

/* --- classifica layout (Top N) --- */

#layouts { display: grid; gap: var(--s3); }
@media (min-width: 720px) { #layouts { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }

.lay-card { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--s2); }
.lay-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lay-rank {
  font-weight: 800; font-size: 0.95rem; color: #fff; background: var(--brand);
  border-radius: var(--radius-sm); padding: 0.1rem 0.45rem;
  font-variant-numeric: tabular-nums;
}
.lay-id { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-2); }

/* L'animazione e' il contenuto: le si da' spazio, non un riquadro minuscolo. */
.lay-movie {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.lay-cap { font-size: 0.7rem; color: var(--ink-3); margin: 0; }
.lay-btn { align-self: start; font-size: 0.8rem; padding: 0.35rem 0.8rem; }

.lay-stats { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; margin: 0; font-size: 0.78rem; }
.lay-stats dt { color: var(--ink-3); }
.lay-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.lay-stop { font-size: 0.72rem; color: var(--ink-3); margin: 0; font-style: italic; }


/* --------------------------------------------------------------------------
   Logo del marchio nella sezione cliente
   --------------------------------------------------------------------------
   Il logo completo (simbolo + wordmark + le cinque famiglie di capacità) e'
   1024px in origine, ritagliato e ridotto a 880. Si mostra a dimensione
   leggibile ma non gigante: e' un'intestazione, non un poster.
   -------------------------------------------------------------------------- */

.cust-logo {
  display: block;
  width: min(360px, 72%);
  height: auto;
  margin-bottom: var(--s3);
  /* Il logo e' disegnato a matita su carta chiara: navy e verde su fondo
     bianco. Su tema scuro sarebbe illeggibile (verificato: navy #103060 su
     sfondo #141a23 quasi scompare). Non lo si ricolora — sarebbe un altro
     marchio — gli si da' il suo supporto chiaro, come un timbro su carta. */
  background: #f7f8fa;
  border-radius: var(--radius);
  padding: var(--s2);
  box-sizing: content-box;
}

@media (max-width: 720px) {
  .cust-logo { width: min(260px, 82%); }
  .brand-logo { width: 28px; height: 28px; }
}

/* --------------------------------------------------------------------------
   Pianta 2D delle porte (disegnatore indipendente del minisito)
   -------------------------------------------------------------------------- */

.door-plan-card { padding: var(--s2); }
.door-plan-svg { display: block; width: 100%; height: auto; background: var(--surface-2); border-radius: var(--radius-sm); }

.door-plan-svg .body { fill: color-mix(in srgb, var(--brand) 8%, transparent); stroke: var(--ink-3); stroke-width: 1.5; }
.door-plan-svg .body-east { fill: color-mix(in srgb, var(--brand-green, #007030) 8%, transparent); }

.door-plan-svg .grid line { stroke: var(--line); stroke-width: 0.5; stroke-dasharray: 2 4; }
.door-plan-svg .gridlabel { fill: var(--ink-3); font-size: 9px; font-family: var(--font-mono); }

.door-plan-svg .door { stroke: var(--ink); stroke-width: 0.75; }
.door-plan-svg .door-dock { fill: #9c3b35; }
.door-plan-svg .door-apron { fill: #c77a4a; }
.door-plan-svg .door-gap { fill: #2f6b4f; }

.door-plan-svg .door-id { font-size: 11px; font-weight: 700; fill: var(--ink); font-family: var(--font-mono); }

.door-plan-svg .compass line { stroke: var(--ink-3); stroke-width: 1.5; }
.door-plan-svg .compass polygon { fill: var(--ink-3); }
.door-plan-svg .compass-n { fill: var(--ink-3); font-size: 10px; font-weight: 700; }

.door-plan-legend { font-size: 0.78rem; color: var(--ink-3); margin: var(--s2) 0 0; }

/* --------------------------------------------------------------------------
   Mappa 2D colorata di un layout (layoutmap.js)
   --------------------------------------------------------------------------
   Il disegno è un SVG che si adatta alla larghezza della scheda. Il colore
   distingue tre cose: rack esistenti (grigio), zone funzionali (tinte), rack
   proposti (verde). Le tinte delle zone non usano verde/ambra/rosso: quella
   scala è riservata allo stato verificato/provvisorio/guasto.
   -------------------------------------------------------------------------- */

.laymap { display: grid; gap: 0.4rem; margin: 0 0 0.25rem; }

.laymap-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.laymap-floor { fill: var(--surface); }

.laymap-outline {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 30%, transparent);
  stroke-width: 1;
}

/* Rack esistenti: il vincolo di partenza, in secondo piano. Grigio abbastanza
   scuro da leggersi sul pavimento bianco: a 34% sembravano aree vuote e la
   legenda diceva una cosa che il disegno non mostrava. */
.laymap-existing { fill: color-mix(in srgb, var(--ink-3) 62%, transparent); }

/* Rack proposti: il risultato. Opaco, sopra le zone. */
.laymap-racks { fill: color-mix(in srgb, var(--brand-green) 78%, transparent); }

.laymap-zone { fill-opacity: 0.42; stroke: none; }
.laymap-zone:hover { fill-opacity: 0.72; }

.laymap-grid line { stroke: var(--line); stroke-width: 0.4; stroke-dasharray: 2 6; opacity: 0.7; }

.laymap-scale line { stroke: var(--ink-3); stroke-width: 1.5; }
.laymap-scale text { fill: var(--ink-3); font-size: 9px; font-family: var(--font-mono); }
.laymap-compass line { stroke: var(--ink-3); stroke-width: 1.2; }
.laymap-compass polygon { fill: var(--ink-3); }
.laymap-compass text { fill: var(--ink-3); font-size: 9px; font-weight: 700; }

.laymap-legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.7rem;
  font-size: 0.7rem; color: var(--ink-2);
}
.laymap-legend li { display: flex; align-items: center; gap: 0.28rem; }

.laymap-swatch {
  width: 11px; height: 11px; border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  flex: 0 0 auto;
}
.laymap-swatch.laymap-existing { background: color-mix(in srgb, var(--ink-3) 62%, transparent); }
.laymap-swatch.laymap-racks { background: color-mix(in srgb, var(--brand-green) 78%, transparent); }

.laymap-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.laymap-facts { font-size: 0.68rem; color: var(--ink-3); margin: 0; font-family: var(--font-mono); }
.laymap-note { font-size: 0.65rem; color: var(--ink-3); margin: 0; font-style: italic; }

/* La GIF è cliccabile verso il 3D: si deve capire che è un link, senza
   appiccicarle sopra un bottone che coprirebbe il disegno. */
.lay-movie-link { display: block; position: relative; }
.lay-movie-link:hover .lay-movie { outline: 2px solid var(--brand); outline-offset: 1px; }
.lay-movie-link::after {
  content: "3D ↗";
  position: absolute; right: 6px; bottom: 6px;
  background: color-mix(in srgb, var(--brand) 88%, transparent);
  color: #fff; font-size: 0.68rem; font-weight: 700;
  padding: 0.12rem 0.4rem; border-radius: 4px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Menu secondario: sottopagine dell'area cliente
   --------------------------------------------------------------------------
   "Layout & 3D" sta SOTTO "Cliente OMEST", non accanto: è una sezione
   dell'area cliente, non una voce di pari livello. Visivamente si distingue
   per una barra più leggera e un'altezza minore.
   -------------------------------------------------------------------------- */

.subnav {
  display: flex; gap: var(--s2); align-items: center;
  padding-block: 0.35rem;
  border-top: 1px solid var(--line);
}
.subnav nav { display: flex; gap: var(--s2); flex-wrap: wrap; }
.subnav a {
  text-decoration: none; font-size: 0.82rem; font-weight: 500;
  color: var(--ink-3); padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] {
  color: var(--brand); border-bottom-color: var(--brand);
}

.nav-cust[aria-current="page"] { border-bottom-color: var(--brand-green, #007030); }

@media (max-width: 720px) {
  .subnav { padding-block: 0.25rem; }
  .subnav a { font-size: 0.78rem; }
}

/* --------------------------------------------------------------------------
   Doppio marchio nell'area cliente
   --------------------------------------------------------------------------
   La pagina è della piattaforma (wareIQ) ma riguarda un cliente (OMEST):
   mostrarli entrambi dice a chi appartiene ciò che si sta guardando. Il logo
   del cliente sta sotto, separato da "per", perché non sono due marchi
   equivalenti: è il contesto.
   -------------------------------------------------------------------------- */

.cust-brand {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s1); margin-bottom: var(--s3);
}
.cust-brand-for {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-3); margin: 0;
}
.cust-client-logo {
  width: clamp(140px, 22vw, 220px); height: auto; display: block;
  /* il wordmark è navy: su tema scuro serve un fondo chiaro, come il logo */
  background: #f7f8fa; padding: 6px 10px; border-radius: var(--radius-sm);
  box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   Accesso all'area cliente (login.html)
   --------------------------------------------------------------------------
   Una card sola, centrata, senza navigazione: da qui si può solo entrare o
   andarsene. Il resto del sito non è raggiungibile finché non si è dentro, e
   mostrare il menu suggerirebbe il contrario.
   -------------------------------------------------------------------------- */

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 60%),
    var(--surface-2);
  padding: var(--s3) var(--s2);
}

.login-wrap { width: 100%; max-width: 380px; }

.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4) var(--s3);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.04), 0 8px 24px rgba(16, 21, 28, 0.06);
}

.login-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--s3); }
.login-brand .brand-logo { width: 40px; height: 40px; }

.login-title { font-size: 1.05rem; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.login-sub { font-size: 0.8rem; margin: 0 0 var(--s3); line-height: 1.5; }

/* Il form usa la stessa scala di spaziatura del resto: nessun valore nuovo. */
#login-form { display: grid; gap: 0.35rem; }

#login-form label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
#login-form label:not(:first-of-type) { margin-top: 0.35rem; }

#login-form input[type="email"],
#login-form input[type="password"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

#login-form input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

.login-btn {
  margin-top: var(--s2);
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 0.86rem;
  font-weight: 600;
}
.login-btn[disabled] { opacity: 0.6; cursor: progress; }

.login-error { margin: var(--s2) 0 0; font-size: 0.76rem; }

.login-foot {
  margin: var(--s3) 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  border-top: 1px solid var(--line);
  padding-top: var(--s2);
}

/* Uscita dall'area cliente.
   Sta dove prima c'era il badge "dev": dentro l'area riservata un badge
   d'ambiente non serve a nessuno, mentre un modo per uscire serve sempre.
   Discreto — non è l'azione principale della pagina — ma sempre presente. */
.logout {
  font-size: 0.74rem;
  color: var(--ink-3);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  white-space: nowrap;
}
.logout:hover { color: var(--ink); border-color: var(--ink-3); }