/* =============================================================================
   HAILO — LIQUID GLASS v3 (loaded after crm.css; overrides win on cascade order)

   Mental model: this is NOT a UI, it's a 3D scene rendered in 2D. Glass
   objects sit in a dark room, lit by a soft directional light from the
   top-left. Every surface responds. Glow bleeds beyond each object and
   tints the surrounding space.

   Wing identity is expressed by tinting the same shared chrome:
     - Manage  → mint   (leads / money / growth)
     - Edit    → purple (creative work)
     - Deliver → cyan   (output / polish)

   The mechanic: `body[data-wing="..."]` rebinds --wing-* tokens. Every
   surface that uses --wing-* (orbs, active pills, glowing CTAs, bleed
   halos) repaints automatically — no per-wing CSS duplication.
   ============================================================================= */

/* ── Per-wing accent tokens ────────────────────────────────────────────── */
body[data-wing="manage"]  {
  --wing-accent:        #6affc6;          /* mint */
  --wing-accent-soft:   #67E8F9;          /* cyan */
  --wing-accent-deep:   #2ba480;
  --wing-accent-glow:   rgba(106,255,198,0.55);
  --wing-accent-tint:   rgba(106,255,198,0.10);
  --wing-bloom-a:       rgba(106,255,198,0.55);
  --wing-bloom-b:       rgba(60, 200,180,0.40);
  --wing-bloom-c:       rgba(120,180,255,0.20);
}
body[data-wing="edit"]    {
  --wing-accent:        #d4b4ff;          /* purple */
  --wing-accent-soft:   #ff9ad9;          /* pink */
  --wing-accent-deep:   #6a3fc8;
  --wing-accent-glow:   rgba(180,140,255,0.55);
  --wing-accent-tint:   rgba(180,140,255,0.10);
  --wing-bloom-a:       rgba(180,140,255,0.55);
  --wing-bloom-b:       rgba(255,154,217,0.35);
  --wing-bloom-c:       rgba(120,140,255,0.25);
}
body[data-wing="deliver"] {
  --wing-accent:        #67E8F9;          /* cyan */
  --wing-accent-soft:   #6affc6;          /* mint */
  --wing-accent-deep:   #1fd1c0;
  --wing-accent-glow:   rgba(103,232,249,0.55);
  --wing-accent-tint:   rgba(103,232,249,0.10);
  --wing-bloom-a:       rgba(103,232,249,0.55);
  --wing-bloom-b:       rgba( 70,160,240,0.35);
  --wing-bloom-c:       rgba(106,255,198,0.25);
}
/* Sensible default when no wing context (e.g. public delivery pages) */
body:not([data-wing]) {
  --wing-accent:        #2DD4BF;
  --wing-accent-soft:   #A78BFA;
  --wing-accent-deep:   #1fd1c0;
  --wing-accent-glow:   rgba(45,212,191,0.55);
  --wing-accent-tint:   rgba(45,212,191,0.10);
  --wing-bloom-a:       rgba(45,212,191,0.50);
  --wing-bloom-b:       rgba(167,139,250,0.40);
  --wing-bloom-c:       rgba(103,232,249,0.20);
}

/* The legacy --accent tokens follow --wing-accent so existing chrome
   (links, accent-lines, buttons reading through --accent) re-themes
   per wing without rewriting any of the existing rules in crm.css. */
body[data-wing] {
  --accent:        var(--wing-accent);
  --accent-soft:   var(--wing-accent-soft);
  --accent-line:   color-mix(in srgb, var(--wing-accent) 55%, transparent);
  --accent-tint:   color-mix(in srgb, var(--wing-accent) 10%, transparent);
  --accent-glow:   color-mix(in srgb, var(--wing-accent) 22%, transparent);
}

/* =============================================================================
   v3 TOKEN LAYER — adds atop the existing crm.css tokens
   ============================================================================= */
