@tailwind base;
@tailwind components;
@tailwind utilities;

/* Ensure Radix UI tooltips are always on top */
[data-radix-popper-content-wrapper] {
  z-index: 999999 !important;
}

/* ========================================
   Design System - CSS Variables
   ======================================== */

:root {
  /* ===================
     Typography System
     =================== */

  /* Font Families */
  --font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif;
  --font-mono: 'Monaco', 'Courier New', monospace;

  /* Font Sizes - Mobile First */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */

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

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ===================
     Spacing System
     =================== */

  --space-0: 0;
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */

  /* ===================
     Light Mode Colors
     =================== */

  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-accent: #eff6ff;
  --bg-hover: #f9fafb;
  --bg-active: #e5e7eb;
  --bg-disabled: #f3f4f6;

  /* Surface Colors (Cards, Modals, etc) */
  --surface-primary: #ffffff;
  --surface-secondary: #f9fafb;
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(0, 0, 0, 0.5);

  /* Text Colors */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;
  --text-disabled: #d1d5db;
  --text-inverse: #ffffff;
  --text-link: var(--primary-color);
  --text-link-hover: var(--primary-color-dark);

  /* Border Colors */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-tertiary: #9ca3af;
  --border-focus: var(--primary-color);
  --border-error: #ef4444;
  --border-success: #10b981;
  --border-warning: #f59e0b;

  /* Button Specific */
  --btn-primary-bg: var(--primary-color);
  --btn-primary-hover: var(--primary-color-dark);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #f3f4f6;
  --btn-secondary-hover: #e5e7eb;
  --btn-secondary-text: #374151;
  --btn-danger-bg: #ef4444;
  --btn-danger-hover: #dc2626;
  --btn-danger-text: #ffffff;

  /* Button Gradients */
  --button-gradient: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  --button-gradient-hover: linear-gradient(to right, var(--secondary-color), var(--primary-color));

  /* Status Colors */
  --color-success: #10b981;
  --color-success-bg: #d1fae5;
  --color-error: #ef4444;
  --color-error-bg: #fee2e2;
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-info: var(--primary-color);
  --color-info-bg: var(--primary-color-light);

  /* Shadow System */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --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-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* Z-index Scale */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-popover: 50;
  --z-toast: 60;
  --z-tooltip: 70;
}

/* ===================
   Dark Mode Colors
   =================== */

.dark {
  /* Background Colors */
  --bg-primary: #0a0a0a;
  --bg-secondary: #18181b;
  --bg-tertiary: #27272a;
  --bg-accent: #1e293b;
  --bg-hover: #27272a;
  --bg-active: #3f3f46;
  --bg-disabled: #27272a;

  /* Surface Colors */
  --surface-primary: #18181b;
  --surface-secondary: #27272a;
  --surface-elevated: #27272a;
  --surface-overlay: rgba(0, 0, 0, 0.7);

  /* Text Colors */
  --text-primary: #fafafa;
  --text-secondary: #e4e4e7;
  --text-tertiary: #a1a1aa;
  --text-muted: #71717a;
  --text-disabled: #52525b;
  --text-inverse: #09090b;
  --text-link: var(--primary-color-light);
  --text-link-hover: var(--primary-color);

  /* Border Colors */
  --border-primary: #27272a;
  --border-secondary: #3f3f46;
  --border-tertiary: #52525b;
  --border-focus: var(--primary-color-light);
  --border-error: #dc2626;
  --border-success: #059669;
  --border-warning: #d97706;

  /* Button Specific */
  --btn-primary-bg: var(--primary-color);
  --btn-primary-hover: var(--primary-color-light);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #27272a;
  --btn-secondary-hover: #3f3f46;
  --btn-secondary-text: #e4e4e7;
  --btn-danger-bg: #dc2626;
  --btn-danger-hover: #ef4444;
  --btn-danger-text: #ffffff;

  /* Status Colors */
  --color-success: #059669;
  --color-success-bg: rgba(5, 150, 105, 0.1);
  --color-error: #dc2626;
  --color-error-bg: rgba(220, 38, 38, 0.1);
  --color-warning: #d97706;
  --color-warning-bg: rgba(217, 119, 6, 0.1);
  --color-info: var(--primary-color);
  --color-info-bg: var(--primary-color-light);

  /* Shadow System - More subtle in dark mode */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

/* ===================
   Responsive Typography
   =================== */

@media (min-width: 640px) {
  :root {
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
  }
}

@media (min-width: 1536px) {
  :root {
    --text-base: 1.0625rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.625rem;
    --text-3xl: 2.125rem;
    --text-4xl: 2.75rem;
    --text-5xl: 4rem;
  }
}

/* ===================
   Base Styles Reset
   =================== */

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
  }

  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); }

  p {
    line-height: var(--leading-relaxed);
  }

  a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--text-link-hover);
  }
}

