@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

/* ============================================
   SHARED UI BASE DESIGN SYSTEM
   Tailwind CSS 4.1+ with Product Theming Support

   This CSS file provides the base design system for all
   hospitality SaaS products. Product-specific colors are
   defined via CSS custom properties (--product-primary-*, etc.)
   that can be overridden by product theme files.
   ============================================ */

@theme {
  /* ============================================
     PRIMARY COLORS - Product Themeable
     These reference --product-primary-* variables with fallbacks
     Products override --product-primary-* in their theme CSS
     ============================================ */
  --color-primary-50: var(--product-primary-50, oklch(0.99 0.03 90));
  --color-primary-100: var(--product-primary-100, oklch(0.97 0.06 90));
  --color-primary-200: var(--product-primary-200, oklch(0.94 0.10 90));
  --color-primary-300: var(--product-primary-300, oklch(0.92 0.14 90));
  --color-primary-400: var(--product-primary-400, oklch(0.90 0.16 90));
  --color-primary-500: var(--product-primary-500, oklch(0.85 0.16 90));
  --color-primary-600: var(--product-primary-600, oklch(0.75 0.15 90));
  --color-primary-700: var(--product-primary-700, oklch(0.62 0.13 90));
  --color-primary-800: var(--product-primary-800, oklch(0.50 0.11 90));
  --color-primary-900: var(--product-primary-900, oklch(0.38 0.08 90));
  --color-primary-950: var(--product-primary-950, oklch(0.28 0.06 90));

  /* ============================================
     ACCENT COLORS - Product Themeable
     Secondary/contrast color for dark panels
     ============================================ */
  --color-accent-50: var(--product-accent-50, oklch(0.97 0.005 60));
  --color-accent-100: var(--product-accent-100, oklch(0.93 0.01 60));
  --color-accent-200: var(--product-accent-200, oklch(0.86 0.015 60));
  --color-accent-300: var(--product-accent-300, oklch(0.75 0.02 60));
  --color-accent-400: var(--product-accent-400, oklch(0.55 0.02 60));
  --color-accent-500: var(--product-accent-500, oklch(0.40 0.02 60));
  --color-accent-600: var(--product-accent-600, oklch(0.32 0.015 60));
  --color-accent-700: var(--product-accent-700, oklch(0.26 0.015 60));
  --color-accent-800: var(--product-accent-800, oklch(0.22 0.01 60));
  --color-accent-900: var(--product-accent-900, oklch(0.18 0.01 60));
  --color-accent-950: var(--product-accent-950, oklch(0.14 0.008 60));

  /* ============================================
     SURFACE COLORS - Shared across products
     Warm cream/beige tones for backgrounds
     ============================================ */
  --color-surface-50: oklch(0.985 0.008 80);
  --color-surface-100: oklch(0.97 0.012 80);
  --color-surface-200: oklch(0.94 0.016 80);
  --color-surface-300: oklch(0.88 0.02 80);
  --color-surface-400: oklch(0.70 0.02 80);
  --color-surface-500: oklch(0.55 0.015 80);
  --color-surface-600: oklch(0.42 0.01 80);
  --color-surface-700: oklch(0.32 0.008 60);
  --color-surface-800: oklch(0.22 0.008 60);
  --color-surface-900: oklch(0.16 0.008 60);
  --color-surface-950: oklch(0.12 0.006 60);

  /* ============================================
     SEMANTIC COLORS - Shared across products
     Success, Warning, Danger - WCAG AA Compliant
     ============================================ */
  --color-success-50: oklch(0.97 0.02 150);
  --color-success-100: oklch(0.93 0.04 150);
  --color-success-500: oklch(0.55 0.16 150);
  --color-success-600: oklch(0.48 0.15 150);
  --color-success-700: oklch(0.40 0.13 150);

  --color-warning-50: oklch(0.98 0.02 70);
  --color-warning-100: oklch(0.95 0.05 70);
  --color-warning-500: oklch(0.72 0.18 70);
  --color-warning-600: oklch(0.65 0.17 70);
  --color-warning-700: oklch(0.55 0.15 70);

  --color-danger-50: oklch(0.97 0.02 25);
  --color-danger-100: oklch(0.93 0.05 25);
  --color-danger-200: oklch(0.85 0.10 25);
  --color-danger-400: oklch(0.65 0.18 25);
  --color-danger-500: oklch(0.55 0.20 25);
  --color-danger-600: oklch(0.48 0.20 25);
  --color-danger-700: oklch(0.40 0.18 25);

  /* Custom Animations */
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-fade-in-up: fade-in-up 0.4s ease-out;
  --animate-fade-in-down: fade-in-down 0.4s ease-out;
  --animate-slide-in-left: slide-in-left 0.3s ease-out;
  --animate-slide-in-right: slide-in-right 0.3s ease-out;
  --animate-scale-in: scale-in 0.2s ease-out;
  --animate-bounce-in: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animate-shimmer: shimmer 2s infinite linear;
  --animate-pulse-soft: pulse-soft 2s infinite ease-in-out;
  --animate-spin-slow: spin 3s linear infinite;

  /* Transition Durations */
  --transition-duration-fast: 150ms;
  --transition-duration-normal: 250ms;
  --transition-duration-slow: 400ms;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;

  /* Shadows - Softer, warmer shadows */
  --shadow-soft: 0 2px 8px -2px oklch(0.3 0.02 80 / 0.08), 0 4px 16px -4px oklch(0.3 0.02 80 / 0.06);
  --shadow-medium: 0 4px 16px -2px oklch(0.3 0.02 80 / 0.1), 0 8px 32px -4px oklch(0.3 0.02 80 / 0.08);
  --shadow-strong: 0 8px 32px -4px oklch(0.3 0.02 80 / 0.12), 0 16px 48px -8px oklch(0.3 0.02 80 / 0.1);
  --shadow-glow-primary: 0 0 24px oklch(0.70 0.16 85 / 0.35);
  --shadow-glow-accent: 0 0 24px oklch(0.40 0.02 60 / 0.25);
  --shadow-card: 0 1px 3px oklch(0.3 0.02 80 / 0.06), 0 6px 16px -4px oklch(0.3 0.02 80 / 0.08);
  --shadow-elevated: 0 4px 20px -2px oklch(0.3 0.02 80 / 0.12), 0 12px 40px -8px oklch(0.3 0.02 80 / 0.1);

  /* Font Families */
  --font-sans: "Nunito", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-heading: "Quicksand", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bounce-in {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ============================================
   DARK MODE THEME OVERRIDES
   ============================================ */

@variant dark (&:where(.dark, .dark *));

/* ============================================
   BASE STYLES
   ============================================ */

@layer base {
  * {
    outline: none;
  }

  html {
    @apply antialiased;
    scroll-behavior: smooth;
  }

  body {
    @apply bg-surface-50 text-surface-900;
    @apply transition-colors duration-normal;
  }

  .dark body {
    @apply bg-surface-950 text-surface-100;
  }

  /* Focus styles - only for interactive elements */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-surface-50;
  }

  .dark a:focus-visible,
  .dark button:focus-visible,
  .dark input:focus-visible,
  .dark select:focus-visible,
  .dark textarea:focus-visible,
  .dark [tabindex]:focus-visible {
    @apply ring-offset-surface-950;
  }

  /* Remove focus outline and ring from non-interactive elements */
  *:focus {
    outline: none;
  }

  /* Explicitly remove focus ring from headings, paragraphs, divs, sections */
  h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
  p:focus, div:focus, section:focus, article:focus, main:focus,
  span:focus, label:focus,
  h1:focus-visible, h2:focus-visible, h3:focus-visible, h4:focus-visible, h5:focus-visible, h6:focus-visible,
  p:focus-visible, div:focus-visible, section:focus-visible, article:focus-visible, main:focus-visible,
  span:focus-visible, label:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: none !important;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-surface-100;
  }

  .dark ::-webkit-scrollbar-track {
    @apply bg-surface-900;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-surface-400 rounded-full;
  }

  .dark ::-webkit-scrollbar-thumb {
    @apply bg-surface-600;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-surface-500;
  }

  /* Selection styling */
  ::selection {
    @apply bg-primary-500/20 text-primary-900;
  }

  .dark ::selection {
    @apply text-primary-100;
  }

  /* Typography */
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight text-surface-900;
    font-family: "Quicksand", ui-sans-serif, system-ui, sans-serif;
  }

  .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    @apply text-surface-100;
  }

  h1 { @apply text-3xl md:text-4xl; }
  h2 { @apply text-2xl md:text-3xl; }
  h3 { @apply text-xl md:text-2xl; }
  h4 { @apply text-lg md:text-xl; }
  h5 { @apply text-base md:text-lg; }
  h6 { @apply text-sm md:text-base; }

  a {
    @apply text-primary-600 transition-colors duration-fast;
  }

  a:hover {
    @apply text-primary-700;
  }

  .dark a {
    @apply text-primary-400;
  }

  .dark a:hover {
    @apply text-primary-300;
  }
}

