/* ==========================================================================
   NXUS Hub — Component Styles v2.2
   Matches the Figma "Redesign User Dashboard" design exactly.
   Self-contained: defines all required tokens here so nothing depends on
   app.css declaring them. Brand colors (--brand-primary/secondary/accent)
   come from app.css / DynamicCssGenerator and are never overridden here.
   ========================================================================== */

/* ─── Design Tokens ─────────────────────────────────────────────────────── */

:root {
  /* Radius */
  --radius-button:  8px;
  --radius-card:    10px;
  --radius-input:   6px;
  --radius-avatar:  12px;
  --radius-metric:  12px;
  --radius-badge:   20px;
  --radius-menu:    8px;

  /* Spacing (4 px base scale) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-16: 64px;

  /* Semantic colors (brand-* come from app.css / DynamicCssGenerator) */
  --color-foreground:        #1f2933;
  --color-muted-foreground:  #6b7280;
  --color-muted:             #f3f6fa;
  --color-background:        #ffffff;
  --color-border:            #e5e7eb;
  --color-input-background:  #ffffff;
  --color-destructive:       #dc2626;
  --color-warning:           #d97706;

  /* Derived brand tokens — computed from brand-primary/secondary/accent  */
  --brand-primary-dark:       color-mix(in srgb, var(--brand-primary)    80%, black);
  --brand-primary-alpha-5:    color-mix(in srgb, var(--brand-primary)    5%, transparent);
  --brand-primary-alpha-10:   color-mix(in srgb, var(--brand-primary)   10%, transparent);
  --brand-primary-alpha-20:   color-mix(in srgb, var(--brand-primary)   20%, transparent);
  --brand-secondary-alpha-5:  color-mix(in srgb, var(--brand-secondary)  5%, transparent);
  --brand-secondary-alpha-10: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
  --brand-accent-alpha-5:     color-mix(in srgb, var(--brand-accent)     5%, transparent);
  --brand-accent-alpha-10:    color-mix(in srgb, var(--brand-accent)    10%, transparent);
  --brand-overlay:           linear-gradient(
                               to right,
                               color-mix(in srgb, var(--brand-primary)   60%, transparent) 0%,
                               color-mix(in srgb, var(--brand-secondary) 40%, transparent) 50%,
                               transparent 100%
                             );

  /* Gradients */
  --gradient-g1: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  --gradient-g2: linear-gradient(to right, var(--brand-primary), var(--brand-secondary), var(--brand-accent));
  --gradient-g3: linear-gradient(to right, var(--brand-primary), var(--brand-secondary));
  --gradient-g4: linear-gradient(135deg, var(--brand-secondary), var(--brand-accent));
  --gradient-g5: linear-gradient(135deg,
                   color-mix(in srgb, var(--brand-primary)   4%, transparent),
                   color-mix(in srgb, var(--brand-secondary) 2%, transparent));

  /* Shadows */
  --shadow-card:      0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-card-hover:0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  --shadow-modal:     0 20px 60px rgba(0,0,0,.18);
  --shadow-dropdown:  0 4px 16px rgba(0,0,0,.12);
  --shadow-cta-hover: 0 6px 20px rgba(0,0,0,.15);

  /* Typography — single source of truth is --brand-font-family (app.css),
     which defaults to Tailwind's system font-sans stack and can be
     overridden per tenant by DynamicCssGenerator. */
  --font-family-base: var(--brand-font-family);

  /* Transitions */
  --transition-fast:  120ms ease;
  --transition-base:  200ms ease;
  --transition-modal: 300ms ease;
  --transition-page:  400ms ease;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f8f9fb;
  color: var(--color-foreground);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:  0ms;
    --transition-base:  0ms;
    --transition-modal: 0ms;
    --transition-page:  0ms;
  }
}

/* ─── Dashboard Header Banner ───────────────────────────────────────────── */

