/* Import Inter font from Google Fonts - Enhanced weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* CSS Variables */
:root {
  /* Professional SaaS color palette - Slate + Teal */
  --background: 210 20% 98%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  /* Primary - Deep slate blue */
  --primary: 222 47% 11%;
  --primary-foreground: 210 40% 98%;

  /* Secondary - Light slate */
  --secondary: 215 20% 95%;
  --secondary-foreground: 222 47% 11%;

  /* Muted */
  --muted: 215 20% 95%;
  --muted-foreground: 215 16% 47%;

  /* Accent - Teal */
  --accent: 173 80% 40%;
  --accent-foreground: 0 0% 100%;

  /* Success - Green */
  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  /* Warning - Amber */
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;

  /* Destructive */
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 173 80% 40%;

  --radius: 0.625rem;

  /* Sidebar */
  --sidebar-background: 222 47% 11%;
  --sidebar-foreground: 215 20% 85%;
  --sidebar-primary: 173 80% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 222 47% 18%;
  --sidebar-accent-foreground: 215 20% 95%;
  --sidebar-border: 222 47% 18%;
  --sidebar-ring: 173 80% 40%;

  /* Chart colors */
  --chart-1: 173 80% 40%;
  --chart-2: 199 89% 48%;
  --chart-3: 142 76% 36%;
  --chart-4: 38 92% 50%;
  --chart-5: 262 83% 58%;

  /* Premium gradients */
  --gradient-primary: linear-gradient(135deg, hsl(173 80% 40%), hsl(199 89% 48%));
  --gradient-accent: linear-gradient(135deg, hsl(173 80% 40%), hsl(173 80% 50%));
  --gradient-hero: linear-gradient(135deg, hsl(222 47% 11% / 0.95), hsl(173 80% 40% / 0.8));
  --gradient-card: linear-gradient(135deg, hsl(0 0% 100%), hsl(210 20% 99%));

  /* Shadow scales - Premium depth */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-accent: 0 10px 25px -5px rgba(20, 184, 166, 0.3);

  /* Animation durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* Spacing scale enhancements */
  --spacing-hero: 6rem;
  --spacing-section: 5rem;
  --spacing-card: 2rem;

  /* New Professional Color Palette - Glassmorphism Design */
  --color-primary: 99 102 241; /* #6366F1 - Indigo */
  --color-secondary: 139 92 246; /* #8B5CF6 - Purple */
  --color-success: 16 185 129; /* #10B981 - Emerald Green */
  --color-warning: 245 158 11; /* #F59E0B - Amber */
  --color-error: 239 68 68; /* #EF4444 - Red */
  --color-info: 59 130 246; /* #3B82F6 - Blue */

  /* Marketplace Premium Dark Theme (Maroon/Burgundy) */
  --marketplace-bg: 0 0% 7%; /* Darker base */
  --marketplace-primary: 345 50% 15%; /* Deep Burgundy */
  --marketplace-accent: 35 100% 80%; /* #ffd599 */
  --marketplace-card-glass: 0 0% 100% / 0.05;
  --marketplace-gradient: linear-gradient(135deg, #1a0a0a 0%, #2d0d0d 100%);

  /* Background Colors */
  --bg-base: 248 250 252; /* #F8FAFC - Slate 50 */
  --bg-card-glass: 255 255 255 / 0.7; /* Glassmorphism base */
  --bg-overlay-dark: 15 23 42 / 0.6; /* Dark overlay */

  /* Text Colors */
  --text-primary: 15 23 42; /* #0F172A - Slate 900 */
  --text-secondary: 71 85 105; /* #475569 - Slate 600 */
  --text-muted: 148 163 184; /* #94A3B8 - Slate 400 */

  /* Glassmorphism Shadows */
  --glass-shadow-sm: 0 2px 8px 0 rgba(31, 38, 135, 0.1);
  --glass-shadow-md: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --glass-shadow-lg: 0 16px 48px 0 rgba(31, 38, 135, 0.2);
  --glass-shadow-xl: 0 24px 64px 0 rgba(31, 38, 135, 0.25);
}

.dark {
  --background: 222 47% 7%;
  --foreground: 210 40% 98%;

  --card: 222 47% 11%;
  --card-foreground: 210 40% 98%;

  --popover: 222 47% 11%;
  --popover-foreground: 210 40% 98%;

  --primary: 210 40% 98%;
  --primary-foreground: 222 47% 11%;

  --secondary: 217 33% 17%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;

  --accent: 173 80% 40%;
  --accent-foreground: 0 0% 100%;

  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 0%;

  --destructive: 0 63% 31%;
  --destructive-foreground: 210 40% 98%;

  --border: 217 33% 17%;
  --input: 217 33% 17%;
  --ring: 173 80% 40%;

  --sidebar-background: 222 47% 7%;
  --sidebar-foreground: 215 20% 85%;
  --sidebar-primary: 173 80% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 222 47% 11%;
  --sidebar-accent-foreground: 215 20% 95%;
  --sidebar-border: 222 47% 11%;
  --sidebar-ring: 173 80% 40%;
}

/* Base styles */
* {
  border-color: hsl(var(--border));
}

html {
  font-family: 'Inter', system-ui, sans-serif;
  scroll-behavior: smooth;
}

/* Premium Typography Scale */
h1, .text-hero {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2, .text-section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3, .text-subsection-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
}

.text-stat-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.text-stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility classes */
.glass {
  background-color: hsl(var(--card) / 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--border) / 0.5);
}

