/* @import "tailwindcss";
@import "tw-animate-css"; */

/* ====================================
   MODERN OKLCH COLOR SYSTEM
   Central color definitions for Tailwind CSS
   Based on the provided dark theme palette.
   ====================================*/

:root {
    /* Grayscale Base Colors - Main palette */
    --color-gray-50: oklch(0.98 0 0);   /* Near white */
    --color-gray-100: oklch(0.95 0 0);  /* Foreground */
    --color-gray-200: oklch(0.85 0 0);
    --color-gray-300: oklch(0.75 0 0);
    --color-gray-400: oklch(0.6 0 0);   /* Muted Foreground */
    --color-gray-500: oklch(0.45 0 0);
    --color-gray-600: oklch(0.25 0 0);  /* Border */
    --color-gray-700: oklch(0.22 0 0);  /* Secondary / Input */
    --color-gray-800: oklch(0.16 0 0);  /* Card */
    --color-gray-900: oklch(0.12 0 0);  /* Background */

    /* Accent Colors */
    /* 1. PRIMARY ACCENT - Bright Cyan/Blue */
    --color-accent-primary: oklch(0.7 0.15 195);
    --color-accent-primary-light: oklch(0.8 0.15 195);
    --color-accent-primary-dark: oklch(0.6 0.15 195);

    /* 2. SECONDARY ACCENT (DESTRUCTIVE) - Red-Orange */
    --color-accent-secondary: oklch(0.577 0.245 27.325);
    --color-accent-secondary-light: oklch(0.65 0.245 27.325);
    --color-accent-secondary-dark: oklch(0.5 0.245 27.325);

    /* 3. TERTIARY ACCENT (SUCCESS) - Green */
    --color-accent-tertiary: oklch(0.6 0.12 160);
    --color-accent-tertiary-light: oklch(0.7 0.12 160);
    --color-accent-tertiary-dark: oklch(0.5 0.12 160);

    /* 4. BLUE ACCENT (INFO) - Purple/Violet */
    --color-accent-blue: oklch(0.65 0.18 280);
    --color-accent-blue-light: oklch(0.75 0.18 280);
    --color-accent-blue-dark: oklch(0.55 0.18 280);

    /* Legacy color mappings for compatibility */
    --color-primary-lightest: var(--color-gray-50);
    --color-primary-light: var(--color-gray-100);
    --color-primary-medium: var(--color-gray-400);
    --color-primary-dark: var(--color-gray-600);
    --color-primary-darker: var(--color-gray-700);
    --color-primary-darkest: var(--color-gray-800);
    --color-primary-black: var(--color-gray-900);

    /* Success and error states using accent colors */
    --color-success: var(--color-accent-tertiary);
    --color-success-light: var(--color-accent-tertiary-light);
    --color-success-dark: var(--color-accent-tertiary-dark);
    
    --color-error: var(--color-accent-secondary);
    --color-error-light: var(--color-accent-secondary-light);
    --color-error-dark: var(--color-accent-secondary-dark);
}

/* ====================================================== */
/* UTILITY CLASSES - These should now use the new colors  */
/* ====================================================== */

/* Gray scale classes */
.bg-gray-50 { background-color: var(--color-gray-50) !important; }
.bg-gray-100 { background-color: var(--color-gray-100) !important; }
.bg-gray-200 { background-color: var(--color-gray-200) !important; }
.bg-gray-300 { background-color: var(--color-gray-300) !important; }
.bg-gray-400 { background-color: var(--color-gray-400) !important; }
.bg-gray-500 { background-color: var(--color-gray-500) !important; }
.bg-gray-600 { background-color: var(--color-gray-600) !important; }
.bg-gray-700 { background-color: var(--color-gray-700) !important; }
.bg-gray-800 { background-color: var(--color-gray-800) !important; }
.bg-gray-900 { background-color: var(--color-gray-900) !important; }

.text-gray-50 { color: var(--color-gray-50) !important; }
.text-gray-100 { color: var(--color-gray-100) !important; }
.text-gray-200 { color: var(--color-gray-200) !important; }
.text-gray-300 { color: var(--color-gray-300) !important; }
.text-gray-400 { color: var(--color-gray-400) !important; }
.text-gray-500 { color: var(--color-gray-500) !important; }
.text-gray-600 { color: var(--color-gray-600) !important; }
.text-gray-700 { color: var(--color-gray-700) !important; }
.text-gray-800 { color: var(--color-gray-800) !important; }
.text-gray-900 { color: var(--color-gray-900) !important; }

.border-gray-100 { border-color: var(--color-gray-100) !important; }
.border-gray-200 { border-color: var(--color-gray-200) !important; }
.border-gray-300 { border-color: var(--color-gray-300) !important; }
.border-gray-400 { border-color: var(--color-gray-400) !important; }
.border-gray-500 { border-color: var(--color-gray-500) !important; }
.border-gray-600 { border-color: var(--color-gray-600) !important; }
.border-gray-700 { border-color: var(--color-gray-700) !important; }
.border-gray-800 { border-color: var(--color-gray-800) !important; }


