/*
 * Dashboard / Reading Responsive Layout Rules
 * Applies to: Dashboard, Reading View, and shared responsive card sections.
 * Purpose: Keep panel grids readable across desktop, tablet, and mobile.
 */

/* ── Dashboard: Alert Grid Defaults ───────────────────────────────────────── */
.dashboard-alert-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}

/* ── Dashboard: Panel Containers ───────────────────────────────────────────── */
.dashboard-alerts-panel,
.dashboard-interpretation-panel,
.dashboard-scores-panel {
  border-radius: 8px;
  overflow: hidden;
}

/* Interpretation grid: 2-col on desktop */
.reading-card .interpretation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 12px;
}

/* ── Breakpoint: Tablet (<=1024px) ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .dashboard-alert-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
  }

  /* Stack interpretation columns on tablet */
  .reading-card .interpretation-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Breakpoint: Mobile (<=640px) ────────────────────────────────────────── */
@media (max-width: 640px) {
  .dashboard-alert-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-alerts-wrapper {
    gap: 10px !important;
  }

  .dashboard-alerts-wrapper > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Full-width panels on mobile */
  .dashboard-alerts-panel,
  .dashboard-interpretation-panel,
  .dashboard-scores-panel {
    padding: 12px !important;
    border-radius: 6px;
  }

  /* Stack interpretation on mobile */
  .reading-card .interpretation-grid {
    grid-template-columns: 1fr !important;
  }

  /* Signal Sources button full width on mobile */
  #dashboard-sources-toggle {
    width: 100% !important;
    text-align: left;
  }

  /* Dimension score gauge grid: 2 cols on mobile */
  .gauges-column > div:last-child {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }

  /* Metadata badges wrap on mobile */
  .reading-card .badge-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ── Cycle Cards ───────────────────────────────────────────────────────────── */

#cycle-cards-row {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 900px) {
  #cycle-cards-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  #cycle-cards-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── Reading View ──────────────────────────────────────────────────────────── */

/* 2-col on desktop, collapses at ≤640px */
.reading-view-rubric-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 640px) {
  .reading-view-rubric-grid {
    grid-template-columns: 1fr !important;
  }

  .reading-view-signal-grid {
    grid-template-columns: 1fr !important;
  }

  .reading-view-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .reading-view-header-badges {
    width: 100% !important;
  }

  #reading-view-header-panel,
  #reading-view-interpretation-panel,
  #reading-view-signal-breakdown-panel,
  #reading-view-rubric-panel,
  #reading-view-recommendation-panel {
    padding: 12px !important;
    border-radius: 6px;
  }
}

/* ── Relationship Insight Cards ────────────────────────────────────────────── */

/* Desktop: single-friend grid is 2-col (mode scores | component scores) */
.relationship-insight-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Tablet: collapse aggregate stat grid to 2 cols */
@media (max-width: 900px) {
  #dashboard-relationship-insight-section .relationship-insight-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: full-width stack */
@media (max-width: 640px) {
  #dashboard-relationship-insight-section .relationship-insight-grid {
    grid-template-columns: 1fr !important;
  }

  .relationship-insight-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .relationship-health-badge {
    align-self: flex-start;
  }

  .relationship-insight-dim-chips {
    gap: 4px !important;
  }
}