.gradient-text {
  background: linear-gradient(to right, hsl(var(--accent)), hsl(var(--primary)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-accent {
  background: linear-gradient(135deg, hsl(173 80% 40%), hsl(199 89% 48%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Premium Gradient Backgrounds */
.gradient-bg-primary {
  background: var(--gradient-primary);
}

.gradient-bg-accent {
  background: var(--gradient-accent);
}

.gradient-bg-hero {
  background: var(--gradient-hero);
}

.gradient-bg-card {
  background: var(--gradient-card);
}

/* Enhanced Glassmorphism */
.glass {
  background-color: hsl(var(--card) / 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--border) / 0.5);
}

.glass-strong {
  background-color: hsl(var(--card) / 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsl(var(--border) / 0.8);
  box-shadow: var(--shadow-xl);
}

.glass-subtle {
  background-color: hsl(var(--card) / 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid hsl(var(--border) / 0.3);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: hsl(var(--muted) / 0.5);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
  background-color: hsl(var(--border));
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground) / 0.3);
}

/* Scrollbar hide utility for Glovo-style horizontal scrolling categories */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

/* Marketplace category cards: enforce rounded corners even if Tailwind utilities are purged */
.category-card {
  border-radius: 2.75rem !important;
  overflow: hidden;
}

/* Line clamp utility */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

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

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

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

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

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

@keyframes counter-up {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

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

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

@keyframes attention {
  0%, 100% {
    transform: rotate(-3deg);
    color: #000000;
  }
  50% {
    transform: rotate(3deg);
    color: #22c55e;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-slide-in {
  animation: slide-in-right 0.3s ease-out forwards;
}

.animate-pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}

.animate-attention {
  animation: attention 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-fade-in-up {
  animation: fade-in-up var(--duration-normal) ease-out forwards;
}

.animate-scale-in {
  animation: scale-in var(--duration-normal) ease-out forwards;
}

.animate-slide-in-left {
  animation: slide-in-left var(--duration-normal) ease-out forwards;
}

.animate-slide-in-right {
  animation: slide-in-right var(--duration-normal) ease-out forwards;
}

.animate-counter-up {
  animation: counter-up var(--duration-slow) ease-out forwards;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Scroll-triggered animations */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) ease-out, transform var(--duration-slow) ease-out;
}

.fade-in-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Toast animations */
@keyframes slide-in-from-top-full {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-in-from-bottom-full {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-out-to-right-full {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes fade-out-80 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}

.data-\\[state\\=open\\]\\:animate-in {
  animation: slide-in-from-top-full 0.3s ease-out;
}

.data-\\[state\\=open\\]\\:sm\\:slide-in-from-bottom-full {
  @media (min-width: 640px) {
    animation: slide-in-from-bottom-full 0.3s ease-out;
  }
}

.data-\\[state\\=closed\\]\\:animate-out {
  animation: slide-out-to-right-full 0.3s ease-out;
}

.data-\\[state\\=closed\\]\\:fade-out-80 {
  animation: fade-out-80 0.3s ease-out;
}

/* Ensure select dropdowns open downward in dialogs */
#inventory-item-dialog {
  align-items: center !important;
  justify-content: center !important;
}

#inventory-item-dialog > div {
  max-height: 90vh !important;
  margin: 1rem !important;
}

/* Force select dropdowns to open downward */
#inventory-item-dialog select {
  position: relative;
  z-index: 10;
}

/* Ensure unit dropdown opens downward */
#inventory-item-dialog #item-unit {
  position: relative;
  z-index: 10;
}

/* Task expand row animations */
#tasks-tbody tr[data-task-id] {
  border-spacing: 0;
}

.task-expand-row,
.plan-expand-row {
  display: none;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.task-expand-row.expanded,
.plan-expand-row.expanded {
  display: table-row;
  border-bottom: 1px solid hsl(var(--border)) !important;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

.task-expand-row td,
.plan-expand-row td {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  border: none !important;
}

.task-expand-btn svg,
.plan-expand-btn svg {
  transition: transform 0.3s ease-out;
}

/* Section toggle styles */
.section-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.section-toggle-btn:hover {
  opacity: 0.8;
}

.section-dropdown-icon {
  transition: transform 0.3s ease-out;
}

.section-toggle-btn[aria-expanded="true"] .section-dropdown-icon {
  transform: rotate(180deg);
}

.section-content {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 1;
}

.section-content.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

/* Range slider styling */
.task-progress-slider {
  -webkit-appearance: none;
  appearance: none;
  background: hsl(var(--muted));
  outline: none;
}

.task-progress-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: hsl(var(--accent));
  cursor: pointer;
}

.task-progress-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: hsl(var(--accent));
  cursor: pointer;
  border: none;
}

/* Marketplace distance badges and location indicators */
.business-card {
  transition: all 0.3s ease;
}

.business-card:hover {
  transform: translateY(-2px);
}

/* Distance badge styling */
.distance-badge {
  background: hsl(var(--accent) / 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Highlight closest businesses (within 2km) */
.business-card.ring-2.ring-accent\/30 {
  border-color: hsl(var(--accent) / 0.5);
  box-shadow: 0 0 0 2px hsl(var(--accent) / 0.2);
}

/* Location status indicator in search */
#location-status-indicator {
  animation: fade-in 0.3s ease-out;
}

/* Smooth transitions for location-aware features */
.location-aware {
  transition: all 0.3s ease;
}

/* QR Scanner animations */
@keyframes scan-line {
  0% {
    top: 2rem;
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    top: calc(100% - 2rem);
    opacity: 1;
  }
}

.animate-scan-line {
  animation: scan-line 2s ease-in-out infinite alternate;
}

/* QR Scanner reader styling */
#qr-reader video {
  border-radius: 1rem;
  object-fit: cover;
}

#qr-reader__dashboard {
  display: none !important;
}

#qr-reader__scan_region {
  background: transparent !important;
}

#qr-reader__header_message {
  display: none !important;
}

/* QR Scanner success animation */
@keyframes success-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#qr-success-modal > div {
  animation: success-pop 0.3s ease-out;
}