.dashboard-header {
  background: var(--gradient-g1);
  position: relative;
  /* No overflow: hidden — it would clip the agentIdentityDropdown menu, which
     opens downward past the 140px header height. The brand overlay rendered
     by ::before uses inset: 0 (already pinned to the parent's box) so it does
     not need overflow clipping to stay inside the header. */
}

/* Overlay for banner images so brand gradient tints the photo */
.dashboard-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-overlay);
  pointer-events: none;
  z-index: 1;
}

.dashboard-header > * { position: relative; z-index: 2; }

/* ─── Agent Hub sticky shell ────────────────────────────────────────────────
   On Agent Hub pages both the layout header (DashboardHeader) and the page
   sub-header (AgentClientSubHeader) stay pinned while the page scrolls, per
   the Figma redesign. Scoped to .agent-hub-shell (set by AgentHubLayout) so
   the shared DashboardHeader stays non-sticky on the company DashboardLayout.

   The header keeps its scoped z-index (--z-header, 1025) — higher than the
   sub-header's 1020 — so if a tall tenant logo makes the header exceed the
   --app-header-height default, the sub-header tucks cleanly beneath it with no
   see-through seam. --app-header-height is set to the live measured height by
   nxusHeaderHeight.sync (helpers.js); 96px is the Figma compact-header default
   used until that runs. The .fig-header--compact qualifier lifts specificity
   above the scoped `.dashboard-header { position: relative }` rule. The
   `!important` is required to beat Bootstrap's `.position-relative` utility on
   the header root (`position: relative !important`); this scoped selector's
   higher specificity wins among the competing !important declarations. */
.agent-hub-shell .dashboard-header.fig-header--compact {
  position: sticky !important;
  top: 0;
}

.agent-hub-shell .fig-subheader {
  top: var(--app-header-height, 96px);
}

/* Page 0 (Client Management / Sales Tools / Learning) has no AgentClientSubHeader;
   its page header is the full-width tab strip. Pin it directly beneath the
   sticky banner — same offset as the sub-header — mirroring Pages 1-3. The
   strip already paints an opaque white background + bottom border, so no
   content bleeds through. z-index 1020 sits it below the banner (1025, which
   covers any tuck if a tall logo makes the header exceed the measured offset)
   and above the scrolling page content. */
.agent-hub-shell .nxus-nav-bar,
.agent-hub-shell .agent-hub-tab-strip {
  position: sticky;
  top: var(--app-header-height, 96px);
  z-index: 1020;
}

/* ─── Company Dashboard sticky shell ────────────────────────────────────────
   Same treatment as the Agent Hub shell, scoped to .dashboard-shell (set by
   DashboardLayout) so the company dashboard banner and its MANAGEMENT /
   REPORTING tab row (DashboardNavigation, .nxus-nav-bar) stay pinned while the
   page scrolls — matching Page 0. The !important + qualifier beat Bootstrap's
   `.position-relative` on the header root, same as the agent-hub rule. */
.dashboard-shell .dashboard-header.fig-header--compact {
  position: sticky !important;
  top: 0;
  z-index: var(--z-header, 1025);
}

.dashboard-shell .nxus-nav-bar {
  top: var(--app-header-height, 96px);
  z-index: 1020;
}

/* Header text colours */
.dashboard-header .welcome-text,
.dashboard-header .user-name,
.dashboard-header .user-role { color: #ffffff; }

.dashboard-header .user-name { font-size: 1.125rem; font-weight: 700; }
.dashboard-header .user-role { font-size: 0.75rem; opacity: 0.85; }

/* Avatar circle */
.dashboard-header .user-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-avatar);
  background-color: var(--brand-secondary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid rgba(255,255,255,0.3);
}

/* Identity dropdown trigger — semi-transparent pill on hover/focus */
.dashboard-header__identity-btn {
  transition: background-color 150ms ease !important;
}
.dashboard-header__identity-btn:hover,
.dashboard-header__identity-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.18) !important;
  outline: none !important;
  box-shadow: none !important;
}
.dashboard-header__identity-btn:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* Chevron rotates when the dropdown is open (Bootstrap flips aria-expanded). */
.dashboard-header__identity-btn .bi-chevron-down {
  transition: transform 150ms ease;
}
.dashboard-header__identity-btn[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* Performance overview metric cards — hover lift */
.perf-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
  transform: translateY(-2px);
}
/* ─── Navigation Tab Bar ────────────────────────────────────────────────── */
/* Matches Figma NavigationTabs: full-width white bg, gray-200 border-b,
   brand-gradient underline on the active tab (no pill/box background). */

