/**
 * EN: Glassmorphism Utility Classes
 * VI: Các class tiện ích cho Glassmorphism
 *
 * This file contains reusable glassmorphism utility classes following the subtle x.ai aesthetic.
 * These classes combine background, borders, blur, and shadows to create professional glass effects.
 *
 * File này chứa các class tiện ích glassmorphism có thể tái sử dụng theo phong cách x.ai tinh tế.
 * Các class này kết hợp background, borders, blur, và shadows để tạo hiệu ứng glass chuyên nghiệp.
 */

/* ============================================
   EN: Basic Glass Panel
   VI: Glass Panel cơ bản
   ============================================ */

/**
 * Basic glass panel with default settings
 * Suitable for cards, containers, and panels
 */
.glass-panel {
  background: var(--glass-bg-default);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  /* Safari support */
  border: 1px solid var(--glass-border-default);
  box-shadow: var(--glass-shadow-md), var(--glass-shadow-inset);
}

.glass-panel:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transition: all var(--duration-fast) var(--ease-snap);
}

/* ============================================
   EN: Glass Card (with hover animation)
   VI: Glass Card (có animation khi hover)
   ============================================ */

/**
 * Glass card with rounded corners and minimal hover effect
 * X.ai minimalist style - subtle lift only
 */
.glass-card {
  background: var(--glass-bg-default);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border-default);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-snap);
}

.glass-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/**
 * EN: Focus-within state for form groups
 * VI: Trạng thái focus-within cho form groups
 */
.glass-card:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.2);
  transition: all var(--duration-fast) var(--ease-snap);
}

/* ============================================
   EN: Glass Button
   VI: Glass Button
   ============================================ */

/**
 * Glass button with minimal background - X.ai style
 * Snappy, fast interactions
 */
.glass-button {
  background: var(--glass-bg-default);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border-default);
  box-shadow: var(--shadow);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: all var(--duration-fast) var(--ease-snap);
  cursor: pointer;
  user-select: none;
}

.glass-button:hover:not(:disabled) {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
}

.glass-button:active:not(:disabled) {
  background: var(--glass-bg-active);
  transform: scale(var(--active-scale));
}

.glass-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   EN: Glass Input
   VI: Glass Input
   ============================================ */

/**
 * Glass input field - X.ai minimalist
 * Ultra-minimal blur for maximum text clarity
 */
.glass-input {
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border-subtle);
  transition: all var(--duration-fast) var(--ease-snap);
}

.glass-input:hover {
  border-color: var(--glass-border-default);
}

.glass-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.1);
  outline: none;
}

.glass-input::placeholder {
  color: var(--text-tertiary);
}

/* ============================================
   EN: Solid Input (X.ai Style)
   VI: Solid Input (Phong cách X.ai)
   ============================================ */

/**
 * Solid input field for a more grounded feel
 */
.solid-input {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  transition: all var(--duration-fast) var(--ease-snap);
}

.solid-input:hover {
  border-color: var(--border-secondary);
}

.solid-input:focus {
  background: var(--bg-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.1);
  outline: none;
}

/* ============================================
   EN: Glass Modal/Dialog
   VI: Glass Modal/Dialog
   ============================================ */

/**
 * Glass modal - X.ai minimal style
 * Reduced blur for cleaner appearance
 */
.glass-modal {
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border: 1px solid var(--glass-border-default);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   EN: Glass Navigation
   VI: Glass Navigation
   ============================================ */

/**
 * Glass navigation bar - X.ai clean style
 * Minimal blur, clean borders
 */
.glass-nav {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(var(--glass-blur-md)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(150%);
  border-bottom: 1px solid var(--glass-border-subtle);
}

/* ============================================
   EN: Glass Sidebar
   VI: Glass Sidebar
   ============================================ */

/**
 * Glass sidebar with medium blur
 * Suitable for side panels, drawers
 */
.glass-sidebar {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border-right: 1px solid var(--glass-border-default);
}

/* ============================================
   EN: Glass Badge/Chip
   VI: Glass Badge/Chip
   ============================================ */

/**
 * Small glass badge or chip
 * Use for tags, labels, status indicators
 */
.glass-badge {
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border-subtle);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  transition: all var(--duration-fast) var(--ease-snap);
}

.glass-badge:hover {
  background: var(--glass-bg-default);
  border-color: var(--glass-border-default);
}

/* ============================================
   EN: Glass Overlay (for modals/dialogs backdrop)
   VI: Glass Overlay (cho backdrop của modal/dialog)
   ============================================ */

/**
 * Full-screen glass overlay - X.ai minimal
 * Reduced blur for performance
 */
.glass-overlay {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
}

/* ============================================
   EN: Glass Dropdown
   VI: Glass Dropdown
   ============================================ */

/**
 * Glass dropdown menu - X.ai minimal
 */
.glass-dropdown {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border-default);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
}

/* ============================================
   EN: Utility Modifiers
   VI: Các modifier tiện ích
   ============================================ */

/**
 * Extra subtle glass effect
 */
.glass-subtle {
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border-subtle);
}

/**
 * Strong glass effect (use sparingly)
 */
.glass-strong {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border: 1px solid var(--glass-border-hover);
  box-shadow: var(--glass-shadow-lg), var(--glass-shadow-inset);
}

/**
 * No border variant
 */
.glass-no-border {
  border: none;
}

/**
 * No shadow variant - prefer this for minimalism
 */
.glass-no-shadow {
  box-shadow: none;
}

/* ============================================
   EN: Responsive Variants (Optional)
   VI: Các biến thể responsive (Tùy chọn)
   ============================================ */

/**
 * Reduce glass effects on mobile for performance
 */
@media (max-width: 768px) {

  .glass-card,
  .glass-modal,
  .glass-nav {
    backdrop-filter: blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  }
}

/* ============================================
   EN: Animation Classes
   VI: Các class animation
   ============================================ */

/**
 * Glass appear animation - X.ai snappy
 */
@keyframes glass-appear {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.glass-appear {
  animation: glass-appear var(--duration-fast) var(--ease-snap);
}

/**
 * Glass slide in from top - X.ai snappy
 */
@keyframes glass-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glass-slide-down {
  animation: glass-slide-down var(--duration-fast) var(--ease-snap);
}