/* 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);
}
/* HTML5 [hidden] restore: .widget{display:flex} sovrascrive lo UA [hidden]{display:none}.
   Senza questa regola un host widget non montato (es. data-role-host flag-OFF) renderizza
   un box vuoto. Fix wave 1b — risolve anche l'host radar 1a (stesso pattern). */
.widget[hidden] { display: none !important; }
.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); }

/* ===== SCORE ARC GAUGE (unified hero/mini/badge/gauge) ===== */
.score-arc-gauge {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}
.score-arc-gauge--hero   { margin: 0 auto; }
.score-arc-gauge--mini   { flex-shrink: 0; }
.score-arc-gauge--badge  { display: inline-block; vertical-align: middle; }
.score-arc-gauge--gauge  { margin: 0 auto; }

/* ===== 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; }

/* ===== RESPONSIVE BREAKPOINTS (POST33-1 Fase C) =====
 * Allineati v4: 1279/1023/767 (no 768/600/480 legacy).
 * Scope: widget padding scale, btn touch target mobile, flag/tag font scale,
 * gauge-bar height adjust, sidebar drawer overlay mobile.
 */

@media (max-width: 1279px) {
  .widget { padding: 16px; }
  .widget--hero { padding: 22px 24px; }
}

@media (max-width: 1023px) {
  .widget { padding: 14px; gap: 10px; }
  .widget--hero { padding: 18px 20px; }
  .gauge-bar .track-row { height: 7px; }
  .sidebar { width: var(--sidebar-collapsed-width); }
  .sidebar:not(.sidebar--collapsed) .sidebar__item-label,
  .sidebar:not(.sidebar--collapsed) .sidebar__section-title { display: none; }
}

@media (max-width: 767px) {
  /* Widget full-width compact */
  .widget { padding: 12px; border-radius: var(--r-md); }
  .widget--hero { padding: 14px 16px; }
  .widget__title { font-size: 9px; }

  /* Touch target WCAG 2.5.5 — minimo 44x44 */
  .widget__actions button { width: 44px; height: 44px; }

  /* Flag + tag scale-down per mobile */
  .flag { font-size: 10px; padding: 2px 7px; }
  .tag-insolvency, .tag-grave, .tag-critico,
  .tag-monitor, .tag-buono, .tag-ottimo { font-size: 10px; padding: 2px 7px; }

  /* Gauge compact */
  .gauge-bar .track-row { height: 6px; gap: 1px; }

  /* Sidebar drawer overlay (transform translateX) — collapsed state default */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    width: var(--sidebar-width);
  }
  .sidebar.sidebar--mobile-open { transform: translateX(0); }
  .sidebar:not(.sidebar--mobile-open) .sidebar__item-label,
  .sidebar:not(.sidebar--mobile-open) .sidebar__section-title { display: block; }

  /* Feedback inline padding ridotto */
  .feedback { padding: 8px 10px; font-size: 12px; }
}

/* ===== PILL Bilancio Ufficiale/Light — Issue 3 sess 126 ===== */
/* Distingue visivamente bilanci CCIAA depositati (XBRL) da stime visura.
   Riusa design tokens semantici --buono/--critico (system.css) per coerenza
   light/dark mode. Cursor "help" segnala tooltip presente. */
.bilancio-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  cursor: help;
  margin-left: 6px;
  vertical-align: middle;
}
.bilancio-pill--ufficiale {
  background: var(--buono-bg, #dcfce7);
  color: var(--buono, #166534);
}
.bilancio-pill--light {
  background: var(--critico-bg, #fef3c7);
  color: var(--critico, #92400e);
}