/* Primary accent classes (Cyan/Blue) */
.bg-accent-primary { background-color: var(--color-accent-primary) !important; }
.bg-accent-primary-light { background-color: var(--color-accent-primary-light) !important; }
.bg-accent-primary-dark { background-color: var(--color-accent-primary-dark) !important; }
.text-accent-primary { color: var(--color-accent-primary) !important; }
.text-accent-primary-light { color: var(--color-accent-primary-light) !important; }
.text-accent-primary-dark { color: var(--color-accent-primary-dark) !important; }
.border-accent-primary { border-color: var(--color-accent-primary) !important; }

/* Secondary accent classes (Red-Orange) */
.bg-accent-secondary { background-color: var(--color-accent-secondary) !important; }
.bg-accent-secondary-light { background-color: var(--color-accent-secondary-light) !important; }
.bg-accent-secondary-dark { background-color: var(--color-accent-secondary-dark) !important; }
.text-accent-secondary { color: var(--color-accent-secondary) !important; }
.text-accent-secondary-light { color: var(--color-accent-secondary-light) !important; }
.text-accent-secondary-dark { color: var(--color-accent-secondary-dark) !important; }
.border-accent-secondary { border-color: var(--color-accent-secondary) !important; }

/* Tertiary accent classes (Green) */
.bg-accent-tertiary { background-color: var(--color-accent-tertiary) !important; }
.bg-accent-tertiary-light { background-color: var(--color-accent-tertiary-light) !important; }
.bg-accent-tertiary-dark { background-color: var(--color-accent-tertiary-dark) !important; }
.text-accent-tertiary { color: var(--color-accent-tertiary) !important; }
.text-accent-tertiary-light { color: var(--color-accent-tertiary-light) !important; }
.text-accent-tertiary-dark { color: var(--color-accent-tertiary-dark) !important; }
.border-accent-tertiary { border-color: var(--color-accent-tertiary) !important; }

/* Blue accent classes (Purple/Violet) */
.bg-accent-blue { background-color: var(--color-accent-blue) !important; }
.bg-accent-blue-light { background-color: var(--color-accent-blue-light) !important; }
.bg-accent-blue-dark { background-color: var(--color-accent-blue-dark) !important; }
.text-accent-blue { color: var(--color-accent-blue) !important; }
.text-accent-blue-light { color: var(--color-accent-blue-light) !important; }
.text-accent-blue-dark { color: var(--color-accent-blue-dark) !important; }
.border-accent-blue { border-color: var(--color-accent-blue) !important; }

/* Legacy compatibility classes */
.bg-primary-lightest { background-color: var(--color-gray-50) !important; }
.bg-primary-light { background-color: var(--color-gray-100) !important; }
.bg-primary-medium { background-color: var(--color-gray-400) !important; }
.bg-primary-dark { background-color: var(--color-gray-600) !important; }
.bg-primary-darker { background-color: var(--color-gray-700) !important; }
.bg-primary-darkest { background-color: var(--color-gray-800) !important; }
.bg-primary-black { background-color: var(--color-gray-900) !important; }

.text-primary-lightest { color: var(--color-gray-50) !important; }
.text-primary-light { color: var(--color-gray-100) !important; }
.text-primary-medium { color: var(--color-gray-400) !important; }
.text-primary-dark { color: var(--color-gray-600) !important; }
.text-primary-darker { color: var(--color-gray-700) !important; }
.text-primary-darkest { color: var(--color-gray-800) !important; }
.text-primary-black { color: var(--color-gray-900) !important; }

.border-primary-light { border-color: var(--color-gray-100) !important; }
.border-primary-medium { border-color: var(--color-gray-400) !important; }
.border-primary-dark { border-color: var(--color-gray-600) !important; }
.border-primary-darker { border-color: var(--color-gray-700) !important; }
.border-primary-darkest { border-color: var(--color-gray-800) !important; }
.border-primary-black { border-color: var(--color-gray-900) !important; }

/* Success and error states */
.bg-success { background-color: var(--color-success) !important; }
.text-success { color: var(--color-success) !important; }
.border-success { border-color: var(--color-success) !important; }

.bg-error { background-color: var(--color-error) !important; }
.text-error { color: var(--color-error) !important; }
.border-error { border-color: var(--color-error) !important; }

/* Hover states */
.hover\:bg-gray-100:hover { background-color: var(--color-gray-100) !important; }
.hover\:bg-gray-200:hover { background-color: var(--color-gray-200) !important; }
.hover\:bg-gray-300:hover { background-color: var(--color-gray-300) !important; }
.hover\:bg-gray-600:hover { background-color: var(--color-gray-600) !important; }
.hover\:bg-gray-700:hover { background-color: var(--color-gray-700) !important; }
.hover\:bg-gray-800:hover { background-color: var(--color-gray-800) !important; }

