/* esrs-standard-framework webapp — CSS a mano, nessuna dipendenza esterna.
   Obiettivo: densita' informativa da consulente/auditor, non marketing.
   Distinzioni cromatiche sempre FUNZIONALI (status/grounding/normativo-proxy),
   mai decorative. Leggibile anche stampata. */

:root {
  --fg: #1a1d21;
  --fg-muted: #5b6470;
  --bg: #ffffff;
  --bg-alt: #f4f6f8;
  --bg-panel: #ffffff;
  --border: #d3d9e0;
  --border-strong: #9aa5b1;
  --link: #1a5fb4;
  --link-visited: #5e3c99;

  --status-generated-bg: #efe6d8;
  --status-generated-fg: #6b4f1d;
  --status-verified-bg: #d9f0df;
  --status-verified-fg: #14602f;
  --status-rejected-bg: #f7dede;
  --status-rejected-fg: #8a1f1f;

  --ground-certain-bg: #d9f0df;
  --ground-certain-fg: #14602f;
  --ground-infer-bg: #fdf0cf;
  --ground-infer-fg: #7a5600;
  --ground-none-bg: #f7dede;
  --ground-none-fg: #8a1f1f;
  --ground-cross-bg: #e3e8f7;
  --ground-cross-fg: #2c3e91;

  --normative-bg: #dce7fb;
  --normative-fg: #12408a;
  --proxy-bg: #f1e1fb;
  --proxy-fg: #5a1e8a;

  --relevance-high-bg: #f7dede;
  --relevance-high-fg: #8a1f1f;
  --relevance-medium-bg: #fdf0cf;
  --relevance-medium-fg: #7a5600;
  --relevance-low-bg: #eceff3;
  --relevance-low-fg: #4a5261;

  --polarity-negative: #8a1f1f;
  --polarity-positive: #14602f;

  --error-bg: #f7dede;
  --error-fg: #8a1f1f;
  --error-border: #d99b9b;

  /* --- token nuovi: builder aziendale (client.company_*) ------------------
     Solo tre token nuovi, tutto il resto riusa le famiglie status/ground/
     relevance/polarity gia' definite sopra. */
  --weight-bar-track-bg: #e4e9ef;
  --weight-bar-fill: #1a5fb4;
  --excluded-bg: #f4f6f8;
  --excluded-fg: #7a8290;

  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-alt);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.45;
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }

code {
  font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.92em;
  background: var(--bg-alt);
  padding: 0.05em 0.35em;
  border-radius: 3px;
}