/* ============================================
   QR Scanner Dedicated Page Styles
   ============================================ */

/* Full-screen scanner page */
.qr-scanner-page {
  background: #f9fafb;
}

/* Scanner page video styling */
.qr-scanner-page #qr-reader {
  background: #e5e7eb;
  border-radius: 1rem;
  overflow: hidden;
}

.qr-scanner-page #qr-reader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 1rem;
}

/* Hide default Html5Qrcode UI elements */
.qr-scanner-page #qr-reader__dashboard,
.qr-scanner-page #qr-reader__header_message,
.qr-scanner-page #qr-reader__status_span,
.qr-scanner-page #qr-reader__dashboard_section,
.qr-scanner-page #qr-reader__dashboard_section_csr,
.qr-scanner-page #qr-reader__dashboard_section_swaplink {
  display: none !important;
}

.qr-scanner-page #qr-reader__scan_region {
  background: transparent !important;
  border: none !important;
  min-height: 100% !important;
}

.qr-scanner-page #qr-reader__scan_region > img {
  display: none !important;
}

/* Scan line glow effect - blue for light theme */
.qr-scanner-page #scan-line {
  box-shadow: 0 0 15px 3px rgba(59, 130, 246, 0.6),
              0 0 30px 6px rgba(59, 130, 246, 0.3);
}

/* Pulse animation for corner brackets */
@keyframes corner-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.qr-scanner-page .border-blue-500 {
  animation: corner-pulse 2s ease-in-out infinite;
}

/* Success modal animation */
.qr-scanner-page #scan-success-modal > div {
  animation: success-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Button hover effects */
.qr-scanner-page button {
  transition: all 0.2s ease;
}

.qr-scanner-page #retry-camera-btn:hover,
.qr-scanner-page #view-favorites-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .qr-scanner-page .max-w-sm {
    max-width: 90vw;
  }
  
  .qr-scanner-page .w-56 {
    width: 65vw;
    height: 65vw;
  }
}

/* ============================================
   Premium Component Styles
   ============================================ */

/* Premium Button Styles */
.btn-premium {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 0.625rem;
  transition: all var(--duration-normal) ease;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--duration-slow) ease;
}

.btn-premium:hover::before {
  left: 100%;
}

.btn-premium-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 0.625rem;
  transition: all var(--duration-normal) ease;
  overflow: hidden;
  border: none;
  cursor: pointer;
  background: var(--gradient-accent);
  color: white;
  box-shadow: var(--shadow-accent);
}

.btn-premium-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--duration-slow) ease;
}

.btn-premium-primary:hover::before {
  left: 100%;
}

.btn-premium-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px -5px rgba(20, 184, 166, 0.4);
}

.btn-premium-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 0.625rem;
  transition: all var(--duration-normal) ease;
  overflow: hidden;
  border: 2px solid hsl(var(--border));
  cursor: pointer;
  background: white;
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-md);
}

.btn-premium-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
  transition: left var(--duration-slow) ease;
}

.btn-premium-secondary:hover::before {
  left: 100%;
}

.btn-premium-secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: hsl(var(--accent));
}

.btn-premium-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 0.625rem;
  transition: all var(--duration-normal) ease;
  overflow: hidden;
  border: none;
  cursor: pointer;
  background: var(--gradient-accent);
  color: white;
  box-shadow: var(--shadow-xl), var(--shadow-accent);
}

.btn-premium-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left var(--duration-slow) ease;
}

.btn-premium-cta:hover::before {
  left: 100%;
}

.btn-premium-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 40px -5px rgba(20, 184, 166, 0.5);
}

/* Premium Card Components */
.premium-card {
  background: hsl(var(--card));
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) ease;
  overflow: hidden;
}

.premium-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: hsl(var(--accent) / 0.3);
}

.premium-card-gradient {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border) / 0.5);
}

.premium-card-glass {
  background: hsl(var(--card) / 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--border) / 0.5);
}

/* Statistics Display Components */
.stat-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  margin-top: 0.5rem;
}

.stat-card {
  text-align: center;
  padding: 2rem;
  border-radius: 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  transition: all var(--duration-normal) ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: hsl(var(--accent) / 0.3);
}

/* Testimonial Card Components */
.testimonial-card {
  background: hsl(var(--card));
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) ease;
  position: relative;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-size: 4rem;
  font-weight: 900;
  color: hsl(var(--accent) / 0.1);
  line-height: 1;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.testimonial-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--gradient-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.testimonial-name {
  font-weight: 700;
  font-size: 1rem;
  margin-top: 1rem;
}

.testimonial-company {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

.testimonial-rating {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.testimonial-rating svg {
  width: 1rem;
  height: 1rem;
  fill: #fbbf24;
  color: #fbbf24;
}

/* Award Badge Components */
.award-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--gradient-accent);
  color: white;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

.award-badge-outline {
  background: transparent;
  border: 2px solid hsl(var(--accent));
  color: hsl(var(--accent));
}

/* Feature Icon Containers */
.feature-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: hsl(var(--accent) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all var(--duration-normal) ease;
}

.feature-icon svg {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--accent));
}

.feature-card:hover .feature-icon {
  background: hsl(var(--accent) / 0.2);
  transform: scale(1.1);
}

/* Premium Section Spacing */
.section-spacing {
  padding: var(--spacing-section) 0;
}

.section-spacing-sm {
  padding: calc(var(--spacing-section) * 0.6) 0;
}

.section-spacing-lg {
  padding: calc(var(--spacing-section) * 1.5) 0;
}

/* Hero Section Styles */
.hero-section {
  padding: var(--spacing-hero) 0;
  position: relative;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-hero);
  opacity: 0.05;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* Loading States */
