/* ═══════════════════════════════════════════════════════════
   Spiritual Agency Estate Dashboard
   Vivid Frequency v6.1 — custom.css v4
   v4 adds: full light-mode parity via :root.light overrides.
   Dark stays default. Toggle flips html.light <-> html.dark.
   Standalone Shakti Pink → Shakti Crimson on light;
   gradient & pillar locks preserved.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ─── Brand tokens (mode-invariant) ─── */
  --vf-void:            #0D0D1A;
  --vf-deep-violet:     #1A0533;
  --vf-shakti:          #FF0060;   /* Shakti Pink — Shakti Gradient & dark mode */
  --vf-shakti-crimson:  #AB1C3D;   /* Shakti Crimson — light mode standalone */
  --vf-magenta:         #FF008B;
  --vf-spirit-blue:     #0896F2;
  --vf-electric-violet: #9000FF;
  --vf-anahata:         #A7FF00;
  --vf-anahata-deep:    #3D6500;   /* v6.1 light-mode body text */
  --vf-electric-yellow: #FFE600;
  --vf-parchment:       #FAFAF7;

  --t1: #E24B4A; --t2: #FF8C00; --t3: #FFE600; --t4: #A7FF00;
  --t5: #0896F2; --t6: #9000FF; --t7: #FF008B;

  /* Full chakra spectrum gradient — root → crown */
  --vf-spectrum: linear-gradient(90deg,
    var(--t1) 0%,
    var(--t2) 16.66%,
    var(--t3) 33.33%,
    var(--t4) 50%,
    var(--t5) 66.66%,
    var(--t6) 83.33%,
    var(--t7) 100%
  );

  /* ─── Semantic tokens — DARK MODE DEFAULTS ─── */

  /* Surface */
  --vf-bg-base: var(--vf-void);

  /* Atmospheric tints (radial bg + drift layer) */
  --vf-bg-grad-1: rgba(var(--vf-shakti-display-rgb), 0.08);
  --vf-bg-grad-2: rgba(8, 150, 242, 0.07);
  --vf-bg-grad-3: rgba(144, 0, 255, 0.06);
  --vf-bg-grad-4: rgba(167, 255, 0, 0.04);
  --vf-drift-1:   rgba(255, 0, 139, 0.05);
  --vf-drift-2:   rgba(8, 150, 242, 0.05);

  /* Shakti display — Pink in dark, Crimson in light.
     Standalone use only; brand gradient & Pillar Create stay --vf-shakti. */
  --vf-shakti-display:     var(--vf-shakti);
  --vf-shakti-display-rgb: 255, 0, 96;

  /* Text */
  --vf-text-body:       var(--vf-parchment);
  --vf-text-on-card:    var(--vf-parchment);
  --vf-text-desc:       rgba(250, 250, 247, 0.65);  /* broader early rule */
  --vf-text-muted:      rgba(250, 250, 247, 0.55);  /* late override on services */
  --vf-section-h-color: var(--vf-parchment);
  --vf-tab-color:       var(--vf-parchment);
  --vf-input-text:      var(--vf-parchment);

  /* Card glass */
  --vf-card-bg-from:        rgba(26, 5, 51, 0.50);
  --vf-card-bg-to:          rgba(13, 13, 26, 0.55);
  --vf-card-bg-from-hover:  rgba(26, 5, 51, 0.80);
  --vf-card-bg-to-hover:    rgba(13, 13, 26, 0.80);
  --vf-card-border:         rgba(255, 255, 255, 0.04);
  --vf-card-border-l-alpha: 0.55;
  --vf-card-shadow:         rgba(0, 0, 0, 0.22);

  /* Information-widgets bar */
  --vf-iw-bg-from: rgba(26, 5, 51, 0.7);
  --vf-iw-bg-to:   rgba(13, 13, 26, 0.7);
  --vf-iw-inset:   rgba(255, 255, 255, 0.05);

  /* Search input */
  --vf-input-bg:     rgba(13, 13, 26, 0.7);
  --vf-input-border: rgba(8, 150, 242, 0.4);

  /* Status dot — green (red/pink uses shakti-display) */
  --vf-status-green:     var(--vf-anahata);
  --vf-status-green-rgb: 167, 255, 0;

  /* ChakraPulse */
  --vf-chakra-glow-blur: 12px;

  /* Scrollbar */
  --vf-scrollbar-track:        var(--vf-void);
  --vf-scrollbar-thumb:        var(--vf-deep-violet);
  --vf-scrollbar-thumb-hover:  var(--vf-shakti-display);
}

