/* ============================================================================
   aurora-skin.css  —  "Aurora Faithful" client-area re-skin for FusionGate
   ----------------------------------------------------------------------------
   Loaded LAST, after:
     font-awesome.css -> saas-customer.css -> saas-customer-fixes.css
     -> huraga-mobile-fixes.css
   so this file is a PURE ADDITIVE OVERRIDE.

   STRATEGY
   --------
   1. Remap the two design-token families in BOTH light + dark:
        a) Panel tokens   : --fg-*        (layout_default :root + dark block)
        b) Tabler/saas    : --saas-* and the underlying --tblr-* they wrap.
      Token remapping does the bulk of the work cleanly and safely.
   2. A handful of component refinements, ONLY where the base theme hardcodes
      hex values with !important at high specificity (cards, tables, sidebar,
      navbar, badge gradients) - those cannot inherit a token change, so we
      override them at matching-or-higher specificity + source order.

   SAFETY (verified against the live source on 'fusiongate')
   ------
   - Additive only. No display:none on real content, no structural layout
     changes (no position/float/flex/grid on containers, no universal resets),
     no touching .modal/.dropdown/.collapse JS state. Where .modal-content /
     .dropdown-menu / .dropdown-item are touched it is for background / border /
     color ONLY - never display/opacity/visibility/transform - so Bootstrap
     show/hide toggling stays intact.
   - Recolour / restyle surfaces, borders, radius, shadows, buttons, badges,
     pills, cards, tables, sidebar, links, focus rings, inputs only.

   NOTE ON THE SIDEBAR (corrected): the base theme does NOT flip the sidebar
   white in light mode - saas-customer.css sets --saas-sidebar-bg to a dark
   slate (#1e293b light / #0f172a dark) and uses an indigo (#6366f1) active
   tint. We therefore (a) remap the --saas-sidebar-* tokens to Aurora AND
   (b) ship an explicit white/dark .saas-sidebar !important rule so we beat the
   hardcoded base values regardless of how the markup applies the token.

   AURORA PALETTE (mapped from the approved client-preview-1.html)
   --------------
   LIGHT brand #0fa98f  hover #0c8b78  soft #e3f7f1  ink #0a6357
         accent #5b6cff  soft #ecefff   bg #f4f6fb  surface #fff
         surface-2 #fbfcfe  surface-soft #f2f5fb
         line #e6ecf5  line-strong #d7e0ee  ink #0f1b2d  muted #7587a3
         success #12a36b/soft #e2f6ec  warn #d98a0b/soft #fcf1dd
         danger #e1483f/soft #fdeae8
   DARK  brand #19c2a4  hover #10a087  soft #0e2b25  ink #5fe7cd
         accent #8b97ff  soft #1c2140   bg #09090b  surface #18181d
         surface-2 #1d1d24  surface-soft #121216
         line #2a2a31  line-strong #3a3a43  ink #fafafa  muted #a1a1aa
         success #34d17f/soft #0c2418  danger #f4574d/soft #2a1212
         warn #eab308/soft #241c08
   ========================================================================== */


/* ==========================================================================
   1a. PANEL TOKENS  (--fg-*)  —  LIGHT
   These power any page rendered with the FG Panel v3.1 design system.
   ========================================================================== */
