/* ============================================================
   New UI — "Aurora Glass" premium skin.  Loaded only when
   body.ui-neu (same ?ui=new / ?ui=old switch as before).
   Design-only: background / gradient / blur / shadow / border /
   radius / colour / animation. No margin, padding, position,
   width, display or flex changes — layout is untouched, and every
   animation is transform/opacity/filter based so nothing reflows.
   ============================================================ */

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

/* New UI is ALWAYS dark — the light aurora variant is retired regardless of
   the browser/OS colour-scheme preference (per user request, 2026-09-09). */
body.ui-neu {
  --aur-bg:        #0a0b14;
  --aur-bg-2:      #12101f;
  --aur-panel:     rgba(255,255,255,0.055);
  --aur-panel-solid: #15131f;
  --aur-border:    rgba(167,139,250,0.16);
  --aur-border-strong: rgba(167,139,250,0.32);
  --aur-text:      #f1eefe;
  --aur-blur:      20px;
  --aur-violet:    #7c5cff;
  --aur-violet-2:  #a78bfa;
  --aur-indigo:    #4f46e5;
  --aur-gold:      #f2b84b;
  --aur-gold-2:    #ffd98a;
  --aur-glow:      rgba(139,123,255,0.45);
  --aur-gold-glow: rgba(255,214,140,0.32);
  --aur-sheen:     rgba(255,255,255,0.09);
  --aur-shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --aur-shadow-md: 0 10px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  --aur-shadow-lg: 0 28px 70px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.4);
  --aur-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* IMPORTANT: most of the base site (headings, form labels, badges, table
     text, links) reads style.css's ORIGINAL --text/--bg/--panel/etc vars
     directly, not --aur-*. Those only went dark when the OS/browser was
     already in dark mode (style.css's own prefers-color-scheme block) — so
     forcing New UI to always-dark without also overriding these left dark
     text on a dark background (invisible) whenever the system was in light
     mode. Overriding the base vars here makes every un-restyled element
     dark-correct too, regardless of system preference. */
  --bg: #0a0b14;
  --panel: #15131f;
  --border: rgba(167,139,250,0.16);
  --border-strong: rgba(167,139,250,0.32);
  --text: #f1eefe;
  --text-muted: #b7b2d6;
  --text-faint: #756f99;
  --primary: #8b7bff;
  --primary-dark: #a596ff;
  --primary-tint: #241f47;
  --primary-glow: rgba(139,123,255,0.35);
  --success: #35d789;
  --success-tint: #103823;
  --danger: #ff6b6b;
  --danger-tint: #3a1a1a;
  --warning: #f2a93c;
  --warning-tint: #3a2c0f;
  --info: #4fc3f7;
  --info-tint: #123244;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.24);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.24);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3);

  background: var(--aur-bg);
  color: var(--aur-text);
  color-scheme: dark;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative;
}

/* ---- animated aurora backdrop (fixed, behind everything, no layout impact) ---- */
body.ui-neu::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 12% 8%,  var(--aur-glow) 0%, transparent 70%),
    radial-gradient(32% 28% at 88% 18%, var(--aur-gold-glow) 0%, transparent 70%),
    radial-gradient(40% 34% at 30% 92%, rgba(79,70,229,0.22) 0%, transparent 70%),
    radial-gradient(30% 26% at 92% 88%, rgba(124,92,255,0.18) 0%, transparent 70%);
  filter: blur(38px) saturate(170%);
  animation: aurDrift 26s ease-in-out infinite alternate;
  opacity: 1;
}
/* the fixed, negative-z-index pseudo above already paints behind normal
   content — no need to (and must not) touch every child's position/z-index,
   that would break position:fixed elements like popups and the UI switch. */
@keyframes aurDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.03); }
}

/* ---- shells / bars ---- */
body.ui-neu .app-shell,
body.ui-neu .main-content,
body.ui-neu .lsq-shell,
body.ui-neu .cd-layout { background: transparent; }

