/* responsive.css – breakpoints: 480 / 768 / 1024 / 1440 / 1920 – NGO Dashboard */

/* ── 1440px – large desktop ── */
@media (min-width: 1440px) {
  .kpi-primary-grid      { grid-template-columns: repeat(6, 1fr); }
  .kpi-secondary-grid    { grid-template-columns: repeat(7, 1fr); }
  .charts-grid           { grid-template-columns: repeat(3, 1fr); }
  .charts-grid-2         { grid-template-columns: repeat(2, 1fr); }
  .charts-grid-3         { grid-template-columns: repeat(3, 1fr); }
  .risk-matrix           { grid-template-columns: repeat(4, 1fr); }
}

/* ── 1024–1439px – standard desktop / laptop ── */
@media (max-width: 1439px) {
  .kpi-primary-grid      { grid-template-columns: repeat(3, 1fr); }
  .kpi-secondary-grid    { grid-template-columns: repeat(5, 1fr); }
  .charts-grid           { grid-template-columns: repeat(2, 1fr); }
  .charts-grid-3         { grid-template-columns: repeat(2, 1fr); }
  .risk-matrix           { grid-template-columns: repeat(3, 1fr); }
  .map-container         { min-height: 360px; }
}

/* ── 768–1023px – tablet landscape ── */
@media (max-width: 1023px) {
  #app-header            { padding: .6rem 1rem; gap: .6rem; }
  .header-title          { display: none; }
  .header-actions .btn span { display: none; }
  .header-actions .btn   { padding: .4rem .55rem; }

  #main-content          { padding: 1rem; }

  .kpi-primary-grid      { grid-template-columns: repeat(3, 1fr); }
  .kpi-secondary-grid    { grid-template-columns: repeat(4, 1fr); }

  .charts-grid           { grid-template-columns: 1fr 1fr; }
  .charts-grid-2         { grid-template-columns: 1fr; }
  .charts-grid-3         { grid-template-columns: 1fr 1fr; }

  .risk-matrix           { grid-template-columns: repeat(2, 1fr); }
  .map-container         { min-height: 300px; }

  .exec-summary          { gap: 1rem; }
  .perf-scores           { gap: 1rem; }
}

/* ── Up to 767px – tablet portrait / large phone ── */
@media (max-width: 767px) {
  #app-header            { padding: .5rem .75rem; flex-wrap: wrap; gap: .4rem; }
  #logo-text             { font-size: .95rem; }
  .header-actions        { flex-wrap: wrap; }
  .btn-export-group      { display: none; }

  #filter-bar            { gap: .4rem; padding: .6rem .75rem; }
  .filter-select         { min-width: 90px; font-size: .75rem; }
  #record-count          { margin-left: 0; width: 100%; }

  #main-content          { padding: .75rem; }

  .exec-summary          { flex-direction: column; align-items: flex-start; padding: 1rem; }
  .perf-right            { margin-left: 0; text-align: left; }
  .perf-scores           { gap: .75rem; }

  /* KPI grids – 2 columns on mid-size phones */
  .kpi-primary-grid      { grid-template-columns: repeat(2, 1fr); }
  .kpi-secondary-grid    { grid-template-columns: repeat(2, 1fr); }
  .kpi-value             { font-size: 1.2rem; }

  /* Charts – single column */
  .charts-grid,
  .charts-grid-2,
  .charts-grid-3         { grid-template-columns: 1fr; }
  .chart-canvas-wrap     { height: 200px; }

  /* Risk & map – full width */
  .risk-matrix           { grid-template-columns: repeat(2, 1fr); }
  .map-container         { min-height: 240px; width: 100%; }

  .goals-grid            { grid-template-columns: 1fr; }

  .nav-tabs              { padding: .4rem .75rem; }
  [data-tab]             { padding: .4rem .75rem; font-size: .75rem; }

  .table-controls        { flex-direction: column; align-items: stretch; }
  .table-search-wrap     { max-width: 100%; }
}

/* ── Up to 479px – small phone ── */
@media (max-width: 479px) {
  #app-header            { padding: .45rem .6rem; }
  .logo-mark             { width: 30px; height: 30px; }
  #logo-text             { font-size: .85rem; }

  /* KPI grids – 1 column on smallest screens */
  .kpi-primary-grid      { grid-template-columns: 1fr; }
  .kpi-secondary-grid    { grid-template-columns: 1fr 1fr; }
  .kpi-value             { font-size: 1.1rem; }

  .exec-summary          { padding: .75rem; }
  .perf-score            { font-size: 1.1rem; }
  .perf-scores           { flex-wrap: wrap; }

  /* Risk & map – single column */
  .risk-matrix           { grid-template-columns: 1fr; }
  .map-container         { min-height: 200px; width: 100%; }

  .modal-box             { padding: 1rem; }
  #main-content          { padding: .5rem; }
}

/* ── Ultrawide 1920px+ ── */
@media (min-width: 1920px) {
  #main-content          { padding: 2rem; }
  .kpi-primary-grid      { grid-template-columns: repeat(6, 1fr); }
  .kpi-primary-card      { padding: 1.5rem; }
  .kpi-value             { font-size: 1.65rem; }
  .chart-canvas-wrap     { height: 260px; }
  .charts-grid           { grid-template-columns: repeat(3, 1fr); }
  .charts-grid-3         { grid-template-columns: repeat(3, 1fr); }
  .kpi-secondary-grid    { grid-template-columns: repeat(9, 1fr); }
  .risk-matrix           { grid-template-columns: repeat(4, 1fr); }
  .map-container         { min-height: 480px; }
}

/* ── No horizontal scroll guarantee ── */
html, body { max-width: 100%; overflow-x: hidden; }