/* ==========================================================================
   Coffer Phase 3 — Dashboard hero stat tiles + section accents
   --------------------------------------------------------------------------
   Loaded AFTER coffer-brand.css (Phase 1) so any overrides win the cascade.
   Keep this file SMALL — Phase 1 already owns canvas/tokens/keyframes.
   ========================================================================== */

/* Stat tile — light hover lift so the cockpit feels alive without flashing.
   The pulse on the background glyph is handled by .coffer-anim-stat-pulse
   which is already defined in coffer-brand.css. */
.coffer-stat-tile {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.coffer-stat-tile:hover {
  transform: translateY(-1px);
  border-color: rgb(255 255 255 / 0.08);
  box-shadow:
    0 10px 30px -12px rgb(0 0 0 / 0.6),
    inset 0 0 0 1px rgb(255 255 255 / 0.04);
}

/* Tabular nums on stat values stay locked even if the user agent's font
   stack picks an oldstyle figure font. */
.coffer-stat-tile .tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   Section header glyph chips — make sure tone backgrounds don't get nuked
   by Phase 1's .bg-container rounded-3xl override.
   ========================================================================== */

/* The h-7 w-7 chip needs to stay tight; Phase 1 rounds .bg-container to 24px,
   but our header chip is bg-emerald-500/10 etc — not bg-container. Defensive
   reset so any future Phase 1 sweep doesn't accidentally round these. */
section > div > div.h-7.w-7 {
  border-radius: 0.5rem !important; /* rounded-lg */
}

/* ==========================================================================
   Sankey + net-worth chart panel polish (NON-DATA — only the surrounding box)
   --------------------------------------------------------------------------
   We deliberately do NOT recolor the d3-bound fills/strokes — those colors
   come from per-category settings the user picked. We just polish the panel
   chrome around the chart so it sits inside the Backstage canvas cleanly.
   ========================================================================== */

#cashflow-sankey-chart h2,
#net-worth-chart .text-secondary {
  letter-spacing: 0.02em;
}

/* Period select inside chart panels — match Backstage pill styling */
#cashflow-sankey-chart select,
#net-worth-chart select {
  background-color: rgb(255 255 255 / 0.04) !important;
  border-color: rgb(255 255 255 / 0.08) !important;
  color: rgb(255 255 255 / 0.85) !important;
}

/* ===========================================================================
   Tailwind utility classes that Sure's pre-compiled bundle is missing.
   We use these for stat-tile glyphs and label icons. Without them the SVGs
   render at browser default (~300px) instead of the intended size.
   =========================================================================== */
.coffer-stat-tile svg, .coffer-anim-stat-pulse svg { display: block; }

/* sizes used in our partials: w-3.5 h-3.5, w-4 h-4, w-5 h-5, w-32 h-32 */
.coffer-stat-tile .w-3 { width: 0.75rem !important; height: auto; }
.coffer-stat-tile .h-3 { height: 0.75rem !important; }
.coffer-stat-tile .w-3\.5 { width: 0.875rem !important; }
.coffer-stat-tile .h-3\.5 { height: 0.875rem !important; }
.coffer-stat-tile .w-4 { width: 1rem !important; }
.coffer-stat-tile .h-4 { height: 1rem !important; }
.coffer-stat-tile .w-5 { width: 1.25rem !important; }
.coffer-stat-tile .h-5 { height: 1.25rem !important; }
.coffer-stat-tile .w-32 { width: 8rem !important; height: auto; }
.coffer-stat-tile .h-32 { height: 8rem !important; }
.coffer-stat-tile .w-16 { width: 4rem !important; }
.coffer-stat-tile .h-16 { height: 4rem !important; }