/* Ratiofy v4 — componenti condivisi (light + dark via tokens) */

/* ===== TAGS score (6 bande) ===== */
.tag-insolvency { background: var(--insolvency-bg); color: var(--insolvency); }
.tag-grave      { background: var(--grave-bg);      color: var(--grave); }
.tag-critico    { background: var(--critico-bg);    color: var(--critico); }
.tag-monitor    { background: var(--monitor-bg);    color: var(--monitor); }
.tag-buono      { background: var(--buono-bg);      color: var(--buono); }
.tag-ottimo     { background: var(--ottimo-bg);     color: var(--ottimo); }

/* ===== FLAG severity (warning puntuali) ===== */
.flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.flag--critical { background: var(--flag-critical-bg); color: var(--flag-critical); }
.flag--high     { background: var(--flag-high-bg);     color: var(--flag-high); }
.flag--medium   { background: var(--flag-medium-bg);   color: var(--flag-medium); }
.flag--low      { background: var(--flag-low-bg);      color: var(--flag-low); }
.flag--info     { background: var(--flag-info-bg);     color: var(--flag-info); }

/* ===== FEEDBACK (toast / form / inline) ===== */
.feedback {
  padding: 10px 14px; border-radius: var(--r-md);
  font-size: 13px; line-height: 1.4;
}
.feedback--success { background: var(--color-success-bg); color: var(--color-success-text); }
.feedback--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.feedback--error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.feedback--info    { background: var(--color-info-bg);    color: var(--color-info-text); }

/* ===== WIDGET (card standardizzata) ===== */
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--transition-fast);
}
.widget--soft {
  background: var(--surface-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.widget--hero {
  padding: 24px 28px;
  grid-column: 1 / -1;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
}
.widget--collapsed { padding-bottom: 14px; }
.widget--collapsed .widget__body { display: none; }

.widget__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.widget__title-group { display: flex; flex-direction: column; gap: 2px; }
.widget__title { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.widget__sub   { font-size: 11px; color: var(--ink-400); }
.widget__actions {
  display: flex; align-items: center; gap: 2px;
  color: var(--ink-400); font-size: 12px;
  opacity: 0; transition: opacity var(--transition-fast);
}
.widget:hover .widget__actions { opacity: 1; }
.widget__actions button {
  width: 26px; height: 26px; border: none; background: transparent;
  border-radius: var(--r-sm); cursor: pointer; color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.widget__actions button:hover { background: var(--ink-100); color: var(--ink-700); }

/* Stati */
.widget--loading .widget__body { position: relative; min-height: 100px; }
.widget-skeleton {
  display: flex; flex-direction: column; gap: 10px;
}
.widget-skeleton__line {
  height: 10px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--ink-100) 0%, var(--ink-200) 50%, var(--ink-100) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

.widget--error .widget__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 8px 0;
}
.widget--error .widget__error-msg { font-size: 13px; color: var(--ink-600); }

/* ===== GAUGE BAR (sub-score SLRD+C) ===== */
.gauge-bar .track-row {
  display: grid; grid-template-columns: repeat(18, 1fr); gap: 2px; height: 8px;
}
.gauge-bar .seg-empty { background: var(--ink-100); border-radius: 1.5px; }
.gauge-bar .seg-full  { border-radius: 1.5px; }

/* ===== AURORA hero ===== */
.hero--aurora { background: var(--aurora); border: 1px solid var(--border-soft); }

/* ===== ICON helper ===== */
.ic {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ===== SCROLLBAR ===== */
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 4px; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg); color: var(--sidebar-ink);
  transition: width var(--transition-base);
  display: flex; flex-direction: column;
}
.sidebar--collapsed { width: var(--sidebar-collapsed-width); }
.sidebar__item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-md);
  font-size: 13px; color: var(--sidebar-ink-muted); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar__item:hover { background: var(--sidebar-item-hover); color: var(--sidebar-ink); }
.sidebar__item--active { background: var(--sidebar-item-active); color: var(--sidebar-ink); }
.sidebar__item-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full); background: var(--grave);
  color: white; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar--collapsed .sidebar__item-label,
.sidebar--collapsed .sidebar__section-title { display: none; }
.sidebar--collapsed .sidebar__item-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 8px; width: 8px; height: 8px; padding: 0;
  font-size: 0;
}
.sidebar--collapsed .sidebar__item { position: relative; justify-content: center; padding: 9px; }