/* ============================================
   COMPONENT STYLES (Pure CSS for Tailwind 4.x)
   ============================================ */

/* Card Component - Warm, elevated style */
.card {
  @apply bg-white rounded-2xl;
  box-shadow: var(--shadow-card);
  @apply border border-surface-100;
  @apply transition-all duration-normal;
}

.dark .card {
  @apply bg-surface-900 border-surface-800;
}

.card:hover {
  box-shadow: var(--shadow-elevated);
}

/* Card Dark Variant - For contrasting panels like Session History */
.card-dark {
  @apply bg-accent-900 rounded-2xl text-white;
  box-shadow: var(--shadow-medium);
  @apply transition-all duration-normal;
}

.card-dark:hover {
  box-shadow: var(--shadow-strong);
}

/* Card Warm - Cream/beige background card */
.card-warm {
  @apply rounded-2xl;
  background: linear-gradient(135deg, oklch(0.98 0.015 80) 0%, oklch(0.96 0.02 85) 100%);
  box-shadow: var(--shadow-card);
  @apply border border-surface-200/50;
  @apply transition-all duration-normal;
}

.card-warm:hover {
  box-shadow: var(--shadow-elevated);
}

/* Stat Card - Large number displays */
.stat-card {
  @apply bg-white rounded-2xl p-6;
  box-shadow: var(--shadow-card);
  @apply border border-surface-100;
  @apply transition-all duration-normal;
}

