/* ═══════════════════════════════════════════════════════════════════
   MavericksVPN — neon layer
   Loaded after style.css on every page. Glows and motion only: nothing
   here changes layout, so removing this file returns the plain look.
   Motion uses transform/opacity (compositor-only) wherever it repeats,
   and every animation stops for people who ask for reduced motion.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --neon:        #3FF5DC;                 /* cyan-teal, a brighter cut of the accent */
  --neon-rgb:    63, 245, 220;
  --neon-ok:     #4DFF8F;
  --neon-ok-rgb: 77, 255, 143;
  --neon-warn:   #FFB938;
  --neon-warn-rgb: 255, 185, 56;
  --neon-crit:   #FF5C6C;
  --neon-crit-rgb: 255, 92, 108;
  --glow-a: .55;                          /* overall glow strength */
  --grid-a: .045;                         /* background grid line strength */
}
:root[data-theme="light"] {
  --neon:        #0D9488;
  --neon-rgb:    13, 148, 136;
  --neon-ok:     #16A34A;
  --neon-ok-rgb: 22, 163, 74;
  --neon-warn:   #D97706;
  --neon-warn-rgb: 217, 119, 6;
  --neon-crit:   #DC2626;
  --neon-crit-rgb: 220, 38, 38;
  --glow-a: .18;
  --grid-a: .05;
}

/* ── Ambient: a faint neon grid and a slow aurora behind everything ─── */
body { position:relative; isolation:isolate; }
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--neon-rgb), var(--grid-a)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--neon-rgb), var(--grid-a)) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 80% at 60% 0%, #000 0%, transparent 75%);
          mask-image:radial-gradient(120% 80% at 60% 0%, #000 0%, transparent 75%);
}
body::after {
  content:""; position:fixed; z-index:-1; pointer-events:none;
  width:70vmax; height:70vmax; left:35%; top:-38vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--neon-rgb), calc(var(--glow-a) * .22)) 0%, transparent 62%);
  animation:neon-aurora 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes neon-aurora {
  from { transform:translate3d(-12vw, 0, 0) scale(1); }
  to   { transform:translate3d(14vw, 6vh, 0) scale(1.15); }
}

/* ── Brand: flickers on like a tube, then breathes ─────────────────── */
.wordmark b {
  text-shadow:0 0 6px rgba(var(--neon-rgb), var(--glow-a)), 0 0 18px rgba(var(--neon-rgb), calc(var(--glow-a) * .6));
  animation:neon-flicker 1.4s steps(1, end) .2s 1 both, neon-breathe 4.5s ease-in-out 1.8s infinite;
}
.brand-logo, .login-logo { filter:drop-shadow(0 0 6px rgba(var(--neon-rgb), calc(var(--glow-a) * .7))); }
@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity:1; }
  20%, 24%, 55% { opacity:.25; }
}
@keyframes neon-breathe {
  0%, 100% { opacity:1; }
  50%      { opacity:.78; }
}

/* ── Navigation ────────────────────────────────────────────────────── */
.nav-links a { transition:color .18s, background-color .18s, text-shadow .18s; }
.nav-links a:hover { text-shadow:0 0 10px rgba(var(--neon-rgb), calc(var(--glow-a) * .7)); }
.nav-links a:hover svg { filter:drop-shadow(0 0 4px rgba(var(--neon-rgb), var(--glow-a))); }
.nav-links a.active {
  background:linear-gradient(90deg, rgba(var(--neon-rgb), .16), rgba(var(--neon-rgb), .03) 70%, transparent);
  box-shadow:inset 2px 0 0 var(--neon), -4px 0 16px -4px rgba(var(--neon-rgb), var(--glow-a));
}
.nav-links a.active svg { color:var(--neon); filter:drop-shadow(0 0 5px rgba(var(--neon-rgb), var(--glow-a))); }
.active-device { box-shadow:inset 0 0 0 1px rgba(var(--neon-rgb), .08); }
.conn-dot.conn-online { box-shadow:0 0 0 3px rgba(var(--neon-ok-rgb), .18), 0 0 10px rgba(var(--neon-ok-rgb), var(--glow-a)); }

/* ── Page entrance: cards and panels rise in, once per page load ──── */
.kpis > *, .main > .panel, .grid-2 > * > .panel, .grid-2 > .panel, .teams-grid > *, .role-grid > *, .sch-grid > * {
  animation:neon-rise .5s cubic-bezier(.2, .7, .2, 1) backwards;
}
.kpis > :nth-child(2), .grid-2 > :nth-child(2) > .panel, .grid-2 > .panel:nth-child(2) { animation-delay:.05s; }
.kpis > :nth-child(3) { animation-delay:.1s; }
.kpis > :nth-child(4) { animation-delay:.15s; }
.kpis > :nth-child(5) { animation-delay:.2s; }
.kpis > :nth-child(6) { animation-delay:.25s; }
@keyframes neon-rise {
  from { opacity:0; transform:translate3d(0, 8px, 0); }
  to   { opacity:1; transform:none; }
}

