/* =============================================================================
   Figma Design System — Net-New Utilities
   =============================================================================
   Scope
   -----
   Pattern primitives extracted from the Figma Make redesign (file key
   `NPx9vrixjWdTtCAbHOBKnN`) that recur 3+ times across the redesigned
   Agent Hub surfaces (Dashboard / Page 0 / Page 1 / Page 2 / Post-Bind v2)
   and are NOT already covered by `wwwroot/css/nxus-components.css`.

   Hard rules
   ----------
   1. Brand colors MUST flow through BrandingService CSS variables:
        --brand-primary / --brand-secondary / --brand-accent / --brand-tertiary
        (+ their `-hover`, `-contrast`, `-alpha-5/10/20`, `-gradient` variants)
        --tier-c-{info|success|warning|destructive|neutral|teal|purple|orange}{,-bg,-border}
      Neutral grays (#1f2937, #6b7280, #e5e7eb, #f3f4f6, #d1d5db, #f9fafb,
      #9ca3af, #111827, #374151, #4b5563, #ffffff) are non-brand neutrals and
      may appear literal.
   2. No new CSS variables are declared here — only consumed. Tokens come from
      DynamicCssGenerator.cs (`:root`) and nxus-components.css (`--gradient-g*`,
      `--radius-*`, `--shadow-*`, `--space-*`, etc.).
   3. Classes added here MUST NOT duplicate `nxus-components.css`. If a pattern
      is already covered there, this file links to it via the docs only.
   4. Naming convention:
        `.nxus-*`  — extends the existing nxus design system namespace
        `.fig-*`   — Figma-redesign-specific affordances (new shapes that
                     have no direct nxus counterpart yet)

   Registration
   ------------
   Linked from `Components/App.razor` AFTER `nxus-components.css` so utilities
   here can layer on top of (but never have to !important-fight) the existing
   system. Order:
     1) bootstrap.min.css
     2) app.css                    (DynamicCssGenerator output → brand vars)
     3) css/nxus-components.css    (existing system)
     4) css/figma-design-system.css  ← THIS FILE
     5) EnvRiskMgmtApp.styles.css  (scoped .razor.css bundle)

   Section index
   -------------
   §1  Accent stripe (top bar) on any container — `.fig-accent-bar`
   §2  Signature card variants — `.fig-card`, `.fig-card--lift`,
       `.fig-card-header`, `.fig-card-section-title`
   §3  Tier C info / success / warning / destructive banners — `.fig-banner-*`
   §4  Yes/No toggle button pair — `.fig-toggle`, `.fig-toggle.is-selected`
   §5  Pill buttons (gradient, accent, outline-neutral) — `.fig-btn-*`
   §6  Section heading with icon tile — `.fig-section-head`
   §7  Two-column grids — `.fig-grid-20-80`, `.fig-grid-3-2`
   §8  Sub-header (sticky breadcrumb band) — `.fig-subheader`
   §9  Modal frame helpers (stripe + body scroll) — `.fig-modal-*`
   §10 Stat / metric card extras (trend pill) — `.fig-trend-pill-*`
   §11 Brand left-rail accent — `.fig-rail`
   §12 Form row pattern — `.fig-form-row`
   §13 Soft hover lift — `.fig-hover-lift`
   §14 Package column primitives — `.fig-pkg-*`
   §15 Payment / ledger primitives — `.fig-ledger-*`, `.fig-payment-path`
   ========================================================================== */


/* §1 ─── Accent stripe ────────────────────────────────────────────────────
   The 4 px gradient bar that crowns every redesigned card and modal.
   Brand-primary → brand-secondary → brand-accent gradient (--gradient-g2).
   nxus-components.css already exposes `.nxus-card__stripe` / `.nxus-stripe`
   / `.has-accent-stripe`. These two are the DRY-er versions for inline use
   inside any container (Bootstrap card, plain div, modal-content).        */

.fig-accent-bar {
  display: block;
  height: 4px;
  background: var(--gradient-g2);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  flex-shrink: 0;
}

.fig-accent-bar--solid-primary {
  background: var(--brand-primary);
}

