/* ==========================================================================
   AstraDax - polish layer (depth, glow, smooth motion)
   Loaded AFTER base.css / dashboard.css / auth.css. Purely additive:
   no selectors or IDs used by JS are changed. Honors prefers-reduced-motion.
   ========================================================================== */

:root {
  --ax-accent-2: #6366f1;
  --ax-grad: linear-gradient(135deg, #0ea5e9 0%, #0284c7 55%, #4f46e5 100%);
  --ax-glow: 0 10px 30px -12px rgba(14, 165, 233, 0.45);
  --ax-glow-strong: 0 16px 40px -14px rgba(56, 189, 248, 0.6);
  --ax-card-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 45%);
}

html { scroll-behavior: smooth; }

/* ---------- Ambient background (fixed, behind everything) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(14, 165, 233, 0.13), transparent 60%),
    radial-gradient(760px 520px at 100% 0%, rgba(99, 102, 241, 0.11), transparent 60%),
    radial-gradient(800px 520px at 60% 115%, rgba(16, 185, 129, 0.06), transparent 60%);
  animation: ambientShift 24s ease-in-out infinite alternate;
}
@keyframes ambientShift {
  from { opacity: 0.85; transform: scale(1); }
  to { opacity: 1; transform: scale(1.06); }
}

/* ---------- Sidebar ---------- */
.sidebar {
  background-image: linear-gradient(180deg, rgba(14, 165, 233, 0.06), rgba(16, 20, 27, 0) 32%);
}
.menu-item {
  position: relative;
  transition: background 0.25s var(--ax-ease), color 0.25s var(--ax-ease), transform 0.25s var(--ax-ease);
}
.menu-item:hover { transform: translateX(2px); }
.menu-item.active {
  background-image: linear-gradient(90deg, rgba(14, 165, 233, 0.2), rgba(14, 165, 233, 0.04)) !important;
  box-shadow: inset 2px 0 0 var(--ax-accent);
}
.menu-item svg { transition: transform 0.25s var(--ax-ease); }
.menu-item:hover svg { transform: scale(1.08); }