:root {
  /* Neutrals / surfaces */
  --fg-bg:               #f4f6fb;
  --fg-surface:          #ffffff;
  --fg-surface-2:        #fbfcfe;   /* Aurora raised-tile / table-header tint */
  --fg-surface-sunken:   #f2f5fb;
  --fg-surface-hover:    #f2f5fb;
  --fg-border:           #e6ecf5;
  --fg-border-strong:    #d7e0ee;
  --fg-text:             #0f1b2d;
  --fg-text-soft:        #42526b;
  --fg-muted:            #7587a3;
  --fg-disabled:         #9aa9c2;

  /* Accent — Aurora BRAND mint (the primary action colour) */
  --fg-accent:           #0fa98f;
  --fg-accent-hover:     #0c8b78;
  --fg-accent-active:    #0a6357;
  --fg-accent-soft:      #e3f7f1;
  --fg-accent-soft-hover:#d2f0e6;
  --fg-accent-on:        #ffffff;
  --fg-accent-ring:      rgba(15, 169, 143, .18);

  /* Status — tinted soft backgrounds */
  --fg-success:          #12a36b;
  --fg-success-soft:     #e2f6ec;
  --fg-success-border:   #b9ecd1;
  --fg-warning:          #d98a0b;
  --fg-warning-soft:     #fcf1dd;
  --fg-warning-border:   #f4dca6;
  --fg-danger:           #e1483f;
  --fg-danger-soft:      #fdeae8;
  --fg-danger-border:    #f7c4bf;
  --fg-info:             #5b6cff;          /* Aurora accent indigo */
  --fg-info-soft:        #ecefff;
  --fg-info-border:      #c9d0ff;

  /* Radius — Aurora rounded (cards ~15-18px, sm ~11px) */
  --fg-r-sm:             11px;
  --fg-r:                13px;
  --fg-r-lg:             15px;
  --fg-r-xl:             18px;
  --fg-r-pill:           9999px;

  /* Elevation — soft layered Aurora shadows + hairline border */
  --fg-shadow-xs:        0 0 0 1px var(--fg-border);
  --fg-shadow-sm:        0 1px 2px rgba(16,27,45,.04), 0 1px 3px rgba(16,27,45,.05), 0 0 0 1px var(--fg-border);
  --fg-shadow:           0 1px 2px rgba(16,27,45,.04), 0 10px 26px -14px rgba(16,27,45,.18), 0 0 0 1px var(--fg-border);
  --fg-shadow-md:        0 4px 14px rgba(16,27,45,.06), 0 2px 6px rgba(16,27,45,.05), 0 0 0 1px var(--fg-border);
  --fg-shadow-lg:        0 18px 40px -16px rgba(16,27,45,.22), 0 8px 18px -10px rgba(16,27,45,.12), 0 0 0 1px var(--fg-border);
  --fg-shadow-xl:        0 24px 56px -18px rgba(16,27,45,.28), 0 0 0 1px var(--fg-border);

  /* No top-highlight inset in light mode */
  --fg-inset-hi:         none;
}

/* ==========================================================================
   1a. PANEL TOKENS  (--fg-*)  —  DARK
   ========================================================================== */
html[data-bs-theme="dark"] {
  --fg-bg:               #09090b;
  --fg-surface:          #18181d;
  --fg-surface-2:        #1d1d24;
  --fg-surface-sunken:   #121216;
  --fg-surface-hover:    #1d1d24;
  --fg-border:           #2a2a31;
  --fg-border-strong:    #3a3a43;
  --fg-text:             #fafafa;
  --fg-text-soft:        #d4d4d8;
  --fg-muted:            #a1a1aa;
  --fg-disabled:         #71717a;

  --fg-accent:           #19c2a4;
  --fg-accent-hover:     #10a087;
  --fg-accent-active:    #0c8b78;
  --fg-accent-soft:      #0e2b25;
  --fg-accent-soft-hover:#11392f;
  --fg-accent-on:        #06231d;
  --fg-accent-ring:      rgba(25, 194, 164, .22);

  --fg-success:          #34d17f;
  --fg-success-soft:     #0c2418;
  --fg-success-border:   #1c4a30;
  --fg-warning:          #eab308;
  --fg-warning-soft:     #241c08;
  --fg-warning-border:   #5a4710;
  --fg-danger:           #f4574d;
  --fg-danger-soft:      #2a1212;
  --fg-danger-border:    #5c2420;
  --fg-info:             #8b97ff;
  --fg-info-soft:        #1c2140;
  --fg-info-border:      #343c6b;

  /* Dark soft shadows + 1px inset top highlight on raised surfaces */
  --fg-shadow-xs:        0 0 0 1px var(--fg-border);
  --fg-shadow-sm:        0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px var(--fg-border);
  --fg-shadow:           0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px var(--fg-border);
  --fg-shadow-md:        0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px var(--fg-border);
  --fg-shadow-lg:        0 18px 48px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px var(--fg-border);
  --fg-shadow-xl:        0 24px 64px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px var(--fg-border);

  --fg-inset-hi:         inset 0 1px 0 rgba(255,255,255,.04);
}


