/* bagger_drilldown_html — the per-bagger drill-down panel.
 *
 * Five rules below are decided once for both this panel and the screen
 * behind it.
 *
 * 1. SCOPED ON `.bd-overlay` AS A REAL CLASS, NEVER `:where(.bd-overlay)`.
 *    The screen behind this panel declares 32 of the same selectors, and its
 *    own asset scopes them `:where(.bp-root)` at zero added specificity. Both
 *    sheets are permanent head links now, and this panel's root sits INSIDE
 *    `.bp-root` between `add_component` and pxShowOverlay's portal, and again
 *    after the toolkit re-homes it on close — so in those frames a screen rule
 *    would match these nodes and win a zero-specificity tie on link order. A
 *    real class puts every rule here at (0,2,0) against the screen's (0,1,0),
 *    and the panel is self-determining whatever the link order and wherever
 *    the node currently lives.
 *
 * 2. THE TOKENS ARE DECLARED ON THE ROOT ELEMENT, NOT ON `:root`. The shared
 *    dependency declares the same `--px-*` names and appends its block to
 *    <head> at startup, i.e. after every head link, so a `:root` band in this
 *    file would LOSE and the panel would repaint (its `--px-text-primary` and
 *    the whole dark surface set differ from the estate's). A custom property
 *    declared on an element beats the value it would inherit from `html`
 *    whatever the sheet order, and it travels with the node into
 *    `#px-modal-portal`. The module's `getComputedStyle` reads moved from
 *    `document.documentElement` to the form root for the same reason.
 *
 * 3. THE RULES BOTH FORMS DECLARE IDENTICALLY ARE NOT HERE. `.bp-reveal` and
 *    its first four steps, `@keyframes bpReveal`, the six `.bp-section-*`
 *    rules, the four `.bp-stat-*` rules, `.bp-stat::before`, `.px-page-title`,
 *    `.px-page-title::before` and `.px-subtitle` live once in
 *    `bagging_performance.css`. The `.bp-*` ones are scoped
 *    `:where(.bp-root, .bd-overlay)` there; the three `.px-*` ones take a real
 *    ancestor class instead, because `theme.css` declares them too and would
 *    win the zero-specificity tie from a head link. Restating any of them here
 *    would be the hand-synced pair this family keeps retiring.
 *
 * 4. THREE GLOBAL RULES ARE DELETED, not scoped: the universal `box-sizing`
 *    reset (`theme/assets/theme.css` already declares it app-wide),
 *    `html, body`, and `body { min-height: 100vh }`. A body <style> block
 *    could carry them; a permanent head link would impose them on every screen
 *    in the app.
 *
 * 5. `@keyframes pulseDot` IS RENAMED `bdPulseDot`. Keyframe names are global
 *    and this file is loaded on every page now; `pulseDot` is a name any other
 *    screen could reach for. The one `animation:` declaration that used it is
 *    rewritten with it. Nothing else in either repo declares or names it.
 *
 * No designer gate. Nothing here is hidden until JavaScript runs: `.bp-reveal`
 * is a CSS animation, which the designer runs to completion. The canvas draws
 * the panel as a plain block, because `.px-modal-overlay`'s chrome is injected
 * from Python by the dependency at runtime and the designer runs no Python —
 * already true of this form today, and not fixable from here.
 *
 * The root rule is bare on `.bd-overlay` and adds no `position`, `height` or
 * `overflow`: this root is the overlay itself and the dependency's
 * `.px-modal-overlay` chrome owns its positioning, including the inset from
 * the app shell's `.root-layout .px-modal-overlay { left: var(--sidebar-width) }`
 * that keeps the nav reachable beside the sheet.
 */

.bd-overlay {
  --px-bg-deep: #f8fafc;
  --px-bg-card: #ffffff;
  --px-bg-elevated: #f1f5f9;
  --px-border: #e2e8f0;
  --px-border-strong: #cbd5e1;
  --px-border-subtle: rgba(0, 0, 0, 0.06);
  --px-text-primary: #1e293b;
  --px-text-secondary: #475569;
  --px-text-muted: #64748b;
  --px-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --px-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --px-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --px-radius: 12px;
  --px-radius-sm: 8px;
  --px-font: 'DM Sans', system-ui, sans-serif;
  --px-mono: 'Space Mono', monospace;
  --px-success: #10b981;
  --px-warning: #f59e0b;
  --px-danger: #ef4444;
  --px-info: #3b82f6;

  --bp-accent: #d4a017;
  --bp-accent-strong: #b8860b;
  --bp-accent-soft: rgba(212, 160, 23, 0.12);
  --bp-accent-glow: rgba(212, 160, 23, 0.35);

  /* Bag type palette lifted from theme/parameters.yaml */
  --bp-bag-main:      #d4a017;
  --bp-bag-tray:      #A994D4;
  --bp-bag-fridge:    #7DB4E3;
  --bp-bag-cd:        #ED9090;
  --bp-bag-supp:      #B39283;
  --bp-bag-home:      #64748b;

  --bp-acute: #73B973;
  --bp-monthly: #d4a017;
}
[data-theme="dark"] .bd-overlay {
  --px-bg-deep: #0b1220;
  --px-bg-card: #131c2e;
  --px-bg-elevated: #1e293b;
  --px-border: #273349;
  --px-border-strong: #3a4a66;
  --px-border-subtle: rgba(255, 255, 255, 0.06);
  --px-text-primary: #f1f5f9;
  --px-text-secondary: #cbd5e1;
  --px-text-muted: #94a3b8;
  --px-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --px-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --px-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.3);
  --bp-accent: #f0c84f;
  --bp-accent-strong: #5eead4;
  --bp-accent-soft: rgba(45, 212, 191, 0.16);
  --bp-bag-main: #f0c84f;
  --bp-acute: #73B973;
  --bp-monthly: #f7dd6f;
}

