/* ============================================================
   Legend's Best — premium glass + depth layer.
   Loaded after admin.css (admin console) and after styles.css on the
   customer dashboard. Purely visual: no selector here changes layout
   semantics, and every motion respects prefers-reduced-motion.
   ============================================================ */

:root {
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(30, 75, 255, 0.10);
  --depth-1: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px -12px rgba(11, 18, 32, 0.18);
  --depth-2: 0 2px 4px rgba(11, 18, 32, 0.05), 0 18px 40px -18px rgba(30, 75, 255, 0.28), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  --depth-3: 0 6px 10px rgba(11, 18, 32, 0.06), 0 30px 60px -24px rgba(30, 75, 255, 0.35);
  --grad-primary: linear-gradient(135deg, #1e4bff 0%, #3b6cff 55%, #6d8dff 100%);
  --grad-ink: linear-gradient(135deg, #0c1330 0%, #1a2a6c 60%, #1e4bff 130%);
  --fx-dur: 520ms;
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Page ground: a soft, lit gradient instead of flat colour ---- */
body.admin,
body.customer-dashboard {
  background:
    radial-gradient(1200px 600px at 8% -10%, rgba(30, 75, 255, 0.14), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(109, 141, 255, 0.16), transparent 55%),
    radial-gradient(700px 500px at 50% 110%, rgba(30, 75, 255, 0.08), transparent 60%),
    var(--blue-50);
  background-attachment: fixed;
}

/* ---- Glass surfaces ---- */
.admin-sidebar,
.admin-topbar,
.admin-panel,
.admin-stat-card,
.admin-drawer,
.admin-bell__panel,
.admin-confirm,
.cust-sidebar,
.dash-panel,
.dash-count,
.st-stat, .sub-stat, .sec-stat {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--depth-2);
}
.admin-sidebar { border-right-color: var(--glass-edge); box-shadow: 12px 0 40px -30px rgba(30, 75, 255, 0.35); }
.admin-topbar { border-bottom-color: var(--glass-edge); box-shadow: 0 10px 30px -24px rgba(30, 75, 255, 0.35); position: sticky; top: 0; z-index: 30; }
.admin-drawer, .admin-confirm { background: var(--glass-bg-strong); box-shadow: var(--depth-3); }
.admin-bell__panel { background: var(--glass-bg-strong); }

/* ---- Cards: lift on hover, tilt from ui-fx.js, glare highlight ---- */
/* Positioning context for the glare, only on cards that are never sticky
   (the customer sidebar keeps its own sticky/static rules). */
.admin-stat-card, .st-stat, .sub-stat, .sec-stat, .dash-count, .dash-wallet, .admin-panel, .dash-panel { position: relative; }
.fx-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transform-style: preserve-3d;
  transition: transform var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease);
  will-change: transform;
}
.fx-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.55), transparent 55%);
  opacity: 0;
  transition: opacity var(--fx-dur) var(--fx-ease);
}
.fx-card:hover { --lift: -4px; box-shadow: var(--depth-3); }
.fx-card:hover::after { opacity: 1; }

