.plx-mgmt-summary-card {
  padding: var(--space-6);
}

.plx-mgmt-summary-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  padding-bottom: var(--space-5);
}

.plx-mgmt-summary-property {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.plx-mgmt-summary-property-icon {
  align-items: center;
  background: var(--pm-accent-soft);
  border-radius: var(--radius-md);
  color: var(--pm-primary);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.plx-mgmt-summary-property-body {
  display: flex;
  flex-direction: column;
}

.plx-mgmt-summary-property-name {
  color: var(--pm-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.plx-mgmt-summary-property-loc {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.plx-mgmt-summary-title {
  flex: 1;
  text-align: center;
}

.plx-mgmt-summary-title h2 {
  color: var(--pm-primary);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.03em;
  margin: 0;
}

.plx-mgmt-summary-title p {
  color: var(--text-primary);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

/* .plx-mgmt-summary-title p (a class + the <p> element, specificity 0,0,1,1)
   would otherwise beat this rule's own single class (0,0,1,0) since this
   <p> sits inside that title block — scoped to the same parent instead of
   !important so this rule wins on specificity like every other override
   in this file. */
.plx-mgmt-summary-title .plx-mgmt-summary-compare {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.plx-mgmt-summary-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 200px;
}

.plx-mgmt-summary-info-row {
  color: var(--text-muted);
  display: grid;
  font-size: var(--text-sm);
  gap: var(--space-2);
  grid-template-columns: 90px 8px 1fr;
}

.plx-mgmt-summary-info-row strong {
  color: var(--text-primary);
}

.plx-mgmt-summary-section-title {
  color: var(--pm-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin: var(--space-5) 0 var(--space-3);
}

.plx-mgmt-summary-table th {
  color: var(--pm-primary);
}

.plx-mgmt-summary-total-row td {
  background: var(--pm-accent-soft);
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

.plx-mgmt-summary-grid-2 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}

.plx-mgmt-summary-note {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-style: italic;
  margin-top: var(--space-4);
  text-align: center;
}

.plx-mgmt-summary-donut-card {
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-5);
  height: 100%;
  padding: var(--space-5);
}

.plx-mgmt-summary-donut-wrap {
  flex-shrink: 0;
  height: 180px;
  position: relative;
  width: 180px;
}

.plx-mgmt-summary-donut-center {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  bottom: 0;
}

.plx-mgmt-summary-donut-total {
  color: var(--text-primary);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.plx-mgmt-summary-donut-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.plx-mgmt-summary-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.plx-mgmt-summary-legend li {
  align-items: center;
  color: var(--text-primary);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
}

.plx-mgmt-summary-legend-dot {
  border-radius: var(--radius-full);
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}

.plx-mgmt-summary-legend-value {
  color: var(--text-muted);
}

/* ==========================================================================
   MEDIA QUERIES — all breakpoints for this file, grouped by tier
   (0–575.98 / 576–767.98 / 768–991.98 / 992–1199.98 / 1200–1399.98 / 1400+),
   consolidated here from their original inline positions so every
   responsive rule for this file lives in one place. Order within each tier
   block matches each rule's original position in the file, since some
   target the same selector and rely on later-wins source order.
   ========================================================================== */

/* Split into one block per tier (768-991.98 / 576-767.98 / 0-575.98) to stay
   within the project's strict 6-tier breakpoint scale instead of a bare
   max-width spanning all of them. */

@media (max-width: 575.98px) {
  .plx-mgmt-summary-grid-2 {
    grid-template-columns: 1fr;
  }

  .plx-mgmt-summary-header {
    flex-direction: column;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .plx-mgmt-summary-grid-2 {
    grid-template-columns: 1fr;
  }

  .plx-mgmt-summary-header {
    flex-direction: column;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .plx-mgmt-summary-grid-2 {
    grid-template-columns: 1fr;
  }

  .plx-mgmt-summary-header {
    flex-direction: column;
  }
}