.bd-overlay .bp-page {
  padding: 1.75rem 2rem 3rem;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 820px) { .bd-overlay .bp-page { padding: 1.25rem; } }

/* ===== Header ===== */
.bd-overlay .bp-ind-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.bd-overlay .bp-ind-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bd-overlay .bp-ind-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bp-accent) 0%, var(--bp-accent-strong) 100%);
  color: #fff;
  font-family: var(--px-font);
  font-weight: 700;
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px var(--bp-accent-glow);
  position: relative;
}
.bd-overlay .bp-ind-avatar::after {
  content: '';
  position: absolute;
  bottom: 2px; right: 2px;
  width: 14px; height: 14px;
  background: var(--px-success);
  border-radius: 50%;
  border: 3px solid var(--px-bg-deep);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: bdPulseDot 1.8s ease-out infinite;
}
@keyframes bdPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.bd-overlay .bp-rank-crown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4d6 0%, #f7dd6f 100%);
  border: 1px solid #d4a017;
  color: #7a4d0d;
  font-family: var(--px-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(212, 160, 23, 0.25);
  margin-left: 8px;
}
[data-theme="dark"] .bd-overlay .bp-rank-crown {
  background: linear-gradient(135deg, #3d2e0a 0%, #6b4e12 100%);
  color: #f1c464;
  border-color: #f1c464;
}
.bd-overlay .bp-theme-toggle {
  border: 1px solid var(--px-border);
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  width: 36px; height: 36px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s ease;
}
.bd-overlay .bp-theme-toggle:hover { color: var(--px-text-primary); border-color: var(--px-border-strong); }

/* ===== Stat row ===== */
.bd-overlay .bp-stat-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  .bd-overlay .bp-stat-row { grid-template-columns: repeat(2, 1fr); }
}

.bd-overlay .bp-stat {
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--px-shadow);
  position: relative;
  overflow: hidden;
}
.bd-overlay .bp-stat.is-hero::before {
  background: linear-gradient(90deg, var(--bp-accent) 0%, var(--bp-accent-strong) 60%, transparent 100%);
  height: 3px;
  opacity: 1;
}
.bd-overlay .bp-stat-value.accent {
  color: var(--bp-accent-strong);
}
[data-theme="dark"] .bd-overlay .bp-stat-value.accent { color: var(--bp-accent); }
.bd-overlay .bp-stat-value .unit {
  font-size: 0.75rem;
  color: var(--px-text-muted);
  font-weight: 400;
  margin-left: 4px;
}
.bd-overlay .bp-stat-sub .delta-up { color: var(--px-success); font-weight: 700; }
.bd-overlay .bp-stat-sub .delta-down { color: var(--px-danger); font-weight: 700; }

/* ===== Rate chart ===== */
.bd-overlay #bd-rate-chart {
  min-height: 320px;
}

/* ===== Row: donuts + comparison ===== */
.bd-overlay .bp-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 960px) { .bd-overlay .bp-row-half { grid-template-columns: 1fr; } }

.bd-overlay #bd-bag-donut, .bd-overlay #bd-mode-donut { min-height: 280px; }

/* ===== Row: comparison vs own avg ===== */
.bd-overlay .bp-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 960px) { .bd-overlay .bp-compare-row { grid-template-columns: 1fr; } }