/* ═══════════════════════════════════════════════════════════
   ★ SIGNATURE ELEMENT: Fixed top SpectrumBar
   3px gradient strip across the top of the viewport.
   Pulses subtly via the box-shadow glow.
   ═══════════════════════════════════════════════════════════ */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--vf-spectrum);
  z-index: 9999;
  pointer-events: none;
  box-shadow:
    0 1px 16px rgba(var(--vf-shakti-display-rgb), 0.35),
    0 0 32px rgba(144, 0, 255, 0.2),
    0 0 48px rgba(8, 150, 242, 0.15);
}

/* ─── Force base background everywhere ─── */
html, body,
.dark, .dark body,
[class*="bg-theme-"],
[class*="dark:bg-theme-"],
[class*="dark:bg-zinc-"],
[class*="dark:bg-slate-"],
[class*="dark:bg-gray-"] {
  background-color: var(--vf-bg-base) !important;
}

html, body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  color: var(--vf-text-body) !important;
}

/* ─── Atmospheric radial gradients ─── */
body {
  background-image:
    radial-gradient(ellipse at 15% 0%,   var(--vf-bg-grad-1) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 100%, var(--vf-bg-grad-2) 0%, transparent 45%),
    radial-gradient(ellipse at 95% 10%,  var(--vf-bg-grad-3) 0%, transparent 40%),
    radial-gradient(ellipse at 5% 75%,   var(--vf-bg-grad-4) 0%, transparent 40%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  min-height: 100vh;
  padding-top: 3px;  /* clearance for the SpectrumBar */
}

/* ─── Drifting gradient layer ─── */
body::before {
  content: '';
  position: fixed;
  inset: -50%;
  background:
    radial-gradient(circle at 30% 30%, var(--vf-drift-1) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, var(--vf-drift-2) 0%, transparent 50%);
  animation: vf-drift 40s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes vf-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-3%, 3%) rotate(180deg); }
}
#__next, main { position: relative; z-index: 1; }

/* ─── Headings ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   ★ SECTION HEADERS — full SpectrumBar underline
   ═══════════════════════════════════════════════════════════ */
.services-group h2,
.bookmarks-group h2,
[class*="services-group"] h2,
[class*="bookmarks-group"] h2,
#services h2,
.first\:mt-0 h2 {
  position: relative !important;
  color: var(--vf-section-h-color) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding-bottom: 0.7rem !important;
  margin-bottom: 1rem !important;
  border-bottom: none !important;
}
.services-group h2::after,
.bookmarks-group h2::after,
[class*="services-group"] h2::after,
[class*="bookmarks-group"] h2::after,
#services h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 2px;
  background: var(--vf-spectrum);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(var(--vf-shakti-display-rgb), 0.4);
}

/* ─── Service tiles — glass + Shakti border ─── */
.services-block .service > a,
.bookmarks-block .bookmark > a,
[class*="service"] > a,
[class*="bookmark"] > a {
  background: linear-gradient(135deg, var(--vf-card-bg-from), var(--vf-card-bg-to)) !important;
  border: 1px solid var(--vf-card-border) !important;
  border-left: 3px solid rgba(var(--vf-shakti-display-rgb), var(--vf-card-border-l-alpha)) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 14px var(--vf-card-shadow) !important;
}
.services-block .service > a:hover,
.bookmarks-block .bookmark > a:hover,
[class*="service"] > a:hover,
[class*="bookmark"] > a:hover {
  background: linear-gradient(135deg, var(--vf-card-bg-from-hover), var(--vf-card-bg-to-hover)) !important;
  border-color: rgba(var(--vf-shakti-display-rgb), 0.30) !important;
  border-left-color: var(--vf-shakti-display) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 22px rgba(var(--vf-shakti-display-rgb), 0.22),
    0 0 0 1px rgba(var(--vf-shakti-display-rgb), 0.28) !important;
}

