/*
 * Leaderboard spacing (Michael, 16 Oct 2026): less white space, so the Sold /
 * For Sale / Appraisals / GCI legend shows without scrolling, and the same 20px
 * gap between every section (it was 30px, 50px above the agent table and above
 * the legend). Tablet width and up; phones keep their stacked layout.
 * Loaded by includes/leaderboard-compact.php; removing its require line undoes it.
 */
@media (min-width: 768px) {
  #dashboard-page h1.main-title { padding-top: 14px; padding-bottom: 14px; margin-bottom: 18px; }
  #dashboard-page .has-broadcast-option .broadcast { top: 8px; }
  #dashboard-page .tab-listing-wrap { padding-top: 14px; padding-bottom: 14px; margin-bottom: 20px; }
  #dashboard-page .agent-listing-table { margin-top: 0; margin-bottom: 20px; }
  /* The GCI and Latest Listings cards had a fixed 230px height; now they fit their
     content and stretch to match each other, so the pair stays level. */
  #dashboard-page .graph-listing-box .row > [class*="col-"] { display: flex; flex-direction: column; }
  #dashboard-page .graph-listing-box .card-box { flex: 1 1 auto; height: auto; padding: 20px 24px; margin-bottom: 20px; }
  #dashboard-page .graph-listing-box .card-box > h3 { margin-bottom: 12px; }
  #dashboard-page .tab-content-wrap { margin-bottom: 0; }
  #dashboard-page .row.legends .card-box { padding: 12px 24px; }
  /* Top-agent row (4 Nov 2026): the "Awaiting agent updates" card was a fixed
     262px next to the 320px #1 card, and when nothing sat under the #1 card the
     agent table touched it. Now each column stretches to the row, the awaiting
     card fills its column with its content centred, and the row itself carries
     the 20px gap. Covers the office view, where these sit one level deeper. */
  #dashboard-page .agent-progress { margin-bottom: 20px; }
  #dashboard-page .agent-progress .agent-progress { margin-bottom: 0; display: flex; flex-direction: column; }
  #dashboard-page .agent-progress .agent-progress > .row { flex: 1 1 auto; }
  #dashboard-page .agent-progress > .row > [class*="col-"] { display: flex; flex-direction: column; }
  #dashboard-page .agent-progress > .row > [class*="col-"] > .agent-progress,
  #dashboard-page .agent-progress > .row > [class*="col-"] > .agent-box-no-agent { flex: 1 1 auto; }
  #dashboard-page .agent-progress > .row > [class*="col-"] > :last-child,
  #dashboard-page .agent-progress .agent-prograss-left.top-agent > .top-agent-box:last-child { margin-bottom: 0; }
  #dashboard-page .agent-progress .agent-box-no-agent { height: auto; min-height: 262px; display: flex; flex-direction: column; justify-content: center; }
}