.stat-card:hover {
  box-shadow: var(--shadow-elevated);
  @apply -translate-y-0.5;
}

.stat-value {
  @apply text-4xl font-bold text-surface-900 tracking-tight;
  font-family: "Quicksand", ui-sans-serif, system-ui, sans-serif;
}

.stat-label {
  @apply text-sm font-medium text-surface-500 mt-1;
}

.dark .stat-card {
  @apply bg-surface-900 border-surface-800;
}

.dark .stat-value {
  @apply text-surface-100;
}

/* Button Base Styles */
.btn {
  @apply inline-flex items-center justify-center gap-2;
  @apply px-4 py-2 rounded-lg font-bold text-sm uppercase;
  @apply transition-all duration-fast;
}

.btn:focus-visible {
  @apply outline-none ring-2 ring-offset-2;
}

.btn:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Primary Button - Uses product primary color */
.btn-primary {
  @apply inline-flex items-center justify-center gap-2;
  @apply px-5 py-2.5 rounded-xl font-bold text-sm uppercase;
  @apply transition-all duration-fast;
  @apply bg-primary-500 text-surface-900;
  box-shadow: 0 2px 8px oklch(0.70 0.16 85 / 0.25);
}

.btn-primary:hover {
  @apply bg-primary-400;
  box-shadow: 0 4px 12px oklch(0.70 0.16 85 / 0.35);
  @apply -translate-y-0.5;
}

.btn-primary:active {
  @apply bg-primary-600 translate-y-0;
}