body.ui-neu .topbar {
  background: color-mix(in srgb, var(--aur-panel-solid) 62%, transparent);
  -webkit-backdrop-filter: saturate(200%) blur(var(--aur-blur));
  backdrop-filter: saturate(200%) blur(var(--aur-blur));
  border-bottom: 1px solid var(--aur-border);
  box-shadow: var(--aur-shadow-sm);
}
body.ui-neu .topbar-logo,
body.ui-neu .topbar-avatar {
  background: linear-gradient(135deg, var(--aur-violet), var(--aur-indigo) 60%, var(--aur-gold));
  background-size: 200% 200%;
  animation: aurSheen 6s ease infinite;
  box-shadow: 0 3px 14px var(--aur-glow);
}
@keyframes aurSheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

body.ui-neu .topbar-link { position: relative; }
body.ui-neu .topbar-link::after {
  content: "";
  position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aur-violet), var(--aur-gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--aur-ease);
}
body.ui-neu .topbar-link:hover::after { transform: scaleX(1); }
body.ui-neu .topbar-link.active {
  background: linear-gradient(135deg, rgba(124,92,255,0.14), rgba(242,184,75,0.10));
  color: var(--aur-indigo);
}
body.ui-neu .topbar-link.active::after { transform: scaleX(1); }
body.ui-neu .lsq-sidebar {
  background: var(--aur-panel);
  -webkit-backdrop-filter: blur(var(--aur-blur));
  backdrop-filter: blur(var(--aur-blur));
  border: 1px solid var(--aur-border);
  box-shadow: var(--aur-shadow-sm);
  border-radius: 16px;
}

/* ---- glass surfaces ---- */
body.ui-neu .card,
body.ui-neu .chart-card,
body.ui-neu .kpi-card,
body.ui-neu .kpi-tile,
body.ui-neu .cd-section,
body.ui-neu .cd-properties,
body.ui-neu .cd-quick-actions,
body.ui-neu .cd-stats,
body.ui-neu .login-card,
body.ui-neu .bulk-bar,
body.ui-neu .dash-sec,
body.ui-neu .rpt {
  background: var(--aur-panel);
  -webkit-backdrop-filter: blur(var(--aur-blur)) saturate(150%);
  backdrop-filter: blur(var(--aur-blur)) saturate(150%);
  border: 1px solid var(--aur-border);
  box-shadow: var(--aur-shadow-md), inset 0 1px 0 var(--aur-sheen);
  border-radius: 18px;
  transition: transform 0.35s var(--aur-ease), box-shadow 0.35s var(--aur-ease), border-color 0.35s var(--aur-ease);
}
body.ui-neu .kpi-card { overflow: hidden; }
body.ui-neu .kpi-card::before {
  background: linear-gradient(180deg, var(--aur-violet), var(--aur-gold));
  width: 3px;
}
body.ui-neu .kpi-card:hover,
body.ui-neu .chart-card:hover,
body.ui-neu a.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--aur-shadow-lg);
  border-color: var(--aur-border-strong);
}
/* .empty-state is almost always NESTED inside an already-glass card (e.g.
   "No tasks for this contact." inside the Tasks card) — giving it its own
   glass box too created an odd box-in-a-box look. Keep it a plain label. */
body.ui-neu .empty-state {
  background: transparent;
  border: 1px dashed var(--aur-border);
  box-shadow: none;
  border-radius: 12px;
  color: var(--aur-text);
  opacity: 0.6;
}

/* WhatsApp chat thread: the wallpaper was hardcoded light-grey and bubble
   text inherited the page's light (dark-mode) text colour, making messages
   unreadable on the white/green bubbles. Force a proper wallpaper + bubble
   text colour regardless of theme (inline styles need !important to beat). */