.fig-accent-bar--solid-secondary {
  background: var(--brand-secondary);
}

.fig-accent-bar--solid-accent {
  background: var(--brand-accent);
}


/* §2 ─── Signature card ───────────────────────────────────────────────────
   White, 10 px radius, 1 px gray-200 border, soft shadow. nxus-components.css
   already defines `.nxus-card` / `.card` with this base; `.fig-card` is a
   plain-div variant for cases where the parent isn't a Bootstrap card and
   the codebase currently inlines the same six declarations.

   Hot spots replaced by this class (audit, see migration doc):
   - MarketMatchPackageColumn:22 (border, shadow, radius, bg, flex column)
   - PricingTargetCard:9-10     (bg-white rounded-3 border + box-shadow)
   - OrderCoverageModal:26      (rounded modal-content shell)             */

.fig-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.fig-card--lift {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.fig-card--lift:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Overflow-visible variant — opt-in escape for cards that host a
   position-absolute child (typeahead dropdown, popover, tooltip) whose
   menu must extend past the card's bottom edge. The default `.fig-card`
   sets `overflow: hidden` to clip inner content to the rounded corners;
   z-index doesn't escape that clip context, so descendants get cut off
   regardless. Apply this modifier on the specific card hosting the
   overflowing widget — don't change the default. */
.fig-card--overflow-visible {
  overflow: visible;
}

/* Slim variant — used for inline notice cards (EndorsementsNote-style). */
.fig-card--slim {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Card header band — heading + optional subtitle in a `border-b` row. The
   nxus-components.css `.nxus-card__header` is similar but expects flex
   children; `.fig-card-header` is the no-flex baseline for inline use.   */
.fig-card-header {
  padding: var(--space-5) var(--space-6) var(--space-3);
  border-bottom: 1px solid #e5e7eb;
}

.fig-card-header__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 2px;
  line-height: 1.3;
}

.fig-card-header__subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

.fig-card-body {
  padding: var(--space-5) var(--space-6);
}

/* Section title used inside a card body (e.g. "POLICY SUMMARY",
   "COST BREAKDOWN", "COVERAGE LIMITS") — small-caps, gray-500, tracked.
   Replaces literal `text-uppercase fw-bold` + 4-property inline style
   currently repeated in OrderCoverageModal:73,86 and
   MarketMatchPackageColumn:55,98,184,188. */
.fig-card-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 var(--space-2);
}


/* §3 ─── Tier C banners ──────────────────────────────────────────────────
   Light tinted rounded box + bordered, leading icon, normal-weight body.
   Backed by the Tier C semantic palette emitted by BrandingService:
     --tier-c-{info|success|warning|destructive|neutral|teal|purple|orange}
     +-bg / -border for each.

   Currently inlined in PricingTargetCard:36-37,
   OrderCoverageModal:129-130, ProfessionalLiabilityCard, et al. */

.fig-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  font-size: 0.9rem;
  line-height: 1.5;
}

.fig-banner__icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1rem;
  line-height: 1;
}

.fig-banner__body { flex: 1 1 auto; }

.fig-banner__title {
  font-weight: 600;
  margin-right: 4px;
}

.fig-banner--info {
  background: var(--tier-c-info-bg);
  color: var(--tier-c-info);
  border-color: var(--tier-c-info-border);
}

.fig-banner--success {
  background: var(--tier-c-success-bg);
  color: var(--tier-c-success);
  border-color: var(--tier-c-success-border);
}

.fig-banner--warning {
  background: var(--tier-c-warning-bg);
  color: var(--tier-c-warning);
  border-color: var(--tier-c-warning-border);
}

.fig-banner--destructive {
  background: var(--tier-c-destructive-bg);
  color: var(--tier-c-destructive);
  border-color: var(--tier-c-destructive-border);
}

.fig-banner--neutral {
  background: var(--tier-c-neutral-bg);
  color: var(--tier-c-neutral);
  border-color: var(--tier-c-neutral-border);
}

.fig-banner--teal {
  background: var(--tier-c-teal-bg);
  color: var(--tier-c-teal);
  border-color: var(--tier-c-teal-border);
}

