/* admin-fx.css — glass / animated / 3D enhancement for the Admin & Administrator
   portals, matched to the storefront. Loaded AFTER admin.css; purely additive. */

/* ---------- animated aurora backdrop (same family as the storefront) ---------- */
body { position: relative; }
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 10% 6%,  rgba(225,29,42,.16), transparent 60%),
    radial-gradient(40vmax 40vmax at 92% 0%,  rgba(74,124,255,.15), transparent 60%),
    radial-gradient(44vmax 44vmax at 78% 100%, rgba(10,160,90,.13), transparent 62%),
    radial-gradient(34vmax 34vmax at 18% 96%, rgba(255,193,7,.13), transparent 60%);
  filter: blur(22px) saturate(120%);
  animation: auroraDriftA 30s ease-in-out infinite alternate;
}
@keyframes auroraDriftA {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2vmax,-1.6vmax,0) scale(1.07); }
  100% { transform: translate3d(-1.6vmax,2vmax,0) scale(1.03); }
}

/* let the aurora show through the app shell */
.app { background: transparent !important; }

/* ---------- glass sidebar ---------- */
.sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66)) !important;
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-right: 1px solid var(--glass-border) !important;
  box-shadow: 8px 0 30px rgba(20,24,31,.06), inset 0 1px 0 rgba(255,255,255,.6);
}
.nav-item { transition: transform .15s ease, background .2s, color .2s, box-shadow .2s; }
.nav-item:hover { transform: translateX(3px); background: rgba(255,255,255,.7); }
.nav-item.on {
  background: var(--brand-grad) !important; color: #fff !important;
  box-shadow: var(--shadow-glow); transform: translateX(3px);
}
.nav-item.on svg { color: #fff; }

/* ---------- glass topbar ---------- */
.topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6)) !important;
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--glass-border) !important;
}
.topbar h1 { font-family: var(--display); letter-spacing: -.02em; }

/* ---------- glass cards / panels / KPIs with depth ---------- */
.card, .panel, .kpi {
  background: linear-gradient(155deg, rgba(255,255,255,.82), rgba(255,255,255,.66)) !important;
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.panel-head {
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
.panel-head h3 { font-family: var(--display); letter-spacing: -.01em; }

/* KPI cards: gradient accent rail + hover lift, ready for 3D tilt from admin-fx.js */
.kpi { position: relative; overflow: hidden; transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s; transform-style: preserve-3d; }
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--brand-grad); opacity: .9;
}
.kpi .val { font-family: var(--display); background: linear-gradient(135deg,#1a1f29,#3a4252); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi.tilt:hover { box-shadow: var(--shadow-lg), 0 24px 46px rgba(20,24,31,.16) !important; }
.kpi.tilt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background: radial-gradient(160px 160px at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.5), transparent 60%);
  opacity: 0; transition: opacity .25s; mix-blend-mode: overlay;
}
.kpi.tilt:hover::after { opacity: 1; }

/* ---------- translucent tables ---------- */
table.tbl th { background: rgba(244,246,251,.7) !important; backdrop-filter: blur(6px); }
table.tbl tr { transition: background .15s; }
table.tbl tr:hover td { background: rgba(255,255,255,.6) !important; }

/* ---------- controls ---------- */
.seg, .subtabs, .search { background: rgba(255,255,255,.55) !important; border: 1px solid var(--glass-border) !important; backdrop-filter: blur(8px); }
.seg button.on, .subtabs button.on { background: var(--brand-grad) !important; color: #fff !important; box-shadow: var(--shadow-glow); }
.btn { position: relative; overflow: hidden; }
.btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 45%); pointer-events: none; }
.btn-primary { background: var(--brand-grad) !important; box-shadow: var(--shadow-glow) !important; }
.btn-primary:hover, .btn-amber:hover { transform: translateY(-2px) scale(1.01); }

/* ---------- bars / sparks pick up the gradient ---------- */
.bar-fill { background: var(--brand-grad) !important; }
.spark .b { background: var(--brand-grad) !important; border-radius: 4px 4px 0 0; }

/* ---------- glass modal (product editor) ---------- */
.modal {
  background: linear-gradient(155deg, rgba(255,255,255,.88), rgba(255,255,255,.74)) !important;
  backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.modal.open { animation: modalPopA .42s cubic-bezier(.2,.9,.25,1.1); }
@keyframes modalPopA {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.9) rotateX(8deg); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1) rotateX(0); }
}

/* ---------- glass login card (matches storefront sign-in) ---------- */
.login-shell { background: transparent !important; }
.login-card {
  background: linear-gradient(155deg, rgba(255,255,255,.9), rgba(255,255,255,.76)) !important;
  backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6) !important;
  animation: cardPop .55s cubic-bezier(.2,.9,.25,1.05);
  transform-style: preserve-3d;
}
@keyframes cardPop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- staggered entrance for KPIs and panels (replays on every tab render) ---------- */
.kpis > .kpi { animation: fxIn .5s cubic-bezier(.2,.8,.2,1) both; }
.kpis > .kpi:nth-child(2) { animation-delay: .06s; }
.kpis > .kpi:nth-child(3) { animation-delay: .12s; }
.kpis > .kpi:nth-child(4) { animation-delay: .18s; }
.kpis > .kpi:nth-child(5) { animation-delay: .24s; }
.content .card, .content .panel { animation: fxIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: .12s; }
@keyframes fxIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .login-card, .modal.open,
  .kpis > .kpi, .content .card, .content .panel { animation: none !important; }
  .kpi.tilt { transition: none !important; transform: none !important; }
}