body.ui-neu .wa-thread {
  background: var(--aur-bg-2) !important;
  border: 1px solid var(--aur-border);
}
body.ui-neu .wa-thread > div, body.ui-neu .wa-thread > div * { color: #1a1a2e !important; }
body.ui-neu .wa-thread > div > div:last-child { color: #5b5b72 !important; opacity: 0.85; }

body.ui-neu .kpi-value {
  background: linear-gradient(120deg, var(--aur-indigo), var(--aur-violet) 60%, var(--aur-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- inputs: soft glass, glowing focus ---- */
body.ui-neu .form-control,
body.ui-neu input[type="text"],
body.ui-neu input[type="email"],
body.ui-neu input[type="password"],
body.ui-neu input[type="number"],
body.ui-neu input[type="date"],
body.ui-neu input[type="datetime-local"],
body.ui-neu input[type="search"],
body.ui-neu select,
body.ui-neu textarea,
body.ui-neu .lsq-search {
  background: color-mix(in srgb, var(--aur-panel-solid) 80%, transparent);
  border: 1px solid var(--aur-border);
  border-radius: 10px;
  color: var(--aur-text);
  transition: border-color 0.2s var(--aur-ease), box-shadow 0.25s var(--aur-ease);
}
body.ui-neu .form-control:focus,
body.ui-neu select:focus,
body.ui-neu textarea:focus,
body.ui-neu input:focus {
  outline: none;
  border-color: var(--aur-violet);
  box-shadow: 0 0 0 4px rgba(124,92,255,0.16), 0 0 18px rgba(124,92,255,0.18);
}

/* ---- buttons: gradient, shimmer sweep on hover ---- */
body.ui-neu .btn,
body.ui-neu button.btn,
body.ui-neu a.btn {
  background: var(--aur-panel-solid);
  border: 1px solid var(--aur-border-strong);
  border-radius: 10px;
  color: var(--aur-text);
  box-shadow: var(--aur-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s var(--aur-ease), box-shadow 0.25s var(--aur-ease), border-color 0.2s var(--aur-ease);
}
body.ui-neu .btn:hover { transform: translateY(-1px); box-shadow: var(--aur-shadow-md); border-color: var(--aur-violet); }
body.ui-neu .btn:active { transform: translateY(0); }
body.ui-neu .btn::after {
  content: "";
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--aur-ease);
  pointer-events: none;
}
body.ui-neu .btn:hover::after { left: 130%; }
body.ui-neu .btn-primary {
  background: linear-gradient(135deg, var(--aur-violet), var(--aur-indigo));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 18px var(--aur-glow);
}
body.ui-neu .btn-primary:hover { box-shadow: 0 8px 26px var(--aur-glow); }
body.ui-neu .btn-danger {
  background: linear-gradient(135deg, var(--danger, #e14b4b), #b93030);
  color: #fff; border-color: transparent;
}

/* ---- badges / pills / chips: soft glass glow, richer than flat tint ---- */
body.ui-neu .badge,
body.ui-neu .score-pill,
body.ui-neu .cd-tab-badge,
body.ui-neu .sla-timer,
body.ui-neu .dash-range .pill {
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  box-shadow: 0 1px 6px rgba(31,20,90,0.08), inset 0 1px 0 rgba(255,255,255,0.25);
  backdrop-filter: saturate(160%);
  font-weight: 700;
  letter-spacing: 0.01em;
}
body.ui-neu .dash-range .pill.active,
body.ui-neu .lsq-view-link.active,
body.ui-neu .lsq-view-count {
  background: linear-gradient(135deg, var(--aur-violet), var(--aur-indigo));
  color: #fff;
  box-shadow: 0 3px 14px var(--aur-glow);
}
body.ui-neu .lsq-view-link.active .lsq-view-count { background: rgba(255,255,255,0.24); box-shadow: none; }
/* stage / status pills keep their semantic hue but gain a glassy tint + soft glow */
body.ui-neu .badge-NewLead, body.ui-neu .badge-Active, body.ui-neu .badge-done,
body.ui-neu .badge-completed, body.ui-neu .badge-sent, body.ui-neu .badge-Won,
body.ui-neu .score-warm ~ .badge-Active {
  box-shadow: 0 1px 8px rgba(22,163,95,0.18), inset 0 1px 0 rgba(255,255,255,0.3);
}
body.ui-neu .badge-HotProspects, body.ui-neu .badge-JunkInvalid, body.ui-neu .badge-Unqualified,
body.ui-neu .badge-Lost, body.ui-neu .badge-failed, body.ui-neu .score-hot {
  box-shadow: 0 1px 8px rgba(225,75,75,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}
body.ui-neu .badge-CallBack, body.ui-neu .badge-MayBeLater, body.ui-neu .badge-pending,
body.ui-neu .badge-draft, body.ui-neu .badge-sending, body.ui-neu .score-warm {
  box-shadow: 0 1px 8px rgba(224,147,12,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}
body.ui-neu .badge-Prospects, body.ui-neu .badge-Commitments {
  box-shadow: 0 1px 8px var(--aur-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ---- tabs / nav links ---- */
body.ui-neu .topbar-link.active,
body.ui-neu .cd-tab.active {
  border-radius: 10px;
}
body.ui-neu .cd-tab.active { color: var(--aur-indigo); border-bottom-color: var(--aur-violet); }
body.ui-neu .topbar-logo,
body.ui-neu .topbar-avatar,
body.ui-neu .lsq-avatar,
body.ui-neu .cd-avatar-lg {
  box-shadow: 0 4px 16px var(--aur-glow);
}

/* ---- tables ---- */
body.ui-neu .data-table,
body.ui-neu table.data-table {
  background: var(--aur-panel);
  -webkit-backdrop-filter: blur(var(--aur-blur));
  backdrop-filter: blur(var(--aur-blur));
  border-radius: 14px;
  border: 1px solid var(--aur-border);
  box-shadow: inset 0 1px 0 var(--aur-sheen);
}
body.ui-neu .data-table th { background: transparent; color: var(--aur-indigo); letter-spacing: 0.06em; font-weight: 800; }
body.ui-neu .data-table tbody tr:hover td { background: rgba(124,92,255,0.07); }
body.ui-neu .data-table tbody td { border-color: var(--aur-border); }
body.ui-neu .lsq-table-wrap { border-color: var(--aur-border); border-radius: 16px; box-shadow: var(--aur-shadow-sm); }

/* ---- alerts ---- */
body.ui-neu .alert {
  border: 1px solid var(--aur-border);
  border-radius: 14px;
  box-shadow: var(--aur-shadow-sm);
  backdrop-filter: blur(var(--aur-blur));
}

/* ---- KPI page: "not counted" hint pill, restyled to fit the glass palette ---- */
body.ui-neu .kpi-excl-hint {
  background: linear-gradient(135deg, rgba(242,184,75,0.18), rgba(242,184,75,0.08)) !important;
  color: var(--aur-text) !important;
  border: 1px solid rgba(242,184,75,0.4);
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

/* ---- overlays / popups ----
   These cards are hardcoded inline `background:#fff` in header.php (built
   before the aurora skin existed) — inline styles beat any external
   stylesheet rule regardless of selector specificity, so these need
   !important to actually turn dark. Un-styled text inside them inherits
   body.ui-neu's light text colour, which only reads correctly once the
   card itself is actually dark — hence this was invisible/near-invisible
   (light text on a white card) until fixed. */
body.ui-neu #annOverlay > div,
body.ui-neu #pendOverlay > div,
body.ui-neu #kpiAchievedOverlay > div,
body.ui-neu .ms-pick-panel,
body.ui-neu .crm-demo-popup {
  background: var(--aur-panel-solid) !important;
  border: 1px solid var(--aur-border);
  box-shadow: var(--aur-shadow-lg);
  border-radius: 18px;
}
body.ui-neu #annOverlay p,
body.ui-neu #pendOverlay #pendBody,
body.ui-neu .crm-demo-popup p {
  color: var(--aur-text) !important;
}
body.ui-neu #annOverlay p[style*="8a91a4"],
body.ui-neu #pendOverlay #pendBody div[style*="color:#555"] {
  color: var(--text-muted) !important;
}

/* ---- floating WhatsApp chat widget (includes/wa_widget.php) ----
   Entirely separate hardcoded-light widget (own <style> block loaded from
   footer.php, after neumorphism.css) — same invisible-text pattern as the
   announcement popups: body.ui-neu's light text colour inherited onto a
   plain white/light-grey widget. Extra type+class token below outweighs
   the widget's own #id selectors on specificity, so no !important needed. */
body.ui-neu #waChat {
  background: var(--aur-panel-solid);
  border: 1px solid var(--aur-border);
  box-shadow: var(--aur-shadow-lg);
}
body.ui-neu #waChat .wac-body { background: var(--aur-bg-2); }
body.ui-neu #waChat .wac-msg {
  border-color: var(--aur-border);
  color: #1a1a2e; /* bubbles stay WhatsApp-authentic light/green; text must stay dark on them */
}
body.ui-neu #waChat .wac-msg .wac-meta { color: #5b5b72; }
body.ui-neu #waChat .wac-foot { background: var(--aur-panel-solid); border-top-color: var(--aur-border); }
body.ui-neu #waChat .wac-note { color: var(--text-muted); }
body.ui-neu #waChat textarea,
body.ui-neu #waChat select,
body.ui-neu #waChat input[type="text"] {
  background: var(--aur-bg-2);
  border-color: var(--aur-border);
  color: var(--aur-text);
}
body.ui-neu #waChat .wac-tabs button {
  background: var(--aur-bg-2);
  border-color: var(--aur-border);
  color: var(--aur-text);
}
body.ui-neu #waChat .wac-tabs button.on {
  background: linear-gradient(135deg, var(--aur-violet), var(--aur-indigo));
  border-color: transparent;
  color: #fff;
}
body.ui-neu #waChat .wac-err { color: #ff8a8a; }

/* ================================================================
   Login page — full premium treatment (Old UI on login is untouched)
   ================================================================ */
body.ui-neu .login-split { background: transparent; }
body.ui-neu .login-split-brand {
  background: linear-gradient(155deg, var(--aur-indigo) 0%, var(--aur-violet) 55%, #2c1e73 100%);
  overflow: hidden;
}
body.ui-neu .login-split-brand::before {
  background:
    radial-gradient(45% 38% at 18% 15%, rgba(255,255,255,0.20) 0%, transparent 60%),
    radial-gradient(35% 30% at 85% 80%, var(--aur-gold-glow) 0%, transparent 60%),
    radial-gradient(30% 26% at 90% 10%, rgba(255,255,255,0.12) 0%, transparent 60%);
  animation: aurDrift 22s ease-in-out infinite alternate;
}
body.ui-neu .login-split-logo {
  background: linear-gradient(135deg, var(--aur-gold), var(--aur-gold-2));
  color: #3a2a05;
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 24px var(--aur-gold-glow);
  animation: aurPulse 3.2s ease-in-out infinite;
}
@keyframes aurPulse { 0%,100% { box-shadow: 0 0 16px var(--aur-gold-glow); } 50% { box-shadow: 0 0 30px var(--aur-gold-glow); } }
body.ui-neu .login-split-headline {
  font-family: "Sora", "Inter", sans-serif;
  background: linear-gradient(100deg, #ffffff 0%, var(--aur-gold-2) 45%, #ffffff 90%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aurTextShine 7s linear infinite;
}
@keyframes aurTextShine { to { background-position: -220% 0; } }
body.ui-neu .login-split-stat-value {
  font-family: "Sora", sans-serif;
}
body.ui-neu .login-split-form-wrap { background: transparent; }
body.ui-neu .login-split-form {
  background: color-mix(in srgb, var(--aur-panel-solid) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--aur-border);
  border-radius: 22px;
  padding: 34px;
  box-shadow: var(--aur-shadow-lg);
  animation: aurRise 0.7s var(--aur-ease) both;
}
@keyframes aurRise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
body.ui-neu .login-split-form h1 {
  font-family: "Sora", sans-serif;
  background: linear-gradient(120deg, var(--aur-indigo), var(--aur-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.ui-neu .login-split-form .form-group { animation: aurFadeUp 0.6s var(--aur-ease) both; }
body.ui-neu .login-split-form .form-group:nth-of-type(1) { animation-delay: 0.08s; }
body.ui-neu .login-split-form .form-group:nth-of-type(2) { animation-delay: 0.16s; }
body.ui-neu .login-split-form button[type="submit"] { animation: aurFadeUp 0.6s var(--aur-ease) both; animation-delay: 0.24s; }
@keyframes aurFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* premium/old toggle switch shown on the login page — base look lives in
   style.css (always loaded); this just upgrades it to the glass/gradient look. */
body.ui-neu .ui-switch {
  background: rgba(255,255,255,0.14); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.28);
}
body.ui-neu .ui-switch:hover { background: rgba(255,255,255,0.24); }
body.ui-neu .ui-switch-track { background: linear-gradient(135deg, var(--aur-gold), var(--aur-violet)); }
body.ui-neu .ui-switch-thumb { transform: translateX(16px); }

/* Dark is now the only palette for New UI (baked into body.ui-neu above),
   so the old prefers-color-scheme / data-theme overrides are gone. */

@media (prefers-reduced-motion: reduce) {
  body.ui-neu::before, body.ui-neu .login-split-brand::before,
  body.ui-neu .topbar-logo, body.ui-neu .topbar-avatar,
  body.ui-neu .login-split-logo, body.ui-neu .login-split-headline,
  body.ui-neu .btn::after { animation: none !important; }
}