/* left_to_pmr_by_home_html - the Left to PMR shell's own rules. The table's
 * rules and the chart pop-up's live in pmr_table_html.css and
 * pmr_chart_modal_html.css; nothing is shared between the three.
 *
 * THREE RULES STAY BARE because the root is their subject and a
 * :where(.pmr-dashboard) wrapper in front of them would never match: the accent
 * token rule, its [data-theme="dark"] twin, and the container rule. Everything
 * else is scoped :where(.pmr-dashboard), which adds no specificity.
 *
 * 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 paint --px-bg-deep below short content. The default flex: 0 1 auto
 * keeps the root sized by its content.
 *
 * position: relative, isolation: isolate and z-index: 0 anchor the loading
 * overlay, which is position: absolute.
 *
 * .themed-scrollbar on the root is the dependency's class and is not declared
 * here.
 *
 * ORDER: no tie. Every selector below is a private pmr-* name; the shared px-*
 * classes the template uses are not redeclared here.
 *
 * THE TWO SLOT MOUNT CLASSES, .pmr-table-slot-mount and
 * .pmr-chart-modal-slot-mount, carry NO declarations and so have no rule here.
 * They exist so the next reader has a name to search for. The mount divs are
 * the flex items of .pmr-content-area.
 *
 * The loading overlay is hidden by the dependency's .px-loading-overlay rule,
 * which the designer never loads, so the canvas shows LOADING as flowed text.
 */

/* ========================================
   ACCENT VARIABLES - Left to PMR by Home
   ======================================== */
.pmr-dashboard {
  --accent: #059669;
  --accent-hover: #047857;
  --accent-subtle: rgba(5, 150, 105, 0.08);
  --pmr-accent: #059669;
  --pmr-accent-hover: #047857;
  --pmr-accent-light: rgba(5, 150, 105, 0.08);
  --pmr-accent-surface: #e6f6ef;
  --pmr-accent-glow: rgba(5, 150, 105, 0.12);
  --pmr-success: #16a34a;
  --pmr-error: #dc2626;
  --pmr-warning: #d97706;
  --px-loading-accent: #059669;
}

[data-theme="dark"] .pmr-dashboard,
.pmr-dashboard[data-theme="dark"] {
  --accent: #34d399;
  --accent-hover: #059669;
  --accent-subtle: rgba(52, 211, 153, 0.15);
  --pmr-accent: #34d399;
  --pmr-accent-hover: #059669;
  --pmr-accent-light: rgba(52, 211, 153, 0.15);
  --pmr-accent-surface: #21443a;
  --pmr-accent-glow: rgba(52, 211, 153, 0.25);
}

/* ========================================
   DASHBOARD CONTAINER
   ======================================== */
.pmr-dashboard {
  font-family: var(--px-font);
  background: var(--px-bg-deep);
  color: var(--px-text-primary);
  position: relative;
  isolation: isolate;
  z-index: 0;
}

/* ========================================
   LAYOUT
   ======================================== */
:where(.pmr-dashboard) .pmr-content-area {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

:where(.pmr-dashboard) .pmr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ========================================
   STAT CARDS
   ======================================== */
:where(.pmr-dashboard) .pmr-stats-row {
  display: flex;
  gap: 16px;
}

:where(.pmr-dashboard) .pmr-stat-card {
  flex: 1;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  padding: 20px 24px;
  box-shadow: var(--px-shadow);
}

:where(.pmr-dashboard) .pmr-stat-label {
  font-family: var(--px-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--px-text-muted);
  margin: 0 0 8px 0;
}

:where(.pmr-dashboard) .pmr-stat-value {
  font-family: var(--px-font);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
  line-height: 1.2;
}

/* ========================================
   BOT-CRASHED PRINT
   ========================================
   Between the stats row and the table's own "Care Home Summary"
   heading. The note is NOT decoration: this button's population is
   ITEM-level (a script the bot part-labelled) while the table above
   counts SCRIPTS with no PMR entry at all, so the two disagree by
   design and the copy has to say so where the button is. */
:where(.pmr-dashboard) .pmr-crashed-print {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

:where(.pmr-dashboard) .pmr-crashed-note {
  font-family: var(--px-font);
  font-size: 0.8rem;
  color: var(--px-text-muted);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  :where(.pmr-dashboard) .pmr-content-area {
    padding: 16px;
    gap: 16px;
  }
  :where(.pmr-dashboard) .pmr-stats-row {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  :where(.pmr-dashboard) .pmr-content-area {
    padding: 12px;
    gap: 12px;
  }
  :where(.pmr-dashboard) .pmr-stat-value {
    font-size: 1.5rem;
  }
}