/* ==========================================================================
   1b. TABLER + SAAS TOKENS  —  LIGHT
   saas-customer.css wraps these --tblr-* vars (with hardcoded hex fallbacks),
   so we must set BOTH the --saas-* tokens AND the underlying --tblr-* ones.
   We target :root and html:not([data-bs-theme="dark"]) to mirror the base
   theme's own light selectors and win on source order.
   ========================================================================== */
:root,
html:not([data-bs-theme="dark"]) {
  /* ---- Tabler core (drives Bootstrap/Tabler primary buttons, links, etc.) ---- */
  --tblr-primary:            #0fa98f;
  --tblr-primary-rgb:        15, 169, 143;
  --tblr-primary-fg:         #ffffff;
  --tblr-primary-darken:     #0c8b78;
  --tblr-primary-lt:         #e3f7f1;
  --tblr-link-color:         #0fa98f;
  --tblr-link-color-rgb:     15, 169, 143;
  --tblr-link-hover-color:   #0c8b78;

  --tblr-success:            #12a36b;
  --tblr-success-rgb:        18, 163, 107;
  --tblr-success-fg:         #ffffff;
  --tblr-success-lt:         #e2f6ec;
  --tblr-warning:            #d98a0b;
  --tblr-warning-rgb:        217, 138, 11;
  --tblr-warning-fg:         #ffffff;
  --tblr-warning-lt:         #fcf1dd;
  --tblr-danger:             #e1483f;
  --tblr-danger-rgb:         225, 72, 63;
  --tblr-danger-fg:          #ffffff;
  --tblr-danger-lt:          #fdeae8;
  --tblr-info:               #5b6cff;
  --tblr-info-rgb:           91, 108, 255;
  --tblr-info-fg:            #ffffff;
  --tblr-info-lt:            #ecefff;
  --tblr-secondary:          #7587a3;
  --tblr-secondary-rgb:      117, 135, 163;
  --tblr-secondary-fg:       #ffffff;
  --tblr-secondary-color:    #7587a3;

  /* Surfaces / borders / text */
  --tblr-body-bg:            #f4f6fb;
  --tblr-body-color:         #0f1b2d;
  --tblr-body-color-rgb:     15, 27, 45;
  --tblr-bg-surface:         #ffffff;
  --tblr-bg-surface-secondary: #fbfcfe;
  --tblr-bg-surface-tertiary:  #f2f5fb;
  --tblr-bg-forms:           #ffffff;
  --tblr-card-bg:            #ffffff;
  --tblr-card-cap-bg:        transparent;
  --tblr-card-border-color:  #e6ecf5;
  --tblr-border-color:       #e6ecf5;
  --tblr-border-color-translucent: #e6ecf5;
  --tblr-secondary-bg:       #f2f5fb;
  --tblr-muted:              #7587a3;

  /* Radius — Aurora rounded */
  --tblr-border-radius-sm:   11px;
  --tblr-border-radius:      13px;
  --tblr-border-radius-lg:   15px;
  --tblr-border-radius-xl:   18px;
  --tblr-card-border-radius: 16px;

  /* Soft layered card shadow */
  --tblr-shadow-card:        0 1px 2px rgba(16,27,45,.04), 0 10px 26px -14px rgba(16,27,45,.18);
  --tblr-shadow-sm:          0 1px 2px rgba(16,27,45,.04), 0 1px 3px rgba(16,27,45,.05);
  --tblr-shadow:             0 1px 2px rgba(16,27,45,.04), 0 10px 26px -14px rgba(16,27,45,.18);
  --tblr-shadow-input:       0 1px 2px rgba(16,27,45,.04);

  /* ---- saas wrappers ---- */
  --saas-primary:            #0fa98f;
  --saas-primary-hover:      #0c8b78;
  --saas-primary-light:      rgba(15, 169, 143, .10);

  --saas-bg:                 #f4f6fb;
  --saas-card-bg:            #ffffff;
  --saas-border:             #e6ecf5;
  --saas-text:               #0f1b2d;
  --saas-text-muted:         #7587a3;

  --saas-success:            #12a36b;
  --saas-warning:            #d98a0b;
  --saas-danger:             #e1483f;
  --saas-info:               #5b6cff;

  --saas-radius-sm:          11px;
  --saas-radius:             13px;
  --saas-radius-lg:          15px;
  --saas-radius-xl:          18px;

  --saas-shadow-sm:          0 1px 2px rgba(16,27,45,.04), 0 1px 3px rgba(16,27,45,.05);
  --saas-shadow:             0 1px 2px rgba(16,27,45,.04), 0 10px 26px -14px rgba(16,27,45,.18);
  --saas-shadow-md:          0 4px 14px rgba(16,27,45,.06), 0 2px 6px rgba(16,27,45,.05);
  --saas-shadow-lg:          0 18px 40px -16px rgba(16,27,45,.22), 0 8px 18px -10px rgba(16,27,45,.12);

  /* Sidebar — Aurora SURFACE (white). The base theme actually ships a DARK
     slate sidebar (#1e293b) even in light mode, so we both remap the tokens
     here AND re-paint .saas-sidebar explicitly below (section 2). */
  --saas-sidebar-bg:         #ffffff;
  --saas-sidebar-text:       #42526b;
  --saas-sidebar-text-active:#0a6357;
  --saas-sidebar-hover-bg:   #f2f5fb;
  --saas-sidebar-active-bg:  #e3f7f1;
  --saas-sidebar-border:     #e6ecf5;
}

