/* PM compliance chart legibility and responsive sizing. */
.pm-compliance-card .pm-compliance-chart {
  box-sizing: border-box;
  width: 100% !important;
  height: 310px !important;
  max-height: 310px !important;
  min-height: 310px;
  flex: 0 0 310px;
  margin-top: 8px;
  padding: 22px 20px 12px 4px;
  overflow: hidden;
  contain: layout paint;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  background: transparent;
}

.pm-compliance-chart .recharts-responsive-container,
.pm-compliance-chart .recharts-wrapper,
.pm-compliance-chart .recharts-surface {
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.pm-compliance-chart .recharts-cartesian-grid-horizontal line {
  stroke: #dbe3ee;
  stroke-dasharray: 4 5;
}

.pm-compliance-chart .recharts-cartesian-grid-vertical line {
  stroke: transparent;
}

.pm-compliance-chart .recharts-cartesian-axis-line,
.pm-compliance-chart .recharts-cartesian-axis-tick-line {
  stroke: #cbd5e1;
}

.pm-compliance-chart .recharts-cartesian-axis-tick text {
  fill: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.pm-compliance-chart .recharts-bar-rectangle path,
.pm-compliance-chart .recharts-bar-rectangle rect {
  transition: opacity .18s ease, filter .18s ease;
}

.pm-compliance-chart .recharts-bar-rectangle:hover path,
.pm-compliance-chart .recharts-bar-rectangle:hover rect {
  filter: brightness(.94);
  opacity: .88;
}

.pm-compliance-chart .recharts-line-curve {
  stroke-width: 2.5px;
  filter: drop-shadow(0 1px 1px rgba(220, 38, 38, .2));
}

.pm-compliance-chart .recharts-default-tooltip {
  border: 0 !important;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
}

.pm-compliance-chart .recharts-cartesian-axis-tick text {
  fill: var(--pm-muted-color, #64748b);
}

@media (max-width: 900px) {
  .pm-compliance-card .pm-compliance-chart {
    height: 280px !important;
    max-height: 280px !important;
    min-height: 280px;
    flex-basis: 280px;
    padding-right: 12px;
  }
}

@media (max-width: 600px) {
  .pm-compliance-card .pm-compliance-chart {
    height: 250px !important;
    max-height: 250px !important;
    min-height: 250px;
    flex-basis: 250px;
    padding: 16px 8px 8px 0;
    border-radius: 12px;
  }

  .pm-compliance-chart .recharts-cartesian-axis-tick text {
    font-size: 10px;
  }
}