.nxus-nav-bar,
.agent-hub-tab-strip {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  height: 52px;
  width: 100%;
  margin-bottom: 0;
}

/* Inner wrapper mirrors the page container so tabs always align with content */
.nxus-nav-bar__inner,
.agent-hub-tab-strip__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}

.nxus-nav-bar__tab,
.agent-hub-tab-strip__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #4b5563;                    /* gray-600 for inactive               */
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: color 200ms ease, background-color 200ms ease;
  white-space: nowrap;
}

.nxus-nav-bar__tab:hover,
.agent-hub-tab-strip__tab:hover {
  color: #111827;
  background-color: #f9fafb;         /* gray-50 hover tint                  */
}

.nxus-nav-bar__tab.active,
.agent-hub-tab-strip__tab.active {
  color: var(--brand-primary);
  font-weight: 600;
}

/* Figma-exact gradient underline: brand-primary → brand-secondary → brand-accent */
.nxus-nav-bar__tab.active::after,
.agent-hub-tab-strip__tab.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-g2);
  border-radius: 2px 2px 0 0;
}

.nxus-nav-bar__tab i,
.agent-hub-tab-strip__tab i { font-size: 1rem; }

/* Dropdown affordance for the MANAGEMENT tab — a real chevron (the Bootstrap
   .dropdown-toggle ::after caret collides with the active-tab underline ::after).
   Rotates 180° while the menu is open. */
.nxus-nav-bar__tab .nxus-nav-bar__caret {
  font-size: 0.75rem;
  margin-left: 2px;
  opacity: 0.8;
  transition: transform 200ms ease;
}

.nxus-nav-bar__tab[aria-expanded="true"] .nxus-nav-bar__caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* ─── Page Layout ───────────────────────────────────────────────────────── */

.nxus-page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}

@media (max-width: 1024px) { .nxus-page-container { padding: 0 var(--space-4); } }
@media (max-width: 640px)  { .nxus-page-container { padding: 0 12px; } }

/* ─── Section Headers ───────────────────────────────────────────────────── */

.nxus-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-foreground);
  margin: 0 0 4px;
}

.nxus-section-subtitle {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  margin: 0 0 var(--space-6);
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */

/* Bootstrap .card upgrade */
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover { box-shadow: var(--shadow-card-hover); }

.card-header {
  background: var(--brand-primary);
  color: #ffffff;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0 !important;
  padding: 14px var(--space-6);
  border-bottom: none;
  font-weight: 600;
}

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

/* NXUS semantic card */
.nxus-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.nxus-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--brand-primary-alpha-20);
}

/* Teal → green gradient top stripe (matches "Client Accounts" card in Figma) */
.nxus-card__stripe,
.nxus-stripe {
  display: block;
  height: 4px;
  background: var(--gradient-g2);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* Utility: adds the accent stripe via ::before on any container */
.has-accent-stripe {
  position: relative;
  padding-top: calc(var(--space-6) + 4px);
}

.has-accent-stripe::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-g2);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.nxus-card__header {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.nxus-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-foreground);
  margin: 0 0 2px;
}

.nxus-card__description {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  margin: 0;
}

.nxus-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--gradient-g5);
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Metric cards — Performance Overview row */
.nxus-metric-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-metric);
  box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: box-shadow var(--transition-base);
}

.nxus-metric-card:hover { box-shadow: var(--shadow-card-hover); }