/* ==========================================================================
   1b. TABLER + SAAS TOKENS  —  DARK
   ========================================================================== */
html[data-bs-theme="dark"] {
  --tblr-primary:            #19c2a4;
  --tblr-primary-rgb:        25, 194, 164;
  --tblr-primary-fg:         #06231d;
  --tblr-primary-darken:     #10a087;
  --tblr-primary-lt:         #0e2b25;
  --tblr-link-color:         #19c2a4;
  --tblr-link-color-rgb:     25, 194, 164;
  --tblr-link-hover-color:   #5fe7cd;

  --tblr-success:            #34d17f;
  --tblr-success-rgb:        52, 209, 127;
  --tblr-success-fg:         #06231d;
  --tblr-success-lt:         #0c2418;
  --tblr-warning:            #eab308;
  --tblr-warning-rgb:        234, 179, 8;
  --tblr-warning-fg:         #231c06;
  --tblr-warning-lt:         #241c08;
  --tblr-danger:             #f4574d;
  --tblr-danger-rgb:         244, 87, 77;
  --tblr-danger-fg:          #ffffff;
  --tblr-danger-lt:          #2a1212;
  --tblr-info:               #8b97ff;
  --tblr-info-rgb:           139, 151, 255;
  --tblr-info-fg:            #0c1130;
  --tblr-info-lt:            #1c2140;
  --tblr-secondary:          #a1a1aa;
  --tblr-secondary-rgb:      161, 161, 170;
  --tblr-secondary-fg:       #18181d;
  --tblr-secondary-color:    #a1a1aa;

  --tblr-body-bg:            #09090b;
  --tblr-body-color:         #fafafa;
  --tblr-body-color-rgb:     250, 250, 250;
  --tblr-bg-surface:         #18181d;
  --tblr-bg-surface-secondary: #1d1d24;
  --tblr-bg-surface-tertiary:  #121216;
  --tblr-bg-forms:           #18181d;
  --tblr-card-bg:            #18181d;
  --tblr-card-cap-bg:        transparent;
  --tblr-card-border-color:  #2a2a31;
  --tblr-border-color:       #2a2a31;
  --tblr-border-color-translucent: #2a2a31;
  --tblr-secondary-bg:       #121216;
  --tblr-muted:              #a1a1aa;

  /* Radius — Aurora rounded (mirrored explicitly for robustness) */
  --tblr-border-radius-sm:   11px;
  --tblr-border-radius:      13px;
  --tblr-border-radius-lg:   15px;
  --tblr-border-radius-xl:   18px;
  --tblr-card-border-radius: 16px;

  --tblr-shadow-card:        0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.55);
  --tblr-shadow-sm:          0 1px 2px rgba(0,0,0,.4);
  --tblr-shadow:             0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.55);
  --tblr-shadow-input:       0 1px 2px rgba(0,0,0,.4);

  --saas-primary:            #19c2a4;
  --saas-primary-hover:      #10a087;
  --saas-primary-light:      rgba(25, 194, 164, .15);

  --saas-bg:                 #09090b;
  --saas-card-bg:            #18181d;
  --saas-border:             #2a2a31;
  --saas-text:               #fafafa;
  --saas-text-muted:         #a1a1aa;

  --saas-success:            #34d17f;
  --saas-warning:            #eab308;
  --saas-danger:             #f4574d;
  --saas-info:               #8b97ff;

  /* Radii are theme-independent, but mirror them so the dark block is
     self-contained and never depends on :root inheritance. */
  --saas-radius-sm:          11px;
  --saas-radius:             13px;
  --saas-radius-lg:          15px;
  --saas-radius-xl:          18px;

  --saas-shadow-sm:          0 1px 2px rgba(0,0,0,.4);
  --saas-shadow:             0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.55);
  --saas-shadow-md:          0 4px 14px rgba(0,0,0,.45);
  --saas-shadow-lg:          0 18px 48px rgba(0,0,0,.6);

  /* Sidebar — Aurora dark surface */
  --saas-sidebar-bg:         #18181d;
  --saas-sidebar-text:       #a1a1aa;
  --saas-sidebar-text-active:#5fe7cd;
  --saas-sidebar-hover-bg:   #1d1d24;
  --saas-sidebar-active-bg:  #0e2b25;
  --saas-sidebar-border:     #2a2a31;
}