.loading-shimmer {
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 0%,
    hsl(var(--muted) / 0.5) 50%,
    hsl(var(--muted)) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Smooth Scroll Behavior */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================
   Global Premium Styling for Internal Pages
   ============================================ */

/* Enhanced Page Headers */
h1.text-2xl.font-bold,
h1.text-3xl.font-bold {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Enhanced Buttons - Auto-upgrade existing buttons */
button.bg-accent,
a.bg-accent,
button[class*="bg-accent"] {
  transition: all var(--duration-normal) ease;
  box-shadow: var(--shadow-md);
}

button.bg-accent:hover,
a.bg-accent:hover,
button[class*="bg-accent"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Enhanced Cards - Auto-upgrade existing cards */
.rounded-lg.border.bg-card,
.rounded-lg.border.bg-card.text-card-foreground {
  transition: all var(--duration-normal) ease;
}

.rounded-lg.border.bg-card:hover,
.rounded-lg.border.bg-card.text-card-foreground:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: hsl(var(--accent) / 0.3);
}

/* Enhanced Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  transition: all var(--duration-normal) ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 3px hsl(var(--accent) / 0.1);
}

/* Enhanced Tables */
table {
  border-collapse: separate;
  border-spacing: 0;
}

table thead th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
}

table tbody tr {
  transition: background-color var(--duration-fast) ease;
}

table tbody tr:hover {
  background-color: hsl(var(--muted) / 0.5);
}

/* Enhanced Section Spacing */
section,
.section {
  padding: 2rem 0;
}

@media (min-width: 768px) {
  section,
  .section {
    padding: 3rem 0;
  }
}

/* Premium Badge Styles */
.badge,
[class*="badge"] {
  font-weight: 600;
  letter-spacing: 0.025em;
}

/* Enhanced Loading States */
[class*="loading"],
[class*="spinner"] {
  opacity: 0.7;
}

/* Responsive Typography Enhancements */
@media (max-width: 640px) {
  h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
  
  h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
  }
  
  .stat-number {
    font-size: clamp(2rem, 5vw, 3rem);
  }
}

/* Touch-friendly interactions for mobile */
@media (max-width: 768px) {
  button,
  a[role="button"],
  .btn-premium-primary,
  .btn-premium-secondary,
  .btn-premium-cta {
    min-height: 44px;
    min-width: 44px;
  }
  
  input,
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* ============================================
   Signin Page Styles (Uiverse.io Design)
   ============================================ */

.signin-container {
  max-width: 450px;
  background: #f8f9fd;
  background: linear-gradient(
    0deg,
    rgb(255, 255, 255) 0%,
    rgb(244, 247, 251) 100%
  );
  border-radius: 40px;
  padding: 35px 45px;
  border: 5px solid rgb(255, 255, 255);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
  margin: 20px;
}

.signin-heading {
  font-weight: 900;
  font-size: 36px;
  color: rgb(8, 100, 160);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.signin-form {
  margin-top: 20px;
}

.signin-input {
  width: 100%;
  background: white;
  border: 2px solid rgb(200, 200, 200);
  padding: 18px 24px;
  border-radius: 20px;
  margin-top: 15px;
  box-shadow: #cff0ff 0px 10px 10px -5px;
  font-size: 16px;
  color: rgb(30, 30, 30);
  box-sizing: border-box;
  font-weight: 500;
}

.signin-form .signin-input {
  width: 100%;
  background: white;
  border: 2px solid rgb(200, 200, 200);
  padding: 18px 24px;
  border-radius: 20px;
  margin-top: 15px;
  box-shadow: #cff0ff 0px 10px 10px -5px;
  font-size: 16px;
  color: rgb(30, 30, 30);
  box-sizing: border-box;
  font-weight: 500;
}

.signin-input::-moz-placeholder,
.signin-form .signin-input::-moz-placeholder {
  color: rgb(120, 120, 120);
  font-size: 16px;
}

.signin-input::placeholder,
.signin-form .signin-input::placeholder {
  color: rgb(120, 120, 120);
  font-size: 16px;
}

.signin-input:focus,
.signin-form .signin-input:focus {
  outline: none;
  border: 2px solid #12b1d1;
  border-inline: 2px solid #12b1d1;
}

/* From Uiverse.io by dovatgabriel */
label:has(input[type='checkbox']) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  cursor: pointer;
}

label:has(input[type='checkbox']) input[type='checkbox'] {
  position: absolute;
  transform: scale(0);
}

label:has(input[type='checkbox']) input[type='checkbox']:checked ~ .checkbox {
  transform: rotate(45deg);
  width: 14px;
  margin-left: 5px;
  border-color: #24c78e;
  border-width: 5px;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
}

label:has(input[type='checkbox']) .checkbox {
  display: block;
  width: 20px;
  height: 20px;
  border: solid 3px #2a2a2ab7;
  border-radius: 6px;
  transition: all 0.375s;
  flex-shrink: 0;
}

/* Radio button style matching checkbox */
label:has(input[type='radio']) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  cursor: pointer;
}

label:has(input[type='radio']) input[type='radio'] {
  position: absolute;
  transform: scale(0);
}

label:has(input[type='radio']) input[type='radio']:checked ~ .radio-checkbox {
  transform: rotate(45deg);
  width: 14px;
  margin-left: 5px;
  border-color: #24c78e;
  border-width: 5px;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
}

label:has(input[type='radio']) .radio-checkbox {
  display: block;
  width: 20px;
  height: 20px;
  border: solid 3px #2a2a2ab7;
  border-radius: 6px;
  transition: all 0.375s;
  flex-shrink: 0;
}

/* From Uiverse.io by Shoh2008 */
.checkbox-wrapper-5 .check {
  --size: 40px;
  position: relative;
  background: linear-gradient(90deg, rgb(16, 137, 211), rgb(18, 177, 209));
  line-height: 0;
  perspective: 400px;
  font-size: var(--size);
}