.nxus-metric-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-primary-alpha-10);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Semantic icon-tile colors (opt-in via MetricCard IconColor; default primary) */
.nxus-metric-card__icon--secondary { background: var(--brand-secondary-alpha-10, rgba(1,148,159,.10)); color: var(--brand-secondary, #01949f); }
.nxus-metric-card__icon--success   { background: var(--tier-c-success-bg, #d1fae5); color: var(--tier-c-success, #065f46); }
.nxus-metric-card__icon--warning   { background: var(--tier-c-warning-bg, #fef3c7); color: var(--tier-c-warning, #92400e); }
.nxus-metric-card__icon--danger    { background: var(--tier-c-destructive-bg, #fee2e2); color: var(--tier-c-destructive, #991b1b); }
.nxus-metric-card__icon--info      { background: var(--tier-c-info-bg, #dbeafe); color: var(--tier-c-info, #1e40af); }
.nxus-metric-card__icon--accent    { background: var(--brand-accent-alpha-10, rgba(118,178,67,.10)); color: var(--brand-accent, #76b243); }

.nxus-metric-card__label {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
  margin: 0 0 2px;
}

.nxus-metric-card__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-foreground);
  line-height: 1;
  margin: 0;
}

/* Callout card */
.nxus-card--callout {
  border-left: 3px solid var(--brand-accent);
  background: var(--brand-primary-alpha-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  box-shadow: none;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
/* Figma spec: rounded-lg (8 px), NOT pill (20 px). All !important rules
   below override app.css which sets border-radius: 20px !important. */

.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-danger,
.btn-warning,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
  border-radius: 8px !important;    /* rounded-lg — overrides app.css 20px */
  font-family: Arial, sans-serif;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  transition: background 200ms ease, border-color 200ms ease,
              box-shadow 200ms ease, transform 200ms ease,
              opacity 200ms ease;
}

/* PRIMARY — solid brand-primary, eases to brand-secondary on hover */
.btn-primary {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.btn-primary:hover {
  background: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  color: #ffffff !important;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

/* SUCCESS — "Continue", "Start" (brand-accent green) */
.btn-success {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #ffffff !important;
}

.btn-success:hover {
  background-color: color-mix(in srgb, var(--brand-accent) 85%, black) !important;
  border-color:     color-mix(in srgb, var(--brand-accent) 85%, black) !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.10);
  color: #ffffff !important;
}

/* SECONDARY — solid brand-primary, eases to brand-secondary on hover */
.btn-secondary {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out !important;
}

.btn-secondary:hover {
  background: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #ffffff !important;
}

/* INFO — brand-secondary teal */
.btn-info {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #ffffff !important;
}

.btn-info:hover {
  background-color: color-mix(in srgb, var(--brand-secondary) 85%, black) !important;
  border-color:     color-mix(in srgb, var(--brand-secondary) 85%, black) !important;
  color: #ffffff !important;
}

/* OUTLINE-PRIMARY — teal outline (Quick Comparison, Coverage Analysis) */
.btn-outline-primary {
  border-color: var(--brand-secondary) !important;
  color: var(--brand-secondary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--brand-secondary) !important;
  color: #ffffff !important;
}

/* OUTLINE-SECONDARY */
.btn-outline-secondary {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

/* DANGER */
.btn-danger {
  background-color: var(--color-destructive) !important;
  border-color: var(--color-destructive) !important;
  color: #ffffff !important;
}

.btn-danger:hover {
  opacity: 0.9;
  color: #ffffff !important;
}

/* WARNING */
.btn-warning {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: #ffffff !important;
}

/* LIGHT — neutral/cancel buttons */
.btn-light {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.btn-light:hover {
  background-color: #f9fafb !important;
  color: #111827 !important;
}

/* DARK — same treatment as primary */
.btn-dark {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

/* Disabled state for all buttons */
.btn:disabled,
.btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* NXUS semantic button classes */
.btn-gradient-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  padding: 10px 20px;
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease-in-out, box-shadow var(--transition-base), transform var(--transition-base);
}

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

.btn-gradient-cta:active { transform: scale(0.98); }
.btn-gradient-cta.btn-lg { padding: 12px 24px; min-height: 48px; font-size: 1rem; }

.btn-accent-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--brand-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  padding: 8px 16px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-base), box-shadow var(--transition-base);
}

.btn-accent-action:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-card-hover);
  color: #ffffff;
}

.btn-neutral-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--brand-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  padding: 8px 16px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-base), box-shadow var(--transition-base);
}

.btn-neutral-action:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-card-hover);
  color: #ffffff;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}

.btn:focus-visible,
.btn-gradient-cta:focus-visible,
.btn-accent-action:focus-visible,
.btn-neutral-action:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(1, 148, 159, 0.20);
}
/* ─── Account Tab Filter Strip ──────────────────────────────────────────── */
/* Flat tab row above the client table. Active tab gets a gradient ::after
   underline (brand-primary → secondary → accent) instead of a button border. */

.account-tab-strip {
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid #e5e7eb;
  gap: 0;
  margin-bottom: 0.75rem;
}

.account-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease;
  outline: none;
}

.account-tab:hover {
  color: #111827;
}

.account-tab:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.account-tab:disabled:hover {
  color: #6b7280;
}

.account-tab.active {
  color: var(--brand-primary, #1f628d);
  font-weight: 600;
}

/* Gradient underline sits on top of the strip border-bottom */
.account-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-g2, linear-gradient(to right, var(--brand-primary, #1f628d), var(--brand-secondary, #01949f), var(--brand-accent, #76b243)));
  border-radius: 3px 3px 0 0;
}

.account-tab:focus-visible {
  outline: 2px solid var(--brand-primary, #1f628d);
  outline-offset: 2px;
  border-radius: 4px;
}

.account-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 20px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: #e5e7eb;
  color: #4b5563;
  transition: background-color 150ms ease, color 150ms ease;
}

.account-tab-badge.active {
  background-color: var(--brand-primary, #1f628d);
  color: #ffffff;
}

/* ─── Form Inputs ───────────────────────────────────────────────────────── */

.form-control,
.form-select {
  border-radius: var(--radius-input) !important;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  font-family: var(--font-family-base);
  color: var(--color-foreground);
  font-size: 0.9375rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-secondary) !important;
  box-shadow: 0 0 0 3px rgba(1, 148, 159, 0.18) !important;
  background-color: #ffffff;
  outline: none;
}

.form-control::placeholder { color: #9ca3af; }

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground);
  margin-bottom: var(--space-2);
}

.form-text {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

/* Input group icons */
.input-group-text {
  background-color: #f9fafb;
  border-color: #d1d5db;
  color: #6b7280;
  border-radius: var(--radius-input) !important;
}

/* ─── Tables ────────────────────────────────────────────────────────────── */

.table thead th,
.nxus-table thead th {
  background-color: var(--brand-primary);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--space-4);
  border-bottom: none;
  white-space: nowrap;
  vertical-align: middle;
}

.table thead th:first-child { border-radius: 0; }

.table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.9375rem;
  vertical-align: middle;
  color: var(--color-foreground);
}

.table tbody tr { transition: background-color var(--transition-base); }
.table tbody tr:hover td { background-color: #f9fafb; }
.table tbody tr.selected td {
  background-color: var(--brand-primary-alpha-5);
  border-left: 2px solid var(--brand-primary);
}

/* Company name links in table */
.table tbody td a,
.table td a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 500;
}

.table tbody td a:hover,
.table td a:hover {
  color: var(--brand-primary-dark);
  text-decoration: underline;
}

/* ─── Status Badges ─────────────────────────────────────────────────────── */

/* Upgrade Bootstrap .badge to NXUS spec */
.badge {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-badge) !important;
  border: 1px solid transparent;
  line-height: 1.4 !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* NXUS badge base */
.nxus-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-badge);
  border: 1px solid;
  line-height: 1.4;
  white-space: nowrap;
}

/* Status variants — matches Figma exactly */
.nxus-badge--draft,
.badge-uploaded     { background: #f3f4f6; color: #374151; border-color: #d1d5db !important; }

.nxus-badge--started,
.badge-started      { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc !important; }

.nxus-badge--quoted,
.badge-quoted       { background: var(--brand-primary-alpha-10); color: var(--brand-primary); border-color: var(--brand-primary-alpha-20) !important; }

.nxus-badge--ordered,
.badge-ordered      { background: #f3e8ff; color: #7e22ce; border-color: #d8b4fe !important; }

.nxus-badge--pmt-pending,
.badge-pmt-pending  { background: #fef3c7; color: #b45309; border-color: #fcd34d !important; }

.nxus-badge--pmt-received,
.badge-pmt-received { background: #dcfce7; color: #15803d; border-color: #86efac !important; }

.nxus-badge--rejected,
.badge-rejected     { background: #ffe4e6; color: #be123c; border-color: #fda4af !important; }

.nxus-badge--closed,
.badge-closed       { background: #f5f5f4; color: #57534e; border-color: #d6d3d1 !important; }

.nxus-badge--declined,
.badge-declined     { background: #ffedd5; color: #c2410c; border-color: #fdba74 !important; }

.nxus-badge--teal   { background: #cffafe; color: #155e75; border-color: #a5f3fc !important; }

/* Bootstrap bg-* badge overrides */
.badge.bg-primary   { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
.badge.bg-success   { background-color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; }
.badge.bg-info      { background-color: var(--brand-secondary) !important; border-color: var(--brand-secondary) !important; }
.badge.bg-secondary { background-color: var(--color-muted) !important; color: var(--color-muted-foreground) !important; border-color: #d1d5db !important; }

/* ─── Modals ────────────────────────────────────────────────────────────── */

.modal-content {
  border-radius: var(--radius-card) !important;
  border: none !important;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

/* Teal → green accent stripe at top of every modal */
.modal-content::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--gradient-g2);
  flex-shrink: 0;
}

.modal-header {
  padding: 24px var(--space-6) var(--space-4) !important;
  border-bottom: 1px solid var(--color-border) !important;
  background: #ffffff;
}

.modal-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--color-foreground) !important;
}

.modal-body {
  padding: var(--space-6) !important;
  background: #ffffff;
}

.modal-footer {
  padding: var(--space-4) var(--space-6) !important;
  border-top: 1px solid var(--color-border) !important;
  background: #ffffff;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Confirmation modal — no accent stripe */
.modal-confirm .modal-content::before { display: none; }

.nxus-confirm-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-4);
}

.nxus-confirm-icon--destructive { background: #ffe4e6; color: var(--color-destructive); }
.nxus-confirm-icon--warning     { background: #fef3c7; color: var(--color-warning); }

/* ─── Dropdowns ─────────────────────────────────────────────────────────── */

/* Bootstrap .dropdown-menu upgrade */
.dropdown-menu {
  border-radius: var(--radius-menu) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-dropdown) !important;
  padding: 4px 0 !important;
  font-size: 0.9375rem;
  min-width: 180px;
}

.dropdown-item {
  padding: 10px 16px !important;
  color: var(--color-foreground) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background-color var(--transition-base);
  border-radius: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--brand-primary-alpha-5) !important;
  color: var(--brand-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

.dropdown-item i { color: var(--brand-secondary); }
.dropdown-item--destructive { color: var(--color-destructive) !important; }
.dropdown-item--destructive i { color: var(--color-destructive); }
.dropdown-item--destructive:hover { background-color: #fff1f2 !important; }
.dropdown-divider { border-color: var(--color-border) !important; margin: 4px 0 !important; }

/* NXUS dropdown classes */
.nxus-dropdown-menu {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow-dropdown);
  min-width: 192px;
  padding: 4px 0;
}

.nxus-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: var(--color-foreground);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background-color var(--transition-base);
}

.nxus-dropdown-item:hover     { background-color: var(--color-muted); }
.nxus-dropdown-item i         { color: var(--brand-secondary); }
.nxus-dropdown-item--destructive { color: var(--color-destructive); }
.nxus-dropdown-item--destructive i { color: var(--color-destructive); }
.nxus-dropdown-item--destructive:hover { background-color: #fff1f2; }
.nxus-dropdown-divider { height: 1px; background: var(--color-border); margin: 4px 0; }

/* ─── Filter Tab Pills (All Accounts / Uploaded / Active …) ─────────────── */

.nav-pills .nav-link,
.filter-tab {
  border-radius: var(--radius-badge) !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  padding: 4px 12px;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.nav-pills .nav-link:hover,
.filter-tab:hover { color: var(--brand-primary); background-color: var(--brand-primary-alpha-5); }

.nav-pills .nav-link.active,
.filter-tab.active {
  background-color: var(--brand-primary-alpha-10) !important;
  color: var(--brand-primary) !important;
  border-bottom: 2px solid var(--brand-primary);
  border-radius: 0 !important;
}

/* ─── Pagination ────────────────────────────────────────────────────────── */

.nxus-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--gradient-g5);
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

.page-item .page-link {
  color: var(--brand-primary);
  border-color: var(--color-border);
  border-radius: var(--radius-button) !important;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

.page-item .page-link:hover {
  background-color: var(--brand-primary-alpha-10);
  color: var(--brand-primary);
}

/* ─── Empty State ───────────────────────────────────────────────────────── */

.nxus-empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-6);
}

.nxus-empty-state__icon  { color: var(--color-muted); font-size: 3rem; margin-bottom: var(--space-4); }
.nxus-empty-state__title { font-size: 1rem; color: var(--color-muted-foreground); margin: 0 0 4px; }
.nxus-empty-state__hint  { font-size: 0.875rem; color: var(--color-muted-foreground); margin: 0; }

/* ─── Alerts ────────────────────────────────────────────────────────────── */

.alert {
  border-radius: var(--radius-card) !important;
  border: 1px solid;
  font-size: 0.9375rem;
}

.alert-primary {
  background-color: var(--brand-primary-alpha-5) !important;
  border-color: var(--brand-primary-alpha-20) !important;
  color: var(--brand-primary) !important;
}

.alert-success {
  background-color: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}

.alert-warning {
  background-color: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #b45309 !important;
}

.alert-danger {
  background-color: #ffe4e6 !important;
  border-color: #fda4af !important;
  color: #be123c !important;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */

footer,
footer.nxus-footer {
  background: var(--gradient-g5);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

footer a { color: var(--brand-primary); text-decoration: none; }
footer a:hover { color: var(--brand-primary-dark); text-decoration: underline; }

/* ─── Utility ───────────────────────────────────────────────────────────── */

.text-muted-nxus  { color: var(--color-muted-foreground) !important; }
.text-brand       { color: var(--brand-primary) !important; }
.text-brand-secondary { color: var(--brand-secondary) !important; }
.text-brand-accent    { color: var(--brand-accent) !important; }
.text-destructive { color: var(--color-destructive) !important; }

/* Accent link (teal) */
a.text-brand,
.link-brand {
  color: var(--brand-secondary);
  text-decoration: none;
  font-weight: 500;
}

a.text-brand:hover,
.link-brand:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* Divider */
hr { border-color: var(--color-border); opacity: 1; }

/* Page section fade-in */
.nxus-fade-in { animation: nxusFadeIn var(--transition-page) ease forwards; }

@keyframes nxusFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .modal-content   { border-radius: 0 !important; }
  .modal-dialog    { margin: 0; max-width: 100%; }
  .modal-dialog .modal-content { min-height: 100vh; }

  .nxus-nav-bar,
  .agent-hub-tab-strip { height: auto; }

  .nxus-nav-bar__inner,
  .agent-hub-tab-strip__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: auto;
    padding: 0 12px;
  }
  .nxus-nav-bar__inner::-webkit-scrollbar,
  .agent-hub-tab-strip__inner::-webkit-scrollbar { display: none; }

  .nxus-nav-bar__tab,
  .agent-hub-tab-strip__tab { padding: 10px 12px; font-size: 0.875rem; }
}