/* ==========================================================================
   2. COMPONENT REFINEMENTS
   Only where the base theme HARDCODES hex with !important at high
   specificity (so tokens alone cannot reach it). We mirror the base
   selectors and win on source order. Recolour-only — no layout properties.
   ========================================================================== */

/* ---- App background / shell -------------------------------------------- */
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .page-wrapper,
html[data-bs-theme="dark"] .page-body {
  background-color: #09090b !important;
  color: #fafafa !important;
}
html[data-bs-theme="light"] .page-body,
html:not([data-bs-theme="dark"]) .page-body {
  background-color: #f4f6fb !important;
}

/* ---- Cards: Aurora surface, 16px radius, soft layered shadow, hairline -- */
.card,
.saas-card {
  border-radius: 16px !important;
  box-shadow: var(--tblr-shadow-card) !important;
}
.card:hover {
  box-shadow: var(--saas-shadow-md) !important;
}

/* Light cards — override the base hardcoded #fff / #e2e8f0 */
html:not([data-bs-theme="dark"]) .card,
html[data-bs-theme=""] .card,
html[data-bs-theme="light"] .card,
html:not([data-bs-theme="dark"]) .card-header,
html[data-bs-theme=""] .card-header,
html[data-bs-theme="light"] .card-header {
  background: #ffffff !important;
  border-color: #e6ecf5 !important;
}
html:not([data-bs-theme="dark"]) .saas-card {
  background: #ffffff;
  border-color: #e6ecf5;
}

/* Dark cards — override the base hardcoded #1e293b / #334155 */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card-header {
  background: #18181d !important;
  border-color: #2a2a31 !important;
}
html[data-bs-theme="dark"] .saas-card,
html[data-bs-theme="dark"] .saas-card-header {
  background: #18181d;
  border-color: #2a2a31;
}