.fig-banner--purple {
  background: var(--tier-c-purple-bg);
  color: var(--tier-c-purple);
  border-color: var(--tier-c-purple-border);
}

.fig-banner--orange {
  background: var(--tier-c-orange-bg);
  color: var(--tier-c-orange);
  border-color: var(--tier-c-orange-border);
}


/* §4 ─── Yes / No toggle ─────────────────────────────────────────────────
   Selected = brand-secondary fill on white text; unselected = white with
   gray-300 border and gray-700 text. Replaces the 7-line ternary style
   block currently inlined in PricingTargetCard.RenderYesNoButton, all
   three CPL cards on Page 1, Coverage Selection (if/when split), and the
   Mark-as-Rejected modal's "Marked by" radio cluster.                    */

.fig-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 8px 24px;
  border-radius: var(--radius-button);
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}

.fig-toggle:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.fig-toggle.is-selected,
.fig-toggle[aria-pressed="true"] {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-secondary-contrast, #ffffff);
}

.fig-toggle:disabled,
.fig-toggle.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fig-toggle-group {
  display: inline-flex;
  gap: 8px;
}


/* §5 ─── Action buttons (Figma redesign affordances) ─────────────────────
   nxus-components.css already covers `.btn-primary` (gradient), `.btn-success`
   (accent), `.btn-gradient-cta`, `.btn-accent-action`, `.btn-neutral-action`.

   These variants cover the CTA color treatments used by the Figma redesign
   (billing/payment, add-account, generate-quote). Originally pill-shaped
   (50rem radius); de-pilled 2026-05-15 per ZWalker design direction —
   buttons now share the platform's standard 8 px corner radius. Class name
   retained (`.fig-btn-pill*`) so the ~40 consumer call sites do not need
   to change. Status badges, role pills, trend pills, and icon circles are
   unaffected (those use their own `.fig-pill-*` / `.fig-badge` /
   `.fig-trend-pill` rules). */

.fig-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-button, 8px);
  padding: 10px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-family-base, 'Inter', Arial, sans-serif);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
}

.fig-btn-pill:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}

.fig-btn-pill:disabled,
.fig-btn-pill.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary pill — solid brand-primary, eases to brand-secondary on hover. */
.fig-btn-pill--gradient {
  background: var(--brand-primary);
  border-color: transparent;
  color: #ffffff;
  transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.fig-btn-pill--gradient:hover {
  background: var(--brand-secondary);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
  color: #ffffff;
}

/* Primary filled pill — solid brand-primary (Pay Net Now, Collect link). */
.fig-btn-pill--primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-primary-contrast, #ffffff);
}

