/* labelling_performance_html - the section shell's own rules. The four
 * .lb-section-* card rules are NOT here: they are the three children's and live
 * in this section's shared labelling_performance.css.
 *
 * TWO RULES STAY BARE because the root is their subject and a
 * :where(.lb-dashboard) wrapper in front of them would never match: the token
 * rule and its [data-theme="dark"] twin. The same goes for the root's copy
 * inside the 768px block.
 *
 * THE ROOT HAS NO height: 100% AND NO overflow-y: auto. The root is the flex
 * item inside main's scrolling content mount; either declaration would move
 * the scrollbar off the layout onto the dashboard. No flex: 1 0 auto either:
 * it would show the root's background below its content on a short screen.
 * position: relative, isolation: isolate and z-index: 0 anchor #lb-loading and
 * hold that overlay under the dependency's modals.
 *
 * .themed-scrollbar on the root is the dependency's class and is not declared
 * here.
 *
 * THE THREE MOUNT RULES carry each mount div's margin-bottom: 2rem.
 *
 * ORDER. .lb-dashboard .px-page-title in the 768px block keeps .lb-dashboard as
 * a REAL class, at (0,2,0), because wrapped in :where() it would tie with
 * theme.css's .px-page-title { font-size: 1.75rem }, which a head link cannot
 * be relied on to beat.
 *
 * Nothing here is hidden until JavaScript runs, so the designer canvas shows
 * the three mounts as the live screen does.
 */

.lb-dashboard {
  --lb-accent-blue: #2563eb;
  --lb-accent-emerald: #059669;
  --lb-accent-amber: #d97706;
  --lb-accent-violet: #7c3aed;
  --lb-accent-rose: #e11d48;
  --accent: var(--lb-accent-blue);
  --accent-hover: #1d4ed8;
  --accent-subtle: rgba(37, 99, 235, 0.1);
  --px-loading-accent: var(--lb-accent-blue);
  font-family: var(--px-font);
  background: var(--px-bg-deep);
  padding: 1.5rem;
  position: relative;
  isolation: isolate;
  z-index: 0;
}

[data-theme="dark"] .lb-dashboard {
  --lb-accent-blue: #3b82f6;
  --lb-accent-emerald: #34d399;
  --lb-accent-amber: #fbbf24;
  --lb-accent-violet: #a78bfa;
  --lb-accent-rose: #fb7185;
  --accent-hover: #60a5fa;
  --accent-subtle: rgba(59, 130, 246, 0.15);
}

:where(.lb-dashboard) .lb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

/* R3-81: shown only while an automatic refresh has failed, so the
   figures on screen are visibly ageing. Reuses the amber this screen
   already declares - no new colour. */
:where(.lb-dashboard) .lb-stale-banner {
  color: var(--lb-accent-amber);
  font-weight: 700;
  padding: 0.5rem 0 0 0;
}

:where(.lb-dashboard) .lb-counts-slot-mount,
:where(.lb-dashboard) .lb-daily-slot-mount,
:where(.lb-dashboard) .lb-prediction-slot-mount {
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .lb-dashboard { padding: 1rem; }
  .lb-dashboard .px-page-title { font-size: 1.5rem; }
}