/* ---- Top navbar / header ------------------------------------------------ */
html:not([data-bs-theme="dark"]) header.navbar,
html[data-bs-theme=""] header.navbar,
html[data-bs-theme="light"] header.navbar {
  background: #ffffff !important;
  border-color: #e6ecf5 !important;
}
html:not([data-bs-theme="dark"]) .navbar-nav .nav-link,
html[data-bs-theme=""] .navbar-nav .nav-link,
html[data-bs-theme="light"] .navbar-nav .nav-link {
  color: #0f1b2d !important;
}
html[data-bs-theme="dark"] header.navbar {
  background: #18181d !important;
  border-color: #2a2a31 !important;
}
html[data-bs-theme="dark"] .navbar-nav .nav-link {
  color: #fafafa !important;
}

/* ---- Footer / modal surfaces (background/border/color ONLY — never the
        display/opacity/visibility/transform that JS toggles) -------------- */
html:not([data-bs-theme="dark"]) .footer,
html[data-bs-theme=""] .footer,
html[data-bs-theme="light"] .footer,
html:not([data-bs-theme="dark"]) .modal-content,
html[data-bs-theme=""] .modal-content,
html[data-bs-theme="light"] .modal-content {
  background: #ffffff !important;
  border-color: #e6ecf5 !important;
}
html[data-bs-theme="dark"] .footer,
html[data-bs-theme="dark"] .modal-content {
  background: #18181d !important;
  border-color: #2a2a31 !important;
}

/* ---- Sidebar surface (override base hardcoded slate; base is NOT white) - */
html:not([data-bs-theme="dark"]) .saas-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e6ecf5 !important;
}
html[data-bs-theme="dark"] .saas-sidebar {
  background: #18181d !important;
  border-color: #2a2a31 !important;
}

/* Sidebar nav items — Aurora brand active pill (override base #6366f1) */
html:not([data-bs-theme="dark"]) .saas-nav-item {
  color: #42526b;
}
html:not([data-bs-theme="dark"]) .saas-nav-item:hover {
  background: #f2f5fb;
  color: #0f1b2d;
}
html:not([data-bs-theme="dark"]) .saas-nav-item.active {
  background: #e3f7f1;
  color: #0a6357;
}
html:not([data-bs-theme="dark"]) .saas-nav-toggle.active,
html:not([data-bs-theme="dark"]) .saas-nav-toggle.expanded,
html:not([data-bs-theme="dark"]) .saas-nav-subitem.active {
  background: #e3f7f1;
  color: #0a6357;
}
html[data-bs-theme="dark"] .saas-nav-item {
  color: #a1a1aa;
}
html[data-bs-theme="dark"] .saas-nav-item:hover {
  background: #1d1d24;
  color: #fafafa;
}
html[data-bs-theme="dark"] .saas-nav-item.active {
  background: #0e2b25;
  color: #5fe7cd;
}
/* brand left rail on active item (selector already exists; just recolour) */
.saas-nav-item.active::before {
  background: var(--saas-primary) !important;
}
/* active nav icon picks up brand */
.saas-nav-item.active .saas-nav-icon {
  color: var(--saas-primary) !important;
}

