/* ============================================================================
   Грид · Граждане и отделы — Стили круговых шкал характеристик (Circular Gauges)
   Автор: Мастер Тем (theme_master) 🎨💎 · Пакет ЗАМЕЧАНИЯ-note-205-r1
   Стандарты: WCAG 2.2 AAA · HSL Tokens · Закон Модульности (Статья XIX)
   ============================================================================ */

.attrs-circular-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  background: var(--card2);
  border-radius: var(--r-md);
  padding: var(--sp-1-5) var(--sp-2);
  border: 1px solid var(--white-alpha-04);
  position: relative;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.attrs-circular-block:hover {
  border-color: var(--white-alpha-12);
}

.attrs-circular-block.empty {
  padding: var(--sp-2);
}

.attrs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-0-5);
  padding-bottom: var(--sp-0-5);
  border-bottom: 1px dashed var(--white-alpha-04);
}

.attrs-header-left {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
}

.attrs-header-icon {
  display: inline-flex;
  align-items: center;
  color: var(--violet-light);
  flex-shrink: 0;
}

.attrs-header-right {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-shrink: 0;
}

.attrs-type-badge {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  text-transform: none;
  letter-spacing: 0.3px;
  font-family: var(--mono);
  font-weight: 600;
}

.attrs-type-badge.custom {
  color: var(--violet-light);
  background: var(--violet-alpha-15);
  border-radius: var(--r-xs);
  padding: var(--sp-0-5) var(--sp-1);
  border: 1px solid var(--violet-alpha-30);
}

.attrs-count {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.attrs-avg-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-0-5);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  background: var(--violet-alpha-12);
  border: 1px solid var(--violet-alpha-20);
  color: var(--violet-light);
  padding: 1px var(--sp-1-25);
  border-radius: var(--r-xs);
  line-height: 1.2;
}

.attrs-avg-lbl {
  color: var(--tx3);
  font-weight: 500;
}

.attrs-avg-pill b {
  font-weight: 700;
  color: var(--tx);
}

/* Сетка круговых индикаторов: 3 колонки x 2 строки */
.attrs-circular-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-1-5) var(--sp-1);
  justify-items: center;
  align-items: start;
}

.attr-circular-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-0-5);
  width: 100%;
  min-width: 0;
  padding: var(--sp-0-5) var(--sp-0-5);
  border-radius: var(--r-xs);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
  cursor: default;
}

.attr-circular-item:hover {
  background: var(--white-alpha-04);
  transform: translateY(-1px);
}

.attr-circular-svg {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
}

.attr-circular-track {
  stroke: var(--white-alpha-08);
}

.attr-circular-fill {
  transition: stroke-dashoffset var(--dur-slow) cubic-bezier(0.4, 0, 0.2, 1);
}

.attr-circular-pct {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  fill: var(--tx);
  letter-spacing: -0.3px;
  dominant-baseline: central;
}

.attr-circular-label {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  line-height: 1.15;
  letter-spacing: 0.1px;
}

.attr-circular-item:hover .attr-circular-label {
  color: var(--tx);
}

/* Модальное окно: расширенный вид круговой калибровки */
.modal-attrs-circular .attrs-circular-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-1-5);
}

@media (max-width: 600px) {
  .modal-attrs-circular .attrs-circular-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================================
   СВЕТЛАЯ ТЕМА (WCAG 2.2 AAA Контраст и чистота слоев)
   ============================================================================ */
html.light-theme .attrs-circular-block,
[data-theme="light"] .attrs-circular-block {
  background-color: var(--card2) !important;
  border-color: var(--border-color) !important;
}

html.light-theme .attrs-circular-block:hover,
[data-theme="light"] .attrs-circular-block:hover {
  border-color: var(--violet-alpha-40) !important;
}

html.light-theme .attrs-header,
[data-theme="light"] .attrs-header {
  border-bottom-color: var(--border-color) !important;
}

html.light-theme .attr-circular-track,
[data-theme="light"] .attr-circular-track {
  stroke: var(--slate-200) !important;
}

html.light-theme .attr-circular-pct,
[data-theme="light"] .attr-circular-pct {
  fill: var(--slate-900) !important;
  font-weight: 800;
}

html.light-theme .attr-circular-label,
[data-theme="light"] .attr-circular-label {
  color: var(--slate-700) !important;
  font-weight: 600;
}

html.light-theme .attr-circular-item:hover,
[data-theme="light"] .attr-circular-item:hover {
  background-color: var(--slate-100) !important;
}

html.light-theme .attr-circular-item:hover .attr-circular-label,
[data-theme="light"] .attr-circular-item:hover .attr-circular-label {
  color: var(--slate-950) !important;
}

html.light-theme .attrs-avg-pill,
[data-theme="light"] .attrs-avg-pill {
  background-color: var(--violet-alpha-12) !important;
  border-color: var(--violet-alpha-30) !important;
  color: var(--violet-dark) !important;
}

html.light-theme .attrs-avg-pill b,
[data-theme="light"] .attrs-avg-pill b {
  color: var(--violet-dark) !important;
}