.btn-primary:focus-visible {
  @apply outline-none ring-2 ring-primary-400 ring-offset-2;
}

.btn-primary:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Button Dark - For dark backgrounds */
.btn-dark {
  @apply inline-flex items-center justify-center gap-2;
  @apply px-5 py-2.5 rounded-xl font-bold text-sm uppercase;
  @apply transition-all duration-fast;
  @apply bg-accent-900 text-white;
  box-shadow: var(--shadow-soft);
}

.btn-dark:hover {
  @apply bg-accent-800;
  box-shadow: var(--shadow-medium);
  @apply -translate-y-0.5;
}

.btn-dark:active {
  @apply bg-accent-950 translate-y-0;
}

.btn-dark:focus-visible {
  @apply outline-none ring-2 ring-accent-500 ring-offset-2;
}

/* Secondary Button */
.btn-secondary {
  @apply inline-flex items-center justify-center gap-2;
  @apply px-4 py-2 rounded-lg font-bold text-sm uppercase;
  @apply transition-all duration-fast;
  @apply bg-surface-100 text-surface-700;
}

.dark .btn-secondary {
  @apply bg-surface-800 text-surface-300;
}

.btn-secondary:hover {
  @apply bg-surface-200;
}

.dark .btn-secondary:hover {
  @apply bg-surface-700;
}

.btn-secondary:focus-visible {
  @apply outline-none ring-2 ring-surface-500 ring-offset-2;
}

.btn-secondary:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Ghost Button */
.btn-ghost {
  @apply items-center justify-center gap-2;
  @apply px-4 py-2 rounded-lg font-bold text-sm uppercase;
  @apply transition-all duration-fast;
  @apply bg-transparent text-surface-700;
}

.dark .btn-ghost {
  @apply text-surface-300;
}

.btn-ghost:hover {
  @apply bg-surface-100;
}

.dark .btn-ghost:hover {
  @apply bg-surface-800;
}

.btn-ghost:focus-visible {
  @apply outline-none ring-2 ring-surface-500 ring-offset-2;
}

.btn-ghost:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Danger Button */
.btn-danger {
  @apply inline-flex items-center justify-center gap-2;
  @apply px-4 py-2 rounded-lg font-bold text-sm uppercase;
  @apply transition-all duration-fast;
  @apply bg-danger-600 text-white;
}

.btn-danger:hover {
  @apply bg-danger-700;
}

.btn-danger:focus-visible {
  @apply outline-none ring-2 ring-danger-500 ring-offset-2;
}

.btn-danger:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Input Base */
.input {
  @apply w-full px-3 py-2 rounded-lg text-sm;
  @apply bg-white border border-surface-300;
  @apply text-surface-900 placeholder:text-surface-500;
  @apply transition-all duration-fast;
}

.dark .input {
  @apply bg-surface-900 border-surface-700;
  @apply text-surface-100;
}

.input:focus {
  @apply border-primary-500 ring-2 ring-primary-500/20;
}

/* Badge Component */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  @apply transition-colors duration-fast;
}

.badge-primary {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  @apply bg-primary-100 text-primary-700;
}

.dark .badge-primary {
  @apply bg-primary-900/30 text-primary-300;
}

.badge-success {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  @apply bg-success-50 text-success-700;
}

.dark .badge-success {
  @apply bg-success-500/20 text-success-500;
}

.badge-warning {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  @apply bg-warning-50 text-warning-700;
}

.dark .badge-warning {
  @apply bg-warning-500/20 text-warning-500;
}

.badge-danger {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  @apply bg-danger-50 text-danger-700;
}

.dark .badge-danger {
  @apply bg-danger-500/20 text-danger-500;
}

/* Navigation Item - Pill style */
.nav-item {
  @apply flex items-center gap-3 px-4 py-2.5 rounded-full text-sm font-bold uppercase;
  @apply text-surface-600 transition-all duration-fast;
}

.dark .nav-item {
  @apply text-surface-400;
}

.nav-item:hover {
  @apply bg-surface-100 text-surface-900;
}

