/* ═══════════════════════════════════════════════════════════════
   Dashboard Fragment Styles
   Used by HTMX lazy-loaded accordion content across all reports
   ═══════════════════════════════════════════════════════════════ */

/* ── Fragment Container ── */
.fragment-content {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}

/* ── Compact KPI Row (3-column variant for fragments) ── */
.kpi-row--compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-item--compact {
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.kpi-item--compact .kpi-item__label {
  margin-bottom: 4px;
}

.kpi-item--compact .kpi-item__value {
  font-size: 24px;
}

.kpi-item--compact .kpi-item__subtext {
  margin-top: 1px;
}

/* ── Two-Column Grid (tables side-by-side in fragments) ── */
.fragment-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ── Section Label (inside fragments) ── */
.fragment-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-subtle);
  margin: 0 0 10px;
}

/* ── Stacked Sections (ageing, rejected, etc.) ── */
.fragment-section {
  margin-top: 16px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .kpi-row--compact {
    grid-template-columns: 1fr;
  }

  .fragment-grid-2col {
    grid-template-columns: 1fr;
  }
}