/* ─── Information widgets row ─── */
#information-widgets,
.information-widgets,
[class*="information-widgets"] {
  background: linear-gradient(135deg, var(--vf-iw-bg-from), var(--vf-iw-bg-to)) !important;
  border: 1px solid rgba(var(--vf-shakti-display-rgb), 0.25) !important;
  border-radius: 14px !important;
  padding: 1.5rem 1.75rem !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    0 8px 32px rgba(var(--vf-shakti-display-rgb), 0.1),
    inset 0 1px 0 var(--vf-iw-inset) !important;
  margin-bottom: 1.5rem !important;
}

/* ─── Greeting tri-colour gradient ─── */
.widget-greeting,
.information-widget-greeting,
[class*="greeting"] {
  background: linear-gradient(135deg, var(--vf-shakti) 0%, var(--vf-magenta) 50%, var(--vf-electric-violet) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  filter: drop-shadow(0 0 24px rgba(var(--vf-shakti-display-rgb), 0.25));
}

/* ─── Tabs ─── */
.tabbed-navigation a,
nav.tabs a,
[class*="tabbed-navigation"] a,
[class*="tab-button"],
[role="tab"] {
  color: var(--vf-tab-color) !important;
  opacity: 0.55;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  position: relative !important;
  padding: 0.5rem 1.25rem !important;
  transition: all 0.2s ease !important;
}
.tabbed-navigation a:hover,
[class*="tabbed-navigation"] a:hover,
[role="tab"]:hover {
  color: var(--vf-magenta) !important;
  opacity: 1;
}
.tabbed-navigation a.active,
.tabbed-navigation a[aria-current],
[class*="tabbed-navigation"] a[aria-current],
[role="tab"][aria-selected="true"],
[class*="tab-button"][class*="active"] {
  color: var(--vf-shakti-display) !important;
  opacity: 1 !important;
}
.tabbed-navigation a.active::after,
.tabbed-navigation a[aria-current]::after,
[class*="tabbed-navigation"] a[aria-current]::after,
[role="tab"][aria-selected="true"]::after,
[class*="tab-button"][class*="active"]::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 1.25rem; right: 1.25rem;
  height: 2px;
  background: linear-gradient(90deg, var(--vf-shakti), var(--vf-magenta));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(var(--vf-shakti-display-rgb), 0.6);
}

/* ─── Search input ─── */
input[type="text"], input[type="search"],
.quicklaunch input {
  background: var(--vf-input-bg) !important;
  border: 1px solid var(--vf-input-border) !important;
  color: var(--vf-input-text) !important;
  border-radius: 8px !important;
}
input[type="text"]:focus, input[type="search"]:focus,
.quicklaunch input:focus {
  outline: none !important;
  border-color: var(--vf-shakti-display) !important;
  box-shadow:
    0 0 0 3px rgba(var(--vf-shakti-display-rgb), 0.2),
    0 0 24px rgba(var(--vf-shakti-display-rgb), 0.2) !important;
}

/* ─── Bookmark abbreviation badges ─── */
.bookmarks-block .bookmark > a > div:first-child,
.bookmarks-block [class*="rounded"]:first-child,
[class*="bookmark"] [class*="abbr"] {
  background: linear-gradient(135deg, var(--vf-shakti), var(--vf-magenta)) !important;
  color: var(--vf-parchment) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(var(--vf-shakti-display-rgb), 0.35);
}

/* ─── Service description text ─── */
.services-block .service .text-theme-700,
.services-block .service [class*="text-theme-700"],
.services-block .service [class*="dark:text-theme-200"],
.bookmarks-block .bookmark [class*="text-theme-"],
[class*="service"] p,
[class*="service"] [class*="description"] {
  color: var(--vf-text-desc) !important;
  font-size: 0.78rem !important;
}
.services-block .service h2,
.services-block .service h3,
.services-block .service [class*="font-medium"],
.services-block .service [class*="font-bold"],
.bookmarks-block .bookmark [class*="font-medium"] {
  color: var(--vf-text-on-card) !important;
  font-weight: 700 !important;
}

/* ─── Status indicators ─── */
[class*="bg-green-"], [class*="bg-emerald-"] {
  background-color: var(--vf-status-green) !important;
  box-shadow: 0 0 8px rgba(var(--vf-status-green-rgb), 0.6);
}
[class*="bg-red-"], [class*="bg-rose-"] {
  background-color: var(--vf-shakti-display) !important;
  box-shadow: 0 0 8px rgba(var(--vf-shakti-display-rgb), 0.6);
}

