/* ============================================================
   Review Performance Hub — styles.css
   Palette "pietra serena & Chianti":
   --pietra  #2A3440  (struttura, sidebar)
   --stone   #F2F1ED  (fondo)
   --chianti #7A1E2B  (accento primario)
   --oro     #C9A227  (stelle, soglia bonus)
   --salvia  #4E7A63  (positivo)
   --mattone #B4552D  (avvisi, discrepanze)
   ============================================================ */

:root {
  --pietra:  #2A3440;
  --stone:   #F2F1ED;
  --chianti: #7A1E2B;
  --oro:     #C9A227;
  --salvia:  #4E7A63;
  --mattone: #B4552D;
}

/* ---------- Componenti condivisi ---------- */

.card {
  background: #fff;
  border: 1px solid rgba(42, 52, 64, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(42, 52, 64, 0.05);
}

.card-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(42, 52, 64, 0.55);
  margin-bottom: 0.35rem;
}

.kpi {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.2;
}

.kpi-sm {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
}

.input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(42, 52, 64, 0.18);
  border-radius: 10px;
  background: #fff;
  font-size: 0.9rem;
}
.input:focus-visible {
  outline: 2px solid var(--chianti);
  outline-offset: 1px;
}

.btn-primary {
  background: var(--chianti);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: #641623; }
.btn-primary:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* ---------- Navigazione ---------- */

.nav-btn {
  text-align: left;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  font-size: 0.88rem;
  color: rgba(242, 241, 237, 0.75);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-btn:hover { background: rgba(242, 241, 237, 0.08); color: #fff; }
.nav-btn.is-active { background: rgba(201, 162, 39, 0.15); color: var(--oro); font-weight: 600; }
.nav-btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; }

/* ---------- Tabelle ---------- */

.table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(42, 52, 64, 0.5);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(42, 52, 64, 0.12);
}
.table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(42, 52, 64, 0.06); }
.table td.num { font-family: 'IBM Plex Mono', monospace; font-weight: 500; }

.badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 99px;
}
.badge-flag  { background: rgba(180, 85, 45, 0.12);  color: var(--mattone); }
.badge-ok    { background: rgba(78, 122, 99, 0.12);  color: var(--salvia); }
.badge-paid  { background: rgba(201, 162, 39, 0.15); color: #8a6f17; }

/* ---------- Barra soglia 50 (elemento firma) ---------- */

.threshold-row { display: grid; grid-template-columns: 140px 1fr 90px; gap: 0.75rem; align-items: center; }
.threshold-track {
  position: relative;
  height: 14px;
  border-radius: 99px;
  background: rgba(42, 52, 64, 0.08);
  overflow: hidden;
}
.threshold-fill-base { position: absolute; inset: 0 auto 0 0; background: var(--pietra); border-radius: 99px 0 0 99px; }
.threshold-fill-over { position: absolute; inset: 0 auto 0 0; background: var(--oro); }
.threshold-mark {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--chianti);
}
.threshold-row .name { font-size: 0.85rem; font-weight: 500; }
.threshold-row .val  { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; text-align: right; }

/* ---------- Chat ---------- */

.chat-msg { max-width: 85%; padding: 0.6rem 0.9rem; border-radius: 14px; font-size: 0.88rem; }
.chat-user { margin-left: auto; background: var(--pietra); color: var(--stone); border-bottom-right-radius: 4px; }
.chat-ai   { background: rgba(122, 30, 43, 0.07); border-bottom-left-radius: 4px; }

/* ---------- Accessibilità ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}