.dark .nav-item:hover {
  @apply bg-surface-800 text-surface-100;
}

/* Active nav state via Blazor NavLink */
.nav-item.active {
  @apply bg-accent-900 text-white;
}

.dark .nav-item.active {
  @apply bg-primary-500 text-surface-900;
}

.nav-item-active {
  @apply flex items-center gap-3 px-4 py-2.5 rounded-full text-sm font-bold uppercase;
  @apply bg-accent-900 text-white;
}

.dark .nav-item-active {
  @apply bg-primary-500 text-surface-900;
}

.nav-item-active:hover {
  @apply bg-accent-800;
}

.dark .nav-item-active:hover {
  @apply bg-primary-400;
}

/* Collapsed Navigation Item - Icon only */
.nav-item-collapsed {
  @apply flex items-center justify-center p-3 rounded-xl;
  @apply text-surface-600 transition-all duration-fast;
}

.dark .nav-item-collapsed {
  @apply text-surface-400;
}

.nav-item-collapsed:hover {
  @apply bg-surface-100 text-surface-900;
}

.dark .nav-item-collapsed:hover {
  @apply bg-surface-800 text-surface-100;
}

/* Active state for collapsed nav */
.nav-item-collapsed.active {
  @apply bg-accent-900 text-white;
}

.dark .nav-item-collapsed.active {
  @apply bg-primary-500 text-surface-900;
}

/* Top Navigation - Pill group style */
.nav-pills {
  @apply items-center gap-1 p-1 rounded-full bg-surface-100;
}

.dark .nav-pills {
  @apply bg-surface-800;
}

.nav-pill {
  @apply px-4 py-2 rounded-full text-xs font-extrabold text-surface-700 uppercase tracking-wide;
  @apply transition-all duration-fast;
}

.dark .nav-pill {
  @apply text-white;
}

.nav-pill:hover {
  @apply text-surface-900;
}

.dark .nav-pill:hover {
  @apply text-white/80;
}

.nav-pill.active {
  @apply bg-accent-900 text-white shadow-soft;
}

.dark .nav-pill.active {
  @apply bg-primary-500 text-surface-900;
}

/* Navigation Link - Global style for header nav links (Dashboard, etc.) */
.nav-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
  @apply text-surface-600 transition-all duration-fast;
}

.dark .nav-link {
  @apply text-surface-400;
}

.nav-link:hover {
  @apply text-surface-900;
}

.dark .nav-link:hover {
  @apply text-surface-100;
}

/* Sidebar */
.sidebar {
  @apply flex-col h-full;
  @apply bg-white/70 backdrop-blur-xl border-r border-surface-200/50;
  position: relative;
  z-index: 10;
}

.dark .sidebar {
  @apply bg-surface-900/80 backdrop-blur-xl border-surface-800/50;
}

/* Container utilities */
.container-narrow {
  @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
}

