/* ═══════════════════════════════════════════════════════════════════════
   calc3-result.css — Result Panel Component (child theme calc3-quotidiano)
   Dipende da: tokens.css + calc3-tokens-restyle.css
   Estratto da OpenDesign/calc3-result-v1.html
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   RESET — scope solo dentro il pannello risultato
   ═══════════════════════════════════════════════════ */

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


/* ═══════════════════════════════════════════════════
   RESULT PANEL — base
   ═══════════════════════════════════════════════════ */

.calc3-result {
  background: var(--paper-shade);
  border-top: var(--rule-bold) solid var(--ink);
  padding: var(--calc3-spacing-lg);
  max-width: var(--calc3-container-calculator);
}

.calc3-result__header {
  font-size: var(--t-occhiello);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 var(--calc3-spacing-lg);
  padding-bottom: var(--calc3-spacing-xs);
  border-bottom: var(--rule-hair) solid var(--ink-faint);
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════
   PRIMARY — valore principale
   ═══════════════════════════════════════════════════ */

.calc3-result__primary {
  margin-bottom: var(--calc3-spacing-lg);
  padding-bottom: var(--calc3-spacing-md);
  border-bottom: var(--rule-bold) solid var(--ink);
}
.calc3-result__label {
  display: block;
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: var(--calc3-spacing-xs);
  font-weight: 500;
}
.calc3-result__value {
  display: block;
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rosso);
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
  overflow-wrap: anywhere;
}
.calc3-result__unit {
  display: inline-block;
  font-size: var(--t-corpo);
  font-weight: 500;
  color: var(--ink-muted);
  margin-inline-start: var(--calc3-spacing-xs);
  vertical-align: baseline;
}
.calc3-result__verdict {
  display: block;
  font-size: var(--t-sommario);
  font-style: italic;
  color: var(--ink-soft);
  margin-top: var(--calc3-spacing-xs);
}


/* ═══════════════════════════════════════════════════
   VIZ SLOT — contenitore per gauge/chart
   ═══════════════════════════════════════════════════ */

.calc3-result__viz {
  margin-bottom: var(--calc3-spacing-lg);
}


/* ═══════════════════════════════════════════════════
   GAUGE — semicircolare SVG (.calc3-gauge--arc)
   ═══════════════════════════════════════════════════ */

.calc3-gauge--arc {
  position: relative;
  max-width: 280px;
  margin: 0 auto;
}
.calc3-gauge--arc svg {
  display: block;
  width: 100%;
  height: auto;
}
.calc3-gauge--arc__center {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.calc3-gauge--arc__center-value {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.calc3-gauge--arc__center-unit {
  display: block;
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-top: 2px;
}
.calc3-gauge--arc__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--calc3-spacing-xs);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}


/* ═══════════════════════════════════════════════════
   GAUGE — lineare (backward-compat con calc3-card v2)
   ═══════════════════════════════════════════════════ */

.calc3-gauge--linear {
  margin: var(--calc3-spacing-md) 0;
}
.calc3-gauge--linear__track {
  position: relative;
  height: 12px;
  background: linear-gradient(to right,
    var(--calc3-gauge-zone-low),
    var(--calc3-gauge-zone-mid),
    var(--calc3-gauge-zone-high)
  );
  border: var(--rule-hair) solid var(--ink-faint);
}
.calc3-gauge--linear__marker {
  position: absolute;
  top: -4px;
  width: 3px;
  height: calc(100% + 8px);
  background: var(--ink);
  transform: translateX(-50%);
}
.calc3-gauge--linear__labels {
  display: flex;
  margin-top: var(--calc3-spacing-xs);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.calc3-gauge--linear__labels span {
  text-align: center;
  line-height: 1.3;
}


/* ═══════════════════════════════════════════════════
   DETAILS — dl grid 2-col
   ═══════════════════════════════════════════════════ */

.calc3-result__details {
  margin: 0;
  padding: 0;
}
.calc3-result__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--calc3-spacing-sm);
  align-items: baseline;
  padding: var(--calc3-spacing-sm) 0;
  border-bottom: var(--rule-hair) solid var(--ink-faint);
}
.calc3-result__row > * {
  min-width: 0;
}
.calc3-result__row:last-child {
  border-bottom: none;
}
.calc3-result__row dt {
  font-size: var(--t-corpo-sm);
  color: var(--ink-muted);
  margin: 0;
}
.calc3-result__row dd {
  font-size: var(--t-corpo);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin: 0;
  overflow-wrap: anywhere;
}


/* ═══════════════════════════════════════════════════
   TABLE — multi-scenario (variante --tabular)
   ═══════════════════════════════════════════════════ */