/* ─── ChakraPulse strip (injected via custom.js) ─── */
.chakra-pulse {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 0 0.85rem;
  position: relative;
  z-index: 2;
}
.chakra-pulse span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: chakra-pulse-anim 2s ease-in-out infinite;
}
.chakra-pulse span:nth-child(1) { background: var(--t1); box-shadow: 0 0 var(--vf-chakra-glow-blur) var(--t1); animation-delay: 0s; }
.chakra-pulse span:nth-child(2) { background: var(--t2); box-shadow: 0 0 var(--vf-chakra-glow-blur) var(--t2); animation-delay: 0.2s; }
.chakra-pulse span:nth-child(3) { background: var(--t3); box-shadow: 0 0 var(--vf-chakra-glow-blur) var(--t3); animation-delay: 0.4s; }
.chakra-pulse span:nth-child(4) { background: var(--t4); box-shadow: 0 0 var(--vf-chakra-glow-blur) var(--t4); animation-delay: 0.6s; }
.chakra-pulse span:nth-child(5) { background: var(--t5); box-shadow: 0 0 var(--vf-chakra-glow-blur) var(--t5); animation-delay: 0.8s; }
.chakra-pulse span:nth-child(6) { background: var(--t6); box-shadow: 0 0 var(--vf-chakra-glow-blur) var(--t6); animation-delay: 1.0s; }
.chakra-pulse span:nth-child(7) { background: var(--t7); box-shadow: 0 0 var(--vf-chakra-glow-blur) var(--t7); animation-delay: 1.2s; }
@keyframes chakra-pulse-anim {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.5);  opacity: 1;   }
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--vf-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--vf-scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--vf-scrollbar-thumb-hover); }

/* ─── Tier and pillar border-left hooks (mode-invariant per VF v6.1 brief) ─── */
.service.tier-1 > a { border-left-color: var(--t1) !important; }
.service.tier-2 > a { border-left-color: var(--t2) !important; }
.service.tier-3 > a { border-left-color: var(--t3) !important; }
.service.tier-4 > a { border-left-color: var(--t4) !important; }
.service.tier-5 > a { border-left-color: var(--t5) !important; }
.service.tier-6 > a { border-left-color: var(--t6) !important; }
.service.tier-7 > a { border-left-color: var(--t7) !important; }
.service.pillar-create   > a { border-left-color: var(--vf-shakti) !important; }
.service.pillar-build    > a { border-left-color: var(--vf-spirit-blue) !important; }
.service.pillar-grow     > a { border-left-color: var(--vf-anahata) !important; }
.service.pillar-automate > a { border-left-color: var(--vf-electric-violet) !important; }

/* ═══════════════════════════════════════════════════════════
   v3.1 — NUCLEAR base background override
   Earlier selectors lost the specificity battle against
   Homepage's wrapper divs. This block targets every plausible
   wrapper and forces the base bg to win.
   Now mode-aware via --vf-bg-base.
   ═══════════════════════════════════════════════════════════ */
html, html.dark, html.light,
html body, html.dark body, html.light body,
body > div, body > div > div, body > div > div > div,
#__next, #__next > div, #__next > main,
main, main > div, main > section,
div[class*="min-h-screen"],
div[class*="min-h-full"],
[class*="bg-theme"]:not(button):not(input):not(a):not(svg),
[class*="bg-zinc"]:not(button):not(input):not(a):not(svg),
[class*="bg-slate"]:not(button):not(input):not(a):not(svg),
[class*="bg-gray"]:not(button):not(input):not(a):not(svg),
[class*="bg-neutral"]:not(button):not(input):not(a):not(svg) {
  background-color: var(--vf-bg-base) !important;
  background: var(--vf-bg-base) !important;
}