.container-wide {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* ============================================
   UTILITY EXTENSIONS
   ============================================ */

@layer utilities {
  /* Animation utilities */
  .animate-in {
    animation: fade-in 0.3s ease-out;
  }

  /* Glass morphism */
  .glass {
    @apply bg-white/80 backdrop-blur-lg;
    @apply border border-white/20;
  }

  .dark .glass {
    @apply bg-surface-900/80 border-surface-700/50;
  }

  /* Gradient utilities - Warm tones */
  .gradient-primary {
    @apply bg-gradient-to-r from-primary-400 to-primary-500;
  }

  .gradient-accent {
    @apply bg-gradient-to-br from-accent-800 to-accent-950;
  }

  .gradient-mixed {
    @apply bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600;
  }

  /* Warm background gradients matching reference design */
  .gradient-warm {
    background: linear-gradient(135deg, oklch(0.98 0.015 80) 0%, oklch(0.95 0.025 85) 50%, oklch(0.92 0.03 80) 100%);
  }

  .gradient-warm-subtle {
    background: linear-gradient(180deg, oklch(0.985 0.01 80) 0%, oklch(0.97 0.018 85) 100%);
  }

  .gradient-warm-radial {
    background: radial-gradient(ellipse at top right, oklch(0.95 0.03 85) 0%, oklch(0.98 0.01 80) 50%, oklch(0.985 0.008 80) 100%);
  }

  /* Blurred background with floating color orbs - creates depth for components */
  .bg-blur-warm {
    position: relative;
    background: transparent;
  }

  /* Ensure all direct children of bg-blur-warm appear above the pseudo-element backgrounds */
  .bg-blur-warm > * {
    position: relative;
    z-index: 1;
  }

  .bg-blur-warm::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      /* Base warm cream - solid foundation */
      linear-gradient(180deg, oklch(0.98 0.018 82) 0%, oklch(0.96 0.025 80) 100%);
  }

  .bg-blur-warm::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      /* Top-right warm amber blob - more visible */
      radial-gradient(ellipse 70% 60% at 85% 10%, oklch(0.88 0.10 85 / 0.7) 0%, transparent 65%),
      /* Center-left soft peach blob */
      radial-gradient(ellipse 60% 70% at 10% 45%, oklch(0.90 0.08 75 / 0.55) 0%, transparent 55%),
      /* Bottom-right golden glow */
      radial-gradient(ellipse 60% 50% at 90% 85%, oklch(0.85 0.09 80 / 0.5) 0%, transparent 60%),
      /* Large ambient warm fill */
      radial-gradient(ellipse 120% 100% at 50% 30%, oklch(0.94 0.04 82 / 0.7) 0%, transparent 70%);
    filter: blur(60px);
  }

  /* Alternative: More subtle blur for layouts that need less visual noise */
  .bg-blur-warm-subtle {
    position: relative;
    background:
      /* Golden glow top-right */
      radial-gradient(ellipse 80% 60% at 90% 0%, oklch(0.92 0.12 90 / 0.5) 0%, transparent 50%),
      /* Soft warm glow left */
      radial-gradient(ellipse 60% 70% at 0% 50%, oklch(0.94 0.08 90 / 0.4) 0%, transparent 45%),
      /* Bottom center accent */
      radial-gradient(ellipse 80% 50% at 50% 100%, oklch(0.90 0.10 90 / 0.35) 0%, transparent 40%),
      /* Base warm cream gradient */
      linear-gradient(135deg, oklch(0.99 0.015 90) 0%, oklch(0.97 0.02 88) 50%, oklch(0.98 0.012 85) 100%);
    background-attachment: fixed;
  }

  /* Dark mode variants */
  .dark .bg-blur-warm,
  .dark .bg-blur-warm-subtle {
    background: transparent;
  }

  .dark .bg-blur-warm::before {
    background:
      /* Dark base */
      linear-gradient(180deg, oklch(0.14 0.008 60) 0%, oklch(0.12 0.006 60) 100%);
  }

  .dark .bg-blur-warm::after {
    background:
      /* Muted warm accents for dark mode */
      radial-gradient(ellipse 60% 50% at 85% 15%, oklch(0.25 0.04 85 / 0.3) 0%, transparent 70%),
      radial-gradient(ellipse 50% 60% at 15% 40%, oklch(0.20 0.02 80 / 0.25) 0%, transparent 60%),
      radial-gradient(ellipse 70% 40% at 50% 90%, oklch(0.22 0.03 85 / 0.2) 0%, transparent 65%);
    filter: blur(50px);
  }

  .dark .bg-blur-warm-subtle {
    background:
      /* Muted golden glow for dark mode */
      radial-gradient(ellipse 80% 60% at 90% 0%, oklch(0.25 0.06 90 / 0.3) 0%, transparent 50%),
      radial-gradient(ellipse 60% 70% at 0% 50%, oklch(0.22 0.04 90 / 0.25) 0%, transparent 45%),
      radial-gradient(ellipse 80% 50% at 50% 100%, oklch(0.20 0.05 90 / 0.2) 0%, transparent 40%),
      /* Dark base gradient */
      linear-gradient(135deg, oklch(0.14 0.01 70) 0%, oklch(0.12 0.012 75) 50%, oklch(0.13 0.008 65) 100%);
    background-attachment: fixed;
  }

  /* Text gradient */
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-primary-500;
  }

  /* Loading skeleton */
  .skeleton {
    @apply bg-gradient-to-r from-surface-200 via-surface-100 to-surface-200;
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
  }

  .dark .skeleton {
    @apply from-surface-800 via-surface-700 to-surface-800;
  }

  /* Hide scrollbar but keep functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================
   PROGRESS & DATA VISUALIZATION COMPONENTS
   ============================================ */

