/* ==================== CARDS ==================== */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-7);
  gap: var(--space-5);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--pk-gray-900);
  line-height: var(--leading-tight);
  letter-spacing: -0.3px;
}

.page-subtitle,
.page-header .text-muted {
  font-size: var(--text-sm);
  color: var(--pk-gray-500);
  margin-top: 2px;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Empty state — page-level and in-table.
   .empty-state-message gets var(--pk-gray-500) for AA on white (~4.8:1).
   Last child has its margin reset so the spacing budget is tidy.
   Legacy variant .empty-state-text kept as alias for backwards compatibility. */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-7);
  color: var(--pk-gray-500);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-5);
  opacity: 0.5;
  color: var(--pk-gray-500);
  display: block;
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--pk-gray-700);
  margin-bottom: var(--space-2);
}

.empty-state-message,
.empty-state-text {
  font-size: var(--text-sm);
  color: var(--pk-gray-500);
  line-height: var(--leading-relaxed);
  max-width: 480px;
  margin: 0 auto var(--space-5);
}

.empty-state .btn {
  margin-top: var(--space-2);
}

.empty-state > *:last-child {
  margin-bottom: 0;
}

/* ==================== COLLAPSIBLE VALIDATION SECTION ==================== */
/* <details class="validation-collapse"> demotes a secondary validation
   section (historical Rate Validation) when an authoritative vendor rate
   card (Schedule Validation) leads. Chevron replaces the native marker so
   the section header keeps its flex layout. */

details.validation-collapse > summary {
  cursor: pointer;
  list-style: none;
}

details.validation-collapse > summary::-webkit-details-marker {
  display: none;
}

details.validation-collapse .collapse-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
}

details.validation-collapse[open] > summary .collapse-chevron {
  transform: rotate(90deg);
}

/* Accent modifier — the chevron carries the brand colour when the collapse is
   the card's own primary control (cartage comparison result cards) rather than
   demoting a secondary section. */

details.validation-collapse.collapse-accent > summary .collapse-chevron {
  color: var(--pk-accent);
}

/* ==================== CARD-HEADER HEADLINE FIGURE ==================== */
/* .summary-total gives a card header's money figure its own right-aligned
   column so a stack of cards scans straight down. Any comparative note sits
   BENEATH the value — placing it alongside pushes the value out of line and
   destroys the scan. */

.summary-total {
  text-align: right;
  flex-shrink: 0;
  min-width: 6.5rem;
}

.summary-total-value {
  display: block;
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
}

.summary-total-note {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  font-weight: var(--font-medium);
  color: var(--pk-gray-500);
}