/**
 * Luxora Admin — monochrome liquid glass (Cursor Glass / Apple-style).
 *
 * Source of truth for admin web chrome. Flutter widgets mirror these custom
 * properties in packages/luxora_ui/lib/src/tokens/luxora_colors.dart.
 */
:root {
  /* Ink */
  --admin-ink: #0a0a0a;
  --admin-ink-muted: #525252;
  --admin-ink-secondary: #404040;

  /* Surfaces */
  --admin-bg-top: #ececec;
  --admin-bg-mid: #f5f5f7;
  --admin-bg-bottom: #e8e8ec;

  /* Glass fills */
  --admin-glass-fill: rgba(255, 255, 255, 0.72);
  --admin-glass-fill-chrome: rgba(255, 255, 255, 0.58);
  --admin-glass-fill-opaque: #f4f4f5;

  /* Hairlines */
  --admin-glass-border: rgba(255, 255, 255, 0.55);
  --admin-glass-border-subtle: rgba(0, 0, 0, 0.06);
  --admin-outline-border: rgba(0, 0, 0, 0.16);
  --admin-divider: rgba(0, 0, 0, 0.12);
  --admin-glass-rim: rgba(255, 255, 255, 0.85);

  /* Blur */
  --admin-glass-blur: 24px;
  --admin-glass-saturate: 180%;

  /* Gloss gradient stops (145deg specular sweep) */
  --admin-glass-gloss-start: rgba(255, 255, 255, 0.78);
  --admin-glass-gloss-mid: rgba(255, 255, 255, 0.22);
  --admin-glass-gloss-end: rgba(0, 0, 0, 0.04);

  /* Elevation */
  --admin-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
  --admin-shadow-chrome: 0 12px 40px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;

  /* Nav */
  --admin-nav-selected: rgba(255, 255, 255, 0.62);
  --admin-nav-selected-border: rgba(0, 0, 0, 0.08);

  /* Actions */
  --admin-primary: #0a0a0a;
  --admin-primary-foreground: #ffffff;

  /* Wallpaper blooms (10% smaller than original 88vmin / 82vmin). */
  --admin-bloom-size-lg: 79.2vmin;
  --admin-bloom-size-md: 73.8vmin;
}

/* Liquid wallpaper behind the Flutter canvas (web admin route). */
html {
  min-height: 100%;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    var(--admin-bg-top) 0%,
    var(--admin-bg-mid) 42%,
    var(--admin-bg-bottom) 100%
  );
}

html::after {
  content: "";
  position: fixed;
  bottom: -28vmin;
  left: -14vmin;
  width: var(--admin-bloom-size-lg);
  height: var(--admin-bloom-size-lg);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.04) 0%,
    transparent 58%
  );
  animation: admin-bloom-drift-bottom 28s linear infinite;
  will-change: transform;
}

body {
  margin: 0;
  min-height: 100%;
  position: relative;
  z-index: 1;
  background-color: transparent;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}

body::before {
  top: -34vmin;
  left: -24vmin;
  width: var(--admin-bloom-size-lg);
  height: var(--admin-bloom-size-lg);
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.95) 0%,
    transparent 58%
  );
  animation: admin-bloom-drift-top-left 28s linear infinite;
}

body::after {
  top: -20vmin;
  right: -28vmin;
  width: var(--admin-bloom-size-md);
  height: var(--admin-bloom-size-md);
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 52%
  );
  animation: admin-bloom-drift-top-right 28s linear infinite;
}

@keyframes admin-bloom-drift-top-left {
  0%,
  100% {
    transform: translate(0, 0) scale(1, 1) skew(0deg, 0deg) rotate(0deg);
  }
  25% {
    transform: translate(22vw, 14vh) scale(1.1, 0.9) skew(3deg, -2deg) rotate(2.5deg);
  }
  50% {
    transform: translate(8vw, 26vh) scale(0.9, 1.12) skew(-2.5deg, 3deg) rotate(-3deg);
  }
  75% {
    transform: translate(30vw, 8vh) scale(1.08, 0.94) skew(2deg, 2.5deg) rotate(1.5deg);
  }
}

@keyframes admin-bloom-drift-top-right {
  0%,
  100% {
    transform: translate(0, 0) scale(1, 1) skew(0deg, 0deg) rotate(0deg);
  }
  25% {
    transform: translate(-24vw, 18vh) scale(0.92, 1.1) skew(-3deg, 2deg) rotate(-2deg);
  }
  50% {
    transform: translate(-10vw, 28vh) scale(1.12, 0.88) skew(2.5deg, -2.5deg) rotate(3deg);
  }
  75% {
    transform: translate(-28vw, 10vh) scale(1.04, 1.06) skew(-1.5deg, 2deg) rotate(-1deg);
  }
}

@keyframes admin-bloom-drift-bottom {
  0%,
  100% {
    transform: translate(0, 0) scale(1, 1) skew(0deg, 0deg) rotate(0deg);
  }
  33% {
    transform: translate(18vw, -12vh) scale(1.06, 0.94) skew(2deg, -1.5deg) rotate(1.5deg);
  }
  66% {
    transform: translate(26vw, -6vh) scale(0.94, 1.08) skew(-2deg, 2deg) rotate(-2deg);
  }
}

/* Let the Flutter layer sit transparent over the CSS wallpaper. */
flutter-view,
flt-glass-pane {
  background: transparent !important;
}

/* Reference utility — mirrors LuxGlassSurface in Dart. */
.admin-glass {
  position: relative;
  border: 1px solid var(--admin-outline-border);
  background: var(--admin-glass-fill);
  backdrop-filter: blur(var(--admin-glass-blur)) saturate(var(--admin-glass-saturate));
  -webkit-backdrop-filter: blur(var(--admin-glass-blur)) saturate(var(--admin-glass-saturate));
  box-shadow: var(--admin-shadow-glass);
  border-radius: 14px;
  overflow: hidden;
}

.admin-glass--chrome {
  background: var(--admin-glass-fill-chrome);
  box-shadow: var(--admin-shadow-chrome);
}

@media (prefers-reduced-motion: reduce) {
  html::after,
  body::before,
  body::after {
    animation: none;
  }

  .admin-glass,
  .admin-glass--chrome {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--admin-glass-fill-opaque);
  }
}