.checkbox-wrapper-5 .check input[type="checkbox"],
.checkbox-wrapper-5 .check label,
.checkbox-wrapper-5 .check label::before,
.checkbox-wrapper-5 .check label::after,
.checkbox-wrapper-5 .check {
  appearance: none;
  display: inline-block;
  border-radius: var(--size);
  border: 0;
  transition: .35s ease-in-out;
  box-sizing: border-box;
  cursor: pointer;
}

.checkbox-wrapper-5 .check label {
  width: calc(2.2 * var(--size));
  height: var(--size);
  background: #d7d7d7;
  overflow: hidden;
}

.checkbox-wrapper-5 .check input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  width: calc(.8 * var(--size));
  height: calc(.8 * var(--size));
  top: calc(.1 * var(--size));
  left: calc(.1 * var(--size));
  background: linear-gradient(45deg, #dedede, #ffffff);
  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
  outline: none;
  margin: 0;
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked {
  left: calc(1.3 * var(--size));
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label {
  background: transparent;
}

.checkbox-wrapper-5 .check label::before,
.checkbox-wrapper-5 .check label::after {
  content: "· ·";
  position: absolute;
  overflow: hidden;
  left: calc(.15 * var(--size));
  top: calc(.5 * var(--size));
  height: var(--size);
  letter-spacing: calc(-0.04 * var(--size));
  color: #9b9b9b;
  font-family: "Times New Roman", serif;
  z-index: 2;
  font-size: calc(.6 * var(--size));
  border-radius: 0;
  transform-origin: 0 0 calc(-0.5 * var(--size));
  backface-visibility: hidden;
}

.checkbox-wrapper-5 .check label::after {
  content: "●";
  top: calc(.65 * var(--size));
  left: calc(.2 * var(--size));
  height: calc(.1 * var(--size));
  width: calc(.35 * var(--size));
  font-size: calc(.2 * var(--size));
  transform-origin: 0 0 calc(-0.4 * var(--size));
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::before,
.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after {
  left: calc(1.55 * var(--size));
  top: calc(.4 * var(--size));
  line-height: calc(.1 * var(--size));
  transform: rotateY(360deg);
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after {
  height: calc(.16 * var(--size));
  top: calc(.55 * var(--size));
  left: calc(1.6 * var(--size));
  font-size: calc(.6 * var(--size));
  line-height: 0;
}

.signin-form .forgot-password {
  display: block;
  margin-top: 12px;
  margin-left: 10px;
}

.signin-form .forgot-password a {
  font-size: 13px;
  color: #0077cc;
  text-decoration: none;
  font-weight: 500;
}

.signin-form .forgot-password a:hover {
  text-decoration: underline;
}

.signin-form .login-button {
  display: block;
  width: 100%;
  font-weight: 700;
  background: linear-gradient(
    45deg,
    rgb(16, 137, 211) 0%,
    rgb(18, 177, 209) 100%
  );
  color: white;
  padding-block: 18px;
  margin: 25px auto;
  border-radius: 20px;
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
  border: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  font-size: 18px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.signin-form .login-button:hover {
  transform: scale(1.03);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
}

.signin-form .login-button:active {
  transform: scale(0.95);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
}

.signin-form .login-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.social-account-container {
  margin-top: 25px;
}

.social-account-container .title {
  display: block;
  text-align: center;
  font-size: 12px;
  color: rgb(100, 100, 100);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.social-account-container .social-accounts {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 5px;
}

.social-account-container .social-accounts .social-button {
  background: white;
  border: 5px solid white;
  padding: 8px;
  border-radius: 50%;
  width: 56px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 12px 10px -8px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.social-account-container .social-accounts .social-button .svg {
  margin: auto;
  width: 1.4em;
  height: 1.4em;
}

.social-account-container .social-accounts .social-button:hover {
  transform: scale(1.2);
}

.social-account-container .social-accounts .social-button:active {
  transform: scale(0.9);
}

.social-account-container .social-accounts .social-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.agreement {
  display: block;
  text-align: center;
  margin-top: 18px;
}

.agreement a {
  text-decoration: none;
  color: #0077cc;
  font-size: 11px;
  font-weight: 500;
}

.agreement a:hover {
  text-decoration: underline;
}

/* Error message styling for signin pages */
.signin-error {
  color: hsl(var(--destructive));
  font-size: 14px;
  margin-top: 8px;
  margin-left: 10px;
  display: block;
  font-weight: 500;
}

.signin-error.hidden {
  display: none;
}

/* ============================================
   Organization List Styles (Matching Signin Design)
   ============================================ */

.org-list-container {
  max-width: 600px;
  width: 100%;
  background: linear-gradient(
    0deg,
    rgb(255, 255, 255) 0%,
    rgb(244, 247, 251) 100%
  );
  border-radius: 40px;
  padding: 35px 45px;
  border: 5px solid rgb(255, 255, 255);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
  margin: 20px auto;
}

.org-heading {
  font-weight: 900;
  font-size: 36px;
  color: rgb(8, 100, 160);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.org-subheading {
  font-size: 14px;
  color: rgb(80, 80, 80);
  font-weight: 500;
}

.org-card {
  width: 100%;
  background: white;
  border: 2px solid transparent;
  padding: 18px 24px;
  border-radius: 20px;
  margin-top: 15px;
  box-shadow: #cff0ff 0px 10px 10px -5px;
  font-size: 16px;
  color: rgb(30, 30, 30);
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.org-card:hover {
  border-inline: 2px solid #12b1d1;
  transform: scale(1.02);
  box-shadow: #cff0ff 0px 15px 15px -8px;
}

.org-card-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.org-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(18, 177, 209, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.org-card-icon svg {
  width: 24px;
  height: 24px;
  color: rgb(8, 100, 160);
}

.org-card-info {
  flex: 1;
  min-width: 0;
}

.org-card-title {
  font-weight: 600;
  font-size: 18px;
  color: rgb(30, 30, 30);
  margin-bottom: 4px;
}

.org-card-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

.org-card-arrow {
  width: 20px;
  height: 20px;
  color: rgb(120, 120, 120);
  flex-shrink: 0;
}

.org-dialog {
  background: linear-gradient(
    0deg,
    rgb(255, 255, 255) 0%,
    rgb(244, 247, 251) 100%
  );
  border-radius: 40px;
  padding: 35px 45px;
  border: 5px solid rgb(255, 255, 255);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
  max-width: 500px;
  width: 90%;
}

.org-dialog-heading {
  font-weight: 900;
  font-size: 28px;
  color: rgb(8, 100, 160);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
}

.org-dialog-subheading {
  font-size: 14px;
  color: rgb(80, 80, 80);
  font-weight: 500;
  margin-bottom: 20px;
}

.org-dialog-cancel-btn {
  flex: 1;
  background: white;
  border: 2px solid rgb(200, 200, 200);
  color: rgb(80, 80, 80);
  padding-block: 16px;
  padding-inline: 18px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.org-dialog-cancel-btn:hover {
  border-color: rgb(18, 177, 209);
  color: rgb(8, 100, 160);
  transform: scale(1.02);
}

.org-loading-spinner {
  width: 32px;
  height: 32px;
  border: 4px solid rgba(18, 177, 209, 0.2);
  border-top-color: rgb(8, 100, 160);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ============================================
   Application-Wide Component Styles
   ============================================ */

.app-card {
  background: white;
  border: 2px solid transparent;
  border-radius: 20px;
  box-shadow: #cff0ff 0px 10px 10px -5px;
  transition: all 0.2s ease-in-out;
  padding: 24px;
}

.app-card:hover {
  border-inline: 2px solid #12b1d1;
  transform: scale(1.01);
  box-shadow: #cff0ff 0px 12px 12px -6px;
}

.app-button-primary {
  background: linear-gradient(
    45deg,
    rgb(16, 137, 211) 0%,
    rgb(18, 177, 209) 100%
  );
  color: white;
  padding-block: 18px;
  padding-inline: 24px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 18px;
  border: none;
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.app-button-primary:hover {
  transform: scale(1.03);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
}

.app-button-primary:active {
  transform: scale(0.95);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
}

.app-button-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.app-button-secondary {
  background: white;
  border: 2px solid rgb(200, 200, 200);
  color: rgb(80, 80, 80);
  padding-block: 16px;
  padding-inline: 18px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.app-button-secondary:hover {
  border-color: rgb(18, 177, 209);
  color: rgb(8, 100, 160);
  transform: scale(1.02);
  box-shadow: #cff0ff 0px 6px 10px -4px;
}

.app-input {
  width: 100%;
  background: white;
  border: none;
  padding: 18px 24px;
  border-radius: 20px;
  margin-top: 15px;
  box-shadow: #cff0ff 0px 10px 10px -5px;
  border-inline: 2px solid transparent;
  font-size: 16px;
  color: rgb(30, 30, 30);
  box-sizing: border-box;
  font-weight: 500;
}

.app-input::-moz-placeholder {
  color: rgb(120, 120, 120);
  font-size: 16px;
}

.app-input::placeholder {
  color: rgb(120, 120, 120);
  font-size: 16px;
}

.app-input:focus {
  outline: none;
  border-inline: 2px solid #12b1d1;
}

.app-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: #cff0ff 0px 10px 10px -5px;
}

.app-table thead {
  background: linear-gradient(
    0deg,
    rgb(255, 255, 255) 0%,
    rgb(244, 247, 251) 100%
  );
}

.app-table thead th {
  padding: 18px 24px;
  text-align: left;
  font-weight: 700;
  font-size: 14px;
  color: rgb(8, 100, 160);
  border-bottom: 2px solid rgba(133, 189, 215, 0.2);
}

.app-table tbody tr {
  border-bottom: 1px solid rgba(133, 189, 215, 0.1);
  transition: all 0.2s ease-in-out;
}

.app-table tbody tr:hover {
  background: rgba(18, 177, 209, 0.05);
  transform: scale(1.01);
}

.app-table tbody td {
  padding: 18px 24px;
  font-size: 14px;
  color: rgb(30, 30, 30);
  font-weight: 500;
}

.app-section-header {
  font-weight: 900;
  font-size: 36px;
  color: rgb(8, 100, 160);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.app-section-subheader {
  font-size: 14px;
  color: rgb(80, 80, 80);
  font-weight: 500;
  margin-bottom: 15px;
}

/* ============================================
   GLASSMORPHISM UTILITY CLASSES
   ============================================ */

/* Base Glass Card */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.2);
  transform: translateY(-2px);
}

/* Glass Header */
.glass-header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.1);
}

/* Glass Input */
.glass-input {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  outline: none;
}

/* Glass Button */
.glass-button {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px 0 rgba(31, 38, 135, 0.2);
}

.glass-button:active {
  transform: translateY(0);
}

/* Glass Badge */
.glass-badge {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.15);
}

/* Glass Panel */
.glass-panel {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 16px 48px 0 rgba(31, 38, 135, 0.2);
}

/* Glass Overlay */
.glass-overlay {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Glass Category Card */
.glass-category-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.1);
  border-radius: 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 140px;
  max-height: 140px;
}

/* Responsive sizing for desktop */
@media (min-width: 1024px) {
  .glass-category-card {
    max-width: 200px;
    max-height: 200px;
    padding: 1.5rem !important;
  }
  
  .glass-category-card .glass-badge {
    width: 5rem !important;
    height: 5rem !important;
  }
  
  .glass-category-card svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  
  .glass-category-card .marketplace-subheading {
    font-size: 1rem !important;
  }
  
  .glass-category-card .text-\[10px\] {
    font-size: 0.75rem !important;
  }
  
  #categories-container {
    row-gap: 1rem !important;
  }
}

@media (min-width: 1280px) {
  .glass-category-card {
    max-width: 220px;
    max-height: 220px;
    padding: 2rem !important;
  }
  
  .glass-category-card .glass-badge {
    width: 5.5rem !important;
    height: 5.5rem !important;
  }
  
  .glass-category-card svg {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }
  
  #categories-container {
    row-gap: 2rem !important;
  }
}

/* Account Icon Button - Ensure gradient is visible */
#customer-account-btn {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%) !important;
  color: white !important;
  border: none !important;
}

#customer-account-btn:hover {
  opacity: 0.9 !important;
  transform: scale(1.05) !important;
}

#customer-account-btn #customer-initials {
  color: white !important;
}

.glass-category-card:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 12px 32px 0 rgba(99, 102, 241, 0.2);
  transform: translateY(-4px) scale(1.02);
}

/* Glass Business Card */
.glass-business-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1.5rem;
  overflow: hidden;
}

.glass-business-card:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 48px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.4);
}