.calc3-result__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-corpo-sm);
  margin-top: var(--calc3-spacing-md);
}
.calc3-result__table thead th {
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 500;
  text-align: left;
  padding: var(--calc3-spacing-xs) var(--calc3-spacing-sm);
  border-bottom: var(--rule-thin) solid var(--ink);
}
.calc3-result__table thead th:not(:first-child) {
  text-align: right;
}
.calc3-result__table tbody td {
  padding: var(--calc3-spacing-sm);
  border-bottom: var(--rule-hair) solid var(--ink-faint);
  vertical-align: baseline;
}
.calc3-result__table tbody td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}
.calc3-result__table tbody td:first-child {
  color: var(--ink-muted);
}
.calc3-result__table tbody tr:last-child td {
  border-bottom: none;
}
.calc3-result__table tbody tr.calc3-result__table-highlight td {
  background: var(--paper-bright);
  font-weight: 700;
}
.calc3-result__table tbody tr.calc3-result__table-highlight td:first-child {
  color: var(--ink);
}

.calc3-result__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ═══════════════════════════════════════════════════
   ACTIONS — bottoni secondari
   ═══════════════════════════════════════════════════ */

.calc3-result__actions {
  display: flex;
  gap: var(--calc3-spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--calc3-spacing-lg);
  padding-top: var(--calc3-spacing-md);
  border-top: var(--rule-hair) solid var(--ink-faint);
}

.calc3-result .calc3-btn {
  font-family: var(--font);
  font-size: var(--t-corpo-sm);
  font-weight: 700;
  min-height: var(--calc3-touch-target);
  padding: var(--calc3-spacing-sm) var(--calc3-spacing-xl);
  border: var(--rule-thin) solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
  display: inline-block;
  background: var(--rosso);
  color: var(--paper);
  border-color: var(--rosso-deep);
  box-shadow: var(--calc3-shadow-brutal-md);
}
.calc3-result .calc3-btn:hover {
  background: var(--rosso-deep);
}
.calc3-result .calc3-btn:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 2px;
}
.calc3-result .calc3-btn:active {
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(2px, 2px);
}
.calc3-result .calc3-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-faint);
  box-shadow: none;
}
.calc3-result .calc3-btn--ghost:hover {
  background: var(--paper-bright);
  border-color: var(--ink);
}


/* ═══════════════════════════════════════════════════
   STATO VUOTO
   ═══════════════════════════════════════════════════ */

.calc3-result__empty {
  font-style: italic;
  color: var(--ink-muted);
  font-size: var(--t-corpo);
  padding: var(--calc3-spacing-lg) 0;
}


/* ═══════════════════════════════════════════════════
   LOADING — skeleton animation
   ═══════════════════════════════════════════════════ */

.calc3-result--loading .calc3-result__value,
.calc3-result--loading .calc3-result__row dd {
  background: linear-gradient(90deg,
    var(--paper-shade) 25%,
    var(--paper-bright) 50%,
    var(--paper-shade) 75%
  );
  background-size: 200% 100%;
  animation: calc3-skeleton 1.5s ease-in-out infinite;
  color: transparent;
  min-width: 5em;
  display: inline-block;
}
@keyframes calc3-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════
   VARIANTI
   ═══════════════════════════════════════════════════ */

.calc3-result--minimal .calc3-result__details,
.calc3-result--minimal .calc3-result__viz {
  display: none;
}
.calc3-result--minimal .calc3-result__primary {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.calc3-result--rich .calc3-result__viz {
  margin-bottom: var(--calc3-spacing-xl);
}

.calc3-result--tabular .calc3-result__details {
  display: none;
}

.calc3-result--negative .calc3-result__value {
  color: var(--calc3-color-danger);
}
.calc3-result--negative .calc3-result__verdict {
  color: var(--calc3-color-danger);
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════
   ERROR — stato di errore (input invalido, fetch fallito)
   ═══════════════════════════════════════════════════ */

.calc3-result--error {
  border-top-color: var(--rosso-deep);
  border-top-width: var(--rule-bold);
  border-left: var(--rule-bold) solid var(--rosso);
  background:
    linear-gradient(var(--rosso-tint, rgba(214, 62, 58, 0.05)),
                    var(--rosso-tint, rgba(214, 62, 58, 0.05))),
    var(--paper-shade);
}
.calc3-result--error .calc3-result__header::before {
  content: "⚠";
  display: inline-block;
  margin-inline-end: var(--calc3-spacing-xs);
  color: var(--rosso);
  font-weight: 700;
}
.calc3-result--error .calc3-result__header {
  color: var(--rosso);
  border-bottom-color: var(--rosso);
}
.calc3-result--error .calc3-result__value {
  color: var(--rosso);
}
.calc3-result__error-message {
  display: block;
  font-size: var(--t-corpo-sm);
  font-weight: 500;
  color: var(--rosso);
  margin-top: var(--calc3-spacing-sm);
  padding: var(--calc3-spacing-sm) var(--calc3-spacing-md);
  border-inline-start: var(--rule-thin) solid var(--rosso);
  background: var(--rosso-tint, rgba(214, 62, 58, 0.05));
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (min-width: 768px) {
  .calc3-result {
    box-shadow: var(--calc3-shadow-brutal-md);
  }
}

@media (max-width: 479px) {
  .calc3-result__table thead th,
  .calc3-result__table tbody td {
    padding: var(--calc3-spacing-xs);
    font-size: var(--t-didascalia);
  }
}