/* ---- Stat cards: accent line + gradient figures ---- */
.admin-stat-card, .st-stat, .sub-stat, .sec-stat, .dash-count {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.admin-stat-card::before, .st-stat::before, .sub-stat::before, .sec-stat::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-primary);
  opacity: 0.9;
}
.admin-stat-card .value,
.dash-count strong,
.st-stat strong, .sub-stat strong, .sec-stat strong {
  background: var(--grad-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
.st-stat--warn strong, .sub-stat--warn strong, .sec-stat--warn strong { background: linear-gradient(135deg, #b45309, #f59e0b); -webkit-background-clip: text; background-clip: text; }
.st-stat--bad strong, .sub-stat--bad strong, .sec-stat--crit strong { background: linear-gradient(135deg, #991b1b, #ef4444); -webkit-background-clip: text; background-clip: text; }
.st-stat--good strong, .sub-stat--good strong { background: linear-gradient(135deg, #0b6b32, #22c55e); -webkit-background-clip: text; background-clip: text; }
.admin-stat-card .label, .st-stat span, .sub-stat span, .sec-stat span, .dash-count span { letter-spacing: 0.01em; }

/* ---- Sidebar navigation ---- */
.admin-nav a, .admin-nav__group-toggle, .cust-nav__item {
  position: relative;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.admin-nav a:hover, .cust-nav__item:hover { transform: translateX(3px); }
.admin-nav a.active, .admin-nav__solo.active, .cust-nav__item.is-active {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(30, 75, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.admin-nav__group-items a.active { border-left-color: transparent; }
.admin-brand img { filter: drop-shadow(0 6px 12px rgba(30, 75, 255, 0.35)); transition: transform var(--dur) var(--ease); }
.admin-brand:hover img { transform: translateY(-2px) rotate(-4deg); }

/* ---- Buttons ---- */
.admin-btn--primary, .btn-solid {
  background: var(--grad-primary);
  box-shadow: 0 10px 22px -12px rgba(30, 75, 255, 0.75), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  position: relative; overflow: hidden;
}
.admin-btn--primary:hover, .btn-solid:hover { box-shadow: 0 14px 28px -12px rgba(30, 75, 255, 0.85), 0 1px 0 rgba(255, 255, 255, 0.35) inset; transform: translateY(-1px); }
.admin-btn--primary::before, .btn-solid::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 600ms var(--fx-ease);
  pointer-events: none;
}
.admin-btn--primary:hover::before, .btn-solid:hover::before { left: 130%; }
.admin-btn--ghost { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.admin-btn--ghost:hover { background: rgba(255, 255, 255, 0.9); box-shadow: var(--depth-1); }
.admin-btn--danger { background: linear-gradient(135deg, #dc2626, #ef4444); box-shadow: 0 10px 22px -12px rgba(220, 38, 38, 0.7); }

/* ---- Tables ---- */
table.admin-table thead th { position: sticky; top: 0; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 1; }
table.admin-table tbody tr { transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
table.admin-table tbody tr:hover td { background: rgba(30, 75, 255, 0.06); }
.admin-pill, .status-badge, .ful-pill { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 10px -8px rgba(11, 18, 32, 0.4); }

/* ---- Tabs / filter pills ---- */
.admin-tabs button.active, .feed-filter.active, .dash-filter.active { background: var(--grad-primary); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(30, 75, 255, 0.8); }

/* ---- Customer dashboard ---- */
.cust-sidebar { border-radius: var(--radius-lg); }
.dash-avatar { box-shadow: 0 12px 30px -12px rgba(30, 75, 255, 0.6); transition: transform var(--dur) var(--ease); }
.dash-identity:hover .dash-avatar { transform: scale(1.04); }
.dash-wallet {
  position: relative; overflow: hidden;
  background: var(--grad-ink) !important;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--depth-3);
}
.dash-wallet::before {
  content: ""; position: absolute; inset: -40% auto auto -20%; width: 80%; height: 180%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
  transform: translateX(-70%) rotate(8deg);
  animation: fx-sheen 5.5s var(--fx-ease) infinite;
  pointer-events: none;
}
.dash-wallet::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 141, 255, 0.55), transparent 65%);
  pointer-events: none;
}
.dash-wallet__label { color: rgba(255, 255, 255, 0.75) !important; }
.dash-wallet__value { color: #fff !important; text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.dash-count { padding: 14px 12px; }
.dash-row { border-radius: 12px; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.dash-row:hover { background: rgba(30, 75, 255, 0.05); transform: translateX(2px); }
.cust-panel { animation: fx-panel var(--fx-dur) var(--fx-ease) both; }

/* ---- Reveal on enter (applied by ui-fx.js) ---- */
.fx-reveal { opacity: 0; transform: translateY(14px) scale(0.985); }
.fx-reveal.fx-in { opacity: 1; transform: none; transition: opacity var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease); transition-delay: calc(var(--i, 0) * 55ms); }
/* A revealed card that also tilts must not fight the reveal transform. */
.fx-reveal.fx-in.fx-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }

/* ---- Bell pulse when something new arrives ---- */
.admin-bell__count { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); animation: fx-ping 1.8s ease-out 2; }

/* ---- Ripple (ui-fx.js) ---- */
.fx-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, 0.45); pointer-events: none; animation: fx-ripple 600ms var(--fx-ease) forwards; }

@keyframes fx-sheen { 0%, 25% { transform: translateX(-70%) rotate(8deg); } 60%, 100% { transform: translateX(220%) rotate(8deg); } }
@keyframes fx-panel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fx-ping { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); } }
@keyframes fx-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---- Phones: lighter blur, no tilt (touch has no hover) ---- */
@media (max-width: 700px) {
  .admin-sidebar, .admin-panel, .admin-stat-card, .cust-sidebar, .dash-panel, .dash-count, .st-stat, .sub-stat, .sec-stat {
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .fx-card { transform: none !important; }
  body.admin, body.customer-dashboard { background-attachment: scroll; }
}

/* ---- Respect reduced motion completely ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-card, .fx-reveal, .cust-panel, .admin-nav a, .cust-nav__item, .admin-btn--primary, .btn-solid, .dash-row { transition: none !important; animation: none !important; transform: none !important; }
  .fx-reveal { opacity: 1; }
  .dash-wallet::before, .admin-bell__count { animation: none !important; }
}