:root {
  /* Directional glass fill — 135deg, light from top-left.
     The gradient *is* the lighting, baked in. Lighter top-left, darker
     bottom-right — what makes a surface read as "lit", not "flat". */
  --v3-fill-glass:
    linear-gradient(135deg,
      rgba(60, 72, 94, 0.55) 0%,
      rgba(28, 34, 46, 0.55) 40%,
      rgba(10, 14, 22, 0.65) 100%);
  --v3-fill-glass-deep:
    linear-gradient(135deg,
      rgba(40, 48, 62, 0.6) 0%,
      rgba(18, 22, 32, 0.65) 50%,
      rgba(6,  8, 14, 0.78) 100%);
  --v3-fill-glass-muted:
    linear-gradient(135deg,
      rgba(22, 26, 36, 0.50) 0%,
      rgba(8,  10, 16, 0.55) 100%);

  /* Bloated edge: inset blurred TL highlight + inset blurred BR shadow.
     No crisp 1px border — the soft inset shadows do the rim. */
  --v3-edge:
    inset 2px 2px 10px -2px rgba(255,255,255,0.20),
    inset -2px -2px 10px -2px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04);
  --v3-edge-strong:
    inset 3px 3px 14px -2px rgba(255,255,255,0.28),
    inset -2px -2px 14px -2px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.06);

  /* Drop shadows — ground the object in the room */
  --v3-drop:        0 14px 32px -10px rgba(0,0,0,0.65), 0 2px 6px -2px rgba(0,0,0,0.45);
  --v3-drop-strong: 0 28px 56px -14px rgba(0,0,0,0.80), 0 4px 12px -4px rgba(0,0,0,0.50);

  /* Internal atmosphere — soft top-left light pool inside every surface */
  --v3-inner-light:
    radial-gradient(ellipse 85% 60% at 25% 0%,
      rgba(255,255,255,0.10) 0%, transparent 60%);
  --v3-inner-light-strong:
    radial-gradient(ellipse 85% 60% at 25% 0%,
      rgba(255,255,255,0.16) 0%, transparent 60%);

  /* Text glow — integrates type into the lit environment */
  --v3-text-glow:   0 0 14px rgba(170,220,255,0.10);
}

/* =============================================================================
   ROOM — body background blooms + ambient noise
   ============================================================================= */
body {
  background: #020306;            /* near-black void, more contrast than #0a0c10 */
}

/* Pump the existing .orbs system to v3 chromatic intensity. The previous
   spec ran at 10% opacity which read as "subtle haze". v3 wants them to
   actually light the scene — bumped to 50-65% and using mix-blend-mode
   so they layer chromatically against the void without washing out. */
.orb {
  filter: blur(140px) saturate(120%);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.orb-1 {
  background: radial-gradient(circle, var(--wing-bloom-a, rgba(45,212,191,0.5)) 0%, transparent 65%);
}
.orb-2 {
  background: radial-gradient(circle, var(--wing-bloom-b, rgba(167,139,250,0.4)) 0%, transparent 65%);
}
.orb-3 {
  background: radial-gradient(circle, var(--wing-bloom-c, rgba(103,232,249,0.2)) 0%, transparent 65%);
  opacity: 0.30;
}

/* Fine grain overlay — gives the void a "film" feel rather than crisp digital black */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* App shell + topbar must sit above the grain */
.halo-topbar, .app-shell, .cmdk, .quickview { position: relative; z-index: 2; }

/* =============================================================================
   .glass UPGRADE — v3 recipe replaces the v2 implementation
   The class is still .glass so every existing template benefits without
   markup changes. Old recipe stays in crm.css; this block wins by source
   order since liquid_glass_v3.css is loaded after.
   ============================================================================= */
.glass {
  background: var(--v3-fill-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: none;
  box-shadow: var(--v3-edge), var(--v3-drop);
  border-radius: 18px;
  isolation: isolate;
  position: relative;
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--v3-inner-light);
  pointer-events: none;
  z-index: 0;
}
.glass > * { position: relative; z-index: 1; }

/* =============================================================================
   .card glass UPGRADE — used everywhere; v3 directional, bloated rim
   ============================================================================= */
.card.glass {
  padding: 22px 24px;
  border-radius: 20px;
}
.card.glass:hover { box-shadow: var(--v3-edge-strong), var(--v3-drop); }

/* =============================================================================
   DASHBOARD CELLS — the marquee surface in Manage
   .dash-cell is the dashboard stat tile. Pump it to full v3 treatment.
   ============================================================================= */
.dash-cell {
  position: relative;
  background: var(--v3-fill-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: none;
  border-radius: 22px;
  box-shadow: var(--v3-edge), var(--v3-drop);
  isolation: isolate;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.dash-cell::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--v3-inner-light);
  pointer-events: none;
  z-index: 0;
}
.dash-cell::after {
  /* faint wing-tinted bottom-edge bloom — the cell emits its wing color */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 50%;
  background: radial-gradient(ellipse 70% 100% at 50% 100%,
    var(--wing-accent-tint) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.dash-cell > * { position: relative; z-index: 1; }
.dash-cell:hover {
  transform: translateY(-2px);
  background: var(--v3-fill-glass-deep);
  box-shadow:
    var(--v3-edge-strong),
    var(--v3-drop-strong),
    0 0 48px -12px var(--wing-accent-glow);
}
.dash-cell.is-live,
.dash-cell.is-active {
  box-shadow:
    var(--v3-edge-strong),
    var(--v3-drop),
    0 0 36px -8px var(--wing-accent-glow),
    0 0 96px -16px var(--wing-accent-glow);
}
.dash-bignum {
  text-shadow: var(--v3-text-glow);
}

/* =============================================================================
   SIDEBAR — apply v3 to the rail itself, keep nav items understated
   ============================================================================= */
.sidebar {
  background: var(--v3-fill-glass-deep);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: none;
  box-shadow:
    var(--v3-edge),
    0 24px 56px -16px rgba(0,0,0,0.75);
}
.sidebar::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--v3-inner-light);
  pointer-events: none;
  z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }

/* Active sidebar item — wing-tinted */
.sidebar-link.is-active,
.sidebar-nav .is-active > .sidebar-link {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wing-accent) 14%, transparent) 0%,
    color-mix(in srgb, var(--wing-accent)  3%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 24px -8px var(--wing-accent-glow);
  color: var(--text-primary);
}
.sidebar-link.is-active::before,
.sidebar-nav .is-active > .sidebar-link::before {
  /* 2px wing-accent rail on the left edge */
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--wing-accent) 0%,
    color-mix(in srgb, var(--wing-accent) 30%, transparent) 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px var(--wing-accent-glow);
}

