body {
  font-family: 'Roboto', sans-serif;
}

.themed-grid-col {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(112.520718, 44.062154, 249.437846, .15);
  border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3);
}

.themed-container {
  padding: .75rem;
  margin-bottom: 1.5rem;
  //background-color: rgba(112.520718, 44.062154, 249.437846, .15);
  //border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3);
}

.heatmap-cell {
  width: 110px;
  height: 110px;
  padding: 0;
  flex: 0 0 110px;
}

.heatmap-first-row {
  width: 110px;
  height: 130px;
  padding: 0;
  flex: 0 0 110px;
}

.manager-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Heatmap colors - background + text combo (Bootstrap style) */
.text-bg-heatmap-green {
  background-color: #10B981 !important;
  color: #fff !important;
}
.text-bg-heatmap-yellow {
  background-color: #F59E0B !important;
  color: #fff !important;
}
.text-bg-heatmap-orange {
  background-color: #F97316 !important;
  color: #fff !important;
}
.text-bg-heatmap-red {
  background-color: #EF4444 !important;
  color: #fff !important;
}
.text-bg-heatmap-gray {
  background-color: #E5E7EB !important;
  color: #111827 !important;
}

/* Отдельно bg- классы */
.bg-heatmap-green { background-color: #10B981 !important; }
.bg-heatmap-yellow { background-color: #F59E0B !important; }
.bg-heatmap-orange { background-color: #F97316 !important; }
.bg-heatmap-red { background-color: #EF4444 !important; }
.bg-heatmap-gray { background-color: #E5E7EB !important; }

/* Индикаторы done/replaced */
.indicator-done {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}

.indicator-replaced {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}
.unassigned-card-border {
  border: 1px;
}

/* Metric explanations popovers */
.metric-explanation {
  max-width: 280px;
}

.metric-explanation .interpretation {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.metric-explanation .badge.bg-orange {
  background-color: #F97316 !important;
}

/* Cursor help for elements with explanations */
[data-metric-key] {
  cursor: help;
}

/* Popover styling */
.popover {
  border-radius: 0;
  max-width: 320px;
}

.popover-header {
  background-color: #f8f9fa;
  border-radius: 0;
  font-weight: 600;
}

.popover-body {
  font-size: 0.875rem;
}

/* Heatmap popover */
.heatmap-popover {
  min-width: 280px;
  max-width: 320px;
}

.heatmap-popover .popover-metric {
  padding: 4px 0;
}

.heatmap-popover .popover-hints {
  font-size: 0.75rem;
  line-height: 1.4;
}

.heatmap-popover hr {
  margin: 8px 0;
  opacity: 0.15;
}