/* ── CareerBank · Futuristic layer ───────────────────────────────────────────
   Loads AFTER cb.css + cb-ui.css. Upgrades the existing components to a
   futuristic look: ambient aurora + grid backdrop, glassmorphism panels, neon
   accent glow, gradient numerals, animated sheen. Everything is theme-aware and
   driven by --role-accent, so including this one file makes a page futuristic.
────────────────────────────────────────────────────────────────────────────── */

:root { --fx-accent: var(--role-accent, var(--brand)); --fx-accent2: var(--role-accent-2, var(--brand-2)); }

/* ── Ambient backdrop: aurora wash + faint tech grid ─────────────────────── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(820px 460px at 88% -8%,  color-mix(in srgb, var(--fx-accent) 18%, transparent), transparent 68%),
    radial-gradient(680px 480px at -6% 108%, color-mix(in srgb, var(--fx-accent2) 14%, transparent), transparent 68%);
  animation: fxAurora 16s ease-in-out infinite alternate;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% -10%, #000, transparent 78%);
          mask-image: radial-gradient(circle at 50% -10%, #000, transparent 78%);
}
@keyframes fxAurora { to { background-position: 6% 4%, -6% -4%; } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* Lift real content above the backdrop */
.sb, .main, .bottomnav, .arch-overlay, .arch-drawer, .dash-notif { position: relative; z-index: 1; }
.sb { z-index: 200; }

/* ── Glass sidebar ───────────────────────────────────────────────────────── */
.sb {
  background: color-mix(in srgb, var(--surface) 72%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-right: 1px solid color-mix(in srgb, var(--fx-accent) 22%, var(--border)) !important;
}
.sb__item.active {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 45%, transparent),
              0 10px 28px color-mix(in srgb, var(--fx-accent) 32%, transparent);
}
.sb__item.active::after { box-shadow: 0 0 8px var(--fx-accent), 0 0 18px var(--fx-accent); }

/* ── Glass cards + neon hover ────────────────────────────────────────────── */
.feat, .kpi, .stat-card, .qa-card, .ai-tool, .dash-card, .dash-cta, .dash-stat,
.dash-row, .dash-table, .arch-drawer, .dash-notif, .mh-acct__menu, .card {
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: color-mix(in srgb, var(--fx-accent) 14%, var(--border)) !important;
}
.feat--report { background: var(--role-grad) !important; }
.feat:hover, .kpi:hover, .stat-card:hover, .qa-card:hover, .ai-tool:hover,
.dash-card:hover, .dash-cta:hover, .dash-stat:hover, .card:hover {
  border-color: color-mix(in srgb, var(--fx-accent) 55%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 28%, transparent),
              0 20px 46px color-mix(in srgb, var(--fx-accent) 20%, transparent) !important;
}
.feat--report { background: var(--role-grad) !important; }

/* ── Greeting banner: neon edge + animated diagonal sheen ────────────────── */
.hero-banner {
  border: 1px solid color-mix(in srgb, var(--fx-accent) 38%, transparent);
  box-shadow: 0 0 54px color-mix(in srgb, var(--fx-accent) 22%, transparent),
              inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, color-mix(in srgb, var(--fx-accent) 16%, transparent) 50%, transparent 68%);
  background-size: 250% 100%; animation: fxSheen 7s linear infinite;
}
@keyframes fxSheen { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .hero-banner::after { animation: none; } }

/* ── Gradient numerals + glowing meters ──────────────────────────────────── */
.kpi__val, .stat-card__val:not(.stat-card__val--text), .dash-stat__num {
  background: linear-gradient(180deg, var(--text) 10%, color-mix(in srgb, var(--fx-accent) 60%, var(--text)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ring__val { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--fx-accent) 70%, transparent)); }
.prog__bar { box-shadow: 0 0 12px color-mix(in srgb, var(--fx-accent) 55%, transparent); }

/* ── Glowing primary buttons ─────────────────────────────────────────────── */
.feat-btn--solid, .btn--primary, .sb__cta {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fx-accent) 40%, transparent);
}
.feat-btn--solid:hover, .btn--primary:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 50%, transparent),
              0 12px 30px color-mix(in srgb, var(--fx-accent) 50%, transparent);
}

/* ── Glass top chrome ────────────────────────────────────────────────────── */
/* NOTE: do NOT add backdrop-filter to .main-head — it creates a stacking
   context that traps the account/notification dropdowns (z-index:1200) behind
   page content. .topbar (other pages) has no such overlapping dropdowns. */
.topbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Section heading accent bar → glow */
.dash-section-head h2::before { box-shadow: 0 0 12px color-mix(in srgb, var(--fx-accent) 60%, transparent); }

/* Per-role logo chip in the sidebar brand */
.sb__brand-logo {
  display: none; align-items: center; height: 26px; margin-top: 4px;
  padding: 3px 8px; border-radius: 8px; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.sb__brand-logo img { height: 18px; width: auto; display: block; }
.sb__brand-logo.show { display: inline-flex; }

/* ── Public / marketing pages (cb.css components) ────────────────────────────
   These classes only exist on the public pages, so they're inert on dashboards.
   --fx-accent falls back to --brand (royal blue) when no role is set. */
/* Leave the public-page nav exactly as it was — solid brand bar, no glow on its button. */
.nav .btn--primary, .nav__right .btn--primary { box-shadow: none !important; }
.card:hover {
  border-color: color-mix(in srgb, var(--fx-accent) 50%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 22%, transparent),
              0 18px 44px color-mix(in srgb, var(--fx-accent) 20%, transparent) !important;
}
.spotlight-card:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 35%, transparent),
              0 28px 64px color-mix(in srgb, var(--fx-accent) 32%, transparent) !important;
}
.eco-icon-item:hover {
  border-color: color-mix(in srgb, var(--fx-accent) 50%, transparent) !important;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--fx-accent) 28%, transparent) !important;
}
.why-card:hover {
  border-color: color-mix(in srgb, var(--fx-accent) 55%, transparent) !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--fx-accent) 22%, transparent) !important;
}
.stats-inline__num { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--fx-accent) 35%, transparent)); }
.featured-quote__mark { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--fx-accent) 40%, transparent)); }
.cta-banner { box-shadow: 0 0 60px color-mix(in srgb, var(--fx-accent) 25%, transparent); }
.footer { border-top: 1px solid color-mix(in srgb, var(--fx-accent) 25%, var(--border)); }
.btn--primary { box-shadow: 0 8px 24px color-mix(in srgb, var(--fx-accent) 38%, transparent); }
.btn--primary:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 50%, transparent),
              0 12px 30px color-mix(in srgb, var(--fx-accent) 50%, transparent);
}