/* ---- Sidebar logo gradient → Aurora brand ------------------------------ */
.saas-sidebar-logo-icon {
  background: linear-gradient(135deg, #19c2a4, #0b7d6c) !important;
}

/* ---- Buttons ------------------------------------------------------------ */
/* Primary already wired to --tblr-primary via tokens; just keep it rounded
   and give a soft brand-tinted shadow that matches the preview. */
.btn {
  border-radius: 12px !important;
}
.btn-primary {
  box-shadow: 0 1px 2px rgba(15,169,143,.25) !important;
}
.btn-primary:hover {
  box-shadow: 0 6px 16px -6px rgba(15,169,143,.5) !important;
}
html[data-bs-theme="dark"] .btn-primary {
  box-shadow: 0 1px 2px rgba(25,194,164,.3) !important;
}
html[data-bs-theme="dark"] .btn-primary:hover {
  box-shadow: 0 6px 16px -6px rgba(25,194,164,.5) !important;
}

/* Secondary (light + dark) — Aurora surface + hairline, brand-ready hover */
html:not([data-bs-theme="dark"]) .btn-secondary,
html[data-bs-theme=""] .btn-secondary,
html[data-bs-theme="light"] .btn-secondary {
  background: #ffffff !important;
  border-color: #e6ecf5 !important;
  color: #0f1b2d !important;
}
html[data-bs-theme="dark"] .btn-secondary {
  background: #18181d !important;
  border-color: #2a2a31 !important;
  color: #fafafa !important;
}

/* ---- Tables: clean hairline rows, soft header, brand-tint hover -------- */
html:not([data-bs-theme="dark"]) .table thead th,
html[data-bs-theme=""] .table thead th,
html[data-bs-theme="light"] .table thead th,
html:not([data-bs-theme="dark"]) .saas-table thead th,
html[data-bs-theme="light"] .saas-table thead th {
  background: #fbfcfe !important;
  color: #7587a3 !important;
  border-color: #e6ecf5 !important;
}
html:not([data-bs-theme="dark"]) .table tbody td,
html[data-bs-theme=""] .table tbody td,
html[data-bs-theme="light"] .table tbody td,
html:not([data-bs-theme="dark"]) .table,
html[data-bs-theme="light"] .table,
html:not([data-bs-theme="dark"]) .saas-table tbody td,
html[data-bs-theme="light"] .saas-table tbody td {
  border-color: #e6ecf5 !important;
}
html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .saas-table thead th {
  background: #1d1d24 !important;
  color: #a1a1aa !important;
  border-color: #2a2a31 !important;
}
html[data-bs-theme="dark"] .table tbody td,
html[data-bs-theme="dark"] .saas-table tbody td {
  border-color: #2a2a31 !important;
}
/* hover tint = brand soft (matches var(--fg-accent-soft) intent) */
.table-hover tbody tr:hover,
.saas-table tbody tr:hover {
  --tblr-table-hover-bg: var(--saas-primary-light) !important;
  background-color: var(--saas-primary-light) !important;
}

/* ---- Form controls: Aurora border + brand focus ring ------------------- */
html:not([data-bs-theme="dark"]) .form-control,
html:not([data-bs-theme="dark"]) .form-select,
html[data-bs-theme=""] .form-control,
html[data-bs-theme=""] .form-select,
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select {
  background: #ffffff !important;
  border-color: #e6ecf5 !important;
  color: #0f1b2d !important;
}
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
  background: #18181d !important;
  border-color: #2a2a31 !important;
  color: #fafafa !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--saas-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .18) !important;
}

/* ---- Dropdown menus / pagination: brand hover (colour only — never the
        display/visibility/opacity that Bootstrap toggles) ----------------- */
html:not([data-bs-theme="dark"]) .dropdown-menu,
html[data-bs-theme=""] .dropdown-menu,
html[data-bs-theme="light"] .dropdown-menu {
  background: #ffffff !important;
  border-color: #e6ecf5 !important;
}
html[data-bs-theme="dark"] .dropdown-menu {
  background: #18181d !important;
  border-color: #2a2a31 !important;
}
html:not([data-bs-theme="dark"]) .dropdown-item:hover,
html[data-bs-theme=""] .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-item:hover {
  background: #e3f7f1 !important;
  color: #0a6357 !important;
}
html[data-bs-theme="dark"] .dropdown-item:hover {
  background: #0e2b25 !important;
  color: #5fe7cd !important;
}
html:not([data-bs-theme="dark"]) .page-link,
html[data-bs-theme=""] .page-link,
html[data-bs-theme="light"] .page-link {
  background: #ffffff !important;
  border-color: #e6ecf5 !important;
  color: #0f1b2d !important;
}
html[data-bs-theme="dark"] .page-link {
  background: #18181d !important;
  border-color: #2a2a31 !important;
  color: #fafafa !important;
}
.page-item.active .page-link {
  background: var(--saas-primary) !important;
  border-color: var(--saas-primary) !important;
  color: var(--tblr-primary-fg) !important;
}

