/* Layout only; reusable KPI and chart styling lives in components.css. */
.dashboard-screen { max-width: 1360px; margin-inline: auto; padding: 20px 16px 112px; display: grid; gap: 16px; align-content: start; min-height: 100%; }
.dashboard-wide { grid-column: 1 / -1; min-width: 0; }
.dashboard-fields, .dashboard-grid { display: grid; gap: 16px; min-width: 0; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.dashboard-grid > * { min-width: 0; }
.dashboard-grid .scroll-list { max-height: 420px; gap: 12px; }
.dashboard-action { padding: 16px; }
.dashboard-action button { width: 100%; }
@media (width < 840px) {
  .dashboard-action { position: fixed; bottom: 0; inset-inline: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 2; }
}
@media (min-width: 840px) {
  .dashboard-screen { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 32px; gap: 16px; }
  .dashboard-grid, .dashboard-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-action { grid-column: 1 / -1; }
}

.attention-card { text-align: start; }
/* Explicit content layout avoids inherited global section spacing on disclosures. */
.dashboard-disclosure { align-self: start; margin: 0; border-block-end: 1px solid var(--border); }
.dashboard-disclosure > summary { display: flex; align-items: center; gap: 12px; min-height: var(--touch); padding: 12px 4px; cursor: pointer; list-style: none; font-weight: var(--type-label-weight); }
.dashboard-disclosure > summary::-webkit-details-marker { display: none; }
.dashboard-disclosure .disclosure-chevron { margin-inline-start: auto; transition: transform .15s; }
.dashboard-disclosure[open] > summary .disclosure-chevron { transform: rotate(180deg); }
.dashboard-disclosure > section { margin-block: 12px 20px; }
#attention { margin-top: 12px; align-items: stretch; }
.attention-card { display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: 12px; width: 100%; }
@media (min-width: 840px) { #attention { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .disclosure-chevron { transition: none; } }
#history-charts { margin-top: 20px; }
@media (width < 840px) { .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } #attention { grid-template-columns: minmax(0, 1fr); } }