.hover\:text-gray-50:hover { color: var(--color-gray-50) !important; }
.hover\:text-gray-100:hover { color: var(--color-gray-100) !important; }
.hover\:text-gray-900:hover { color: var(--color-gray-900) !important; }

.hover\:text-accent-primary:hover { color: var(--color-accent-primary) !important; }
.hover\:text-accent-primary-dark:hover { color: var(--color-accent-primary-dark) !important; }
.hover\:text-accent-secondary:hover { color: var(--color-accent-secondary) !important; }
.hover\:text-accent-secondary-dark:hover { color: var(--color-accent-secondary-dark) !important; }

.hover\:border-gray-400:hover { border-color: var(--color-gray-400) !important; }
.hover\:border-accent-primary:hover { border-color: var(--color-accent-primary) !important; }

/* Focus states */
.focus\:border-gray-400:focus { border-color: var(--color-gray-400) !important; }
.focus\:border-accent-primary:focus { border-color: var(--color-accent-primary) !important; }
.focus\:bg-gray-700:focus { background-color: var(--color-gray-700) !important; }

/* ========================================================= */
/* TAILWIND CSS UTILITY CLASSES REFERENCE & COMPONENT STYLES  */
/* ========================================================= */

/* NOTE: The comments below reference utility classes. */
/* They will now use the new color palette automatically. */
/* For example, 'bg-gray-700' will now use oklch(0.22 0 0). */

/*
DROPDOWN STYLES - Apply these classes directly in HTML:
- Dropdown menu: bg-gray-700 border-2 border-gray-600 rounded-xl shadow-2xl z-50
- Dropdown items: text-gray-100 bg-transparent hover:bg-gray-800 hover:text-gray-50

TABLE TAG STYLES - Apply these classes directly in HTML:
- Basic tag: inline-flex items-center gap-1 bg-gradient-to-br from-gray-700 to-gray-600 text-gray-100 px-3 py-1.5 rounded-xl text-xs font-medium m-0.5 border border-gray-600 shadow-sm transition-all duration-300
- Clickable tag: cursor-pointer relative overflow-hidden
- Hover state: hover:bg-gradient-to-br hover:from-accent-primary hover:to-accent-primary-light hover:text-white hover:-translate-y-0.5 hover:scale-105 hover:border-accent-primary hover:shadow-cyan-500/30 hover:shadow-lg hover:font-semibold

TABLE STYLES - Apply these classes directly in HTML:
- Table: border-spacing-0
- Table headers (th): bg-gradient-to-br from-gray-700 to-gray-600 text-gray-100 p-4 text-left font-semibold text-sm border-b-2 border-gray-500 sticky top-0 z-10 backdrop-blur-sm first:rounded-tl-xl last:rounded-tr-xl
- Table cells (td): bg-gradient-to-br from-gray-800 to-gray-900 text-gray-100 p-4 border-b border-gray-700 transition-all duration-300
- Table row hover: hover:bg-gradient-to-br hover:from-gray-600 hover:to-gray-700 hover:scale-[1.01] hover:shadow-lg hover:shadow-black/20

SCROLLBAR STYLES - Apply these classes directly in HTML:
- Container: scrollbar-thin scrollbar-track-gray-800 scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400

SUGGESTION PILLS - Apply these classes directly in HTML:
- Basic pill: inline-flex items-center bg-gradient-to-r from-gray-700 to-gray-600 text-gray-100 border border-gray-500 rounded-full px-4 py-2 text-sm font-medium cursor-pointer transition-all duration-300 m-1 relative overflow-hidden
- Hover state: hover:bg-gradient-to-r hover:from-accent-primary hover:to-accent-primary-light hover:text-white hover:-translate-y-2 hover:shadow-lg hover:shadow-cyan-500/30
- Disabled state: disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none
- Add icon: bg-accent-primary text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold mr-2 transition-transform duration-300 hover:rotate-90

STICKY FOOTER - Apply these classes directly in HTML:
- Footer: z-[999] fixed bottom-0 left-0 right-0

CUSTOM GRADIENTS (use with bg-gradient-to-* classes):
- Gray gradient: from-gray-700 to-gray-600
- Dark gray gradient: from-gray-800 to-gray-900
- Accent gradient: from-accent-primary to-accent-primary-light

FILTER DROPDOWN STYLES - Fix z-index layering issues:
- Filter dropdown container when open: position relative, z-index 9999
- Filter dropdown menu: position absolute, z-index 9999, enhanced shadow
*/

/* ====================================
   FILTER DROPDOWN FIXES
   ====================================*/

.filter-dropdown-container {
    position: relative !important;
}

.filter-dropdown-container.active {
    z-index: 35 !important;
}

.filter-dropdown-menu {
    position: absolute !important;
    z-index: 35 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

.filters-grid {
    position: relative !important;
    overflow: visible !important;
}

.filters-grid > * {
    position: relative;
}

.advanced-filters-section {
    position: relative !important;
    z-index: 30 !important;
    overflow: visible !important;
}