/* ---- Status badges / pills --------------------------------------------- */
/* The base theme paints these as hardcoded 2-stop gradients with !important.
   Re-skin to clean Aurora soft-tinted pills: green=ok, red=danger,
   amber=warn, indigo=info, brand=primary. */
.badge.bg-success,
.badge-success,
.status-active,
.status-paid,
.status-approved,
.status-complete,
.status-completed,
.badge.text-bg-success {
  background: var(--fg-success-soft) !important;
  color: var(--fg-success) !important;
  border: 1px solid var(--fg-success-border) !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
}
.badge.bg-warning,
.badge-warning,
.status-pending,
.status-processing,
.badge.text-bg-warning {
  background: var(--fg-warning-soft) !important;
  color: var(--fg-warning) !important;
  border: 1px solid var(--fg-warning-border) !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
}
.badge.bg-danger,
.badge-danger,
.status-cancelled,
.status-canceled,
.status-failed,
.status-suspended,
.status-unpaid,
.status-overdue,
.badge.text-bg-danger {
  background: var(--fg-danger-soft) !important;
  color: var(--fg-danger) !important;
  border: 1px solid var(--fg-danger-border) !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
}
.badge.bg-info,
.badge-info,
.status-new,
.status-open,
.badge.text-bg-info {
  background: var(--fg-info-soft) !important;
  color: var(--fg-info) !important;
  border: 1px solid var(--fg-info-border) !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
}
.badge.bg-secondary,
.badge-secondary,
.status-inactive,
.status-closed,
.status-draft,
.badge.text-bg-secondary {
  background: var(--fg-surface-sunken) !important;
  color: var(--fg-muted) !important;
  border: 1px solid var(--fg-border) !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
}
.badge.bg-primary,
.badge-primary,
.badge.text-bg-primary {
  background: var(--fg-accent-soft) !important;
  color: var(--fg-accent) !important;
  border: 1px solid color-mix(in srgb, var(--fg-accent) 25%, transparent) !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
}

/* ---- Links + focus rings ----------------------------------------------- */
a {
  color: var(--tblr-link-color);
}
a:hover {
  color: var(--tblr-link-hover-color);
}
:focus-visible {
  outline-color: var(--saas-primary) !important;
}

/* ---- Selection + scrollbar accents (cosmetic, additive) ---------------- */
::selection {
  background: var(--fg-accent-soft);
  color: var(--fg-accent-active);
}
html[data-bs-theme="dark"] ::selection {
  color: var(--fg-text);
}

/* ==========================================================================
   RESIDUAL VIOLET CLEANUP — hardcoded indigo/violet hex in saas-customer.css
   + the layout inline .fg-btn-primary shadow that don't read tokens. Loaded
   last so these win. Recolor-only, additive.
   ========================================================================== */
.saas-version { background: var(--fg-accent-soft) !important; color: var(--fg-accent-active) !important; }

html:not([data-bs-theme="dark"]) .dropdown-item:hover,
html[data-bs-theme=""] .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-item:hover {
  background: var(--fg-accent-soft) !important;
  color: var(--fg-accent-active) !important;
}

html:not([data-bs-theme="dark"]) .saas-nav-item.active,
html:not([data-bs-theme="dark"]) .saas-nav-toggle.active,
html:not([data-bs-theme="dark"]) .saas-nav-toggle.expanded {
  background: var(--fg-accent-soft) !important;
  color: var(--fg-accent-active) !important;
}
html:not([data-bs-theme="dark"]) .saas-nav-subitem.active { color: var(--fg-accent-active) !important; }

/* card hover top-accent: teal gradient instead of teal->violet */
.card-sm.card-link::before { background: linear-gradient(90deg, var(--fg-accent), var(--fg-accent-hover)) !important; }

/* primary button glow: teal instead of violet rgba(124,58,237) */
.fg-ui .fg-btn-primary { box-shadow: 0 1px 2px rgba(15,169,143,.25), 0 0 0 1px var(--fg-accent) !important; }
.fg-ui .fg-btn-primary:hover { box-shadow: 0 2px 6px rgba(15,169,143,.35), 0 0 0 1px var(--fg-accent-hover) !important; }