.bd-overlay .bp-compare-item {
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--px-border-subtle);
}
.bd-overlay .bp-compare-item:last-child { border-bottom: none; }
.bd-overlay .bp-compare-label {
  font-family: var(--px-mono);
  font-size: 0.68rem;
  color: var(--px-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.bd-overlay .bp-compare-label .compare-delta {
  font-size: 0.72rem;
  color: var(--px-success);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.bd-overlay .bp-compare-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bd-overlay .bp-compare-bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 52px;
  align-items: center;
  gap: 12px;
}
.bd-overlay .bp-compare-bar-label {
  font-size: 0.8rem;
  color: var(--px-text-secondary);
  font-weight: 500;
}
.bd-overlay .bp-compare-bar-label.today {
  color: var(--px-text-primary);
  font-weight: 700;
}
.bd-overlay .bp-compare-bar-track {
  height: 10px;
  background: var(--px-bg-elevated);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.bd-overlay .bp-compare-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The four bars opened at `style="width:0%"` in the markup, which an HTML
   template may not carry. Declared here instead, so a bar still starts empty
   and still animates out to its real width: `_compareBar` writes
   `el.style.width` at render time, and an inline declaration beats any
   stylesheet rule whatever the link order. */
.bd-overlay .bp-compare-bar-fill { width: 0; }
.bd-overlay .bp-compare-bar-fill.today {
  background: linear-gradient(90deg, var(--bp-accent) 0%, var(--bp-accent-strong) 100%);
  box-shadow: 0 0 8px var(--bp-accent-glow);
}
.bd-overlay .bp-compare-bar-fill.avg {
  background: var(--px-border-strong);
}
.bd-overlay .bp-compare-bar-value {
  font-family: var(--px-mono);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
  color: var(--px-text-primary);
}

/* ===== Action timeline ===== */
/* The timeline card's body carried `style="padding: 6px 1rem 1rem;"`, tighter
   than the `.bp-section-body` padding it overrode inline. It wears the second
   class `bp-timeline-body` now; at (0,2,0) it beats the shared asset's
   `:where(.bp-root, .bd-overlay) .bp-section-body` at (0,1,0) from any
   position in the head. */
.bd-overlay .bp-timeline-body { padding: 6px 1rem 1rem; }

.bd-overlay .bp-timeline {
  display: flex;
  flex-direction: column;
  max-height: 440px;
  overflow-y: auto;
}
.bd-overlay .bp-timeline::-webkit-scrollbar { width: 8px; }
.bd-overlay .bp-timeline::-webkit-scrollbar-track { background: transparent; }
.bd-overlay .bp-timeline::-webkit-scrollbar-thumb {
  background: var(--px-border-strong);
  border-radius: 4px;
}

.bd-overlay .bp-event {
  display: grid;
  grid-template-columns: 60px 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.bd-overlay .bp-event:hover { background: var(--bp-accent-soft); }

.bd-overlay .bp-event-time {
  font-family: var(--px-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--px-text-primary);
}
.bd-overlay .bp-event-time small {
  display: block;
  font-weight: 400;
  font-size: 0.65rem;
  color: var(--px-text-muted);
  margin-top: 2px;
  letter-spacing: 0.05em;
}
.bd-overlay .bp-event-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--px-font);
  font-weight: 700;
  font-size: 0.75rem;
  color: #fff;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.bd-overlay .bp-event-icon.main   { background: var(--bp-bag-main); }
.bd-overlay .bp-event-icon.tray   { background: var(--bp-bag-tray); }
.bd-overlay .bp-event-icon.fridge { background: var(--bp-bag-fridge); }
.bd-overlay .bp-event-icon.cd     { background: var(--bp-bag-cd); }
.bd-overlay .bp-event-icon.supp   { background: var(--bp-bag-supp); }
.bd-overlay .bp-event-icon.home   { background: var(--bp-bag-home); }
.bd-overlay .bp-event-icon.gap    { background: var(--px-warning); }

.bd-overlay .bp-event-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bd-overlay .bp-event-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--px-text-primary);
}
.bd-overlay .bp-event-meta {
  font-family: var(--px-mono);
  font-size: 0.68rem;
  color: var(--px-text-muted);
  letter-spacing: 0.05em;
}
.bd-overlay .bp-event-right {
  font-family: var(--px-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--px-text-primary);
  text-align: right;
}
.bd-overlay .bp-event-right small {
  display: block;
  font-weight: 400;
  color: var(--px-text-muted);
  font-size: 0.7rem;
  margin-top: 2px;
}

.bd-overlay .bp-event.gap-block {
  background: repeating-linear-gradient(-45deg, transparent 0 4px, var(--px-bg-elevated) 4px 8px);
  border-radius: var(--px-radius-sm);
  margin: 4px 0;
}
.bd-overlay .bp-event.gap-block .bp-event-title { color: var(--px-warning); font-style: italic; }
/* Reveal — the stagger itself is in the shared asset, declared once for both
   forms. Only the fifth step is this form's: the panel has five revealed
   blocks where the screen has four. */
.bd-overlay .bp-reveal:nth-child(5) { animation-delay: 0.36s; }

/* ===== Modal chrome =====
   This panel is authored here and shown with the toolkit's own
   pxShowOverlay, so nothing is suspended and the shell's navigation sweep
   can destroy it. These two rules size it as px_form_alert's `large` +
   `viewport:False` would: 93% of the sheet
   (NOT 93vw — the sheet is inset to the content area and is narrower
   than the window), and a body that scrolls inside a capped box.
   The sheet's own inset is the app shell's
   `.root-layout .px-modal-overlay { left: var(--sidebar-width) }`,
   which applies because no `px-modal-viewport` class is added. */
.bd-overlay .bd-modal {
  width: 93%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.bd-overlay .bd-modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}