/* Circular Progress Indicator */
.progress-ring {
  @apply relative inline-flex items-center justify-center;
}

.progress-ring svg {
  transform: rotate(-90deg);
}

.progress-ring-bg {
  stroke: oklch(0.92 0.016 80);
  fill: none;
}

.dark .progress-ring-bg {
  stroke: oklch(0.25 0.01 60);
}

.progress-ring-fill {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.progress-ring-fill-primary {
  stroke: oklch(0.70 0.16 85);
}

.progress-ring-fill-accent {
  stroke: oklch(0.32 0.015 60);
}

.progress-ring-fill-success {
  stroke: oklch(0.55 0.16 150);
}

.progress-ring-fill-warning {
  stroke: oklch(0.72 0.18 70);
}

.progress-ring-fill-danger {
  stroke: oklch(0.55 0.20 25);
}

.progress-ring-value {
  @apply absolute inset-0 flex items-center justify-center;
  @apply text-2xl font-bold text-surface-900;
  font-family: "Quicksand", ui-sans-serif, system-ui, sans-serif;
}

.dark .progress-ring-value {
  @apply text-surface-100;
}

/* Linear Progress Bar */
.progress-bar {
  @apply h-2 rounded-full overflow-hidden;
  @apply bg-surface-200;
}

.dark .progress-bar {
  @apply bg-surface-800;
}

.progress-bar-fill {
  @apply h-full rounded-full transition-all duration-slow;
}

.progress-bar-fill-primary {
  @apply bg-primary-500;
}

.progress-bar-fill-accent {
  @apply bg-accent-600;
}

.progress-bar-fill-success {
  @apply bg-success-500;
}

/* ============================================
   DATA TABLE COMPONENT
   ============================================ */

.data-table {
  @apply w-full;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.data-table thead {
  @apply border-b-0;
}

.data-table th {
  @apply px-4 py-3 text-left text-xs font-semibold text-surface-600 dark:text-surface-300 uppercase tracking-wide;
  @apply bg-transparent;
}

.data-table tbody tr {
  @apply transition-colors duration-fast cursor-pointer;
  @apply bg-surface-50 dark:bg-surface-800/30;
}

.data-table tbody tr td:first-child {
  @apply rounded-l-xl;
}

.data-table tbody tr td:last-child {
  @apply rounded-r-xl;
}

.data-table tbody tr:hover {
  @apply bg-surface-100 dark:bg-surface-800;
}

.data-table tbody tr.selected,
.data-table tbody tr[data-selected="true"] {
  @apply bg-primary-400;
}

.data-table tbody tr.selected:hover,
.data-table tbody tr[data-selected="true"]:hover {
  @apply bg-primary-500;
}

.data-table tbody tr.selected td,
.data-table tbody tr[data-selected="true"] td {
  @apply text-surface-900 dark:text-surface-900;
}

.data-table td {
  @apply px-4 py-3.5 text-sm text-surface-800 dark:text-surface-200;
}

/* Table wrapper with card styling */
.table-card {
  @apply bg-white dark:bg-surface-900 rounded-2xl overflow-hidden;
  box-shadow: var(--shadow-card);
  @apply border border-surface-100 dark:border-surface-800;
}

.table-content {
  @apply px-4 py-4;
}

/* ============================================
   QUICKGRID COMPONENT STYLES
   ============================================ */

.quickgrid-weather {
  @apply w-full;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.quickgrid-weather thead {
  @apply border-b-0;
}

.quickgrid-weather th {
  @apply px-4 py-3 text-left text-xs font-semibold text-surface-600 dark:text-surface-300 uppercase tracking-wide;
  @apply bg-transparent;
}

.quickgrid-weather th .col-title {
  @apply flex items-center gap-1 cursor-pointer;
  @apply hover:text-primary-600 dark:hover:text-primary-400 transition-colors;
}

.quickgrid-weather th[aria-sort="ascending"] .col-title::after {
  content: "▲";
  @apply opacity-100 text-primary-500;
}

.quickgrid-weather th[aria-sort="descending"] .col-title::after {
  content: "▼";
  @apply opacity-100 text-primary-500;
}

.quickgrid-weather tbody tr {
  @apply transition-colors duration-fast cursor-pointer;
  @apply bg-surface-50 dark:bg-surface-800/30;
}

.quickgrid-weather tbody tr td:first-child {
  @apply rounded-l-xl;
}

.quickgrid-weather tbody tr td:last-child {
  @apply rounded-r-xl;
}

.quickgrid-weather tbody tr:hover {
  @apply bg-surface-100 dark:bg-surface-800;
}

.quickgrid-weather tbody tr.selected {
  background-color: var(--color-primary-400) !important;
}

.quickgrid-weather tbody tr.selected:hover {
  background-color: var(--color-primary-500) !important;
}

.quickgrid-weather tbody tr.selected td {
  color: var(--color-surface-900) !important;
}

.quickgrid-weather td {
  @apply px-4 py-3.5 text-sm text-surface-800 dark:text-surface-200;
}

/* ============================================
   BLAZOR-SPECIFIC STYLES
   ============================================ */

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  @apply bg-danger-600 text-white text-center py-3 px-4;
  animation: fade-in-up 0.4s ease-out;
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
  @apply text-white underline ml-4;
}

#blazor-error-ui .reload:hover,
#blazor-error-ui .dismiss:hover {
  @apply no-underline;
}

.blazor-error #blazor-error-ui {
  display: block;
}

