/* ═══════════════════════════════════════════════════════════════════════════
   GLASSMORPHISM ENHANCEMENT LAYER
   TheNursingDirectory.com — Tool & Calculator Design System
   ═══════════════════════════════════════════════════════════════════════════

   This file provides frosted-glass UI effects that layer ON TOP of the
   existing dark-mode design system. Link it AFTER your inline <style> block
   or after the base design system styles.

   Usage:  <link rel="stylesheet" href="glassmorphism.css">

   Classes are additive — they enhance existing components without replacing
   any base styles. For example:
     <div class="result-card glass-card"> ... </div>
     <input class="field-input glass-input" />

   ═══════════════════════════════════════════════════════════════════════════ */


/* ── GLASS CUSTOM PROPERTIES ───────────────────────────────────────────────
   Override these on any element or in :root to tune the glass effect.
   All values are intentionally set to work with the existing dark palette
   (--surface-base: #0f172a, --surface-raised: #1e293b).
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Blur & saturation intensity */
  --glass-blur:            16px;
  --glass-blur-light:      8px;
  --glass-blur-heavy:      24px;
  --glass-saturation:      180%;
  --glass-saturation-light: 140%;
  --glass-saturation-heavy: 200%;

  /* Backgrounds — semi-transparent versions of surface tokens */
  --glass-bg:              rgba(30, 41, 59, 0.70);   /* --surface-raised @ 70% */
  --glass-bg-light:        rgba(30, 41, 59, 0.45);
  --glass-bg-heavy:        rgba(30, 41, 59, 0.85);
  --glass-bg-tint:         rgba(8, 145, 178, 0.06);  /* teal-tinted glass */

  /* Borders */
  --glass-border:          rgba(255, 255, 255, 0.08);
  --glass-border-light:    rgba(255, 255, 255, 0.05);
  --glass-border-strong:   rgba(255, 255, 255, 0.14);
  --glass-border-teal:     rgba(8, 145, 178, 0.20);

  /* Shadows & glows */
  --glass-shadow:          0 8px 32px rgba(0, 0, 0, 0.30);
  --glass-shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.40);
  --glass-glow-teal:       0 0 30px rgba(8, 145, 178, 0.18);
  --glass-glow-green:      0 0 30px rgba(110, 231, 183, 0.14);

  /* Animation durations (match existing system tokens) */
  --glass-transition:      300ms cubic-bezier(0.16, 1, 0.3, 1);
  --glass-shimmer-duration: 2.4s;
}


/* ══════════════════════════════════════════════════════════════════════════
   1. GLASS CARD — Frosted result cards
   Add to: .result-card, .input-panel, or any card surface
   ══════════════════════════════════════════════════════════════════════════ */

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  transition:
    background var(--glass-transition),
    border-color var(--glass-transition),
    box-shadow var(--glass-transition);
}

.glass-card:hover {
  background: rgba(30, 41, 59, 0.78);
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow-elevated);
}


/* ══════════════════════════════════════════════════════════════════════════
   2. GLASS NAV — Frosted sticky navigation bar
   Apply to a sticky/fixed nav element. Blurs page content underneath.
   ══════════════════════════════════════════════════════════════════════════ */

.glass-nav {
  background: rgba(15, 23, 42, 0.72);   /* --surface-base @ 72% */
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 var(--glass-border-teal);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  transition:
    background var(--glass-transition),
    box-shadow var(--glass-transition);
}

/* Intensify on scroll — toggle .scrolled via JS */
.glass-nav.scrolled {
  background: rgba(15, 23, 42, 0.88);
  box-shadow:
    0 1px 0 var(--glass-border-teal),
    0 4px 20px rgba(0, 0, 0, 0.25);
}


/* ══════════════════════════════════════════════════════════════════════════
   3. GLASS INPUT — Frosted form fields
   Add to: .field-input, .field-select
   ══════════════════════════════════════════════════════════════════════════ */

.glass-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(var(--glass-saturation-light));
  backdrop-filter: blur(var(--glass-blur-light)) saturate(var(--glass-saturation-light));
  transition:
    background var(--glass-transition),
    border-color var(--glass-transition),
    box-shadow var(--glass-transition);
}

.glass-input:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--glass-border-strong);
}

.glass-input:focus {
  background: rgba(8, 145, 178, 0.05);
  border-color: rgba(8, 145, 178, 0.50);
  box-shadow:
    0 0 0 3px rgba(8, 145, 178, 0.12),
    0 0 16px rgba(8, 145, 178, 0.10);
}


/* ══════════════════════════════════════════════════════════════════════════
   4. GLASS HERO — For prominent result displays
   Stronger frosted effect with a teal tint through the glass.
   ══════════════════════════════════════════════════════════════════════════ */

.glass-hero {
  background:
    linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(110, 231, 183, 0.04)),
    var(--glass-bg);
  border: 1px solid var(--glass-border-teal);
  box-shadow:
    var(--glass-shadow-elevated),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturation-heavy));
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturation-heavy));
  position: relative;
  overflow: hidden;
}

/* Subtle top-edge highlight */
.glass-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.10) 0%,
    transparent 40%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. GLASS MODAL — Overlay panels and popups
   Apply to the modal content panel. Use .glass-modal-backdrop for the
   full-screen overlay behind it.
   ══════════════════════════════════════════════════════════════════════════ */

