/* Portfolio Health responsive layout. Keep these rules scoped to the dashboard. */
@media (max-width: 1100px) {
  #screen-dashboard .dashboard-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #screen-dashboard .dashboard-actions {
    flex-wrap: wrap;
  }

  #screen-dashboard .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-dashboard .kpi-card,
  #screen-dashboard .panel,
  #screen-dashboard .panel-head > * {
    min-width: 0;
  }

  #screen-dashboard .kpi-label,
  #screen-dashboard .panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #screen-dashboard .kpi-label > span,
  #screen-dashboard .kpi-card > strong,
  #screen-dashboard .panel-head h2,
  #screen-dashboard .panel-head span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #screen-dashboard .kpi-card > strong {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
  }

  #screen-dashboard .dashboard-wire-grid,
  #screen-dashboard .dashboard-lower-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  #screen-dashboard .dashboard-actions,
  #screen-dashboard .dashboard-actions > * {
    width: 100%;
  }

  #screen-dashboard .kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}