/* QPDS Web UI Guidelines §1 — 12-column fluid grid on the 8pt system.
   Dashboards are desktop-first: lg (1024-1440) is the default target with
   KPI cards 4-up; sm/md still degrade gracefully since this dashboard is
   explicitly meant to be checked from a phone during an incident
   (docs/DESIGN.md §5.1). */

.qp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
}

@media (min-width: 768px) {
  .qp-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .qp-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .qp-grid {
    padding: 24px 48px;
  }
}

.qp-col-3 { grid-column: span 4; }
.qp-col-4 { grid-column: span 4; }
.qp-col-8 { grid-column: span 4; }
.qp-col-12 { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .qp-col-3 { grid-column: span 4; }
  .qp-col-4 { grid-column: span 4; }
  .qp-col-8 { grid-column: span 8; }
}

@media (min-width: 1024px) {
  .qp-col-3 { grid-column: span 3; }
  .qp-col-4 { grid-column: span 4; }
  .qp-col-8 { grid-column: span 8; }
}

.qp-kpi-row {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .qp-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .qp-kpi-row { grid-template-columns: repeat(4, 1fr); }
}