/* Ladder dashboard — LAYOUT ONLY.
 *
 * Visual tokens (colors, fonts, borders, panel chrome) are owned by aoe.css.
 * This file only defines the responsive grid, column widths, gaps and small
 * spacing helpers, all scoped under `.aoe-dashboard`. Mobile-first: a single
 * column on small screens, three columns on large screens (left ladder wider,
 * middle activity feed, right stats).
 */

.aoe-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Stack all panels/sections vertically by default (mobile-first). */
.aoe-dashboard__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Each column stacks its own panels. */
.aoe-dashboard__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

/* Tablet: two columns (ladder + feed side by side, stats below). */
@media (min-width: 768px) {
  .aoe-dashboard__grid {
    grid-template-columns: 1fr 1fr;
  }

  .aoe-dashboard__col--right {
    grid-column: 1 / -1;
  }
}

/* Desktop: three columns. Left (ladder) widest, middle feed, right stats. */
@media (min-width: 992px) {
  .aoe-dashboard__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .aoe-dashboard__col--right {
    grid-column: auto;
  }
}

/* Full-width sections (hero, admin PUG tables, action bars). */
.aoe-dashboard__full {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Stat tiles: fluidly fit as many per row as the panel width allows. */
.aoe-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 0.75rem;
}

/* Award tiles: fluid auto-fit so they spread across a full-width band and
 * wrap cleanly on narrow screens instead of squishing. */
.aoe-dashboard__awards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

/* Action button bar wraps on narrow screens. */
.aoe-dashboard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Vertical rhythm for stacked feed entries inside a panel body. */
.aoe-dashboard__feed {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Keep wide tables scrollable rather than overflowing the grid column. */
.aoe-dashboard .table-responsive {
  width: 100%;
}

/* Small spacing helpers scoped to the dashboard. */
.aoe-dashboard__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.aoe-dashboard__inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}