/* ============================================
   PRODUCT CATALOG BAR STYLES
   ============================================ */

.product-catalog-open #theme-root {
  padding-top: 72px;
  transition: padding-top 0.2s ease-out;
}

#product-catalog-portal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
}

#product-catalog-portal > * {
  pointer-events: auto;
}

.product-bar {
  @apply bg-surface-900 border-b border-surface-700;
  box-shadow: var(--shadow-strong);
  position: relative;
  z-index: 9999;
}

.dark .product-bar {
  @apply bg-surface-950 border-surface-800;
}

.product-icon {
  @apply flex items-center justify-center px-3 py-2 rounded-xl;
  @apply transition-all duration-fast;
}

.product-icon:hover {
  @apply bg-surface-800;
}

.dark .product-icon:hover {
  @apply bg-surface-800/80;
}

.product-icon:hover img {
  transform: scale(1.05);
}

.product-icon-mobile {
  @apply w-10 h-10 block transition-transform duration-fast;
}

.product-icon-desktop {
  @apply h-8 hidden transition-transform duration-fast;
}

@media (min-width: 768px) {
  .product-icon-mobile {
    @apply hidden;
  }
  .product-icon-desktop {
    @apply block;
  }
}

.product-bar-backdrop {
  @apply fixed inset-0 bg-surface-900/30;
  z-index: 9998;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.dark .product-bar-backdrop {
  @apply bg-surface-950/50;
}

.waffle-btn {
  @apply flex items-center justify-center w-10 h-10 rounded-lg;
  @apply transition-colors duration-fast;
}

.waffle-btn:hover {
  @apply bg-surface-100;
}

.dark .waffle-btn:hover {
  @apply bg-surface-800;
}

.waffle-btn-dark {
  @apply flex items-center justify-center w-10 h-10 rounded-lg;
  @apply transition-colors duration-fast;
}

.waffle-btn-dark:hover {
  @apply bg-surface-800;
}