/* ── KPI cards: glowing state stripe, lift + neon edge on hover ────── */
.kpi { transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.kpi::before { box-shadow:0 0 10px 0 currentColor; color:var(--idle); }
.kpi.is-ok::before     { color:var(--neon-ok); }
.kpi.is-warn::before   { color:var(--neon-warn); }
.kpi.is-crit::before   { color:var(--neon-crit); }
.kpi.is-accent::before { color:var(--neon); }
.kpi-val { text-shadow:0 0 14px rgba(var(--neon-rgb), calc(var(--glow-a) * .35)); }
a.kpi:hover, .kpi.is-click:hover {
  transform:translateY(-2px);
  border-color:rgba(var(--neon-rgb), .55);
  box-shadow:0 0 0 1px rgba(var(--neon-rgb), .18), 0 10px 30px -12px rgba(var(--neon-rgb), var(--glow-a));
}
/* light sweep across a card on hover */
.kpi::after {
  content:""; position:absolute; top:0; bottom:0; left:0; width:45%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(var(--neon-rgb), .10), transparent);
  transform:translateX(-120%); opacity:0;
}
a.kpi:hover::after, .kpi.is-click:hover::after { animation:neon-sweep .9s ease-out 1; }
@keyframes neon-sweep {
  0%   { transform:translateX(-120%); opacity:1; }
  100% { transform:translateX(260%);  opacity:1; }
}
/* cards that need attention pulse an inner glow (opacity only, so it stays on the compositor) */
.kpi.is-warn { --pulse-rgb:var(--neon-warn-rgb); }
.kpi.is-crit { --pulse-rgb:var(--neon-crit-rgb); }
.kpi.is-warn::after, .kpi.is-crit::after {
  inset:0; width:auto; border-radius:inherit; background:none; transform:none;
  box-shadow:inset 0 0 0 1px rgba(var(--pulse-rgb), .38), inset 0 0 26px -8px rgba(var(--pulse-rgb), var(--glow-a));
  opacity:0; animation:neon-glow 2.6s ease-in-out .6s infinite;
}
@keyframes neon-glow { 0%, 100% { opacity:0; } 50% { opacity:1; } }
/* on hover those cards keep pulsing instead of taking the light sweep */
a.kpi.is-warn:hover::after, a.kpi.is-crit:hover::after,
.kpi.is-click.is-warn:hover::after, .kpi.is-click.is-crit:hover::after { animation:neon-glow 2.6s ease-in-out infinite; }

/* ── Panels: a light runs along the top edge ───────────────────────── */
.panel { position:relative; }
.panel::before {
  content:""; position:absolute; top:0; left:0; height:1px; width:38%; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(var(--neon-rgb), .9), transparent);
  box-shadow:0 0 8px rgba(var(--neon-rgb), var(--glow-a));
  transform:translateX(-110%);
  animation:neon-run 7s linear infinite;
  will-change:transform;
}
.grid-2 > * > .panel:nth-of-type(2)::before, .panel:nth-of-type(2)::before { animation-delay:-2.3s; }
.panel:nth-of-type(3)::before { animation-delay:-4.6s; }
@keyframes neon-run {
  0%   { transform:translateX(-110%); }
  55%  { transform:translateX(280%); }
  100% { transform:translateX(280%); }
}
.panel:hover { border-color:rgba(var(--neon-rgb), .28); }
.panel { transition:border-color .25s ease; }

/* ── Buttons: neon edge, brighter on hover, a sheen passes over ────── */
.btn-primary, .login-box button {
  position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(var(--neon-rgb), .25), 0 6px 20px -10px rgba(var(--neon-rgb), var(--glow-a));
  transition:background-color .18s, box-shadow .18s, transform .18s;
}
.btn-primary:hover, .login-box button:hover {
  box-shadow:0 0 0 1px rgba(var(--neon-rgb), .55), 0 0 22px -4px rgba(var(--neon-rgb), var(--glow-a));
}
.btn-primary:active, .login-box button:active { transform:translateY(1px); }
.btn-primary::after, .login-box button::after {
  content:""; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform:translateX(-130%);
}
.btn-primary:hover::after, .login-box button:hover::after { animation:neon-sweep .8s ease-out 1; }
.btn-secondary:hover, .rowbtn:hover { box-shadow:0 0 14px -6px rgba(var(--neon-rgb), var(--glow-a)); }

/* ── Live indicators ───────────────────────────────────────────────── */
.pulse { box-shadow:0 0 8px rgba(var(--neon-ok-rgb), var(--glow-a)); }
.live-chip:not(.is-warn):not(.is-crit):not(.is-static) {
  box-shadow:0 0 16px -6px rgba(var(--neon-ok-rgb), var(--glow-a));
}
.u-dot:not(.off) {
  box-shadow:0 0 0 2px rgba(var(--neon-ok-rgb), .14), 0 0 9px rgba(var(--neon-ok-rgb), var(--glow-a));
  animation:neon-breathe 2.8s ease-in-out infinite;
}

