/**
 * WinkSuite Global Theme CSS
 * Single Source of Truth for all CSS variables and base styles
 * This file is loaded globally and can be modified via the Branding & Theme panel
 * 
 * Structure:
 * 1. CSS Variables (colors, spacing, typography, shadows, etc.)
 * 2. Base Typography Styles
 * 3. Navbar & Footer Layout Styles
 * 4. Component Styles (buttons, cards, forms, etc.)
 * 5. Utility Classes
 * 6. Animations
 */

/* ===================================================================
   1. CSS VARIABLES - SINGLE SOURCE OF TRUTH
   =================================================================== */

:root {
  /* ===== THEME VARIABLE MAPPING (--theme-* → --wink-*) ===== */
  /* These allow themes to override Wink variables using --theme-* prefix */
  --wink-primary: var(--theme-primary, #8058e3);
  --wink-primary-light: var(--theme-primary-light, #a07be7);
  --wink-primary-dark: var(--theme-primary-dark, #6e4fd3);
  --wink-secondary: var(--theme-secondary, #6e4fd3);
  --wink-accent: var(--theme-accent, #935fe5);

  /* ===== WINK PRIMARY COLORS (using theme variables) ===== */
  --wink-light: var(--wink-primary-light);
  --wink-medium: #935fe5;
  --wink-button: #8f65e4;
  --wink-main: var(--wink-primary);
  --wink-dark: var(--wink-primary-dark);
  --wink-deep: #5a3db8;

  /* ===== ADDITIONAL THEME MAPPINGS ===== */
  --wink-bg: var(--theme-bg, #FFFFFF);
  --wink-bg-secondary: var(--theme-bg-secondary, #F8F8F8);
  --wink-bg-tertiary: var(--theme-bg-tertiary, #F0F0F0);
  --wink-text: var(--theme-text, #1A1A1A);
  --wink-text-secondary: var(--theme-text-secondary, #4A4A4A);
  --wink-text-tertiary: var(--theme-text-tertiary, #7A7A7A);
  --wink-border: var(--theme-border, #E0E0E0);
  --wink-success: var(--theme-success, #10B981);
  --wink-warning: var(--theme-warning, #F59E0B);
  --wink-error: var(--theme-error, #DC2626);
  --wink-info: var(--theme-info, #3B82F6);
  --wink-font-heading: var(--theme-font-heading, 'Inter', sans-serif);
  --wink-font-body: var(--theme-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

  /* ===== WINK OPACITY VARIANTS ===== */
  --wink-primary-5: rgba(128, 88, 227, 0.05);
  --wink-primary-8: rgba(128, 88, 227, 0.08);
  --wink-primary-10: rgba(128, 88, 227, 0.1);
  --wink-primary-15: rgba(128, 88, 227, 0.15);
  --wink-primary-20: rgba(128, 88, 227, 0.2);
  --wink-primary-25: rgba(128, 88, 227, 0.25);
  --wink-primary-30: rgba(128, 88, 227, 0.3);
  --wink-primary-40: rgba(128, 88, 227, 0.4);
  --wink-primary-50: rgba(128, 88, 227, 0.5);
  --wink-primary-60: rgba(128, 88, 227, 0.6);
  --wink-primary-70: rgba(128, 88, 227, 0.7);
  --wink-primary-80: rgba(128, 88, 227, 0.8);
  --wink-primary-90: rgba(128, 88, 227, 0.9);

  /* Additional Wink Primary Variants */
  --wink-primary-05: rgba(139, 92, 246, 0.05);
  --wink-primary-2: rgba(139, 92, 246, 0.2);
  --wink-primary-30-disabled: rgba(139, 92, 246, 0.3);

  /* ===== STATUS COLORS ===== */
  --color-error: #EF4444;
  --color-info: #3B82F6;
  --color-success: #10B981;
  --color-success-dark: #065F46;
  --color-warning: #F59E0B;

  /* ===== SURFACE & BACKGROUND COLORS ===== */
  --color-background: #F3F4F6;
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
  --color-on-surface: #1F2937;
  --color-on-background: #1F2937;
  --color-on-primary: #FFFFFF;

  /* ===== TEXT COLORS ===== */
  --text-primary: #1F2937;
  --text-secondary: #64748B;
  --text-disabled: #94A3B8;
  --color-text: #374151;
  --color-dark: #1F2937;
  --color-muted: #6B7280;
  --color-light: #9CA3AF;

  /* ===== NAVIGATION COLORS ===== */
  --nav-text-muted: #6b7280;
  --nav-divider: rgba(0, 0, 0, 0.08);
  --nav-white-02: rgba(255, 255, 255, 0.02);
  --nav-white-05: rgba(255, 255, 255, 0.05);
  --nav-white-5: rgba(255, 255, 255, 0.05);
  --nav-white-08: rgba(255, 255, 255, 0.08);
  --nav-white-8: rgba(255, 255, 255, 0.08);
  --nav-white-10: rgba(255, 255, 255, 0.1);
  --nav-white-12: rgba(255, 255, 255, 0.12);
  --nav-white-15: rgba(255, 255, 255, 0.15);
  --nav-white-20: rgba(255, 255, 255, 0.2);
  --nav-white-25: rgba(255, 255, 255, 0.25);
  --nav-white-30: rgba(255, 255, 255, 0.3);
  --nav-white-40: rgba(255, 255, 255, 0.4);
  --nav-white-50: rgba(255, 255, 255, 0.5);
  --nav-white-60: rgba(255, 255, 255, 0.6);
  --nav-white-70: rgba(255, 255, 255, 0.7);
  --nav-white-80: rgba(255, 255, 255, 0.8);
  --nav-white-90: rgba(255, 255, 255, 0.9);
  --nav-white-95: rgba(255, 255, 255, 0.95);
  --nav-black-60: rgba(0, 0, 0, 0.6);

  /* ===== GRADIENTS ===== */
  --gradient-wink-main: linear-gradient(135deg, #5a3db8, #8058e3, #a07be7);
  --gradient-wink-light: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --gradient-text-wink: linear-gradient(45deg, #8058e3, #a07be7);
  --gradient-sidebar: linear-gradient(135deg, #1a0d2e 0%, #2d1b4e 25%, #4c2885 50%, #6b46c1 75%, #8b5cf6 100%);

  /* Dashboard Gradients */
  --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-success: linear-gradient(135deg, #22c55e, #16a34a);
  --gradient-info: linear-gradient(135deg, #3b82f6, #2563eb);
  --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
  --gradient-error: linear-gradient(135deg, #ef4444, #dc2626);

  /* Navigation Icon Gradients */
  --gradient-nav-profile: var(--gradient-text-wink);
  --gradient-nav-api: linear-gradient(45deg, #3b82f6, #2563eb);
  --gradient-nav-tenant: linear-gradient(45deg, #22c55e, #16a34a);
  --gradient-nav-logout: linear-gradient(45deg, #ef4444, #dc2626);
  --gradient-nav-title: linear-gradient(45deg, #ffffff, #e2e8f0);

  /* Glow Gradients */
  --gradient-glow-primary: linear-gradient(45deg, rgba(139, 92, 246, 0.1), rgba(168, 123, 250, 0.05));
  --gradient-glow-success: linear-gradient(45deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.05));
  --gradient-glow-info: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05));
  --gradient-glow-warning: linear-gradient(45deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05));
  --gradient-glow-error: linear-gradient(45deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));

  /* Error Gradients */
  --gradient-error-light: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.2));
  --gradient-error-medium: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.3));

  /* Progress Gradients */
  --progress-excellent: linear-gradient(90deg, #10B981, #059669);
  --progress-good: linear-gradient(90deg, #3B82F6, #2563EB);
  --progress-fair: linear-gradient(90deg, #F59E0B, #D97706);
  --progress-poor: linear-gradient(90deg, #EF4444, #DC2626);

  /* Skeleton Gradient */
  --skeleton-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.06) 75%);

  /* ===== COLOR OPACITY VARIANTS ===== */
  /* Error */
  --color-error-10: rgba(239, 68, 68, 0.1);
  --color-error-20: rgba(239, 68, 68, 0.2);
  --color-error-30: rgba(239, 68, 68, 0.3);
  --color-error-light: #fca5a5;
  --color-error-lighter: #fecaca;

  /* Warning */
  --color-warning-10: rgba(245, 158, 11, 0.1);
  --color-warning-15: rgba(245, 158, 11, 0.15);
  --color-warning-20: rgba(245, 158, 11, 0.2);
  --color-warning-30: rgba(245, 158, 11, 0.3);
  --color-warning-40: rgba(245, 158, 11, 0.4);
  --wink-warning-10: rgba(245, 158, 11, 0.1);
  --wink-warning-20: rgba(245, 158, 11, 0.2);
  --wink-warning-30: rgba(245, 158, 11, 0.3);

  /* Success */
  --color-success-10: rgba(34, 197, 94, 0.1);
  --color-success-15: rgba(16, 185, 129, 0.15);
  --color-success-20: rgba(16, 185, 129, 0.2);
  --color-success-30: rgba(16, 185, 129, 0.3);
  --color-success-40: rgba(16, 185, 129, 0.4);

  /* Info */
  --color-info-10: rgba(59, 130, 246, 0.1);
  --color-info-15: rgba(59, 130, 246, 0.15);
  --color-info-30: rgba(59, 130, 246, 0.3);

  /* ===== BORDER COLORS ===== */
  --color-border-hover: rgba(0, 0, 0, 0.12);
  --border-light-5: rgba(0, 0, 0, 0.05);
  --border-hover-primary: rgba(139, 92, 246, 0.3);
  --border-hover-success: rgba(34, 197, 94, 0.3);
  --border-hover-info: rgba(59, 130, 246, 0.3);
  --border-hover-warning: rgba(245, 158, 11, 0.3);
  --border-hover-error: rgba(239, 68, 68, 0.3);

  /* ===== GLASSMORPHISM ===== */
  --glass-bg-light: rgba(255, 255, 255, 0.1);
  --glass-bg-medium: rgba(255, 255, 255, 0.2);
  --glass-bg-strong: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-border-light: rgba(255, 255, 255, 0.3);
  --glass-border-strong: rgba(160, 123, 231, 0.3);

  /* ===== BACKDROP FILTERS ===== */
  --blur-light: blur(10px);
  --blur-medium: blur(20px);
  --blur-strong: blur(25px);

  /* ===== BORDER RADIUS ===== */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ===== SPACING SYSTEM ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;

  /* ===== LAYOUT DIMENSIONS ===== */
  --navbar-height: 64px;
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 56px;

  /* ===== SHADOWS & GLOW ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-card: 0px 14px 34px 0px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 20px rgba(255, 255, 255, 0.1);
  --shadow-card-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-text-dark: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 40px rgba(128, 88, 227, 0.4);
  --shadow-glow-light: 0 0 30px rgba(128, 88, 227, 0.3);
  --shadow-glow-strong: 0 10px 30px rgba(139, 92, 246, 0.5);
  --shadow-glow-stronger: 0 15px 40px rgba(139, 92, 246, 0.7);
  --shadow-navbar: 0 4px 20px rgba(26, 13, 46, 0.3);
  --shadow-navbar-glass: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-menu-item: 0 2px 12px rgba(255, 255, 255, 0.1);
  --shadow-menu-item-active: 0 2px 12px rgba(255, 255, 255, 0.15);
  --shadow-icon-glow: 0 2px 8px rgba(139, 92, 246, 0.2);
  --shadow-brand-glow: 0 8px 25px rgba(139, 92, 246, 0.2);
  --shadow-menu-hover: 0 4px 12px rgba(139, 92, 246, 0.15);
  --shadow-logout-hover: 0 4px 12px rgba(239, 68, 68, 0.15);
  --shadow-black-10: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-black-15: 0 8px 25px rgba(0, 0, 0, 0.15);
  --shadow-black-20: 0 8px 25px rgba(0, 0, 0, 0.2);
  --shadow-warning-30: 0 4px 15px rgba(245, 158, 11, 0.3);
  --shadow-warning-40: 0 8px 25px rgba(245, 158, 11, 0.4);

  /* Status Glows */
  --status-success-glow: 0 0 8px rgba(34, 197, 94, 0.5);
  --status-info-glow: 0 0 8px rgba(59, 130, 246, 0.5);
  --status-warning-glow: 0 0 8px rgba(245, 158, 11, 0.5);
  --status-primary-glow: 0 0 8px rgba(139, 92, 246, 0.5);
  --status-muted-glow: 0 0 8px rgba(107, 114, 128, 0.5);
  --status-error-glow: 0 0 20px rgba(239, 68, 68, 0.3);

  /* Progress Glows */
  --progress-glow-success: 0 0 15px rgba(16, 185, 129, 0.5);
  --progress-glow-info: 0 0 15px rgba(59, 130, 246, 0.5);
  --progress-glow-warning: 0 0 15px rgba(245, 158, 11, 0.5);
  --progress-glow-error: 0 0 15px rgba(239, 68, 68, 0.5);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.6s ease;
  --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== BREAKPOINTS ===== */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 960px;
  --bp-desktop-large: 1200px;

  /* ===== TYPOGRAPHY ===== */
  /* Font Families */
  --font-family-primary: 'Inter', sans-serif;
  --font-family-secondary: 'Roboto', sans-serif;
  --font-family-heading: 'Inter', sans-serif;
  --font-family-body: 'Inter', sans-serif;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 800;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;

  /* ===== BACKWARDS COMPATIBILITY (theme-* aliases) ===== */
  --theme-primary: var(--wink-primary);
  --theme-primary-light: var(--wink-light);
  --theme-primary-dark: var(--wink-dark);
  --theme-secondary: #64748b;
  --theme-secondary-light: #94a3b8;
  --theme-secondary-dark: #475569;
  --theme-accent: var(--wink-accent);
  --theme-accent-light: var(--wink-light);
  --theme-accent-dark: var(--wink-dark);

  --theme-bg: var(--wink-bg, #ffffff);
  --theme-bg-secondary: var(--wink-bg-secondary, #f8fafc);
  --theme-bg-tertiary: var(--wink-bg-tertiary, #f1f5f9);
  --theme-text: var(--text-primary);
  --theme-text-secondary: var(--text-secondary);
  --theme-text-tertiary: var(--text-disabled);

  --theme-border: var(--color-border);
  --theme-border-light: #f1f5f9;
  --theme-border-dark: #cbd5e1;

  --theme-success: var(--color-success);
  --theme-warning: var(--color-warning);
  --theme-error: var(--color-error);
  --theme-info: var(--color-info);

  --theme-font-heading: var(--font-family-heading);
  --theme-font-body: var(--font-family-body);
  --theme-font-mono: 'Fira Code', 'Courier New', monospace;

  --theme-text-xs: var(--text-xs);
  --theme-text-sm: var(--text-sm);
  --theme-text-base: var(--text-base);
  --theme-text-lg: var(--text-lg);
  --theme-text-xl: var(--text-xl);
  --theme-text-2xl: var(--text-2xl);
  --theme-text-3xl: var(--text-3xl);
  --theme-text-4xl: var(--text-4xl);

  --theme-space-1: var(--spacing-xs);
  --theme-space-2: var(--spacing-sm);
  --theme-space-3: var(--spacing-md);
  --theme-space-4: var(--spacing-lg);
  --theme-space-5: 1.25rem;
  --theme-space-6: var(--spacing-xl);
  --theme-space-8: var(--spacing-2xl);
  --theme-space-10: 2.5rem;
  --theme-space-12: 3rem;
  --theme-space-16: var(--spacing-4xl);

  --theme-radius-sm: 0.25rem;
  --theme-radius-md: 0.375rem;
  --theme-radius-lg: var(--radius-small);
  --theme-radius-xl: var(--radius-medium);
  --theme-radius-2xl: var(--radius-large);
  --theme-radius-full: 9999px;

  --theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --theme-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  --theme-transition-fast: var(--transition-fast);
  --theme-transition-base: var(--transition-medium);
  --theme-transition-slow: var(--transition-slow);

  /* ===== ADDITIONAL BRAND COLORS ===== */
  --laravel-red: #FF2D20;
  --laravel-red-10: rgba(255, 45, 32, 0.1);

  /* ===== FOOTER GRADIENT COLORS (Customizable) ===== */
  --footer-gradient-start: #1a0d2e;
  --footer-gradient-mid: #2d1b4e;
  --footer-gradient-end: #4c2885;
  --footer-text-color: rgba(255, 255, 255, 0.7);
  --footer-text-hover: #ffffff;
  --footer-link-hover-shadow: rgba(128, 88, 227, 0.5);

  /* ===== NAVBAR COLORS (Customizable) ===== */
  --navbar-bg: rgba(255, 255, 255, 0.95);
  --navbar-bg-scrolled: rgba(255, 255, 255, 0.98);
  --navbar-border-color: rgba(128, 88, 227, 0.1);
  --navbar-item-hover-bg: rgba(128, 88, 227, 0.08);
  --navbar-dropdown-bg: rgba(255, 255, 255, 0.95);

  /* ===== MENU CONTAINER COLORS ===== */
  --menu-container-bg: rgba(255, 255, 255, 0.95);
  --menu-container-bg-scrolled: rgba(255, 255, 255, 0.98);
  --menu-container-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --menu-container-shadow-scrolled: 0 8px 32px rgba(0, 0, 0, 0.15);

  /* ===== ICON GRADIENT COLORS (Customizable) ===== */
  --icon-gradient-green-start: #10B981;
  --icon-gradient-green-end: #34D399;
  --icon-gradient-blue-start: #3B82F6;
  --icon-gradient-blue-end: #60A5FA;
  --icon-gradient-orange-start: #F59E0B;
  --icon-gradient-orange-end: #FBBF24;
  --icon-gradient-pink-start: #EC4899;
  --icon-gradient-pink-end: #F472B6;
  --icon-gradient-violet-start: #8B5CF6;
  --icon-gradient-violet-end: #A78BFA;
  --icon-gradient-purple-start: #8058e3;
  --icon-gradient-purple-end: #a07be7;
  --icon-gradient-red-start: #EF4444;
  --icon-gradient-red-end: #F87171;

  /* ===== SECTION BACKGROUND GRADIENTS (Customizable) ===== */
  --section-gradient-light-start: #FFFFFF;
  --section-gradient-light-end: #F8F9FC;
  --section-gradient-primary-start: #5a3db8;
  --section-gradient-primary-mid: #8058e3;
  --section-gradient-primary-end: #a07be7;

  /* ===== DECORATIVE GRADIENTS ===== */
  --decorative-gradient-radial-light: radial-gradient(circle, var(--wink-light) 0%, transparent 70%);
  --decorative-gradient-radial-accent: radial-gradient(circle, var(--wink-accent) 0%, transparent 70%);

  /* ===== UTILITY GRADIENTS ===== */
  --gradient-divider: linear-gradient(90deg, transparent, var(--wink-primary-20), transparent);
  --gradient-highlight-box: linear-gradient(135deg, var(--wink-primary-5), var(--wink-primary-10));
}

/* ===================================================================
   DARK MODE THEME VARIABLES
   =================================================================== */

.v-theme--dark {
  /* ===== DARK MODE COLORS ===== */
  --color-background: #121212;
  --color-surface: #1e1e1e;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-on-surface: #E0E0E0;
  --color-on-background: #E0E0E0;

  /* ===== DARK MODE TEXT COLORS ===== */
  --text-primary: #E0E0E0;
  --text-secondary: #A0A0A0;
  --text-disabled: #707070;
  --color-text: #E0E0E0;
  --color-dark: #E0E0E0;
  --color-muted: #A0A0A0;
  --color-light: #707070;

  /* ===== DARK MODE SURFACE VARIANTS ===== */
  --theme-bg: #121212;
  --theme-bg-secondary: #1e1e1e;
  --theme-bg-tertiary: #2a2a2a;
  --theme-text: #E0E0E0;
  --theme-text-secondary: #A0A0A0;
  --theme-text-tertiary: #707070;

  /* ===== DARK MODE BORDERS ===== */
  --theme-border: rgba(255, 255, 255, 0.12);
  --theme-border-light: rgba(255, 255, 255, 0.08);
  --theme-border-dark: rgba(255, 255, 255, 0.2);
  --color-border-hover: rgba(255, 255, 255, 0.2);
  --border-light-5: rgba(255, 255, 255, 0.05);

  /* ===== DARK MODE SHADOWS ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.8);
  --shadow-card: 0px 14px 34px 0px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 4px 20px rgba(160, 123, 231, 0.3);
  --shadow-card-light: 0 1px 3px rgba(0, 0, 0, 0.5);

  /* ===== DARK MODE NAVBAR & NAVIGATION ===== */
  --nav-text-muted: #A0A0A0;
  --nav-divider: rgba(255, 255, 255, 0.12);
  --navbar-bg: rgba(30, 30, 30, 0.95);
  --navbar-bg-scrolled: rgba(30, 30, 30, 0.98);
  --navbar-border-color: rgba(160, 123, 231, 0.2);
  --navbar-item-hover-bg: rgba(160, 123, 231, 0.12);
  --navbar-dropdown-bg: rgba(30, 30, 30, 0.95);

  /* ===== DARK MODE MENU CONTAINER ===== */
  --menu-container-bg: rgba(30, 30, 30, 0.95);
  --menu-container-bg-scrolled: rgba(30, 30, 30, 0.98);
  --menu-container-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  --menu-container-shadow-scrolled: 0 8px 32px rgba(0, 0, 0, 0.7);

  /* ===== DARK MODE GLASSMORPHISM ===== */
  --glass-bg-light: rgba(255, 255, 255, 0.05);
  --glass-bg-medium: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-light: rgba(255, 255, 255, 0.2);
  --glass-border-strong: rgba(160, 123, 231, 0.4);

  /* ===== DARK MODE FOOTER ===== */
  --footer-gradient-start: #0a0a0a;
  --footer-gradient-mid: #1a1a1a;
  --footer-gradient-end: #2a2a2a;
  --footer-text-color: rgba(255, 255, 255, 0.6);
  --footer-text-hover: #ffffff;
  --footer-link-hover-shadow: rgba(160, 123, 231, 0.6);
}

/* Dark mode body styles */
.v-theme--dark body {
  background-color: #121212;
  color: #E0E0E0;
}

.v-theme--dark h1,
.v-theme--dark h2,
.v-theme--dark h3,
.v-theme--dark h4,
.v-theme--dark h5,
.v-theme--dark h6 {
  color: #E0E0E0;
}

/* ===================================================================
   2. BASE TYPOGRAPHY STYLES
   =================================================================== */

body {
  font-family: var(--font-family-body);
  color: var(--text-primary);
  background-color: var(--wink-bg-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  color: var(--text-primary);
}

h1 {
  font-size: var(--text-4xl);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-base);
}

main,
.content-wrapper {
  padding-top: 0 !important;
}

/* ===== LINK STYLES ===== */
a {
  color: var(--wink-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--wink-dark);
  text-decoration: none;
}

/* ===== FEATURE ICON STYLES ===== */
.feature-icon-wrapper {
  margin-bottom: 24px;
  position: relative;
}

.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

.feature-icon i {
  font-size: 2rem;
  color: white;
  position: relative;
  z-index: 2;
}

/* Icon Gradient Variants */
.feature-icon-purple {
  background: linear-gradient(135deg, var(--icon-gradient-purple-start), var(--icon-gradient-purple-end));
  box-shadow: 0 10px 30px rgba(128, 88, 227, 0.3);
}

.feature-icon-green {
  background: linear-gradient(135deg, var(--icon-gradient-green-start), var(--icon-gradient-green-end));
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.feature-icon-blue {
  background: linear-gradient(135deg, var(--icon-gradient-blue-start), var(--icon-gradient-blue-end));
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.feature-icon-orange {
  background: linear-gradient(135deg, var(--icon-gradient-orange-start), var(--icon-gradient-orange-end));
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
}

.feature-icon-pink {
  background: linear-gradient(135deg, var(--icon-gradient-pink-start), var(--icon-gradient-pink-end));
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.3);
}

.feature-icon-violet {
  background: linear-gradient(135deg, var(--icon-gradient-violet-start), var(--icon-gradient-violet-end));
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

/* Dashboard Icon Variants */
.dashboard-icon-success {
  background: linear-gradient(135deg, var(--icon-gradient-green-start), var(--icon-gradient-green-end));
}

.dashboard-icon-warning {
  background: linear-gradient(135deg, var(--icon-gradient-orange-start), var(--icon-gradient-orange-end));
}

.dashboard-icon-info {
  background: linear-gradient(135deg, var(--icon-gradient-blue-start), var(--icon-gradient-blue-end));
}

/* Auth Stat Icon Variants */
.auth-stat-icon-blue {
  background: linear-gradient(135deg, var(--wink-primary), var(--wink-primary-light));
}

.auth-stat-icon-green {
  background: linear-gradient(135deg, var(--icon-gradient-green-start), var(--icon-gradient-green-end));
}

.auth-stat-icon-purple {
  background: linear-gradient(135deg, var(--icon-gradient-purple-start), var(--icon-gradient-purple-end));
}

.auth-stat-icon-orange {
  background: linear-gradient(135deg, var(--icon-gradient-orange-start), var(--icon-gradient-orange-end));
}

/* Upload Stat Icon Variants */
.upload-stat-icon-purple {
  background: linear-gradient(135deg, var(--icon-gradient-purple-start), var(--icon-gradient-purple-end));
  color: white;
}

.upload-stat-icon-green {
  background: linear-gradient(135deg, var(--icon-gradient-green-start), var(--icon-gradient-green-end));
  color: white;
}

.upload-stat-icon-orange {
  background: linear-gradient(135deg, var(--icon-gradient-orange-start), var(--icon-gradient-orange-end));
  color: white;
}

/* Rule Icon Variants */
.rule-icon-purple {
  background: linear-gradient(135deg, var(--icon-gradient-purple-start), var(--icon-gradient-purple-end));
}

.rule-icon-orange {
  background: linear-gradient(135deg, var(--icon-gradient-orange-start), var(--icon-gradient-orange-end));
}

.rule-icon-green {
  background: linear-gradient(135deg, var(--icon-gradient-green-start), var(--icon-gradient-green-end));
}

.rule-icon-blue {
  background: linear-gradient(135deg, var(--icon-gradient-blue-start), var(--icon-gradient-blue-end));
}

.rule-icon-pink {
  background: linear-gradient(135deg, var(--icon-gradient-pink-start), var(--icon-gradient-pink-end));
}

.rule-icon-violet {
  background: linear-gradient(135deg, var(--icon-gradient-violet-start), var(--icon-gradient-violet-end));
}

/* Activity Icon Variants */
.activity-icon-earned {
  background: linear-gradient(135deg, var(--icon-gradient-green-start), var(--icon-gradient-green-end));
  color: white;
}

.activity-icon-spent {
  background: linear-gradient(135deg, #EF4444, #F87171);
  color: white;
}

/* Wallet Stat Icon Variants */
.wallet-stat-icon-purple {
  background: linear-gradient(135deg, var(--icon-gradient-purple-start), var(--icon-gradient-purple-end));
  color: white;
}

.wallet-stat-icon-green {
  background: linear-gradient(135deg, var(--icon-gradient-green-start), var(--icon-gradient-green-end));
  color: white;
}

.wallet-stat-icon-orange {
  background: linear-gradient(135deg, var(--icon-gradient-orange-start), var(--icon-gradient-orange-end));
  color: white;
}

/* Modality Icon Variants */
.modality-icon-incentive {
  background: linear-gradient(135deg, var(--icon-gradient-purple-start), var(--icon-gradient-purple-end));
}

.modality-icon-survey {
  background: linear-gradient(135deg, var(--icon-gradient-blue-start), var(--icon-gradient-blue-end));
}

.modality-icon-events {
  background: linear-gradient(135deg, var(--icon-gradient-green-start), var(--icon-gradient-green-end));
}

.modality-icon-gamification {
  background: linear-gradient(135deg, var(--icon-gradient-orange-start), var(--icon-gradient-orange-end));
}

.modality-icon-marketplace {
  background: linear-gradient(135deg, #EF4444, #F87171);
}

/* Responsive Icon Sizes */
@media (max-width: 480px) {
  .feature-icon {
    width: 70px;
    height: 70px;
  }

  .feature-icon i {
    font-size: 1.75rem;
  }
}

/* ===== SECTION UTILITIES ===== */
.section {
  padding: var(--spacing-3xl) 0;
}

.section-dark {
  background-color: var(--wink-bg-secondary) !important;
}

/* ===== SECTION BACKGROUND UTILITIES ===== */
.section-bg-light-gradient {
  background: linear-gradient(180deg, var(--section-gradient-light-start) 0%, var(--section-gradient-light-end) 100%);
}

.section-bg-primary-gradient {
  background: linear-gradient(135deg, var(--section-gradient-primary-start), var(--section-gradient-primary-mid), var(--section-gradient-primary-end));
}

.section-bg-primary-gradient-3color {
  background: linear-gradient(135deg, var(--section-gradient-primary-start) 0%, var(--section-gradient-primary-mid) 50%, var(--section-gradient-primary-end) 100%);
}

/* ===== DECORATIVE SHAPES ===== */
.decorative-shape-radial-light {
  background: var(--decorative-gradient-radial-light);
}

.decorative-shape-radial-accent {
  background: var(--decorative-gradient-radial-accent);
}

/* ===== DIVIDER & HIGHLIGHT UTILITIES ===== */
.gradient-divider {
  border: none;
  height: 2px;
  background: var(--gradient-divider);
}

.highlight-box {
  background: var(--gradient-highlight-box);
}

/* ===================================================================
   3. NAVBAR & FOOTER LAYOUT STYLES
   =================================================================== */

/* ===== ENHANCED NAVBAR GLASSMORPHISM ===== */
.wink-navbar {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  transition: all 0.3s ease;
  box-shadow: none !important;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.wink-navbar.navbar-scrolled {
  background: transparent !important;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
}

.wink-navbar .navbar-brand {
  font-weight: var(--font-bold, 700);
  color: var(--text-primary, #1F2937) !important;
  transition: all 0.3s ease;
}

.wink-navbar .navbar-brand span {
  color: var(--text-primary, #1F2937) !important;
}

.wink-navbar .navbar-brand:hover {
  filter: drop-shadow(0 0 8px var(--wink-primary-30));
  transform: scale(1.02);
}

.wink-navbar .navbar-brand img {
  filter: drop-shadow(0 2px 8px var(--wink-primary-20));
  transition: all 0.3s ease;
}

.wink-navbar .navbar-brand img:hover {
  filter: drop-shadow(0 4px 12px var(--wink-primary-40));
  transform: scale(1.05);
}

.wink-navbar .nav-link {
  color: var(--text-primary, #1F2937) !important;
  font-weight: var(--font-medium, 500);
  transition: all 0.3s ease;
  position: relative;
}

.wink-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-wink-main, linear-gradient(135deg, #5a3db8, #8058e3, #a07be7));
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.wink-navbar .nav-link:hover {
  color: var(--wink-primary, #8058e3) !important;
}

.wink-navbar .nav-link:hover::after {
  width: 80%;
}

.wink-navbar .dropdown-menu {
  background: var(--navbar-dropdown-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--navbar-border-color);
  border-radius: var(--radius-medium, 12px);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-sm, 8px);
}

.wink-navbar .dropdown-item {
  border-radius: var(--radius-small, 8px);
  transition: all 0.2s ease;
  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
}

.wink-navbar .dropdown-item:hover {
  background: var(--wink-primary-10);
  color: var(--wink-primary);
  transform: translateX(4px);
}

/* ===== MENU CONTAINER ===== */
.wink-menu-container {
  transition: all 0.3s ease !important;
}

.wink-navbar.navbar-scrolled .wink-menu-container {
  background: var(--menu-container-bg-scrolled) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  box-shadow: var(--menu-container-shadow-scrolled) !important;
}

/* ===== ENHANCED FOOTER ===== */
.wink-footer {
  background: linear-gradient(135deg, var(--footer-gradient-start) 0%, var(--footer-gradient-mid) 50%, var(--footer-gradient-end) 100%);
  position: relative;
  overflow: hidden;
}

.wink-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--nav-white-02);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

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

.wink-footer h5,
.wink-footer h6 {
  color: white;
  font-weight: var(--font-bold, 700);
  margin-bottom: var(--spacing-lg, 16px);
}

.wink-footer h6 {
  font-size: var(--text-sm, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--gradient-text-wink, linear-gradient(45deg, #8058e3, #a07be7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wink-footer a {
  color: var(--footer-text-color);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.wink-footer a:hover {
  color: var(--footer-text-hover);
  transform: translateX(4px);
  text-shadow: 0 0 10px var(--footer-link-hover-shadow);
}

.wink-footer .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--nav-white-10);
  border-radius: 50%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.wink-footer .social-link:hover {
  background: var(--gradient-wink-main);
  transform: translateY(-4px) scale(1.1);
  box-shadow: var(--shadow-glow-light);
}

.wink-footer .footer-divider {
  border-top: 1px solid var(--nav-white-10);
}

/* ===================================================================
   4. COMPONENT STYLES
   =================================================================== */

/* ===== BUTTON STYLES ===== */
.btn-theme-primary,
.wink-btn-primary {
  background: var(--gradient-wink-main);
  background-size: 200% 200%;
  color: white;
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-medium);
  font-weight: var(--font-semibold);
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
}

.btn-theme-primary:hover,
.wink-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-light);
  background-position: right center;
}

.btn-theme-secondary,
.wink-btn-secondary {
  background-color: transparent;
  color: var(--wink-primary);
  border: 2px solid var(--wink-primary);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-medium);
  font-weight: var(--font-semibold);
  transition: all var(--transition-medium);
}

.btn-theme-secondary:hover,
.wink-btn-secondary:hover {
  background-color: var(--wink-primary-10);
  border-color: var(--wink-dark);
  color: var(--wink-dark);
  transform: translateY(-1px);
}

/* ===== CARD STYLES ===== */
.card-theme,
.wink-card {
  background-color: var(--theme-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-medium);
  overflow: hidden;
}

.card-theme:hover,
.wink-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.wink-card-explosive {
  transition: all var(--transition-medium);
}

.wink-card-explosive:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-glow-light);
}

/* ===== FORM STYLES ===== */
.form-control-theme {
  border-color: var(--color-border);
  border-radius: var(--radius-medium);
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: var(--font-family-body);
  transition: all var(--transition-fast);
}

.form-control-theme:focus {
  border-color: var(--wink-primary);
  box-shadow: 0 0 0 3px var(--wink-primary-20);
  outline: none;
}

/* ===== BADGE STYLES ===== */
.badge-theme-primary {
  background: var(--gradient-wink-main);
  color: white;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-medium);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.badge-theme-success {
  background: var(--gradient-success);
  color: white;
}

.badge-theme-warning {
  background: var(--gradient-warning);
  color: white;
}

.badge-theme-error {
  background: var(--gradient-error);
  color: white;
}

/* ===== ALERT STYLES ===== */
.alert-theme-info {
  background-color: var(--wink-primary-10);
  border-left: 4px solid var(--wink-primary);
  color: var(--text-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-medium);
}

.alert-theme-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-left: 4px solid var(--color-success);
}

.alert-theme-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left: 4px solid var(--color-warning);
}

.alert-theme-error {
  background-color: rgba(239, 68, 68, 0.1);
  border-left: 4px solid var(--color-error);
}

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

/* ===== GLASSMORPHISM UTILITIES ===== */
.wink-glass {
  background: var(--glass-bg-light) !important;
  backdrop-filter: var(--blur-medium) !important;
  -webkit-backdrop-filter: var(--blur-medium) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-large) !important;
}

.wink-glass-strong {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--blur-strong) !important;
  -webkit-backdrop-filter: var(--blur-strong) !important;
  border: 1px solid var(--glass-border-strong) !important;
}

.wink-glass-light {
  background: var(--glass-bg-light) !important;
  backdrop-filter: var(--blur-light) !important;
  -webkit-backdrop-filter: var(--blur-light) !important;
  border: 1px solid var(--glass-border-light) !important;
}

/* ===== GRADIENT UTILITIES ===== */
.wink-gradient-bg {
  background: var(--gradient-wink-main);
  background-size: 200% 200%;
}

.wink-gradient-text {
  background: var(--gradient-text-wink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== HOVER EFFECTS ===== */
.wink-glow-hover {
  transition: all var(--transition-medium);
}

.wink-glow-hover:hover {
  box-shadow: var(--shadow-glow-light);
}

.wink-3d-hover {
  transition: all var(--transition-medium);
}

.wink-3d-hover:hover {
  transform: perspective(1000px) rotateY(5deg) translateY(-4px);
}

.wink-magnetic-hover {
  transition: all var(--transition-medium);
}

.wink-magnetic-hover:hover {
  transform: perspective(1000px) rotateY(5deg) translateY(-4px);
  box-shadow: var(--shadow-glow-light);
}

/* ===== TEXT & BACKGROUND UTILITIES ===== */
.text-theme-primary {
  color: var(--wink-primary);
}

.text-theme-secondary {
  color: var(--text-secondary);
}

.text-theme-tertiary {
  color: var(--text-disabled);
}

.bg-theme-primary {
  background-color: var(--wink-primary);
}

.bg-theme-secondary {
  background-color: var(--theme-bg-secondary);
}

.bg-theme-tertiary {
  background-color: var(--theme-bg-tertiary);
}

.border-theme {
  border-color: var(--color-border);
}

.border-theme-light {
  border-color: var(--theme-border-light);
}

.border-theme-dark {
  border-color: var(--theme-border-dark);
}

/* ===== VUETIFY OVERRIDES ===== */
.v-application {
  font-family: var(--font-family-primary) !important;
}

.v-btn {
  font-family: var(--font-family-primary) !important;
}

.v-card-title {
  font-family: var(--font-family-heading) !important;
}

.v-list-item-title {
  font-family: var(--font-family-primary) !important;
}

.v-text-field input {
  font-family: var(--font-family-primary) !important;
}

.v-textarea textarea {
  font-family: var(--font-family-primary) !important;
}

.progress-dot.current {
  background-color: rgb(var(--v-theme-primary));
  color: white;
  box-shadow: 0 0 0 4px var(--wink-primary-20);
}

/* ===================================================================
   6. ANIMATIONS
   =================================================================== */

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes bounce {

  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translateY(0);
  }

  40%,
  43% {
    transform: translateY(-8px);
  }

  70% {
    transform: translateY(-4px);
  }

  90% {
    transform: translateY(-2px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

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

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

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ===== ANIMATION UTILITIES ===== */
.wink-animate-float {
  animation: float 3s ease-in-out infinite;
}

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

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

.wink-animate-gradient {
  animation: gradientShift 15s ease infinite;
}

/* ===================================================================
   7. RESPONSIVE DESIGN
   =================================================================== */

/* ===== NAVBAR RESPONSIVE ===== */
@media (max-width: 992px) {
  .wink-navbar .nav-link::after {
    display: none;
  }

  .wink-menu-container {
    border-radius: 25px !important;
    padding: 10px 15px !important;
    margin: 15px 0 !important;
    flex-wrap: wrap !important;
  }

  .wink-navbar .navbar-brand {
    flex: 1 !important;
    margin-right: 15px !important;
  }

  .navbar-toggler {
    margin-left: auto !important;
  }

  .wink-navbar .wink-nav-collapse {
    flex-grow: 1;
    align-items: center;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 15px 0 0 0 !important;
    margin-top: 15px !important;
    box-shadow: none !important;
    width: 100% !important;
    border-top: 1px solid var(--nav-divider) !important;
  }

  .wink-navbar .navbar-nav {
    gap: 4px !important;
    width: 100% !important;
  }

  .wink-navbar .nav-item {
    width: 100% !important;
  }

  .wink-navbar .nav-link {
    padding: 12px 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    color: var(--text-primary) !important;
    background: transparent !important;
  }

  .wink-navbar .nav-link:hover {
    background: var(--navbar-item-hover-bg) !important;
    color: var(--wink-primary) !important;
  }

  .wink-navbar .nav-link i {
    width: 20px;
    text-align: center;
  }

  .wink-navbar .nav-item[style*="margin-left"] {
    margin-left: 0 !important;
    margin-top: 12px !important;
    width: 100% !important;
  }

  .wink-navbar .nav-item .btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  .wink-navbar .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    margin-top: 8px;
    background: var(--navbar-dropdown-bg) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--navbar-border-color) !important;
  }

  .wink-navbar .dropdown-toggle {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .navbar-toggler {
    border: none !important;
    padding: 8px !important;
    border-radius: 8px !important;
    background: var(--navbar-item-hover-bg) !important;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 3px var(--wink-primary-15) !important;
  }

  .navbar-toggler-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 576px) {
  .wink-menu-container {
    border-radius: 20px !important;
    padding: 8px 12px !important;
    margin: 10px 0 !important;
  }

  .wink-navbar .navbar-brand {
    margin-right: 10px !important;
  }

  .wink-navbar .navbar-brand img {
    height: 32px !important;
  }

  .wink-navbar .navbar-brand span {
    font-size: 16px !important;
  }

  .wink-navbar .nav-link {
    padding: 10px 14px !important;
    font-size: 15px !important;
  }

  .wink-navbar .nav-item .btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }
}

/* ===== GENERAL RESPONSIVE ===== */
@media (max-width: 768px) {
  :root {
    --text-4xl: 2rem;
    --text-3xl: 1.75rem;
    --text-2xl: 1.5rem;
  }

  .wink-glass,
  .wink-glass-strong,
  .wink-glass-light {
    backdrop-filter: var(--blur-light) !important;
    -webkit-backdrop-filter: var(--blur-light) !important;
  }
}

/* ===================================================================
   8. ACCESSIBILITY
   =================================================================== */

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--wink-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===================================================================
   9. NAVBAR MENU STYLES
   =================================================================== */

/* Modern rounded menu styling */
.wink-navbar {
  padding: 0;
  transition: all 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: transparent;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Remove default navbar brand gradient */
.wink-navbar .navbar-brand {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  filter: none !important;
}

/* Remove default nav-link underline effect */
.wink-navbar .nav-link::after {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .wink-menu-container {
    border-radius: 20px !important;
    flex-wrap: wrap !important;
  }

  .wink-nav-collapse {
    margin-top: 15px;
    width: 100%;
    flex-basis: 100%;
  }

  .navbar-nav {
    flex-direction: column !important;
    width: 100%;
    gap: 4px !important;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    display: block;
    width: 100%;
  }
}

/* Desktop layout */
@media (min-width: 992px) {
  .navbar-toggler {
    display: none;
  }

  .wink-nav-collapse {
    display: flex !important;
    flex-basis: auto;
  }
}

/* Smooth hover effects */
.dropdown-item:hover {
  background-color: rgba(79, 70, 229, 0.1) !important;
  transform: translateX(4px);
  transition: all 0.2s ease;
}

/* Active link styling */
.nav-link.active {
  background-color: rgba(0, 0, 0, 0.08) !important;
  font-weight: 600;
}