/* =============================================================================
   TOP BAR — full glass treatment
   ============================================================================= */
.halo-topbar {
  background: var(--v3-fill-glass);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-bottom: none;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 8px 24px -12px rgba(0,0,0,0.6);
}

/* Wing switcher — glass pill with wing-tinted active state */
.halo-wings {
  background: var(--v3-fill-glass);
  box-shadow: var(--v3-edge);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
}
.halo-wing.is-active {
  color: var(--text-primary);
  text-shadow: 0 0 12px var(--wing-accent-glow);
}
.halo-wing-pill {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wing-accent) 18%, transparent) 0%,
    color-mix(in srgb, var(--wing-accent)  4%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 0 24px -6px var(--wing-accent-glow);
}

/* =============================================================================
   BUTTONS — bloated rim variant + wing-tinted primary
   ============================================================================= */
.btn, button.btn, a.btn {
  background: var(--v3-fill-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: none;
  box-shadow: var(--v3-edge), var(--v3-drop);
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:hover, button.btn:hover, a.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--v3-edge-strong),
    var(--v3-drop),
    0 0 24px -8px var(--wing-accent-glow);
  background: var(--v3-fill-glass-deep);
}
.btn-primary {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--wing-accent) 35%, var(--v3-fill-glass)) 0%,
      color-mix(in srgb, var(--wing-accent)  6%, var(--v3-fill-glass)) 100%);
  color: #fff;
  box-shadow:
    var(--v3-edge-strong),
    var(--v3-drop),
    0 0 32px -6px var(--wing-accent-glow);
  text-shadow: 0 0 12px var(--wing-accent-glow);
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow:
    var(--v3-edge-strong),
    var(--v3-drop-strong),
    0 0 48px -6px var(--wing-accent-glow);
}

/* =============================================================================
   FLOATING POPOVERS — quickview drawer + cmdk palette
   ============================================================================= */
.quickview-panel.glass,
.cmdk-shell.glass {
  background: var(--v3-fill-glass-deep);
  backdrop-filter: blur(48px) saturate(200%);
  -webkit-backdrop-filter: blur(48px) saturate(200%);
  box-shadow:
    var(--v3-edge-strong),
    var(--v3-drop-strong),
    0 0 64px -16px var(--wing-accent-glow);
}

/* =============================================================================
   STATUS / ACCENT PIPS — small glowing dots ride wing color
   ============================================================================= */
