/* The Hours Variance KPI card's own styling. Linked from anvil.yaml
 * native_deps.head_html, which is what styles the
 * designer canvas as well as the running app.
 *
 * NO :where() ROOT SCOPE, on purpose. This form keeps two top-level nodes — the
 * tile and its drill-down overlay — so Anvil's own wrapper is the form root and
 * no element carries a per-form class to scope on. That is safe only because
 * every rule below is led by one of this card's two ids, or names a class
 * declared nowhere else in the repo (.rc-role-*, .rc-unpublished-warning*,
 * .rc-kpi-badge-off). An id-led rule is order-independent, so the head link
 * sorting before the parent's rules changes nothing. A future rule here that is
 * neither id-led nor privately named would leak across every section on the
 * dashboard with no scope to stop it.
 */

/* Per-card accent (RF-AD-046). The stripe, hover glow, value
   font, modal stripe, row highlight, drill-value font and back-button
   / tooltip accents all live once in the RotaCloud parent; this child
   only names its colour. */
#kpi-variance-card { --px-chart-accent: var(--px-chart-violet); --px-chart-accent-glow: var(--px-glow-violet); }
#variance-modal-overlay { --px-chart-accent: var(--px-chart-violet); }

/* Variance modal wider max-width */
#variance-modal-overlay .rc-modal { max-width: 1000px; }
/* Main table and daily table rows ARE clickable (drill deeper) */
#variance-drill-table tbody tr,
#variance-daily-table tbody tr { cursor: pointer; }
#variance-drill-table tbody tr:hover,
#variance-daily-table tbody tr:hover { background: var(--px-bg-elevated); }
#variance-drill-table .rc-drill-value.positive,
#variance-daily-table .rc-drill-value.positive { color: var(--px-danger-ink); }
#variance-drill-table .rc-drill-value.negative,
#variance-daily-table .rc-drill-value.negative { color: var(--px-success-ink); }
.rc-role-section { margin-bottom: 1rem; border: 1px solid var(--px-border); border-radius: 12px; overflow: hidden; }
.rc-role-header-collapsible { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--px-bg-elevated); cursor: pointer; }
.rc-unpublished-warning { margin-top: 1rem; border: 1px solid var(--px-chart-violet); border-radius: 12px; overflow: hidden; }
.rc-unpublished-warning-header { padding: 0.75rem 1rem; background: rgba(139,92,246,0.1); }
.rc-unpublished-warning-body { padding: 0.75rem 1rem; }

/* The badge's starting display:none, as a class because a template may carry
   no style attribute. The parent declares .rc-kpi-badge with no display of its own,
   so nothing at equal specificity contests this, and renderCard's
   badge.style.display writes still win as inline styles. */
.rc-kpi-badge-off { display: none; }