/* ============================================================
   DONOR REPORTING DASHBOARD — Responsive Styles
   ============================================================ */

/* ── Ultra Wide (≥ 1920px) ── */
@media (min-width: 1920px) {
  .main-content { max-width: 2200px; margin: 0 auto; }
  .kpi-grid-primary { grid-template-columns: repeat(6, 1fr); }
  .kpi-grid-secondary { grid-template-columns: repeat(8, 1fr); }
  .charts-grid-2 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Large Desktop (1440–1919px) ── */
@media (min-width: 1440px) and (max-width: 1919px) {
  .kpi-grid-primary { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid-secondary { grid-template-columns: repeat(6, 1fr); }
}

/* ── Desktop (1024–1439px) ── */
@media (min-width: 1024px) and (max-width: 1439px) {
  .kpi-grid-primary { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid-secondary { grid-template-columns: repeat(4, 1fr); }
  .charts-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet (768–1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-top { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .header-meta { gap: var(--space-3); }
  .header-meta-item:last-child { display: none; }
  .header-actions { padding: var(--space-2) var(--space-4); gap: var(--space-1); }
  .header-actions .btn span { display: none; }
  .main-content { padding: var(--space-4); }
  .filters-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid-primary { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-secondary { grid-template-columns: repeat(3, 1fr); }
  .charts-grid-2 { grid-template-columns: 1fr; }
  .charts-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .exec-metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .lessons-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Mobile Large (480–767px) ── */
@media (min-width: 480px) and (max-width: 767px) {
  :root { --header-height: auto; }
  .header-top {
    flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3);
  }
  .header-logos { order: 1; }
  .header-info { order: 2; min-width: 0; flex: 1 1 200px; }
  .header-meta { order: 3; flex-basis: 100%; justify-content: flex-start; gap: var(--space-4); }
  .header-actions {
    padding: var(--space-2) var(--space-3); gap: var(--space-1); flex-wrap: wrap;
    justify-content: flex-start;
  }
  .header-actions .btn span { display: none; }
  .header-actions-sep { display: none; }
  .main-content { padding: var(--space-3); }
  .filters-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-primary { grid-template-columns: 1fr; }
  .kpi-grid-secondary { grid-template-columns: repeat(2, 1fr); }
  .charts-grid-2 { grid-template-columns: 1fr; }
  .charts-grid-3 { grid-template-columns: 1fr; }
  .exec-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .insights-grid { grid-template-columns: 1fr; }
  .lessons-grid { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .table-search-wrap { flex-direction: column; align-items: stretch; }
  .table-pagination { flex-direction: column; align-items: center; gap: var(--space-3); }
  .exec-summary-score { font-size: 3.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .modal { margin: var(--space-3); max-width: calc(100vw - 2 * var(--space-3)); }
}

/* ── Mobile Small (≤ 479px) ── */
@media (max-width: 479px) {
  .header-top {
    flex-direction: column; align-items: flex-start;
    gap: var(--space-3); padding: var(--space-3);
  }
  .header-logos { flex-direction: row; }
  .header-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; }
  .header-meta-item { text-align: left; }
  .header-actions {
    padding: var(--space-2) var(--space-3); gap: var(--space-1); overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .header-actions::-webkit-scrollbar { display: none; }
  .header-actions .btn span { display: none; }
  .header-actions-sep { display: none; }
  .filters-grid { grid-template-columns: 1fr 1fr; }
  .main-content { padding: var(--space-3); }
  .kpi-grid-primary { grid-template-columns: 1fr; }
  .kpi-grid-secondary { grid-template-columns: 1fr 1fr; }
  .kpi-card { padding: var(--space-4); }
  .kpi-value { font-size: var(--font-size-2xl); }
  .charts-grid-2, .charts-grid-3 { grid-template-columns: 1fr; }
  .exec-summary-card { padding: var(--space-5); }
  .exec-summary-score { font-size: 3rem; }
  .exec-metrics-grid { grid-template-columns: 1fr 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
  .lessons-grid { grid-template-columns: 1fr; }
  .section-title { font-size: var(--font-size-base); }
  .kpi-meta { grid-template-columns: 1fr; }
  .alert-badge span { display: none; }
  .alert-badge { padding: 3px 8px; }
  .exec-summary-title { font-size: var(--font-size-xl); }
  .form-row { grid-template-columns: 1fr; }
  .modal { margin: var(--space-2); border-radius: var(--radius-lg); }
  .modal-header, .modal-body, .modal-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .toast { min-width: auto; max-width: calc(100vw - 2 * var(--space-4)); }
  .toast-container { left: var(--space-4); right: var(--space-4); top: auto; bottom: var(--space-4); }
}

/* ── Touch Devices ── */
@media (hover: none) {
  .kpi-card:hover, .kpi-card-sm:hover, .insight-card:hover, .rec-card:hover { transform: none; }
  .btn:hover { transform: none; }
}

/* ── High DPI ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .kpi-card::before { height: 3px; }
}