.pip,
.dash-live-dot,
.halo-bell-badge {
  background: linear-gradient(160deg, var(--wing-accent) 0%, var(--wing-accent-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 0 12px var(--wing-accent-glow),
    0 0 24px var(--wing-accent-glow);
}

/* =============================================================================
   UTILITY CLASSES — opt-in bleed glows for marquee surfaces
   ============================================================================= */
.bleed-wing {
  box-shadow:
    var(--v3-edge-strong),
    var(--v3-drop),
    0 0 32px -4px var(--wing-accent-glow),
    0 0 96px -8px color-mix(in srgb, var(--wing-accent) 30%, transparent),
    0 0 160px 0  color-mix(in srgb, var(--wing-accent) 14%, transparent);
}
.bleed-mint   { box-shadow: var(--v3-edge-strong), var(--v3-drop), 0 0 32px -4px rgba(106,255,198,0.55), 0 0 96px -8px rgba(106,255,198,0.30), 0 0 160px 0 rgba(106,255,198,0.18); }
.bleed-purple { box-shadow: var(--v3-edge-strong), var(--v3-drop), 0 0 32px -4px rgba(180,140,255,0.50), 0 0 96px -8px rgba(180,140,255,0.28), 0 0 160px 0 rgba(180,140,255,0.16); }
.bleed-cyan   { box-shadow: var(--v3-edge-strong), var(--v3-drop), 0 0 32px -4px rgba(103,232,249,0.50), 0 0 96px -8px rgba(103,232,249,0.28), 0 0 160px 0 rgba(103,232,249,0.16); }

/* =============================================================================
   TYPE SOFTENING — primary text down to 86%, key numbers get the glow
   ============================================================================= */
.dash-bignum,
.page-title,
.halo-brand-word {
  text-shadow: var(--v3-text-glow);
}

/* =============================================================================
   FLASH MESSAGES — match the new material
   ============================================================================= */
.flash {
  background: var(--v3-fill-glass);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: none;
  box-shadow: var(--v3-edge), var(--v3-drop);
}
.flash-success { box-shadow: var(--v3-edge), var(--v3-drop), 0 0 24px -8px rgba(52,211,153,0.4); }
.flash-error   { box-shadow: var(--v3-edge), var(--v3-drop), 0 0 24px -8px rgba(255,133,133,0.4); }
.flash-warning { box-shadow: var(--v3-edge), var(--v3-drop), 0 0 24px -8px rgba(251,191,36,0.4); }
.flash-info    { box-shadow: var(--v3-edge), var(--v3-drop), 0 0 24px -8px rgba(103,232,249,0.4); }

/* =============================================================================
   DELIVER public templates — page bodies often render outside the app
   shell (no sidebar). Give them their own bloom backdrop so the v3
   aesthetic carries through even on the customer-facing delivery page.
   ============================================================================= */
.public-delivery-page,
[data-public-delivery] {
  background: #020306;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}
.public-delivery-page::before,
[data-public-delivery]::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 820px at 12% 0%,   rgba(103,232,249,0.45) 0%, transparent 65%),
    radial-gradient(circle 720px at 88% 100%, rgba(70, 160, 240,0.35) 0%, transparent 65%),
    radial-gradient(circle 560px at 50% 50%,  rgba(106,255,198,0.18) 0%, transparent 65%);
  filter: blur(80px);
  mix-blend-mode: screen;
}

/* =============================================================================
   EDIT LAUNCHPAD (CRM /edit/) — the client-bubble launcher
   The .client-bubble class shows existing client cards; v3 them up so
   the launchpad feels continuous with the rest of Edit (purple wing).
   ============================================================================= */
.client-bubble,
.edit-bubble,
.project-bubble {
  background: var(--v3-fill-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: none;
  box-shadow: var(--v3-edge), var(--v3-drop);
  border-radius: 20px;
  isolation: isolate;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.client-bubble::before,
.edit-bubble::before,
.project-bubble::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--v3-inner-light);
  pointer-events: none;
  z-index: 0;
}
.client-bubble:hover,
.edit-bubble:hover,
.project-bubble:hover {
  transform: translateY(-3px);
  box-shadow:
    var(--v3-edge-strong),
    var(--v3-drop-strong),
    0 0 48px -10px var(--wing-accent-glow);
}
.client-bubble > *,
.edit-bubble > *,
.project-bubble > * { position: relative; z-index: 1; }