/* v3 event dashboard layout: Event Pulse (super admin) + the tenant admin
   event dashboard (admin redesign phase 5 step 1). Shared body
   core/_event_dash_body.html (#114); shells tenantadmin/_dashboard_content.html
   and superadmin/_event_pulse_content.html.
   One column: figure cards (check-in and promo code uses included, Ledger 2
   decisions 344, 345), Needs attention, charts, Revenue breakdown beside
   Recent checkouts (.lg-pair below), interest answers, field hand-outs. Phones put Needs attention before the figures (reference §7,
   board HybridPhoneSA); the DOM has it first, so the reading order matches
   the phone, and wider screens move the figures up. */

.lg-dash { display: flex; flex-direction: column; gap: var(--space-4); }
.lg-dash__sync { margin: 0; color: var(--text-muted); font-size: var(--size-caption); line-height: var(--leading-caption); }
.lg-dash__cards { display: grid; gap: var(--space-4); }
.lg-dash__card { display: flex; flex-direction: column; gap: var(--space-3); }
.lg-dash__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.lg-dash__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--touch-target);
  color: var(--primary);
  font-size: var(--size-label);
  text-decoration: none;
}
.lg-dash__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.lg-dash__fact { margin: 0; color: var(--text-muted); font-size: var(--size-caption); line-height: var(--leading-caption); }

/* Revenue breakdown: a short statement, amounts right-aligned, the Net
   revenue total ruled off; the lines that are not the organiser's sit below
   in muted text. */
/* Capped width: on a full-width card the amounts stay near their labels. */
.lg-rev__list { max-inline-size: 36rem; margin: 0; }
.lg-rev__row { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-1); }
.lg-rev__row dt { min-inline-size: 0; }
.lg-rev__row dd { margin: 0; flex: none; text-align: end; }
.lg-rev__row--total { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--border-strong); font-weight: 600; }
.lg-rev__list--extra { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--size-label); }

/* Paired cards on one row (owner, decision 344: "cards on the same row match
   in size and height, no card big beside a small one with empty space").
   The first card sets the row's height; .lg-pair__fill takes that height
   without adding its own (contain: size) and fills it: a list shows as many
   whole rows as fit (js/v3/fit.js, data-lg-fit) with "View all" one link
   away; stat rows spread out (.lg-stats). --half = two cards of a kind, both
   stretched to the taller. One column below 64em (nothing contained there). */
.lg-pair { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.lg-pair > * { min-width: 0; }
.lg-pair > .lg-card { display: flex; flex-direction: column; }
@media (min-width: 64em) {
  .lg-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .lg-pair--half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-pair > .lg-pair__fill:not(:only-child) { contain: size; overflow: hidden; }
  .lg-pair__fill [data-lg-fit] { flex: 1; min-block-size: 0; overflow: hidden; }
  /* Decision 356: a Revenue breakdown stretched by the checkouts beside it
     keeps its Net revenue total at the bottom (no hole under it). */
  .lg-pair > .lg-rev .lg-rev__list:first-of-type { flex: 1; display: flex; flex-direction: column; }
  .lg-pair > .lg-rev .lg-rev__row--total { margin-block-start: auto; }
}

@media (min-width: 40em) {
  .lg-dash__kpi { order: -1; }
}
@media (min-width: 64em) {
  .lg-dash__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* One card alone takes the whole row (no empty half). */
  .lg-dash__cards > :only-child { grid-column: 1 / -1; }
}