/**
 * Shared glass / blur theme tokens (login full-bleed + admin column pages).
 * Override locally if CSP blocks Unsplash, e.g. on :root:
 *   --glass-bg-image: url("/img/login-bg.jpg");
 *
 * Layout breakpoints for staff UI: see staff-breakpoints.css (1024 / 768 / 480).
 */
:root {
  --glass-bg-image: url("https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=1920&q=85");

  /* ::before photo layer */
  --glass-bg-scale: 1.12;
  --glass-bg-scale-reduced: 1.06;
  --glass-bg-filter: blur(22px) brightness(0.5) saturate(1.2);
  --glass-bg-filter-reduced: blur(10px) brightness(0.55) saturate(1.05);

  /* ::after bronze vignette + readability (same stack everywhere) */
  --glass-scrim: radial-gradient(ellipse 110% 75% at 50% -5%, rgba(183, 124, 66, 0.38), transparent 52%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(183, 124, 66, 0.12), transparent 45%),
    linear-gradient(
      165deg,
      rgba(12, 11, 10, 0.88) 0%,
      rgba(28, 24, 20, 0.78) 42%,
      rgba(18, 16, 14, 0.92) 100%
    );

  /* Panels: login card, modals, glass surfaces */
  --glass-panel-bg: rgba(38, 35, 32, 0.72);
  --glass-panel-bg-elevated: rgba(38, 35, 32, 0.88);
  --glass-panel-border: rgba(183, 124, 66, 0.5);
  --glass-panel-border-muted: rgba(183, 124, 66, 0.35);
  --glass-panel-radius: 14px;
  --glass-panel-shadow: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-panel-backdrop: blur(14px) saturate(1.15);

  /* Full-screen modal overlay behind dialog */
  --glass-modal-overlay-bg: rgba(6, 5, 4, 0.62);
  --glass-modal-overlay-blur: blur(12px) saturate(1.08);

  /* Table / nested surfaces inside glass pages */
  --glass-surface-bg: rgba(34, 32, 30, 0.72);
  --glass-surface-border: rgba(183, 124, 66, 0.28);

  /* Skeleton shimmer on glass pages */
  --glass-skeleton-edge: rgba(22, 20, 18, 0.92);
  --glass-skeleton-mid: rgba(70, 58, 48, 0.85);
}

/* Back-compat: older login override name */
.login-page {
  --login-bg-image: var(--glass-bg-image);
}

/* Admin pages (events, usersettings, …): same blurred photo + scrim as staff dashboard */
.admin-surface-themed.content-wrapper {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background-color: var(--gray-color);
}

.admin-surface-themed.content-wrapper::before,
.admin-surface-themed.content-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.admin-surface-themed.content-wrapper::before {
  background: var(--glass-bg-image) center / cover no-repeat;
  transform: scale(var(--glass-bg-scale));
  filter: var(--glass-bg-filter);
  will-change: transform, filter;
}

.admin-surface-themed.content-wrapper::after {
  background: var(--glass-scrim);
}

.admin-surface-themed.content-wrapper > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .admin-surface-themed.content-wrapper::before {
    transform: scale(var(--glass-bg-scale-reduced));
    filter: var(--glass-bg-filter-reduced);
  }
}