/* ============================================================================
   pulse-ui.css — Pulse global design layer (the "reskin" look)
   ----------------------------------------------------------------------------
   Loaded app-wide in base.html AFTER app.css / dark.css / accents.css, so it
   wins on equal specificity. HAND-WRITTEN rules only — the prebuilt app.css
   silently no-ops Tailwind classes it never emitted, so we hook onto the class
   combos the templates already use (cards, .gv deltas) instead of inventing
   utilities. Everything here is visual only: no layout/flow changes, no data.

   Theme: light is the bare rule; dark is handled with [data-theme="dark"].
   Accent: uses the accents.css vars --nerw-ind / --nerw-ind-weak / --nerw-ind-bd
   (both theme- and accent-aware) with an indigo fallback, so it follows the
   user's chosen accent automatically.
   ============================================================================ */

:root{
  --pui-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px -2px rgba(16,24,40,.08);
  --pui-shadow-hover: 0 2px 4px rgba(16,24,40,.05), 0 10px 24px -8px rgba(16,24,40,.14);
  --pui-card-bd: #eceff4;             /* softer than slate-200 on white */
}
[data-theme="dark"]{
  --pui-shadow: 0 1px 2px rgba(0,0,0,.28), 0 2px 10px -3px rgba(0,0,0,.40);
  --pui-shadow-hover: 0 2px 6px rgba(0,0,0,.34), 0 12px 28px -8px rgba(0,0,0,.52);
}

/* ---- 1. Cards -------------------------------------------------------------
   The app's universal card = a rounded box with a border + shadow-sm. Give it
   a softer layered shadow, a lighter border (light mode only — dark.css owns
   the dark card border/bg), and a gentle hover lift. More specific than the
   Tailwind utilities, so no !important needed. */
#appShell :is(.rounded-2xl, .rounded-xl).border.shadow-sm{
  box-shadow: var(--pui-shadow);
  transition: box-shadow .18s ease, border-color .18s ease;
}
:root:not([data-theme="dark"]) #appShell :is(.rounded-2xl, .rounded-xl).border.border-slate-200.shadow-sm{
  border-color: var(--pui-card-bd);
}
/* Hover lift = a stronger shadow only. IMPORTANT: no `transform` here — a transform (even 1px)
   makes a card a containing block for position:fixed descendants, which breaks the fancy-select /
   date-picker popovers that live inside filter-bar cards (they'd render offset + flicker as :hover
   toggles). The shadow alone reads as a lift. Skip pure table shells so wide tables don't react. */
#appShell :is(.rounded-2xl, .rounded-xl).border.shadow-sm:not(.overflow-x-auto):hover{
  box-shadow: var(--pui-shadow-hover);
}

/* ---- 2. Delta figures -----------------------------------------------------
   .gv up/dn/flat are the ▲/▼ growth figures on nearly every data page. Shown as
   plain coloured text — green for a rise, red for a fall — with NO tinted pill
   background (per request). Text colours come from base.html's .gv.up/.dn/.flat
   rules; here we only keep the inline layout and strip the chip. */
#appShell .gv.up, #appShell .gv.dn, #appShell .gv.flat{
  display: inline-flex; align-items: center; gap: 1px;
  font-size: .9em; background: transparent; padding: 0; border-radius: 0;
}

/* ---- 2b. Breakdown table density -----------------------------------------
   The Sales-dashboard Breakdown (.bd-roomy) carries ~20 columns. Give each row
   more vertical breathing room (py-1.5 -> ~py-2.5, +4px top & bottom) for a
   cleaner read, and trim the horizontal padding (px-3/px-4 -> px-2) to claw
   back width so it fits more screens before the table scrolls sideways. One
   rule beats editing every cell; overrides the Tailwind px-/py- utilities. */
#appShell .bd-roomy th, #appShell .bd-roomy td{
  padding-top: .625rem; padding-bottom: .625rem;
  padding-left: .5rem; padding-right: .5rem;
}
#appShell .bd-roomy th:first-child, #appShell .bd-roomy td:first-child{ padding-left: .875rem; }

/* ---- 3. Section headings --------------------------------------------------
   Bricolage is set in base.html. Here: balance wrapping + a touch tighter line
   height on the big display headings so two-line titles sit well. */
#appShell h1, #appShell h2, #appShell .font-display{ text-wrap: balance; line-height: 1.12; }

/* ---- 4. Accent niceties ---------------------------------------------------
   Selection + custom scrollbars tinted with the live accent. */
#appShell ::selection{ background: color-mix(in srgb, var(--nerw-ind, #4f46e5) 24%, transparent); }
#appShell *{ scrollbar-color: color-mix(in srgb, var(--nerw-ind, #4f46e5) 35%, transparent) transparent; }
#appShell *::-webkit-scrollbar{ width: 10px; height: 10px; }
#appShell *::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--nerw-ind, #4f46e5) 28%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
#appShell *::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--nerw-ind, #4f46e5) 48%, transparent);
  background-clip: padding-box;
}

/* ============================================================================
   Opt-in components — a revamped page adds these classes for deeper polish.
   (Applied page-by-page starting with the Insight flagship.)
   ============================================================================ */

/* 5. Page header eyebrow — a small accent label above the page title. Add a
   `pui-eyebrow` div before the <h1> (wrapper may also carry `pui-head`). Keeps
   the template's own h1 size; just adds the eyebrow + tightens the gap. */
.pui-eyebrow{
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--nerw-ind, #4f46e5); margin-bottom: 1px;
}
.pui-eyebrow + h1{ margin-top: 0; }