.global-banner {
  background: #2b2118;
  color: #f4e6c8;
  padding: 0.5em 1.2em;
  font-size: 0.85em;
  text-align: center;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--fg);
  color: #fff;
  padding: 0.7em 1.4em;
}
.brand { font-weight: 700; letter-spacing: 0.02em; }
.brand-sub { font-weight: 400; color: #b7c0cc; margin-left: 0.4em; }
.topbar nav a {
  color: #dfe6ee;
  text-decoration: none;
  margin-left: 1.4em;
  font-size: 0.92em;
}
.topbar nav a:hover { color: #fff; text-decoration: underline; }
.topbar nav .link-button {
  background: none;
  border: none;
  color: #dfe6ee;
  text-decoration: none;
  margin-left: 1.4em;
  font-size: 0.92em;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
.topbar nav .link-button:hover { color: #fff; text-decoration: underline; }

main {
  max-width: 1400px;
  margin: 1.4em auto;
  padding: 0 1.4em 3em;
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.4em 1.6em;
  margin-bottom: 1.4em;
}

h1 { font-size: 1.5em; margin: 0 0 0.3em; }
h2 { font-size: 1.15em; margin: 1.4em 0 0.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
h3 { font-size: 1.02em; margin: 0.6em 0 0.3em; }
h4 { font-size: 0.95em; margin: 1em 0 0.3em; color: var(--fg-muted); }
h5 { font-size: 0.9em; margin: 0.8em 0 0.3em; color: var(--fg-muted); }

.lead { color: var(--fg-muted); max-width: 90ch; }
.hint { color: var(--fg-muted); font-size: 0.88em; max-width: 90ch; }
.muted { color: var(--fg-muted); }
.count { font-weight: 600; }
.empty { color: var(--fg-muted); font-style: italic; }

.flash {
  background: var(--status-verified-bg);
  color: var(--status-verified-fg);
  border: 1px solid var(--status-verified-fg);
  padding: 0.6em 1em;
  border-radius: 4px;
  margin-bottom: 1em;
}

footer {
  max-width: 1400px;
  margin: 0 auto 2em;
  padding: 0 1.4em;
  color: var(--fg-muted);
  font-size: 0.82em;
}

/* --- tabelle ------------------------------------------------------------ */

table.dense {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}
table.dense th, table.dense td {
  border: 1px solid var(--border);
  padding: 0.4em 0.55em;
  text-align: left;
  vertical-align: top;
}
table.dense thead th {
  background: var(--bg-alt);
  font-weight: 600;
  position: sticky;
  top: 0;
}
table.kv-table th {
  width: 14em;
  background: var(--bg-alt);
  font-weight: 600;
  font-family: monospace;
  font-size: 0.85em;
}
table.matrix td.subtopic-cell { width: 18em; background: var(--bg-alt); }
table.matrix td.stage-cell { width: 40%; }
table.matrix th.col-stage { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8em; }

.descr { max-width: 32ch; }
.descr-full { max-width: 90ch; }

.reasons { margin: 0; padding-left: 1.1em; font-size: 0.92em; }
.grounding-list { margin: 0; padding-left: 1.1em; list-style: none; }
.grounding-list li { margin-bottom: 0.25em; }
.grounding-cell { max-width: 26em; }

/* --- badge/pill ---------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 0.12em 0.55em;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-generated { background: var(--status-generated-bg); color: var(--status-generated-fg); }
.badge-verified  { background: var(--status-verified-bg);  color: var(--status-verified-fg); }
.badge-rejected  { background: var(--status-rejected-bg);  color: var(--status-rejected-fg); }

.badge-unique-match   { background: var(--ground-certain-bg); color: var(--ground-certain-fg); }
.badge-topic-tiebreak { background: var(--ground-infer-bg);   color: var(--ground-infer-fg); }
.badge-unresolved     { background: var(--ground-none-bg);    color: var(--ground-none-fg); }
.badge-cross-cutting  { background: var(--ground-cross-bg);   color: var(--ground-cross-fg); }

.badge-normative { background: var(--normative-bg); color: var(--normative-fg); }
.badge-proxy {
  background: var(--proxy-bg);
  color: var(--proxy-fg);
  border-style: dashed;
  border-color: var(--proxy-fg);
}

.badge-relevance-high   { background: var(--relevance-high-bg);   color: var(--relevance-high-fg); }
.badge-relevance-medium { background: var(--relevance-medium-bg); color: var(--relevance-medium-fg); }
.badge-relevance-low    { background: var(--relevance-low-bg);    color: var(--relevance-low-fg); }

.badge-kind { background: var(--bg-alt); color: var(--fg-muted); border-color: var(--border); }
.badge-polarity-negative { background: var(--relevance-high-bg); color: var(--polarity-negative); }
.badge-polarity-positive { background: var(--status-verified-bg); color: var(--polarity-positive); }

.pill {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.5em;
  font-size: 0.82em;
  margin-right: 0.3em;
}

.provenance { color: var(--fg-muted); font-size: 0.85em; }
.review-trail { background: var(--bg-alt); border-left: 3px solid var(--border-strong); padding: 0.5em 0.8em; font-size: 0.9em; }

/* --- filtri e form -------------------------------------------------------- */

.filters {
  display: flex;
  gap: 1.2em;
  align-items: end;
  flex-wrap: wrap;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.8em 1em;
  margin-bottom: 1em;
}
.filters label { display: flex; flex-direction: column; font-size: 0.85em; gap: 0.25em; }
.filters input, .filters select { padding: 0.3em; border: 1px solid var(--border-strong); border-radius: 3px; }
.filters button { align-self: end; padding: 0.4em 1em; }

.review-form {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.9em 1em;
  background: var(--bg-alt);
  max-width: 70ch;
}
.review-form-row { display: flex; gap: 1em; margin-bottom: 0.6em; flex-wrap: wrap; }
.review-form-row label { display: flex; flex-direction: column; font-size: 0.85em; gap: 0.25em; flex: 1 1 12em; }
.review-form-row label.grow { flex: 2 1 20em; }
.review-form input, .review-form select, .review-form textarea {
  padding: 0.4em;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.95em;
}
.review-form .required { color: var(--polarity-negative); }
.review-form button {
  background: var(--fg);
  color: #fff;
  border: none;
  padding: 0.5em 1.2em;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.review-form button:hover { background: #333; }

.form-error {
  background: var(--error-bg);
  color: var(--error-fg);
  border: 1px solid var(--error-border);
  border-radius: 4px;
  padding: 0.5em 0.8em;
  font-size: 0.9em;
}

.error-panel h1 { color: var(--error-fg); }

/* --- card impatto (matrice) / card KPI (dettaglio) ----------------------- */

.impact-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5em 0.6em;
  margin-bottom: 0.5em;
  background: var(--bg);
  text-decoration: none;
  color: inherit;
}
.impact-card:hover { border-color: var(--border-strong); background: var(--bg-alt); }
.impact-card-head { display: flex; gap: 0.4em; margin-bottom: 0.3em; flex-wrap: wrap; }
.impact-card-descr { margin: 0 0 0.3em; font-size: 0.92em; }
.impact-card-meta { font-size: 0.78em; color: var(--fg-muted); }

.impact-summary { display: flex; gap: 0.4em; align-items: center; flex-wrap: wrap; margin-bottom: 0.6em; }

.kpi-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1em 1.2em;
  margin-bottom: 1em;
  background: var(--bg-alt);
}
.kpi-card-head { display: flex; align-items: center; gap: 0.8em; margin-bottom: 0.4em; }
.kpi-card-head h3 { margin: 0; }
.kpi-datapoint { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.6em 0.8em; margin-bottom: 0.6em; }
.formula { display: inline-block; padding: 0.3em 0.5em; }

.breadcrumb { margin-bottom: 0.6em; font-size: 0.88em; }

/* --- stampa --------------------------------------------------------------- */

@media print {
  .global-banner, .topbar nav, footer, .filters, .review-form { display: none; }
  body { background: #fff; }
  .panel { border: none; padding: 0; }
  a { color: #000; text-decoration: underline; }
  .impact-card:hover { background: none; }
}

/* --- responsive minimale --------------------------------------------------- */

@media (max-width: 800px) {
  table.matrix td.stage-cell { width: auto; display: block; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 0.4em; }
}

/* --- builder aziendale (client.company_*) ---------------------------------
   Solo aggiunte: badge/forme nuove, nessuna regola esistente toccata. */

.badge-manual { background: var(--bg-alt); color: var(--fg-muted); border-style: dashed; }

.weight-bar-wrap { display: inline-flex; align-items: center; gap: 0.5em; min-width: 10em; }
.weight-bar-track {
  flex: 1 1 6em;
  height: 0.7em;
  background: var(--weight-bar-track-bg);
  border-radius: 999px;
  overflow: hidden;
}
.weight-bar-fill { display: block; height: 100%; background: var(--weight-bar-fill); }
.weight-bar-label { font-size: 0.85em; color: var(--fg-muted); white-space: nowrap; }

.weight-banner {
  display: flex;
  align-items: center;
  gap: 0.8em;
  flex-wrap: wrap;
  padding: 0.7em 1em;
  border-radius: 4px;
  margin-bottom: 1em;
  border: 1px solid var(--border);
}
.weight-banner-ok { background: var(--status-verified-bg); border-color: var(--status-verified-fg); }
.weight-banner-bad { background: var(--status-rejected-bg); border-color: var(--status-rejected-fg); }

.notice-panel {
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  padding: 0.8em 1em;
  margin-top: 0.8em;
}

.inline-form { display: inline-flex; gap: 0.5em; align-items: center; }
.inline-form input { padding: 0.3em; border: 1px solid var(--border-strong); border-radius: 3px; }
.inline-form button {
  background: var(--fg);
  color: #fff;
  border: none;
  padding: 0.35em 0.9em;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.cli-command {
  background: var(--fg);
  color: #e6ecf3;
  padding: 0.8em 1em;
  border-radius: 4px;
  overflow-x: auto;
  font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.88em;
  white-space: pre-wrap;
  word-break: break-all;
}

.excluded-row { background: var(--excluded-bg); color: var(--excluded-fg); }
.exclusion-note { font-size: 0.85em; color: var(--fg-muted); }

/* Sezione "esclusi" (KPI o impatti): separata e visivamente distinta dalla
   lista principale, mai mescolata -- riusa i token --excluded-bg/-fg gia'
   esistenti, nessun token nuovo necessario. */
.excluded-section {
  border-left: 4px solid var(--excluded-fg);
  background: var(--excluded-bg);
}
.excluded-section h2 { color: var(--excluded-fg); border-bottom-color: var(--excluded-fg); }

table.nace-mix td { vertical-align: middle; }

/* Perimetro delle controllate (client.company_subsidiary[_sector]) --------
   Riusa i token esistenti: confidenza bassa prende gli stessi colori
   "inferenza/da rivedere" gia' usati per resolution_method_badge
   topic_tiebreak, nessun token nuovo. */
tr.confidence-low { background: var(--ground-infer-bg); }
tr.confidence-low td { color: var(--ground-infer-fg); }

details.subsidiary-form-toggle { margin-top: 0.6em; }
details.subsidiary-form-toggle > summary { cursor: pointer; font-weight: 600; color: var(--link); }

/* --- pagina Documentazione (docs/DOCUMENTAZIONE.md, GET /docs) -----------
   TOC come colonna laterale via grid; sotto gli 800px collassa sopra al
   contenuto (stessa soglia responsive gia' in uso per table.matrix). */

.docs-body-wrap {
  display: grid;
  grid-template-columns: 16em minmax(0, 1fr);
  gap: 2em;
  align-items: start;
}

.docs-toc {
  position: sticky;
  top: 1em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.8em 1em;
  font-size: 0.88em;
}
.docs-toc-title { margin: 0 0 0.4em; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.04em; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc li { margin: 0.25em 0; }
.docs-toc-level-3 { padding-left: 1em; }
.docs-toc a { text-decoration: none; }
.docs-toc a:hover { text-decoration: underline; }

/* Corpo del markdown reso: larghezza di riga leggibile (non l'intero 1fr
   della grid su schermi larghi), spaziatura di titoli/paragrafi/liste
   coerente con .panel/h1-h5 gia' definiti sopra -- qui solo cio' che quelle
   regole non coprono (markdown-it non emette classi, solo tag nudi). */
.docs-content { max-width: 78ch; }
.docs-content h2:first-child, .docs-content h3:first-child { margin-top: 0; }
.docs-content p { margin: 0.6em 0; }
.docs-content ul, .docs-content ol { margin: 0.6em 0; padding-left: 1.6em; }
.docs-content li { margin: 0.2em 0; }
.docs-content li > p { margin: 0.2em 0; }
.docs-content blockquote {
  margin: 0.8em 0;
  padding: 0.4em 1em;
  border-left: 3px solid var(--border-strong);
  background: var(--bg-alt);
  color: var(--fg-muted);
}
.docs-content hr { border: none; border-top: 1px solid var(--border); margin: 1.4em 0; }
.docs-content a { word-break: break-word; }

.docs-content pre {
  background: var(--fg);
  color: #e6ecf3;
  padding: 0.8em 1em;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.4;
}
.docs-content pre code { background: none; padding: 0; color: inherit; }
.docs-content :not(pre) > code { background: var(--bg-alt); }

.docs-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.8em 0;
  font-size: 0.9em;
}
.docs-content th, .docs-content td {
  border: 1px solid var(--border);
  padding: 0.4em 0.6em;
  text-align: left;
  vertical-align: top;
}
.docs-content thead th { background: var(--bg-alt); font-weight: 600; }

@media (max-width: 800px) {
  .docs-body-wrap { grid-template-columns: 1fr; }
  .docs-toc { position: static; }
}