.fig-btn-pill--primary:hover {
  background-color: var(--brand-primary-hover, var(--brand-primary));
  border-color: var(--brand-primary-hover, var(--brand-primary));
  color: var(--brand-primary-contrast, #ffffff);
}

/* Secondary filled pill — solid brand-secondary (typical green "Bind"
   in many tenant palettes, agency-remittance hero). */
.fig-btn-pill--secondary {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-secondary-contrast, #ffffff);
}

.fig-btn-pill--secondary:hover {
  background-color: var(--brand-secondary-hover, var(--brand-secondary));
  border-color: var(--brand-secondary-hover, var(--brand-secondary));
  color: var(--brand-secondary-contrast, #ffffff);
}

/* Accent filled pill — Order Coverage / Bind Coverage CTA. */
.fig-btn-pill--accent {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-accent-contrast, #ffffff);
}

.fig-btn-pill--accent:hover {
  background-color: var(--brand-accent-hover, var(--brand-accent));
  border-color: var(--brand-accent-hover, var(--brand-accent));
  color: var(--brand-accent-contrast, #ffffff);
}

/* Outline pill — primary border, transparent body. Used as the
   secondary action next to a filled pill (e.g. Download Invoice). */
.fig-btn-pill--outline-primary {
  background: transparent;
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.fig-btn-pill--outline-primary:hover {
  background-color: var(--brand-primary);
  color: var(--brand-primary-contrast, #ffffff);
}

.fig-btn-pill--outline-secondary {
  background: transparent;
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.fig-btn-pill--outline-secondary:hover {
  background-color: var(--brand-secondary);
  color: var(--brand-secondary-contrast, #ffffff);
}

/* Neutral outline pill — gray border + gray text on white (Cancel,
   Download Quote, secondary actions in the Coverage Options header).
   Pulled from the "soft secondary" treatment in `ui-ux-feedback.md`. */
.fig-btn-pill--outline-neutral {
  background: #ffffff;
  border-color: #d1d5db;
  color: #6b7280;
}

.fig-btn-pill--outline-neutral:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
}

/* Brand-tinted list markers — bullet dots take the tenant brand color while
   the list text keeps its own (typically muted) color. Used by the Page 2
   Presentation Tools feature list. */
.fig-list-brand li::marker {
  color: var(--brand-primary, #1f628d);
}


/* §6 ─── Section heading with icon tile ──────────────────────────────────
   Large bold title + subtitle, optional brand-tinted left-side icon tile.
   Used at the top of the redesigned Page 1 cards (PricingTargetCard,
   ProfessionalLiabilityCard, AnnualCplCard).                             */

.fig-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fig-section-head__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: var(--brand-primary-alpha-10);
  color: var(--brand-primary);
}

.fig-section-head__icon--accent {
  background: var(--brand-accent-alpha-10);
  color: var(--brand-accent);
}

.fig-section-head__icon--secondary {
  background: var(--brand-secondary-alpha-10);
  color: var(--brand-secondary);
}

.fig-section-head__icon--info {
  background: var(--tier-c-info-bg);
  color: var(--tier-c-info);
}

.fig-section-head__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
  margin: 0 0 2px;
}

.fig-section-head__subtitle {
  font-size: 0.9375rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

.fig-section-head__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* §7 ─── Two-column grids ────────────────────────────────────────────────
   - .fig-grid-20-80 : 20 % / 80 % left rail (e.g. Quoting Details summary
                       left, Coverage Options surface right) per
                       quote-screen-spec-1.md "Left Column Layout".
   - .fig-grid-3-2   : 60 % / 40 % (3fr/2fr) for Post-Bind v2 split per
                       PostBindManagement.tsx — policy/CERC left, billing
                       right.                                              */

.fig-grid-20-80 {
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: var(--space-6);
}

.fig-grid-3-2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-6);
}

@media (max-width: 992px) {
  .fig-grid-20-80,
  .fig-grid-3-2 {
    grid-template-columns: 1fr;
  }
}


/* §8 ─── Sub-header (sticky breadcrumb band) ─────────────────────────────
   The slim white band that docks under the main header on Pages 1/2/3 of
   the Figma redesign (CoverageSelection, GetQuotes, QuotePage,
   PostBindManagement). 64 px high, white bg, gray-200 border-b.

   Currently delivered by `AgentClientSubHeader.razor` with inline rules;
   class lets future surfaces re-use the same band without copying.      */

.fig-subheader {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: 64px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Inner row constrains horizontal content to the consuming page's body
   max-width (set inline via the MaxWidth parameter on AgentClientSubHeader)
   so the Back button / Actions slot align with the body edges, while the
   outer band keeps its full-bleed white background + bottom border. */
.fig-subheader__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.fig-subheader__divider {
  display: inline-block;
  width: 1px;
  height: 24px;
  background-color: #e5e7eb;
  flex: 0 0 auto;
}

.fig-subheader__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: #374151;
  font-size: 0.9375rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-button);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.fig-subheader__back:hover {
  background: #f3f4f6;
  color: var(--brand-primary);
}

.fig-subheader__logo-slot {
  width: 48px;
  height: 48px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  background: #ffffff;
  transition: border-color var(--transition-base), color var(--transition-base);
}

.fig-subheader__logo-slot:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.fig-subheader__client { flex: 1 1 auto; min-width: 0; }

.fig-subheader__client-name {
  font-weight: 700;
  font-size: 1.0625rem;
  color: #111827;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fig-subheader__client-meta {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.3;
}


/* §9 ─── Modal frame helpers ─────────────────────────────────────────────
   nxus-components.css already styles `.modal-content` with the gradient
   accent stripe via `::before`. The classes here cover the plain-div
   "overlay + dialog" pattern several redesigned modals use directly
   (OrderCoverageModal, PresentationToolsModal, EditLimitsModal — those
   that ship as `<div class="modal fade show d-block">` with hand-rolled
   structure instead of leaning on Bootstrap's modal-content cascade). */

.fig-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 1055;
}

.fig-modal-dialog {
  background: #ffffff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fig-modal-dialog--sm { max-width: 480px; }
.fig-modal-dialog--lg { max-width: 960px; }
.fig-modal-dialog--xl { max-width: 1140px; }

.fig-modal-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.fig-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2d3d;
  line-height: 1.3;
  margin: 0;
}

.fig-modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1 1 auto;
}

.fig-modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  background: #ffffff;
}

.fig-modal-footer--split {
  justify-content: space-between;
}

/* Shared modal action buttons — the canonical Cancel (light outline) + primary
   (brand gradient) pair, matching the Create New Quote modal. Reusable across
   Bootstrap-modal and plain-div modals so footers stay consistent. The element
   prefix on the gradient keeps specificity above Bootstrap's `.btn:disabled`. */
.fig-btn-cancel {
  background: #ffffff;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.fig-btn-cancel:hover:not(:disabled) {
  background: #f8f9fa;
  color: #4b5563;
}

button.fig-btn-gradient {
  background: linear-gradient(to right, var(--brand-primary, #1f628d), var(--brand-secondary, #01949f));
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(31, 98, 141, 0.25);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

button.fig-btn-gradient:hover:not(:disabled) {
  box-shadow: 0 6px 16px rgba(31, 98, 141, 0.32);
  transform: translateY(-1px);
}

button.fig-btn-gradient:active:not(:disabled) {
  transform: translateY(0);
}

button.fig-btn-gradient:disabled {
  background: #d1d5db;
  color: #6b7280;
  box-shadow: none;
  opacity: 0.85;
  transform: none;
}


/* §10 ─── Trend pill (stat card adornment) ───────────────────────────────
   Small inline pill rendered next to a stat value (e.g. "+12%" / "-3%").
   Used by the Figma Performance Overview redesign — nxus-components.css's
   `.nxus-metric-card` covers the card body; trend pill is the missing
   piece.                                                                 */

.fig-trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.fig-trend-pill--up {
  background: var(--tier-c-success-bg);
  color: var(--tier-c-success);
}

.fig-trend-pill--down {
  background: var(--tier-c-destructive-bg);
  color: var(--tier-c-destructive);
}

.fig-trend-pill--flat {
  background: var(--tier-c-neutral-bg);
  color: var(--tier-c-neutral);
}


/* §11 ─── Brand left-rail accent ────────────────────────────────────────
   2 px left border using a color-mixed brand-secondary, used to indent
   conditionally-revealed sub-content (e.g. PricingTargetCard expanded
   form, ProfessionalLiabilityCard PL-Yes branch).                       */

.fig-rail {
  border-left: 2px solid color-mix(in srgb, var(--brand-secondary) 30%, transparent);
  padding-left: var(--space-4);
  margin-left: 4px;
}

.fig-rail--primary {
  border-left-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

.fig-rail--accent {
  border-left-color: color-mix(in srgb, var(--brand-accent) 35%, transparent);
}


/* §12 ─── Form row pattern ──────────────────────────────────────────────
   Label + input + helper text with consistent vertical rhythm. The Figma
   redesign uses a fixed 140 px label column for the four Pricing Target
   rows (PricingTargetCard:52-119) and the Edit Limits limit-selection
   rows. Two layouts: stacked and inline.                                */

.fig-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fig-form-row + .fig-form-row { margin-top: var(--space-4); }

.fig-form-row__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
}

.fig-form-row__required {
  color: #dc2626;
  margin-left: 2px;
}

.fig-form-row__help {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0;
}

/* Inline variant — fixed-width label column. */
.fig-form-row--inline {
  flex-direction: row;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0;
}

.fig-form-row--inline .fig-form-row__label {
  min-width: 140px;
  margin-bottom: 0;
  white-space: nowrap;
}

.fig-form-row--inline .fig-form-row__control {
  flex: 1 1 auto;
}


/* §13 ─── Soft hover lift ───────────────────────────────────────────────
   Subtle translateY + shadow-bump on hover. nxus-components.css already
   wires this onto `.perf-card`; this is the standalone class for any
   non-perf card (Performance Overview siblings, Sales Tools resource
   cards, Page 2 package columns).                                       */

.fig-hover-lift {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.fig-hover-lift:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}


/* §14 ─── Package column primitives ─────────────────────────────────────
   The Figma Page 2 redesign renders Max / Market / Match packages as
   three vertical columns inside the "Environmental Risk & Coverage
   Options" card. The column header is a 135° gradient band with a close
   button. Classes here cover the gradient header, the include-list row,
   and the limit-row card so the three column razor files
   (MaxPackageColumn, MarketMatchPackageColumn, ConsultingServicesColumn)
   stop redeclaring the same six rules.                                  */

.fig-pkg-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Brand-accented column frames (per Figma — Max highlighted with the same
   teal-to-dark-blue gradient as its header, Consulting in Tier C info blue).
   Spec style table amended to match. The Max border uses the padding-box /
   border-box double-background trick so the gradient renders in the 2px
   border while border-radius (rounded corners) is preserved — a plain
   border-color cannot hold a gradient. */
.fig-pkg-col--max {
  border: 2px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) border-box;
}

.fig-pkg-col--consulting {
  border: 2px solid var(--tier-c-info-border, #93c5fd);
}

.fig-pkg-col__header {
  padding: 0.875rem 1rem;
  color: #ffffff;
  position: relative;
}

.fig-pkg-col__header--max {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
}

.fig-pkg-col__header--match {
  background: linear-gradient(135deg, var(--brand-secondary) 0%,
              color-mix(in srgb, var(--brand-secondary) 70%, black) 100%);
}

.fig-pkg-col__header--market {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.fig-pkg-col__header--consulting {
  background: #eef4fb;
  color: #1e3a5f;
}

.fig-pkg-col__header--consulting .fig-pkg-col__title {
  font-size: 0.9rem;
  font-weight: 600;
}

.fig-pkg-col__header--consulting .fig-pkg-col__tagline {
  font-size: 0.75rem;
  opacity: 0.75;
  color: #374151;
}

.fig-pkg-col__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 2px;
}

.fig-pkg-col__tagline {
  font-size: 0.8rem;
  opacity: 0.92;
  line-height: 1.3;
  margin: 0;
}

.fig-pkg-col__close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.fig-pkg-col__body {
  padding: 0.75rem 1rem 0.5rem;
}

/* Include / exclude row. Drives MarketMatchPackageColumn's three
   RenderFragment helpers (RenderMatchIncludeRow, RenderMarketIncludeRow,
   RenderMarketExcludeRow) into one structural class with a modifier. */
.fig-pkg-include {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  line-height: 1.3;
  color: #374151;
}

.fig-pkg-include__icon {
  flex-shrink: 0;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--brand-secondary);
}

.fig-pkg-include--neutral .fig-pkg-include__icon { color: #9ca3af; }
.fig-pkg-include--accent  .fig-pkg-include__icon { color: var(--brand-accent); }

.fig-pkg-include--excluded {
  color: #9ca3af;
}

.fig-pkg-include--excluded .fig-pkg-include__label {
  text-decoration: line-through;
}

.fig-pkg-include--excluded .fig-pkg-include__icon { color: #d1d5db; }

/* Limit row card — used inside the "Coverage Limits" panel. */
.fig-pkg-limit-row {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: var(--radius-card);
  padding: 0.5rem 0.875rem;
}

/* Max Package limit rows carry a subtle brand-secondary tint + border per
   the Figma. Scoped to Max so Market (gray) / Match (teal-tint) rows are
   unaffected. Declared before --target so a target row's accent border
   still wins. */
.fig-pkg-limit-row--max {
  background: color-mix(in srgb, var(--brand-secondary) 7%, #ffffff);
  border-color: color-mix(in srgb, var(--brand-secondary) 35%, #e5e7eb);
}

.fig-pkg-limit-row--target {
  border-color: var(--brand-accent);
  border-width: 2px;
}

.fig-pkg-limits-panel {
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  padding: 0.5rem 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.fig-pkg-target-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--brand-accent);
  color: var(--brand-accent-contrast, #ffffff);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
  text-transform: uppercase;
}


/* §15 ─── Payment / ledger primitives ───────────────────────────────────
   The Post-Bind v2 split renders billing as a Compact Ledger followed by
   two Action Blocks (Collect-from-Insured / Agency Remittance) per
   PostBindManagement.tsx §"Section B — Running Ledger". The two blocks
   currently inline four `style="..."` blobs that compute brand color
   triplets from the CompanyBranding cascade. The CSS-var-driven classes
   below let the razor file drop the in-line strings entirely.           */

.fig-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #1f2937;
}

.fig-ledger-row + .fig-ledger-row { margin-top: 6px; }

.fig-ledger-row--total {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
}

.fig-ledger-row__value {
  font-weight: 600;
}

.fig-ledger-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0.5rem 0;
  border: 0;
}

/* Payment-path action block. Two flavors (primary / secondary) which map
   to the audit's "two action blocks" pattern (Collect-from-Insured uses
   brand-primary; Agency Remittance uses brand-secondary).
   Hero amount sits at the top, a description line below, then two
   actions stacked. The container takes its gradient from `--accent-var`,
   which the parent sets to the appropriate brand-*-gradient.            */

.fig-payment-path {
  background: var(--brand-primary-gradient);
  color: #ffffff;
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fig-payment-path--secondary {
  background: linear-gradient(135deg, var(--brand-secondary) 0%,
              color-mix(in srgb, var(--brand-secondary) 70%, black) 100%);
}

.fig-payment-path--accent {
  background: linear-gradient(135deg, var(--brand-accent) 0%,
              color-mix(in srgb, var(--brand-accent) 70%, black) 100%);
}

.fig-payment-path--disabled {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
  opacity: 0.65;
}

.fig-payment-path__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.fig-payment-path__amount {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.fig-payment-path__description {
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0.92;
}

.fig-payment-path__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* §16 ─── Diff helpers for redesigned headers ───────────────────────────
   Designer-spec'd header height shrink (Header-1 in the audit: 140 → 96 px).
   Opt-in class — only takes effect when applied; doesn't touch the existing
   `.dashboard-header` height by default. Horizontal padding 2 rem matches
   the Figma redesign's `px-8` on the left logo block and right identity
   cluster (DashboardHeader.tsx) — owns ALL four padding sides so consumer
   .razor.css files no longer carry per-axis padding rules.               */

.fig-header--compact {
  min-height: 96px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.fig-header__name {
  font-size: 1.5rem;   /* 24 px per Figma redesign */
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}


/* §17 ─── Status pill colour tokens passthrough ─────────────────────────
   nxus-components.css already covers status badges with the Tier C palette
   inline (badge-quoted, badge-ordered, badge-rejected, etc.). These three
   helper classes give the StatusPill component a non-badge way to apply
   the same Tier C foreground/background/border triplet (used by the new
   Post-Bind policy header pill which is a chunkier, larger version).   */

.fig-pill-tier-c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.fig-pill-tier-c--success {
  background: var(--tier-c-success-bg);
  color: var(--tier-c-success);
  border-color: var(--tier-c-success-border);
}

.fig-pill-tier-c--info {
  background: var(--tier-c-info-bg);
  color: var(--tier-c-info);
  border-color: var(--tier-c-info-border);
}

.fig-pill-tier-c--warning {
  background: var(--tier-c-warning-bg);
  color: var(--tier-c-warning);
  border-color: var(--tier-c-warning-border);
}

.fig-pill-tier-c--destructive {
  background: var(--tier-c-destructive-bg);
  color: var(--tier-c-destructive);
  border-color: var(--tier-c-destructive-border);
}

.fig-pill-tier-c--neutral {
  background: var(--tier-c-neutral-bg);
  color: var(--tier-c-neutral);
  border-color: var(--tier-c-neutral-border);
}

.fig-pill-tier-c--teal {
  background: var(--tier-c-teal-bg);
  color: var(--tier-c-teal);
  border-color: var(--tier-c-teal-border);
}

.fig-pill-tier-c--purple {
  background: var(--tier-c-purple-bg);
  color: var(--tier-c-purple);
  border-color: var(--tier-c-purple-border);
}

.fig-pill-tier-c--orange {
  background: var(--tier-c-orange-bg);
  color: var(--tier-c-orange);
  border-color: var(--tier-c-orange-border);
}


/* §18 ─── Responsive trims ──────────────────────────────────────────────
   Mobile defaults that match the redesigned modals + sub-headers.       */

@media (max-width: 640px) {
  .fig-modal-overlay { padding: 0; }
  .fig-modal-dialog {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .fig-subheader {
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }
  .fig-section-head__icon { width: 36px; height: 36px; font-size: 1rem; }
  .fig-payment-path__amount { font-size: 1.5rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   Skeleton loader primitive
   Replaces spinner-border for content-shaped loading. Use modifier
   classes for common shapes, or inline width/height for one-offs.
   ───────────────────────────────────────────────────────────────────── */
.fig-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(229, 231, 235, 0.6) 0%,
    rgba(243, 244, 246, 0.9) 50%,
    rgba(229, 231, 235, 0.6) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: fig-skeleton-shimmer 1.4s ease-in-out infinite;
}

.fig-skeleton--text { height: 0.875rem; width: 100%; border-radius: 4px; }
.fig-skeleton--title { height: 1.5rem; width: 60%; border-radius: 4px; }
.fig-skeleton--pill { height: 1.5rem; width: 4.5rem; border-radius: 999px; }
.fig-skeleton--number { height: 1.75rem; width: 3rem; border-radius: 4px; }
.fig-skeleton--badge { height: 1.25rem; width: 1.75rem; border-radius: 999px; display: inline-block; vertical-align: middle; }
.fig-skeleton--block { height: 88px; width: 100%; }

@keyframes fig-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fig-skeleton {
    animation: none;
    background: rgba(229, 231, 235, 0.75);
  }
}

/* =============================================================================
   §16 Themed form primitives — filter control, checkbox, switch
   -----------------------------------------------------------------------------
   Tenant-themed equivalents of native form controls so filter rows, tables and
   toggles share one look and pick up the brand palette. Higher-specificity
   compound selectors (.form-select.fig-filter-control) intentionally beat the
   single-class nxus/Bootstrap rules without !important.
   ========================================================================== */

/* Filter control — one consistent shape for selects, dropdown toggles and the
   date-range trigger button. */
.fig-filter-control,
.btn.fig-filter-control,
.form-select.fig-filter-control {
  height: 42px;
  border-radius: var(--radius-button, 8px);
  border: 1px solid var(--color-border, #d3d9e3);
  background-color: #ffffff;
  color: var(--color-foreground, #1f2933);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fig-filter-control:hover { border-color: var(--brand-primary, #1f628d); }

.fig-filter-control:focus,
.fig-filter-control:focus-visible {
  border-color: var(--brand-primary, #1f628d);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-alpha-10, rgba(31, 98, 141, 0.10));
  outline: none;
}

/* Themed checkbox — brand accent when checked. Sized up from Bootstrap's 1em
   default so it reads clearly in dense table rows. */
.form-check-input.fig-check {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0;
  border-width: 1.5px;
  border-color: var(--color-border, #aeb6c2);
  vertical-align: middle;
  cursor: pointer;
}

.form-check-input.fig-check:checked {
  background-color: var(--brand-primary, #1f628d);
  border-color: var(--brand-primary, #1f628d);
}

.form-check-input.fig-check:focus {
  border-color: var(--brand-primary, #1f628d);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-alpha-10, rgba(31, 98, 141, 0.10));
}

/* Themed switch — brand track when on. */
.form-check-input.fig-switch:checked {
  background-color: var(--brand-primary, #1f628d);
  border-color: var(--brand-primary, #1f628d);
}

.form-check-input.fig-switch:focus {
  border-color: var(--brand-primary, #1f628d);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-alpha-10, rgba(31, 98, 141, 0.10));
}