/*
 * ============================================================
 *  APPLE LIQUID GLASS & VIBRANCY EFFECTS — CSS Components
 * ============================================================
 *  Implements Apple's glass/translucency/vibrancy for web.
 *  Based on: WWDC 2025 Liquid Glass, macOS Materials system.
 *
 *  Requires: design-tokens.css loaded first.
 *
 *  NOTE: Dark mode blocks removed — single light theme only.
 *
 *  Sources:
 *    - https://developer.apple.com/design/human-interface-guidelines/materials
 *    - https://developer.apple.com/documentation/TechnologyOverviews/liquid-glass
 *    - https://developer.apple.com/videos/play/wwdc2025/356/
 *    - https://css-tricks.com/getting-clarity-on-apples-liquid-glass/
 *    - https://dev.to/gruszdev/apples-liquid-glass-revolution-how-glassmorphism-is-shaping-ui-design-in-2025-with-css-code-1221
 *    - https://liquidglassgen.com/
 * ============================================================
 */


/* ============================================================
   1. FEATURE DETECTION
   ============================================================ */

/* Apply glass only when backdrop-filter is supported */
@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .glass-supported { --glass-available: 1; }
}


/* ============================================================
   2. STANDARD GLASS MATERIALS (macOS-style vibrancy)
   ============================================================ */

/* ----- Ultra Thin — most translucent ----- */
.material-ultra-thin {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
}

/* ----- Thin — more translucent than opaque ----- */
.material-thin {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* ----- Regular — somewhat translucent (default) ----- */
.material-regular {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ----- Thick — more opaque than translucent ----- */
.material-thick {
  background: rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}


/* ============================================================
   3. LIQUID GLASS (WWDC 2025 — Apple's new design language)
   ============================================================ */

/* ----- Regular Liquid Glass ----- */
/* Use for: sidebars, alerts, popovers, tab bars, toolbars */
.liquid-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-2xl, 16px);
  box-shadow:
    0 8px 32px rgba(31, 38, 135, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

/* Specular highlight (top edge glow) */
.liquid-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  pointer-events: none;
  z-index: 1;
}

/* Reflective shine pseudo-element */
.liquid-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}


/* ----- Clear Liquid Glass ----- */
/* Use for: components over visually rich backgrounds (media, photos) */
.liquid-glass-clear {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(2px) saturate(120%);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-2xl, 16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

/* Dimming layer for clear glass over bright backgrounds */
.liquid-glass-clear--dimmed {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px) saturate(120%);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}


/* ============================================================
   4. VIBRANCY-BASED COMPONENT STYLES
   ============================================================ */

/* ----- Sidebar (macOS-style) ----- */
.glass-sidebar {
  background: rgba(246, 246, 246, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--apple-separator);
  width: var(--macos-sidebar-width-default, 240px);
  min-width: var(--macos-sidebar-width-min, 200px);
  max-width: var(--macos-sidebar-width-max, 300px);
}

/* ----- Toolbar (macOS-style) ----- */
.glass-toolbar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0.5px solid var(--apple-separator);
  height: var(--macos-toolbar-height, 52px);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
}

/* ----- Menu / Dropdown (macOS-style) ----- */
.glass-menu {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 0.5px solid var(--apple-separator);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-menu);
  padding: var(--space-1, 4px) 0;
}

/* ----- Modal / Alert ----- */
.glass-modal {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-2xl, 16px);
  box-shadow: var(--shadow-2xl);
  padding: var(--space-6);
}

/* ----- Modal Backdrop (overlay) ----- */
.glass-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
}

/* ----- Card ----- */
.glass-card {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl, 12px);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
}

/* ----- Popover ----- */
.glass-popover {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 0.5px solid var(--apple-separator);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-popover);
  padding: var(--space-3);
}

/* ----- Tab Bar (iOS-style, bottom) ----- */
.glass-tab-bar {
  background: rgba(249, 249, 249, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid var(--apple-separator);
}

/* ----- Navigation Bar (iOS-style, top) ----- */
.glass-nav-bar {
  background: rgba(249, 249, 249, 0.90);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0.5px solid var(--apple-separator);
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
}


/* ============================================================
   5. GLASS UTILITY CLASSES
   ============================================================ */

/* Blur intensities */
.backdrop-blur-sm   { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-md   { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-lg   { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.backdrop-blur-xl   { backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.backdrop-blur-2xl  { backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }

/* Saturate */
.backdrop-saturate       { backdrop-filter: saturate(180%); -webkit-backdrop-filter: saturate(180%); }
.backdrop-saturate-heavy { backdrop-filter: saturate(200%); -webkit-backdrop-filter: saturate(200%); }

/* Combined (commonly used combos) */
.backdrop-glass {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* GPU acceleration hint */
.glass-accelerated {
  transform: translateZ(0);
  will-change: backdrop-filter;
}


/* ============================================================
   6. FALLBACK (when backdrop-filter is not supported)
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass,
  .liquid-glass-clear,
  .material-ultra-thin,
  .material-thin,
  .material-regular,
  .material-thick,
  .glass-sidebar,
  .glass-toolbar,
  .glass-menu,
  .glass-modal,
  .glass-card,
  .glass-popover,
  .glass-tab-bar,
  .glass-nav-bar {
    /* Solid fallback background */
    background: rgba(245, 245, 245, 0.95) !important;
  }
}