/* But keep body's atmospheric gradients alive on top of base */
body {
  background-color: var(--vf-bg-base) !important;
  background-image:
    radial-gradient(ellipse at 15% 0%,   var(--vf-bg-grad-1) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, var(--vf-bg-grad-2) 0%, transparent 50%),
    radial-gradient(ellipse at 95% 10%,  var(--vf-bg-grad-3) 0%, transparent 50%),
    radial-gradient(ellipse at 5% 75%,   var(--vf-bg-grad-4) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Inner wrappers transparent so body's gradient shines through */
#__next, #__next > *, main {
  background: transparent !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   v3.2 — Breathing room between service groups
   ═══════════════════════════════════════════════════════════ */
.services-group + .services-group,
.bookmarks-group + .bookmarks-group,
.services-group + .bookmarks-group,
.bookmarks-group + .services-group,
[class*="services-group"] + [class*="services-group"],
[class*="services-group"] + [class*="bookmarks-group"],
[class*="bookmarks-group"] + [class*="services-group"],
[class*="bookmarks-group"] + [class*="bookmarks-group"] {
  margin-top: 2.25rem !important;
}

/* Slightly softer descriptions for less visual weight (services-block only) */
.services-block .service .text-theme-700,
.services-block .service [class*="text-theme-700"],
.services-block .service [class*="dark:text-theme-200"] {
  color: var(--vf-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════
   v4 — LIGHT MODE OVERRIDES
   Triggered by Homepage flipping <html class="light">.
   Mirrors the variable contract above with VF Light Mode
   values from the v6.1 spec brief.
   ═══════════════════════════════════════════════════════════ */
:root.light {
  /* Surface — Parchment instead of Void */
  --vf-bg-base: var(--vf-parchment);

  /* Atmospheric tints @ ~30% of dark values */
  --vf-bg-grad-1: rgba(var(--vf-shakti-display-rgb), 0.024);
  --vf-bg-grad-2: rgba(8, 150, 242, 0.021);
  --vf-bg-grad-3: rgba(144, 0, 255, 0.018);
  --vf-bg-grad-4: rgba(167, 255, 0, 0.012);
  --vf-drift-1:   rgba(255, 0, 139, 0.015);
  --vf-drift-2:   rgba(8, 150, 242, 0.015);

  /* Standalone Shakti flips Pink → Crimson */
  --vf-shakti-display:     var(--vf-shakti-crimson);
  --vf-shakti-display-rgb: 171, 28, 61;

  /* Text — Anahata Deep on Parchment (v6.1 spec) */
  --vf-text-body:       var(--vf-anahata-deep);
  --vf-text-on-card:    var(--vf-anahata-deep);
  --vf-text-desc:       rgba(61, 101, 0, 0.75);
  --vf-text-muted:      rgba(61, 101, 0, 0.70);
  --vf-section-h-color: var(--vf-anahata-deep);
  --vf-tab-color:       var(--vf-anahata-deep);
  --vf-input-text:      var(--vf-anahata-deep);

  /* Card glass — parchment-tinted */
  --vf-card-bg-from:        rgba(255, 255, 255, 0.70);
  --vf-card-bg-to:          rgba(250, 250, 247, 0.85);
  --vf-card-bg-from-hover:  rgba(255, 255, 255, 0.85);
  --vf-card-bg-to-hover:    rgba(250, 250, 247, 0.95);
  --vf-card-border:         rgba(13, 13, 26, 0.06);
  --vf-card-border-l-alpha: 0.75;            /* per brief: bumped from 0.55 */
  --vf-card-shadow:         rgba(0, 0, 0, 0.10);

  /* Information-widgets bar */
  --vf-iw-bg-from: rgba(255, 255, 255, 0.75);
  --vf-iw-bg-to:   rgba(250, 250, 247, 0.85);
  --vf-iw-inset:   rgba(255, 255, 255, 0.60);

  /* Search input */
  --vf-input-bg:     rgba(255, 255, 255, 0.85);
  --vf-input-border: rgba(8, 150, 242, 0.55);

  /* Status green — darken so dot reads on Parchment */
  --vf-status-green:     #7FCC00;
  --vf-status-green-rgb: 127, 204, 0;

  /* ChakraPulse — reduce bloom on light */
  --vf-chakra-glow-blur: 7px;

  /* Scrollbar */
  --vf-scrollbar-track:        rgba(13, 13, 26, 0.05);
  --vf-scrollbar-thumb:        rgba(13, 13, 26, 0.20);
  /* --vf-scrollbar-thumb-hover inherits via shakti-display = crimson */
}