/* Smooth Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.4s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.5s ease-out;
}

/* Enhanced Typography */
.marketplace-heading {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.marketplace-subheading {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.marketplace-body {
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

/* Responsive adjustments for signin pages */
@media (max-width: 640px) {
  .signin-container {
    max-width: 100%;
    margin: 10px;
    padding: 30px 35px;
    border-radius: 30px;
  }
  
  .signin-heading {
    font-size: 32px;
  }
  
  .signin-form .signin-input {
    font-size: 16px;
    padding: 16px 20px;
  }
  
  .signin-form .login-button {
    font-size: 17px;
    padding-block: 16px;
  }
  
  .social-account-container .social-accounts .social-button {
    width: 52px;
    padding: 7px;
  }
  
  .social-account-container .social-accounts .social-button .svg {
    width: 1.3em;
    height: 1.3em;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Sidebar v2 — neutral palette, restrained accent, grouped sections.
   These classes are referenced from js/components/layout.js and bypass the
   pre-built tailwind.css bundle so we can ship the new design without a
   CSS rebuild.
   ─────────────────────────────────────────────────────────────────────── */
:root {
  --sb-bg:           #fafaf9;   /* stone-50 — warm off-white surface */
  --sb-bg-hover:     #f5f5f4;   /* stone-100 — hover + active fill */
  --sb-bg-press:     #e7e5e4;   /* stone-200 — press flash */
  --sb-border:       #e7e5e4;   /* stone-200 — hairlines */
  --sb-border-strong:#d6d3d1;   /* stone-300 */
  --sb-text:         #1c1917;   /* stone-900 — primary */
  --sb-text-muted:   #57534e;   /* stone-600 — inactive items */
  --sb-text-soft:    #78716c;   /* stone-500 — section headers */
  --sb-text-faint:   #a8a29e;   /* stone-400 — kbd, chevrons */
  --sb-accent:       #0f766e;   /* teal-700 — desaturated accent */
  --sb-accent-fg:    #ffffff;
  --sb-danger:       #dc2626;   /* red-600 — badges */
  --sb-danger-fg:    #ffffff;
}

.sb-aside {
  width: 248px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  flex-shrink: 0;
  transition: width 200ms cubic-bezier(0.23, 1, 0.32, 1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.sb-aside.sb-collapsed { width: 60px; }

.sb-section { padding: 0 8px; }
.sb-section-top    { padding: 12px 8px 8px; position: relative; }
.sb-section-search { padding: 0 8px 8px; }
.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding-bottom: 16px; }
.sb-footer { border-top: 1px solid var(--sb-border); padding: 8px; flex-shrink: 0; }

/* Workspace switcher */
.sb-workspace {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 0 10px; height: 44px; border-radius: 6px; background: transparent;
  border: 0; cursor: pointer; transition: background-color 150ms ease-out;
  text-align: left;
}
.sb-aside.sb-collapsed .sb-workspace { padding: 0; justify-content: center; }
.sb-workspace:hover:not(:disabled) { background: var(--sb-bg-hover); }
.sb-workspace:disabled { cursor: default; }
.sb-workspace-mark {
  width: 28px; height: 28px; border-radius: 6px; background: var(--sb-accent);
  color: var(--sb-accent-fg); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  letter-spacing: 0.02em;
}
.sb-workspace-text { flex: 1; min-width: 0; line-height: 1.2; }
.sb-workspace-name { display: block; font-size: 13px; font-weight: 600; color: var(--sb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-workspace-role { display: block; font-size: 11px; color: var(--sb-text-soft); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sb-workspace-chev { width: 14px; height: 14px; color: var(--sb-text-faint); flex-shrink: 0; }

.sb-workspace-menu {
  position: absolute; left: 8px; right: 8px; top: 100%; margin-top: 4px;
  z-index: 30; background: #fff; border: 1px solid var(--sb-border);
  border-radius: 8px; box-shadow: 0 8px 24px -4px rgba(28, 25, 23, 0.12), 0 0 0 1px rgba(28, 25, 23, 0.04);
  padding: 4px;
}
.sb-workspace-menu[hidden] { display: none; }
.sb-workspace-menu-label { padding: 6px 8px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sb-text-soft); font-weight: 500; }
.sb-workspace-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 4px; background: transparent; border: 0;
  cursor: pointer; transition: background-color 120ms ease-out; text-align: left;
}
.sb-workspace-item:hover { background: var(--sb-bg-hover); }
.sb-workspace-item-mark { width: 24px; height: 24px; border-radius: 4px; background: var(--sb-bg-press); color: var(--sb-text-muted); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-workspace-item-text { flex: 1; min-width: 0; }
.sb-workspace-item-name { display: block; font-size: 12.5px; font-weight: 500; color: var(--sb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-workspace-item-role { display: block; font-size: 10.5px; color: var(--sb-text-soft); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-workspace-check { width: 14px; height: 14px; color: var(--sb-accent); flex-shrink: 0; }
.sb-workspace-divider { height: 1px; background: var(--sb-border); margin: 4px 0; }
.sb-workspace-manage { width: 100%; text-align: left; padding: 6px 8px; border-radius: 4px; font-size: 12.5px; color: var(--sb-text-muted); background: transparent; border: 0; cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; }
.sb-workspace-manage:hover { background: var(--sb-bg-hover); color: var(--sb-text); }

/* Search trigger */
.sb-search {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 0 10px; height: 32px; border-radius: 6px;
  background: #fff; border: 1px solid var(--sb-border); cursor: pointer;
  color: var(--sb-text-soft); transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.sb-aside.sb-collapsed .sb-search { padding: 0; justify-content: center; }
.sb-search:hover { border-color: var(--sb-border-strong); background: var(--sb-bg); }
.sb-search-icon { width: 14px; height: 14px; flex-shrink: 0; }
.sb-search-label { flex: 1; text-align: left; font-size: 12.5px; }
.sb-search-kbd {
  font-family: ui-monospace, 'SFMono-Regular', 'Geist Mono', monospace;
  font-size: 10px; color: var(--sb-text-faint); background: var(--sb-bg-hover);
  border: 1px solid var(--sb-border); border-radius: 3px; padding: 1px 5px;
  line-height: 1; letter-spacing: 0.02em;
}

/* Section headers */
.sb-group { margin-top: 20px; }
.sb-group:first-child { margin-top: 8px; }
.sb-group-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; margin-bottom: 4px; height: 24px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500; color: var(--sb-text-soft); background: transparent; border: 0;
  cursor: pointer; transition: color 120ms ease-out;
}
.sb-group-header:hover { color: var(--sb-text-muted); }
.sb-group-header-chev {
  width: 12px; height: 12px; color: var(--sb-text-faint);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sb-group-header[aria-expanded="false"] .sb-group-header-chev { transform: rotate(-90deg); }

.sb-group-body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sb-group-body[data-expanded="false"] { grid-template-rows: 0fr; }
.sb-group-body > ul { overflow: hidden; min-height: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

/* Items */
.sb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-item-wrap { position: relative; }
.sb-rail {
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--sb-accent); border-top-right-radius: 3px; border-bottom-right-radius: 3px;
  pointer-events: none;
}
.sb-item {
  display: flex; align-items: center; gap: 12px;
  margin: 0 8px; padding: 0 12px; height: 32px;
  border-radius: 6px; font-size: 13px; font-weight: 500;
  color: var(--sb-text-muted); text-decoration: none;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.sb-aside.sb-collapsed .sb-item { padding: 0; justify-content: center; margin: 0 8px; }
.sb-item:hover { background: var(--sb-bg-hover); color: var(--sb-text); }
.sb-item:active { background: var(--sb-bg-press); }
.sb-item-active { background: var(--sb-bg-hover); color: var(--sb-text); font-weight: 600; }
.sb-item-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--sb-text-soft); transition: color 120ms ease-out; }
.sb-item:hover .sb-item-icon { color: var(--sb-text-muted); }
.sb-item-active .sb-item-icon { color: var(--sb-accent); }
.sb-item-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item-badge {
  font-family: ui-monospace, 'SFMono-Regular', 'Geist Mono', monospace;
  height: 18px; min-width: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--sb-danger); color: var(--sb-danger-fg);
  font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}
.sb-item-badge.sb-hidden { display: none; }

/* Footer (user) */
.sb-user { display: flex; align-items: center; gap: 10px; padding: 0 6px; height: 44px; border-radius: 6px; }
.sb-aside.sb-collapsed .sb-user { padding: 0; justify-content: center; }
.sb-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--sb-bg-press); color: var(--sb-text-muted); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-user-text { flex: 1; min-width: 0; line-height: 1.2; }
.sb-user-name { font-size: 12.5px; font-weight: 500; color: var(--sb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-email { font-size: 11px; color: var(--sb-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-signout {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sb-text-soft); background: transparent; border: 0; cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.sb-signout:hover { background: var(--sb-bg-hover); color: var(--sb-text); }

/* Header (top bar) */
.sb-header {
  height: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: #fff; border-bottom: 1px solid var(--sb-border);
  position: sticky; top: 0; z-index: 10;
}
.sb-header-btn {
  width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--sb-text-soft); transition: background-color 120ms ease-out, color 120ms ease-out;
  position: relative;
}
.sb-header-btn:hover { background: var(--sb-bg-hover); color: var(--sb-text); }
.sb-header-btn-icon { width: 16px; height: 16px; }
.sb-header-badge {
  position: absolute; top: -2px; right: -2px;
  height: 16px; min-width: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--sb-danger); color: var(--sb-danger-fg);
  font-family: ui-monospace, 'SFMono-Regular', 'Geist Mono', monospace;
  font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.sb-header-badge.sb-hidden { display: none; }

/* Hidden compatibility input — other modules listen on #header-search-input */
.sb-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Mobile drawer behavior */
@media (max-width: 767px) {
  .sb-aside { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; box-shadow: 0 0 40px -10px rgba(0,0,0,0.2); }
  .sb-aside.sb-collapsed { width: 248px; } /* on mobile, "collapsed" means hidden */
  .sb-aside.sb-hidden-mobile { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sb-aside, .sb-group-body, .sb-group-header-chev, .sb-item, .sb-workspace, .sb-search, .sb-header-btn, .sb-signout {
    transition-duration: 1ms !important;
  }
}