/**
 * Global Back to Top - floating SaaS-style FAB
 * Location: assets/css/back-to-top.css
 *
 * Loaded site-wide from header.php, header-dashboard.php, header-admin.php.
 * Markup rendered site-wide from footer.php, footer-dashboard.php, footer-admin.php.
 * Behaviour controlled by assets/js/back-to-top.js.
 *
 * Defensive defaults: even without JS the button stays invisible (opacity 0),
 * and the JS only flips `.is-visible` once the user has scrolled.
 */

.back-to-top {
  --btt-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 52%, #ec4899 100%);

  position: fixed;
  right: 24px;
  bottom: 24px;
  /* High enough to clear sidebars (z-index 30), topbars (1000), but still
     below modal backdrops on the dashboard (which use much higher values). */
  z-index: 9999;

  width: 46px;
  height: 46px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;

  background: var(--gradient-primary, var(--btt-gradient));
  color: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 24px -6px rgba(99, 102, 241, 0.5),
    0 4px 12px -2px rgba(139, 92, 246, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.92);
  transition:
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 250ms ease,
    visibility 0s linear 320ms;
}

/* When JS adds .is-visible, the button fades in and accepts clicks */
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 250ms ease,
    visibility 0s linear 0s;
}

/* Soft outer glow ring */
.back-to-top::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--gradient-primary, var(--btt-gradient));
  filter: blur(14px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.back-to-top.is-visible::after { opacity: 0.32; }
.back-to-top:hover::after { opacity: 0.55; }

.back-to-top:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 18px 36px -6px rgba(99, 102, 241, 0.65),
    0 8px 18px -2px rgba(236, 72, 153, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.back-to-top:active {
  transform: translateY(-1px) scale(1.02);
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}

/* When a modal is open, JS adds .is-modal-hidden to suppress the FAB */
.back-to-top.is-modal-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.back-to-top svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

[data-theme="dark"] .back-to-top {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 10px 28px -6px rgba(99, 102, 241, 0.55),
    0 4px 14px -2px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@media (max-width: 540px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
  .back-to-top svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 200ms ease, visibility 0s linear 200ms !important;
    transform: none !important;
  }
  .back-to-top.is-visible {
    transition: opacity 200ms ease, visibility 0s linear 0s !important;
    transform: none !important;
  }
  .back-to-top:hover {
    transform: none !important;
  }
}