/* ---------- Topbar ---------- */
.topbar {
  background: rgba(10, 13, 18, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.icon-btn, .profile-avatar { transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s var(--ax-ease); }
.icon-btn:hover { transform: translateY(-1px); background: var(--ax-surface-2); }

/* ---------- Welcome banner ---------- */
.welcome-banner {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(520px 220px at 0% 0%, rgba(14, 165, 233, 0.18), transparent 65%),
    radial-gradient(420px 220px at 100% 100%, rgba(99, 102, 241, 0.14), transparent 65%);
  border-color: rgba(56, 189, 248, 0.18);
}
.welcome-banner h1 {
  background: linear-gradient(100deg, #f1f4f8 10%, #7dd3fc 60%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Cards & stat cards ---------- */
.card, .stat-card, .toolbar {
  background-image: var(--ax-card-sheen);
  transition: transform 0.4s var(--ax-ease), border-color 0.35s ease, box-shadow 0.4s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.32);
  box-shadow: var(--ax-glow);
}
.card:hover { border-color: rgba(255, 255, 255, 0.13); }
.stat-icon { transition: transform 0.4s var(--ax-ease), box-shadow 0.4s ease; }
.stat-card:hover .stat-icon { transform: scale(1.08) rotate(-3deg); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.03); }
.progress-fill { background-image: linear-gradient(90deg, #0ea5e9, #6366f1); transition: width 0.8s var(--ax-ease); }

/* ---------- Buttons ---------- */
.btn-action {
  background-image: var(--ax-grad) !important;
  box-shadow: 0 8px 22px -10px rgba(14, 165, 233, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.25s var(--ax-ease), box-shadow 0.3s ease, filter 0.3s ease !important;
}
.btn-action:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--ax-glow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.btn-action:active:not(:disabled) { transform: translateY(0); }
.btn-outline, .btn-cancel, .btn-danger, .action-icons button {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ax-ease);
}
.btn-outline:hover, .btn-cancel:hover, .action-icons button:hover { transform: translateY(-1px); border-color: rgba(56, 189, 248, 0.35); }
.btn-danger:hover { transform: translateY(-1px); }

/* ---------- Tables ---------- */
tr td { transition: background 0.25s ease; }
tr:hover td { background: rgba(56, 189, 248, 0.045); }

/* ---------- Status badges: soft dot ---------- */
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex: none;
}

/* ---------- Forms ---------- */
.form-control { transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
.form-control:hover { border-color: rgba(255, 255, 255, 0.24); }
.form-control:focus { background: #0c1017; box-shadow: 0 0 0 3px var(--ax-accent-soft), 0 8px 24px -14px rgba(14, 165, 233, 0.5); }

/* ---------- Modals ---------- */
.modal-overlay {
  transition: opacity 0.3s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal-card {
  transform: translateY(14px) scale(0.97);
  transition: transform 0.4s var(--ax-ease), opacity 0.3s ease;
  background-image: var(--ax-card-sheen);
}
.modal-overlay.active .modal-card { transform: none; }

/* ---------- Section transitions ---------- */
.content-section { animation: sectionRise 0.5s var(--ax-ease) both; }
@keyframes sectionRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Staggered entrance for grids (CSS only, no JS hooks) */
.stats-grid > *, .dashboard-layout > *, .content-section > .card, .content-section > .toolbar {
  animation: itemRise 0.6s var(--ax-ease) both;
}
.stats-grid > *:nth-child(1) { animation-delay: 0.04s; }
.stats-grid > *:nth-child(2) { animation-delay: 0.10s; }
.stats-grid > *:nth-child(3) { animation-delay: 0.16s; }
.stats-grid > *:nth-child(4) { animation-delay: 0.22s; }
.dashboard-layout > *:nth-child(1) { animation-delay: 0.12s; }
.dashboard-layout > *:nth-child(2) { animation-delay: 0.20s; }
@keyframes itemRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Auth pages ---------- */
body.auth {
  position: relative;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 60% 45% at 50% -5%, rgba(14, 165, 233, 0.16), transparent 70%),
    radial-gradient(ellipse 45% 40% at 100% 100%, rgba(99, 102, 241, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 35% at 0% 90%, rgba(16, 185, 129, 0.07), transparent 70%);
}
.auth-card {
  background-image: var(--ax-card-sheen);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.auth-card:hover { border-color: rgba(56, 189, 248, 0.25); box-shadow: 0 34px 80px -30px rgba(14, 165, 233, 0.3); }
.brand h1 .accent {
  background: linear-gradient(100deg, #7dd3fc, #38bdf8 45%, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-list li { transition: transform 0.3s var(--ax-ease), color 0.3s ease; }
.brand-list li:hover { transform: translateX(4px); color: var(--ax-text); }
.brand-list .ico { transition: background 0.3s ease, box-shadow 0.3s ease; }
.brand-list li:hover .ico { background: rgba(14, 165, 233, 0.22); box-shadow: 0 0 18px -4px rgba(56, 189, 248, 0.6); }
.brand-logo, .brand h1, .brand > p, .brand-list li, .price-box { animation: itemRise 0.7s var(--ax-ease) both; }
.brand h1 { animation-delay: 0.08s; }
.brand > p { animation-delay: 0.16s; }
.brand-list li:nth-child(1) { animation-delay: 0.24s; }
.brand-list li:nth-child(2) { animation-delay: 0.30s; }
.brand-list li:nth-child(3) { animation-delay: 0.36s; }
.brand-list li:nth-child(4) { animation-delay: 0.42s; }
.price-box { animation-delay: 0.45s; background-image: var(--ax-card-sheen); }
.btn-submit, .btn-modal {
  background-image: var(--ax-grad);
  box-shadow: 0 10px 26px -12px rgba(14, 165, 233, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.25s var(--ax-ease), box-shadow 0.3s ease, filter 0.3s ease;
}
.btn-submit:hover:not(:disabled), .btn-modal:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--ax-glow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.field-input, .modal-input { transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
.field-input:focus, .modal-input:focus { box-shadow: 0 0 0 3px var(--ax-accent-soft), 0 10px 26px -16px rgba(14, 165, 233, 0.55); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .stats-grid > *, .dashboard-layout > *, .content-section, .content-section > *,
  .brand-logo, .brand h1, .brand > p, .brand-list li, .price-box { animation: none !important; }
  html { scroll-behavior: auto; }
}