/* ===================================
   COMPREHENSIVE UI/UX FIX
   Enterprise-Grade Solution for All Pages
   =================================== */

/* GLOBAL RULE: Remove ALL backdrop-blur and fix semi-transparent backgrounds */

/* ===================================
   1. REMOVE ALL BLUR EFFECTS
   =================================== */

/* Force disable ALL backdrop-blur across entire site */
[class*="backdrop-blur"],
.backdrop-blur-sm,
.backdrop-blur-md,
.backdrop-blur-lg,
.backdrop-blur-xl {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ===================================
   2. FIX SEMI-TRANSPARENT CARDS
   =================================== */

/* All bg-white with opacity needs proper replacement */
[class*="bg-white/5"],
[class*="bg-white/10"],
[class*="bg-white/20"],
[class*="bg-white/30"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Hover states for cards */
[class*="bg-white/5"]:hover,
[class*="bg-white/10"]:hover,
[class*="bg-white/20"]:hover,
[class*="bg-white/30"]:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s ease;
}

/* ===================================
   3. GLASS EFFECT REPLACEMENT
   =================================== */

/* Replace glass-morphism with solid gradient cards */
.glass-effect,
[class*="glass"] {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.05) 100%) !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ===================================
   4. STEP CARDS (Journey Pages)
   =================================== */

/* Step indicator cards */
.step-card,
[class*="step-"] {
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.15),
            rgba(37, 99, 235, 0.25)) !important;
    border: 2px solid rgba(96, 165, 250, 0.4) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Active step */
.step-card.active,
[class*="step-"].active {
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.3),
            rgba(37, 99, 235, 0.4)) !important;
    border-color: rgba(96, 165, 250, 0.8) !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ===================================
   5. METRIC CARDS
   =================================== */

/* All metric display cards */
.metric-card,
[class*="metric-"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ===================================
   6. FEATURE CARDS
   =================================== */

/* Feature highlight cards */
.feature-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ===================================
   7. PROGRESS BARS
   =================================== */

/* Progress indicators */
.progress-bar,
[class*="progress-"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.progress-fill {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5) !important;
}

/* ===================================
   8. TEXT CONTRAST
   =================================== */

/* Ensure all headings are sharp */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    font-weight: 700 !important;
}

/* White text on dark backgrounds */
.text-white,
[class*="text-white"] {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Colored text */
[class*="text-blue-"],
[class*="text-green-"],
[class*="text-purple-"],
[class*="text-red-"],
[class*="text-yellow-"] {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ===================================
   9. BUTTONS
   =================================== */

/* All gradient buttons */
[class*="bg-gradient-"] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    font-weight: 600 !important;
    border: none !important;
}

[class*="bg-gradient-"]:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) scale(1.02);
}

/* ===================================
   10. ICONS
   =================================== */

/* All Font Awesome icons */
i.fas,
i.far,
i.fab,
i.fa {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Colored icons */
i[class*="text-"] {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

/* ===================================
   11. NAVIGATION
   =================================== */

/* Sidebar and top navigation */
nav,
.sidebar,
#sidebar {
    backdrop-filter: none !important;
    background: transparent !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Navigation links */
nav a,
.sidebar a {
    transition: all 0.3s ease;
}

nav a:hover,
.sidebar a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ===================================
   12. MODALS & OVERLAYS
   =================================== */

/* Modal dialogs */
.modal,
[role="dialog"] {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
}

/* ===================================
   13. TABLES & DATA DISPLAYS
   =================================== */

/* Table rows */
tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Table headers */
th {
    background: rgba(255, 255, 255, 0.08) !important;
    font-weight: 600 !important;
}

/* ===================================
   14. FORMS
   =================================== */

/* Input fields */
input,
textarea,
select {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(100, 116, 139, 0.3) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(59, 130, 246, 0.8) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

/* ===================================
   15. BADGES & TAGS
   =================================== */

/* Badge elements */
.badge,
[class*="badge-"] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.9)) !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4) !important;
    font-weight: 600 !important;
}

/* ===================================
   16. TOOLTIPS
   =================================== */

/* Tooltip styling */
.tooltip,
[role="tooltip"] {
    background: rgba(15, 23, 42, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
}

/* ===================================
   17. SCROLLBARS
   =================================== */

/* Custom scrollbar for dark sections */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6, #8b5cf6);
    border-radius: 6px;
    border: 2px solid rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563eb, #7c3aed);
}

/* ===================================
   18. LOADING STATES
   =================================== */

/* Loading indicators */
.loading,
.spinner {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 3px solid rgba(59, 130, 246, 0.3) !important;
    border-top-color: #3b82f6 !important;
}

/* ===================================
   19. CARDS ON LIGHT BACKGROUNDS
   =================================== */

/* Cards on white/light sections */
section.bg-white [class*="bg-gradient-to"],
section.bg-slate-50 [class*="bg-gradient-to"] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

section.bg-white [class*="bg-gradient-to"]:hover,
section.bg-slate-50 [class*="bg-gradient-to"]:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15),
        0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* ===================================
   20. ACCESSIBILITY
   =================================== */

/* Focus indicators */
*:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.8) !important;
    outline-offset: 2px !important;
}

/* Skip to content link */
.skip-to-content {
    background: #3b82f6 !important;
    color: white !important;
    padding: 0.75rem 1.5rem !important;
}

/* ===================================
   21. RESPONSIVE
   =================================== */

@media (max-width: 768px) {

    /* Reduce shadows on mobile */
    [class*="shadow-"] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    /* Smaller text shadows on mobile */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }
}

/* ===================================
   22. PRINT STYLES
   =================================== */

@media print {

    /* Remove shadows and effects for print */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

/* ===================================
   23. DARK MODE SUPPORT
   =================================== */

@media (prefers-color-scheme: dark) {
    /* Already optimized for dark mode */
}

/* ===================================
   24. HIGH CONTRAST MODE
   =================================== */

@media (prefers-contrast: high) {

    /* Increase all borders and shadows */
    [class*="border-"] {
        border-width: 2px !important;
    }

    * {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    }
}

/* ===================================
   25. REDUCED MOTION
   =================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================================
   FINAL OVERRIDE: NO BLUR ANYWHERE
   =================================== */

/* Ultimate fallback - remove any blur that might sneak through */
body * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Keep decorative background blobs blurred */
.absolute.rounded-full.mix-blend-multiply[class*="blur"] {
    filter: blur(64px) !important;
}

/* ===================================
   END OF COMPREHENSIVE UI FIX
   =================================== */