/* ===================
   Utility Classes
   =================== */

@layer components {
  /* Consistent Container Classes */
  .container-fluid {
    @apply w-full px-4 sm:px-6 lg:px-8;
  }

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

  /* Consistent Section Spacing */
  .section-spacing {
    @apply py-8 sm:py-12 lg:py-16;
  }

  .section-spacing-sm {
    @apply py-4 sm:py-6 lg:py-8;
  }

  .section-spacing-lg {
    @apply py-12 sm:py-16 lg:py-24;
  }

  /* Consistent Card Styles */
  .card-base {
    @apply rounded-lg border bg-surface border-border shadow-sm hover:shadow-md transition-shadow duration-200;
  }

  .card-padding {
    @apply p-4 sm:p-6;
  }

  /* Consistent Button Groups */
  .btn-group {
    @apply inline-flex items-center gap-2 flex-wrap;
  }

  /* Button Gradient Utilities */
  .bg-button-gradient {
    background: var(--button-gradient, linear-gradient(to right, var(--primary-color, #3b82f6), var(--secondary-color, #10b981)));
  }

  .hover\\:bg-button-gradient-hover:hover {
    background: var(--button-gradient-hover, linear-gradient(to right, var(--secondary-color, #10b981), var(--primary-color, #3b82f6))) !important;
  }

  /* Consistent Form Groups */
  .form-group {
    @apply space-y-2 mb-4;
  }

  .form-label {
    @apply block text-sm font-medium text-foreground mb-1.5;
  }

  /* Consistent Grid Gaps */
  .grid-gap-responsive {
    @apply gap-4 sm:gap-6 lg:gap-8;
  }

  /* Typography Utilities */
  .text-responsive-sm {
    @apply text-xs sm:text-sm;
  }

  .text-responsive-base {
    @apply text-sm sm:text-base;
  }

  .text-responsive-lg {
    @apply text-base sm:text-lg lg:text-xl;
  }

  .text-responsive-xl {
    @apply text-lg sm:text-xl lg:text-2xl;
  }

  .text-responsive-2xl {
    @apply text-xl sm:text-2xl lg:text-3xl;
  }

  .text-responsive-3xl {
    @apply text-2xl sm:text-3xl lg:text-4xl;
  }

  .heading-1 {
    @apply text-responsive-3xl font-bold text-foreground;
  }

  .heading-2 {
    @apply text-responsive-2xl font-semibold text-foreground;
  }

  .heading-3 {
    @apply text-responsive-xl font-semibold text-foreground;
  }

  .heading-4 {
    @apply text-responsive-lg font-medium text-foreground;
  }

  .text-body {
    @apply text-responsive-base text-foreground-secondary;
  }

  .text-caption {
    @apply text-responsive-sm text-foreground-tertiary;
  }

  /* Icon Sizes */
  .icon-responsive-sm {
    @apply h-3 w-3 sm:h-4 sm:w-4;
  }

  .icon-responsive {
    @apply h-4 w-4 sm:h-5 sm:w-5;
  }

  .icon-responsive-lg {
    @apply h-5 w-5 sm:h-6 sm:w-6;
  }

  /* Flex Responsive Utilities */
  .flex-responsive {
    @apply flex flex-col sm:flex-row;
  }

  .flex-responsive-reverse {
    @apply flex flex-col-reverse sm:flex-row;
  }

  /* Shadows for Dark Mode */
  .shadow-elevation-low {
    @apply shadow-sm dark:shadow-xl dark:shadow-black/20;
  }

  .shadow-elevation-medium {
    @apply shadow-md dark:shadow-xl dark:shadow-black/30;
  }

  .shadow-elevation-high {
    @apply shadow-lg dark:shadow-2xl dark:shadow-black/40;
  }

  /* Status Colors with Dark Mode Support */
  .status-success {
    @apply text-success bg-success-bg border-success;
  }

  .status-error {
    @apply text-error bg-error-bg border-error;
  }

  .status-warning {
    @apply text-warning bg-warning-bg border-warning;
  }

  .status-info {
    @apply text-info bg-info-bg border-info;
  }

  /* Interactive Elements */
  .interactive-element {
    @apply transition-all duration-200 cursor-pointer;
  }

  .hover-lift {
    @apply hover:-translate-y-0.5 hover:shadow-lg transition-all duration-200;
  }

  .hover-scale {
    @apply hover:scale-105 transition-transform duration-200;
  }

  .active-scale {
    @apply active:scale-95;
  }

  /* Focus Styles */
  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
    --tw-ring-color: var(--primary-color);
  }

  /* Disabled State */
  .disabled-state {
    @apply disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
  }
}

/* Toast Animation Classes */
@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutToBottom {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.animate-in {
    animation-fill-mode: both;
}

.animate-out {
    animation-fill-mode: both;
}

.slide-in-from-bottom-4 {
    animation: slideInFromBottom 0.3s ease-out;
}

.slide-out-to-bottom-4 {
    animation: slideOutToBottom 0.3s ease-out;
}

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

.fade-out {
    animation: fadeOut 0.3s ease-out;
}

/* Enhanced Drag and Drop Animations */
.drag-preview {
    transform: rotate(3deg) scale(0.9);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.drag-over-day {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 2px dashed #3b82f6;
    transform: scale(1.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.drag-card {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.drag-card:hover {
    transform: scale(1.02);
}

.drag-card:active {
    transform: scale(0.95);
}

.drag-card.dragging {
    opacity: 0.5;
    transform: rotate(3deg) scale(0.9);
}

/* Smooth calendar grid animations */
.calendar-day {
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.calendar-day.drag-over {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-color: #3b82f6;
    transform: scale(1.01);
}

/* Loading and success overlay animations */
@keyframes slideInFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-from-top {
    animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preloader {
    @apply fixed top-0 left-0 w-full h-full flex justify-center items-center bg-[#000] overflow-hidden z-[100];
}

.preloader::before,
.preloader::after {
    content: "";
    @apply absolute w-[380px] h-[380px] rounded-full blur-3xl opacity-15;
}

.preloader::before {
    @apply bg-primary -top-10 -left-10;
}

.preloader::after {
    @apply bg-secondary -bottom-10 -right-10;
}

.preloader .text-container {
    @apply flex flex-col items-center gap-4 overflow-hidden text-white visible;
}

/* Premium Preloader */
.premium-preloader {
    @apply fixed top-0 left-0 w-full h-full flex justify-center items-center overflow-hidden z-[9999];
    background: linear-gradient(135deg, #0f172a 0%, #581c87 50%, #0f172a 100%);
    min-height: 100vh;
    min-width: 100vw;
}

/* Premium animations */
@keyframes premium-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.premium-shimmer {
    position: relative;
    overflow: hidden;
}

.premium-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: premium-shimmer 2s infinite;
}

/* Glass morphism effect */
.glass {
    @apply backdrop-blur-lg bg-white/10 border border-white/20 rounded-xl;
}

/* Shimmer effect for loading states */
@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.shimmer {
    background: linear-gradient(90deg, #f0f0f0 0px, #e8e8e8 40px, #f0f0f0 80px);
    background-size: 200px;
    animation: shimmer 1.5s infinite;
}

.shimmer.dark {
    background: linear-gradient(90deg, #374151 0px, #4b5563 40px, #374151 80px);
    background-size: 200px;
    animation: shimmer 1.5s infinite;
}

/* Custom scrollbar styles for dropdowns */
@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
  }

  .scrollbar-thumb-gray-300 {
    --tw-scrollbar-thumb: rgb(209 213 219);
  }

  .scrollbar-thumb-gray-600 {
    --tw-scrollbar-thumb: rgb(75 85 99);
  }

  .scrollbar-track-transparent {
    --tw-scrollbar-track: transparent;
  }

  /* Webkit scrollbar styles */
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--tw-scrollbar-track, transparent);
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--tw-scrollbar-thumb, rgb(156 163 175));
    border-radius: 3px;
    transition: background-color 0.2s;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--tw-scrollbar-thumb-hover, rgb(107 114 128));
  }

  /* Dark mode scrollbar */
  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--tw-scrollbar-thumb, rgb(75 85 99));
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--tw-scrollbar-thumb-hover, rgb(55 65 81));
  }
}

/* AI Assistant Greeting Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-fade-in {
  animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in-delay {
  animation: fadeInUp 0.8s ease-out;
}

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

.animate-slide-up-delay {
  animation: slideUp 0.9s ease-out;
}

.animate-slide-up-delay-2 {
  animation: slideUp 1.1s ease-out;
}

/* Shinny Blink Input Border Animation */
@keyframes shinnyBlink {
  0% {
    border-color: #d1d5db; /* Default gray border */
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
  25% {
    border-color: #3b82f6; /* Primary blue */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }
  50% {
    border-color: #8b5cf6; /* Secondary purple */
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
  }
  75% {
    border-color: #06b6d4; /* Cyan accent */
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.1);
  }
  100% {
    border-color: #d1d5db;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

@keyframes shinnyBlinkDark {
  0% {
    border-color: #4b5563; /* Dark gray border */
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
  25% {
    border-color: #3b82f6; /* Primary blue */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  }
  50% {
    border-color: #8b5cf6; /* Secondary purple */
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
  }
  75% {
    border-color: #06b6d4; /* Cyan accent */
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
  }
  100% {
    border-color: #4b5563;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* Apply default styling to all input elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  border-width: 1px !important;
  border-color: #d1d5db; /* Default gray border */
}

/* Dark mode default styling */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="search"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="time"],
.dark textarea,
.dark select {
  border-color: #4b5563; /* Dark gray border */
}

/* Start shinny blink animation when focused/clicked */
input:focus,
textarea:focus,
select:focus {
  animation: shinnyBlink 3s ease-in-out infinite;
  border-width: 1px !important;
  outline: none;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  animation: shinnyBlinkDark 3s ease-in-out infinite;
  border-width: 1px !important;
  outline: none;
}

/* Custom class for extra shinny effect */
.input-shinny {
  animation: shinnyBlink 2s ease-in-out infinite;
  border-width: 1px !important;
}

.dark .input-shinny {
  animation: shinnyBlinkDark 2s ease-in-out infinite;
  border-width: 1px !important;
}

/* Custom Scrollbar for Permission Modal */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Dark mode scrollbar */
.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Auth Layout Viewport Optimization */
@layer utilities {
  /* Viewport height utilities for mobile browsers */
  .min-h-screen-safe {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for modern browsers */
  }

  .h-screen-safe {
    height: 100vh;
    height: 100dvh;
  }

  /* Mobile-first responsive spacing */
  .auth-container-spacing {
    @apply px-4 py-4 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-12 lg:py-12;
  }

  /* Compact form spacing for mobile */
  .auth-form-compact {
    @apply space-y-3 sm:space-y-4 md:space-y-5;
  }

  /* Responsive text sizing for auth forms */
  .auth-heading {
    @apply text-lg sm:text-xl md:text-2xl lg:text-3xl;
  }

  .auth-subheading {
    @apply text-xs sm:text-sm md:text-base;
  }

  /* Mobile-optimized input sizing */
  .auth-input {
    @apply px-3 py-2 sm:px-4 sm:py-2.5 md:py-3 text-sm sm:text-base;
  }

  /* Compact button styling */
  .auth-button {
    @apply py-2.5 sm:py-3 md:py-3.5 text-sm sm:text-base font-semibold;
  }

  /* Mobile viewport adjustments */
  @media screen and (max-height: 640px) {
    .auth-mobile-compact {
      @apply py-2 space-y-2;
    }

    .auth-mobile-compact .auth-heading {
      @apply text-base sm:text-lg;
    }

    .auth-mobile-compact .auth-input {
      @apply py-2 text-sm;
    }

    .auth-mobile-compact .auth-button {
      @apply py-2 text-sm;
    }
  }

  /* Extra small screen adjustments */
  @media screen and (max-height: 568px) {
    .auth-xs-compact {
      @apply py-1 space-y-1;
    }

    .auth-xs-compact .text-center {
      @apply mb-3;
    }

    .auth-xs-compact .auth-heading {
      @apply text-sm font-semibold mb-1;
    }

    .auth-xs-compact .auth-subheading {
      @apply text-xs;
    }

    .auth-xs-compact .auth-input {
      @apply py-1.5 text-xs;
    }

    .auth-xs-compact .auth-button {
      @apply py-1.5 text-xs;
    }
  }

  /* Landscape mobile optimization */
  @media screen and (max-height: 480px) and (orientation: landscape) {
    .auth-landscape {
      @apply flex-row items-center justify-center;
    }

    .auth-landscape-content {
      @apply max-w-sm mx-auto;
    }
  }
}

/* Safe area insets for mobile devices */
@supports (padding: max(0px)) {
  .auth-safe-area {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Large Display Optimization (24-inch and above) */
@media screen and (min-width: 1920px) {
  .auth-large-display {
    @apply 2xl:px-20 2xl:py-20;
  }

  .auth-large-display .auth-heading {
    @apply 2xl:text-5xl;
  }

  .auth-large-display .auth-subheading {
    @apply 2xl:text-xl;
  }

  .auth-large-display .auth-input {
    @apply 2xl:px-8 2xl:py-6 2xl:text-xl;
  }

  .auth-large-display .auth-button {
    @apply 2xl:py-8 2xl:text-2xl;
  }
}

/* Ultra-wide display optimization */
@media screen and (min-width: 2560px) {
  .auth-ultra-wide {
    @apply max-w-6xl mx-auto;
  }
}

/* 4K display optimization */
@media screen and (min-width: 3840px) {
  .auth-4k {
    @apply scale-125 origin-center;
  }
}