.glass-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.60);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 9998;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.glass-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.glass-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 9999;
  width: min(90vw, 480px);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--glass-bg-heavy);
  border: 1px solid var(--glass-border-strong);
  border-radius: 20px;
  box-shadow: var(--glass-shadow-elevated);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturation-heavy));
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturation-heavy));
  padding: 2rem;
  opacity: 0;
  transition:
    opacity 300ms ease,
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.glass-modal.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. GLASS PILL — Tags, badges, progress indicators
   ══════════════════════════════════════════════════════════════════════════ */

.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.80);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(var(--glass-saturation-light));
  backdrop-filter: blur(var(--glass-blur-light)) saturate(var(--glass-saturation-light));
  transition:
    background var(--glass-transition),
    border-color var(--glass-transition),
    color var(--glass-transition);
  white-space: nowrap;
  user-select: none;
}

.glass-pill:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--glass-border-strong);
  color: rgba(255, 255, 255, 0.95);
}

/* Active / selected state — teal-tinted glass */
.glass-pill.active,
.glass-pill.selected {
  background: rgba(8, 145, 178, 0.15);
  border-color: rgba(8, 145, 178, 0.35);
  color: #67e8f9; /* --teal-300 */
}

/* Completed step state — green accent */
.glass-pill.completed {
  background: rgba(110, 231, 183, 0.10);
  border-color: rgba(110, 231, 183, 0.25);
  color: #6ee7b7; /* --accent-green */
}


/* ══════════════════════════════════════════════════════════════════════════
   7. UTILITY CLASSES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 7a. Glass Shimmer ──────────────────────────────────────────────────
   Animated light sweep across a glass surface.
   Add to any glass-* element for a loading or attention effect.
   ────────────────────────────────────────────────────────────────────── */

.glass-shimmer {
  position: relative;
  overflow: hidden;
}

.glass-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: glass-shimmer-sweep var(--glass-shimmer-duration) ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes glass-shimmer-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}


/* ── 7b. Glass Glow ────────────────────────────────────────────────────
   Pulsing teal underglow. Works best on cards and hero sections.
   ────────────────────────────────────────────────────────────────────── */

.glass-glow {
  position: relative;
}

.glass-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: transparent;
  box-shadow: 0 4px 30px rgba(8, 145, 178, 0.20);
  animation: glass-glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes glass-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}


/* ── 7c. Glass Border ──────────────────────────────────────────────────
   Animated gradient border that rotates around the element.
   Uses a conic gradient masked to the border area.
   ────────────────────────────────────────────────────────────────────── */

.glass-border {
  position: relative;
}

.glass-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--glass-border-angle, 0deg),
    transparent 0%,
    rgba(8, 145, 178, 0.40) 25%,
    rgba(110, 231, 183, 0.30) 50%,
    rgba(8, 145, 178, 0.40) 75%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: glass-border-rotate 4s linear infinite;
  pointer-events: none;
}

@keyframes glass-border-rotate {
  to {
    --glass-border-angle: 360deg;
  }
}

/* Register the custom property for animation (Chromium 🎉, Firefox 128+) */
@property --glass-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}


/* ══════════════════════════════════════════════════════════════════════════
   8. @SUPPORTS FALLBACKS
   Graceful degradation when backdrop-filter is not supported.
   The elements remain fully usable — they just get a solid background
   instead of the frosted translucency.
   ══════════════════════════════════════════════════════════════════════════ */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-card {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .glass-nav {
    background: rgba(15, 23, 42, 0.96);
  }

  .glass-nav.scrolled {
    background: rgba(15, 23, 42, 0.98);
  }

  .glass-input {
    background: rgba(255, 255, 255, 0.05);
  }

  .glass-input:focus {
    background: rgba(8, 145, 178, 0.08);
  }

  .glass-hero {
    background:
      linear-gradient(135deg, rgba(8, 145, 178, 0.10), rgba(110, 231, 183, 0.05)),
      rgba(30, 41, 59, 0.95);
  }

  .glass-modal-backdrop {
    background: rgba(15, 23, 42, 0.80);
  }

  .glass-modal {
    background: rgba(30, 41, 59, 0.97);
  }

  .glass-pill {
    background: rgba(255, 255, 255, 0.08);
  }

  .glass-pill.active,
  .glass-pill.selected {
    background: rgba(8, 145, 178, 0.20);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   9. REDUCED MOTION
   Respect user accessibility preferences — disable all glass animations
   while keeping the static visual effects intact.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .glass-nav,
  .glass-input,
  .glass-hero,
  .glass-modal,
  .glass-modal-backdrop,
  .glass-pill {
    transition: none;
  }

  .glass-shimmer::after {
    animation: none;
    display: none;
  }

  .glass-glow::before {
    animation: none;
    opacity: 0.8;
  }

  .glass-border::before {
    animation: none;
    /* Show static gradient border instead of rotating */
    background: linear-gradient(
      135deg,
      rgba(8, 145, 178, 0.30),
      rgba(110, 231, 183, 0.20)
    );
  }

  .glass-modal {
    transition: none;
  }

  .glass-modal-backdrop {
    transition: none;
  }
}