*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Cataspese - stile pagine. Usa le classi/utility comuni del tema. */
.cs-page {
  padding: 16px;
}

.cs-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cs-head h1 {
  margin: 0;
  font-size: 1.6rem;
}

.cs-head-actions {
  display: flex;
  gap: 8px;
}

.cs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}

.cs-filters select, .cs-filters input {
  min-width: 140px;
}

.cs-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.cs-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
}

.cs-kpi-val {
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}

.cs-kpi-val.ok {
  color: #2a8c54;
}

.cs-kpi-val.warn {
  color: #c33b22;
}

.cs-bars {
  list-style: none;
  padding: 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-bar {
  display: grid;
  grid-template-columns: 200px 1fr 120px;
  align-items: center;
  gap: 10px;
}

.cs-bar-track {
  background: rgba(0, 0, 0, 0.06);
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.cs-bar-fill {
  display: block;
  height: 100%;
}

.cs-bar-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cs-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.cs-stat {
  padding: 12px;
}

.cs-stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.cs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.cs-yoy {
  margin-left: auto;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.cs-yoy.ok {
  background: rgba(42, 140, 84, 0.15);
  color: #2a8c54;
}

.cs-yoy.warn {
  background: rgba(195, 59, 34, 0.15);
  color: #c33b22;
}

.cs-yoy.mute {
  background: rgba(0, 0, 0, 0.06);
  color: #666;
}

.cs-stat-list {
  margin: 0;
  display: grid;
  gap: 4px;
  font-size: 0.85rem;
}

.cs-stat-list > div {
  display: flex;
  justify-content: space-between;
}

.cs-pick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

.cs-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
}

.cs-pick input {
  display: none;
}

.cs-pick.is-active {
  background: var(--pick-color, #333);
  color: #fff;
  border-color: transparent;
}

.cs-matrix td {
  font-variant-numeric: tabular-nums;
}

.cs-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.is-hidden {
  display: none !important;
}

/*# sourceMappingURL=root.css.map */