/* ── Notifications bell ────────────────────────────────────────────── */
.notify-btn { transition:color .18s, border-color .18s, box-shadow .18s; }
.notify-btn:hover, .notify-btn[aria-expanded="true"] { box-shadow:0 0 16px -4px rgba(var(--neon-rgb), var(--glow-a)); }
.notify[data-level="warn"] .notify-btn svg,
.notify[data-level="crit"] .notify-btn svg { transform-origin:50% 8%; animation:neon-ring 1s ease-in-out .8s 2; }
@keyframes neon-ring {
  0%, 100% { transform:rotate(0); }
  15% { transform:rotate(14deg); }  30% { transform:rotate(-12deg); }
  45% { transform:rotate(8deg); }   60% { transform:rotate(-5deg); }  75% { transform:rotate(2deg); }
}
.notify-count { --badge-rgb:var(--neon-warn-rgb); box-shadow:0 0 10px rgba(var(--badge-rgb), var(--glow-a)); }
.notify[data-level="crit"] .notify-count { --badge-rgb:var(--neon-crit-rgb); }
.notify-count::after {
  content:""; position:absolute; inset:-2px; border-radius:99px; pointer-events:none;
  border:1px solid rgba(var(--badge-rgb), .9);
  animation:neon-ping 2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes neon-ping { 0% { transform:scale(1); opacity:.9; } 80%, 100% { transform:scale(1.9); opacity:0; } }
.notify-panel { box-shadow:0 18px 50px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--neon-rgb), .12), 0 0 30px -14px rgba(var(--neon-rgb), var(--glow-a)); }
.notify-item.sev-warn .notify-dot { box-shadow:0 0 8px rgba(var(--neon-warn-rgb), var(--glow-a)); }
.notify-item.sev-crit .notify-dot { box-shadow:0 0 8px rgba(var(--neon-crit-rgb), var(--glow-a)); }

/* ── Tags, bars, charts, tables ────────────────────────────────────── */
.tag.t-ok   { box-shadow:0 0 10px -3px rgba(var(--neon-ok-rgb), var(--glow-a)); }
.tag.t-warn { box-shadow:0 0 10px -3px rgba(var(--neon-warn-rgb), var(--glow-a)); }
.tag.t-crit { box-shadow:0 0 10px -3px rgba(var(--neon-crit-rgb), var(--glow-a)); }
.bar i { box-shadow:0 0 8px rgba(var(--neon-rgb), var(--glow-a)); position:relative; overflow:hidden; }
.bar.is-warn i { box-shadow:0 0 8px rgba(var(--neon-warn-rgb), var(--glow-a)); }
.bar.is-crit i { box-shadow:0 0 8px rgba(var(--neon-crit-rgb), var(--glow-a)); }
.bar i::after {
  content:""; position:absolute; inset:0; width:50%;
  background:linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform:translateX(-120%); animation:neon-run 3.2s ease-in-out infinite;
}
#sparkLine { filter:drop-shadow(0 0 3px rgba(var(--neon-ok-rgb), var(--glow-a))); }
.data-table tbody tr { transition:background-color .15s; }
.data-table tbody tr:hover td:first-child { box-shadow:inset 2px 0 0 var(--neon); }

/* ── Sign-in: a neon border keeps circling the card ────────────────── */
@property --neon-angle { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.login-box { position:relative; }
.login-box::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--neon-angle), transparent 0 62%, rgba(var(--neon-rgb), .95) 78%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:neon-orbit 5s linear infinite;
}
.login-box { box-shadow:0 0 60px -20px rgba(var(--neon-rgb), var(--glow-a)); }
@keyframes neon-orbit { to { --neon-angle:360deg; } }
.login-box input:focus { outline-color:var(--neon); box-shadow:0 0 14px -4px rgba(var(--neon-rgb), var(--glow-a)); }

/* ── Respect reduced motion: keep the glow, drop every animation ───── */
@media (prefers-reduced-motion: reduce) {
  body::after, .wordmark b, .kpis > *, .main > .panel, .grid-2 > * > .panel, .grid-2 > .panel,
  .teams-grid > *, .role-grid > *, .sch-grid > *, .kpi, .kpi::after, .panel::before,
  .btn-primary::after, .login-box button::after, .u-dot, .notify-btn svg, .notify-count::after,
  .bar i::after, .login-box::before { animation:none !important; }
  .panel::before, .bar i::after, .kpi::after, .btn-primary::after, .login-box button::after { display:none; }
  a.kpi:hover, .kpi.is-click:hover { transform:none; }
}