/* Cosmo Energia · Configuratore Strutture FV · foglio di stile unico */

/* ---------- Base ---------- */
.csf-app {
  --csf-ink: #172b44;
  --csf-muted: #526478;
  --csf-line: #e0e7f0;
  --csf-panel: #f7f9fc;
  --csf-brand: #123b68;
  --csf-accent: #0c65b8;
  --csf-focus: #f89b22;
  --csf-ok: #1f7a3f;
  --csf-ko: #ad2b23;
  --csf-warn: #8a5200;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--csf-ink);
  font-size: 14px;
  line-height: 1.45;
  max-width: 1180px;
  margin: 20px auto;
}
.csf-app *, .csf-app *::before, .csf-app *::after { box-sizing: border-box; }
.csf-app p { margin: 0 0 8px; }

.csf-header { background: var(--csf-brand); color: #fff; padding: 18px 24px; border-radius: 12px 12px 0 0; }
.csf-app .csf-header h2 { color: #fff; margin: 0; font-size: 22px; line-height: 1.25; }
.csf-app .csf-header p { margin: 4px 0 0; color: #dce9f7; font-size: 13px; }
.csf-main { border: 1px solid #d9e3ee; border-top: 0; padding: 18px; border-radius: 0 0 12px 12px; background: #fff; }

.csf-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.csf-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.csf-controls, .csf-results { min-width: 0; }

/* ---------- Scelta della tipologia di copertura ---------- */
.csf-app[hidden] { display: none !important; }
.csf-suite { max-width: 1180px; margin: 20px auto 0; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: #172b44; }
.csf-suite .csf-app { margin-top: 12px; }
.csf-mode { border: 1px solid #d9e3ee; border-radius: 12px; padding: 12px 14px 14px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #fff; }
.csf-mode legend { font-size: 13px; font-weight: 700; padding: 0 6px; color: #123b68; }
.csf-mode-option { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 40px; border: 2px solid #d9e3ee; border-radius: 10px; cursor: pointer; background: #f7f9fc; margin: 0; }
.csf-mode-option input { position: absolute; left: 14px; top: 15px; margin: 0; width: 16px; height: 16px; accent-color: #0c65b8; }
.csf-mode-option:has(input:checked) { border-color: #0c65b8; background: #eef5fd; }
.csf-mode-option:has(input:focus-visible) { outline: 2px solid #f89b22; outline-offset: 2px; }
.csf-mode-title { font-weight: 700; font-size: 15px; }
.csf-mode-sub { font-size: 13px; color: #526478; }
.csf-mode-badge { position: absolute; right: 10px; top: 10px; font-size: 11px; font-weight: 700; color: #8a5200; background: #fff3dd; border-radius: 999px; padding: 1px 8px; }
.csf-mode-note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #526478; }
.csf-swatch-dot { width: 10px; height: 10px; border-radius: 50%; }
.csf-figure-detail { margin-top: 12px; }
.csf-app .csf-detail-title { font-size: 12px; font-weight: 700; color: var(--csf-brand); margin: 0 0 4px; }
@media (max-width: 560px) { .csf-mode { grid-template-columns: 1fr; } }

/* ---------- Pannelli dei comandi ---------- */
.csf-panel { background: var(--csf-panel); border: 1px solid var(--csf-line); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; min-width: 0; }
.csf-app .csf-panel h3 { font-size: 15px; margin: 0 0 12px; color: var(--csf-ink); }
.csf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.csf-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; min-width: 0; }
.csf-app .csf-field label { font-size: 12px; font-weight: 650; margin: 0; }
.csf-unit { font-weight: 400; color: var(--csf-muted); font-size: 12px; }
.csf-hint { font-size: 12px; color: var(--csf-muted); }
.csf-app .csf-input {
  height: 36px; width: 100%; margin: 0; padding: 5px 8px;
  border: 1px solid #cbd7e3; border-radius: 6px; background: #fff; color: var(--csf-ink);
  font: inherit; font-size: 14px; box-shadow: none;
}
.csf-app .csf-input.csf-invalid { border-color: var(--csf-ko); background: #fff5f4; }
.csf-app .csf-field-msg { margin: 0; font-size: 12px; color: var(--csf-ko); }
.csf-fieldset { border: 0; padding: 0; margin: 4px 0 6px; min-width: 0; }
.csf-app .csf-fieldset legend { font-size: 12px; font-weight: 700; color: var(--csf-brand); padding: 0; margin: 0 0 6px; }
.csf-row { display: grid; grid-template-columns: 52px 76px 1fr 34px; align-items: center; gap: 8px; margin: 0 0 7px; }
.csf-app .csf-row label { font-size: 13px; margin: 0; }
.csf-row .csf-field-msg { grid-column: 1 / -1; }
.csf-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 0 4px; }
.csf-app .csf-checkbox input { width: auto; margin: 0; }

/* ---------- Pulsanti ---------- */
.csf-app .csf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; padding: 9px 12px; margin: 0;
  background: var(--csf-accent); color: #fff; font: inherit; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none;
}
.csf-app .csf-btn.secondary { background: #e5edf7; color: #173f6a; }
.csf-app .csf-btn.small { padding: 6px 10px; }
.csf-app .csf-btn[disabled] { opacity: .45; cursor: not-allowed; }
.csf-app .csf-btn:focus-visible,
.csf-app .csf-input:focus-visible,
.csf-app input[type="checkbox"]:focus-visible { outline: 2px solid var(--csf-focus); outline-offset: 2px; }

/* ---------- Avvisi ---------- */
.csf-notice { border-radius: 8px; padding: 9px 12px; margin: 0 0 12px; font-size: 13px; border-left: 4px solid; }
.csf-notice-info { background: #eef5fd; border-color: var(--csf-accent); }
.csf-notice-ok { background: #edf8f1; border-color: var(--csf-ok); }
.csf-notice-warn { background: #fff7e8; border-color: #d68b16; }
.csf-notice-error { background: #fdeeed; border-color: var(--csf-ko); color: #7d1d17; }
.csf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Vincoli geometrici non rispettati ---------- */
.csf-alert { background: #fdeeed; border: 1px solid #e7b4b0; border-left: 5px solid var(--csf-ko); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; color: #5f1510; font-size: 13px; }
.csf-app .csf-alert-title { font-weight: 700; font-size: 14px; color: var(--csf-ko); margin: 0 0 4px; }
.csf-alert ul { margin: 0; padding-left: 18px; }
.csf-alert li { margin: 2px 0; }
.csf-alert-inline { padding: 7px 12px; font-size: 12px; }
.csf-void { color: var(--csf-ko); font-weight: 700; white-space: nowrap; }

/* ---------- Sezioni dei risultati ---------- */
.csf-section { border: 1px solid var(--csf-line); border-radius: 10px; padding: 16px; margin: 0 0 16px; background: #fff; min-width: 0; }
.csf-app .csf-section h3 { font-size: 17px; margin: 0 0 2px; color: var(--csf-brand); }
.csf-app .csf-section h4 { font-size: 14px; margin: 18px 0 6px; }
.csf-app .csf-section-sub { margin: 0 0 12px; font-size: 12px; color: var(--csf-muted); }
.csf-figure { margin: 0; }
.csf-canvas { background: #fff; border: 1px solid #d8e4ef; border-radius: 8px; padding: 10px; overflow: hidden; }
.csf-canvas svg { display: block; width: 100%; height: auto; max-height: 460px; }
.csf-legend { display: flex; gap: 6px 15px; flex-wrap: wrap; font-size: 12px; margin: 9px 0; }
.csf-swatch { display: inline-block; width: 14px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: baseline; }
.csf-swatch-dashed { background: transparent; border: 2px dashed; height: 10px; }
.csf-metrics { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.csf-metric { padding: 10px; background: #edf4fc; border-radius: 7px; flex: 1; min-width: 120px; }
.csf-metric strong { display: block; font-size: 18px; }
.csf-metric small { color: #486179; font-size: 12px; }
.csf-note { font-size: 12px; color: var(--csf-muted); }
.csf-warning { background: #fff7e8; border-left: 4px solid #d68b16; padding: 10px 13px; font-size: 12px; margin: 12px 0; }

/* ---------- Tabelle ---------- */
.csf-table-scroll { width: 100%; overflow-x: auto; }
.csf-app .csf-table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 0; }
.csf-app .csf-table th, .csf-app .csf-table td { border: 0; border-bottom: 1px solid #e1e8f0; padding: 8px 7px; text-align: left; vertical-align: top; }
.csf-app .csf-table th { font-size: 12px; }
.csf-app .csf-table .num { text-align: right; white-space: nowrap; }
.csf-basis { color: var(--csf-muted); font-size: 12px; }
.csf-row-candidate td { background: #f8f2fc; }
.csf-checks td:first-child { font-weight: 600; white-space: nowrap; }
.csf-checks td:last-child { font-size: 12px; }

.csf-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.csf-chip-geo { background: #e8f0fa; color: #1d4f86; }
.csf-chip-hyp { background: #fff3dd; color: var(--csf-warn); }
.csf-chip-partial, .csf-chip-validate { background: #f3eafa; color: #6b2b94; }
.csf-chip-design, .csf-chip-ko { background: #fdeeed; color: var(--csf-ko); }
.csf-chip-ok { background: #e7f5ec; color: var(--csf-ok); }
.csf-chip-info { background: #eef1f5; color: #3d5168; }
.csf-chip-none { background: #fff; color: #5b6b7d; border-color: #b9c6d4; }

/* ---------- Adattamenti alla pagina WordPress ---------- */
body.cosmo-strutture-page .wp-block-post-featured-image,
body.cosmo-strutture-page .post-thumbnail,
body.cosmo-strutture-page .featured-image { display: none !important; }
body.cosmo-strutture-page .site-footer a[href*="contatt"].button { display: none !important; }

/* ---------- Schermi piccoli ---------- */
@media (max-width: 860px) {
  .csf-grid { grid-template-columns: 1fr; }
  .csf-main { padding: 12px; }
  .csf-header { padding: 15px; }
  .csf-checks td:first-child { white-space: normal; }
}

@media (max-width: 560px) {
  .csf-app .csf-checks thead { display: none; }
  .csf-app .csf-checks tr { display: block; border-bottom: 1px solid #e1e8f0; padding: 6px 0; }
  .csf-app .csf-checks td { display: inline-block; border: 0; padding: 2px 7px 2px 0; }
  .csf-app .csf-checks td:last-child { display: block; }
}

/* ---------- Stampa ---------- */
#csf-print-root, .csf-watermark { display: none; }

@media print {
  @page { size: A4; margin: 12mm; }

  /* Documento tecnico dedicato: tutto il resto della pagina (tema, menu, barra admin) è nascosto. */
  html.csf-printing, html.csf-printing body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  html.csf-printing body > *:not(#csf-print-root) { display: none !important; }
  html.csf-printing #csf-print-root { display: block !important; }

  .csf-app { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Tipografia compatta: obiettivo due pagine A4 per le configurazioni ordinarie. */
  #csf-print-root { max-width: none; margin: 0; font-size: 8.5pt; line-height: 1.3; color: #000; }
  #csf-print-root p { margin: 0 0 1.5mm; }
  #csf-print-root .csf-print-head { display: block !important; visibility: visible !important; border-bottom: 2px solid #123b68; padding: 0 0 2mm; margin: 0 0 3mm; break-inside: avoid; }
  #csf-print-root .csf-print-head p { visibility: visible !important; }
  #csf-print-root .csf-print-brand { font-size: 7.5pt; color: #333; margin: 0 0 .5mm; }
  #csf-print-root .csf-print-title { display: block !important; font-size: 13pt; font-weight: 700; color: #123b68; margin: 0 0 1mm; }
  #csf-print-root .csf-print-meta { display: flex !important; gap: 10mm; margin: 0; font-size: 8.5pt; }

  #csf-print-root .csf-section { border: 0; border-radius: 0; padding: 0; margin: 0 0 3.5mm; }
  #csf-print-root .csf-section h3 { font-size: 11pt; break-after: avoid; border-bottom: 1px solid #c6d4e3; padding: 0 0 .8mm; margin: 0 0 1.2mm; }
  #csf-print-root .csf-section h4 { font-size: 9pt; margin: 2.2mm 0 1mm; break-after: avoid; }
  #csf-print-root .csf-section-sub { font-size: 7.5pt; margin: 0 0 1.2mm; break-after: avoid; }
  #csf-print-root .csf-note, #csf-print-root .csf-basis, #csf-print-root .csf-legend { font-size: 7.5pt; }

  #csf-print-root .csf-figure, #csf-print-root .csf-metrics, #csf-print-root .csf-warning,
  #csf-print-root .csf-keep, #csf-print-root .csf-notice { break-inside: avoid; }
  #csf-print-root .csf-table tr { break-inside: avoid; }
  #csf-print-root .csf-canvas { border: 1px solid #ccc; padding: 1.5mm; }
  #csf-print-root .csf-canvas svg { max-height: 62mm; }
  #csf-print-root .csf-figure-detail { margin-top: 2mm; }
  #csf-print-root .csf-figure-detail .csf-canvas svg { max-height: 48mm; }
  #csf-print-root .csf-figure-overview .csf-canvas svg { max-height: 46mm; }
  #csf-print-root .csf-legend { margin: 1.2mm 0; gap: 1mm 4mm; }
  #csf-print-root .csf-metrics { margin: 1.5mm 0; gap: 2mm; }
  #csf-print-root .csf-metric { padding: 1.2mm 2mm; min-width: 0; }
  #csf-print-root .csf-metric strong { font-size: 10pt; }
  #csf-print-root .csf-metric small { font-size: 7pt; }
  #csf-print-root .csf-warning { font-size: 7.5pt; padding: 1.5mm 3mm; margin: 2mm 0; }

  #csf-print-root .csf-table-scroll { overflow: visible; }
  #csf-print-root .csf-table { font-size: 8pt; }
  #csf-print-root .csf-table th { font-size: 7.5pt; }
  #csf-print-root .csf-table th, #csf-print-root .csf-table td { padding: .7mm 1.5mm; line-height: 1.25; }
  #csf-print-root .csf-chip { font-size: 6.5pt; padding: 0 1.5mm; line-height: 1.35; }
  #csf-print-root .csf-data-table th { width: 23%; font-weight: 600; color: #333; }
  #csf-print-root .csf-data-table td { width: 27%; }
  #csf-print-root .csf-checks th:first-child { width: 22%; }
  #csf-print-root .csf-checks th:nth-child(2) { width: 13%; }
  #csf-print-root .csf-checks td:first-child { white-space: normal; }
  #csf-print-root .csf-checks td:last-child { font-size: 7.5pt; }
  #csf-print-root .csf-print-foot { font-size: 7pt; color: #444; border-top: 1px solid #c6d4e3; padding-top: 1.5mm; margin-top: 3mm; }

  /* Configurazione non conforme: avviso in testa e filigrana ripetuta su ogni pagina. */
  #csf-print-root .csf-print-alert { display: block !important; border: 1.5pt solid #ad2b23; border-left-width: 5pt; background: #fdeeed; color: #5f1510; padding: 2mm 3mm; margin: 0 0 3mm; break-inside: avoid; }
  #csf-print-root .csf-print-alert p { margin: 0; font-size: 8.5pt; }
  #csf-print-root .csf-print-alert .csf-print-alert-title { font-size: 11pt; font-weight: 700; color: #ad2b23; text-transform: uppercase; margin-bottom: .5mm; }
  #csf-print-root .csf-alert { font-size: 7.5pt; padding: 1.5mm 3mm; margin: 0 0 2mm; break-inside: avoid; }
  #csf-print-root .csf-alert-title { font-size: 9pt; }
  #csf-print-root .csf-watermark {
    display: block !important; position: fixed; top: 50%; left: 50%; z-index: 5; pointer-events: none;
    transform: translate(-50%, -50%) rotate(-32deg); white-space: nowrap;
    font-size: 58pt; font-weight: 800; letter-spacing: 2pt; color: rgba(173, 43, 35, .12);
  }

  /* Ripiego se la stampa parte senza il documento dedicato. */
  html:not(.csf-printing) .csf-controls,
  html:not(.csf-printing) .csf-toolbar,
  html:not(.csf-printing) .csf-notices,
  html:not(.csf-printing) .csf-mode { display: none !important; }
  html:not(.csf-printing) .csf-grid { display: block; }
  html:not(.csf-printing) body.cosmo-strutture-page #wpadminbar,
  html:not(.csf-printing) body.cosmo-strutture-page .site-header,
  html:not(.csf-printing) body.cosmo-strutture-page .site-footer,
  html:not(.csf-printing) body.cosmo-strutture-page header.wp-block-template-part,
  html:not(.csf-printing) body.cosmo-strutture-page footer.wp-block-template-part,
  html:not(.csf-printing) body.cosmo-strutture-page .wp-block-navigation { display: none !important; }
}