/* Browser Compatibility Fallbacks for Old Browsers */
/* Optimized for Tailwind CSS v1.9.6 */

/* IE11 and Old Browser Fallbacks */

/* Flexbox fallbacks for old browsers */
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.items-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.justify-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Transform fallbacks */
.transform {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.translate-x-0 {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

/* Transition fallbacks */
.transition,
.transition-all {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.duration-300 {
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-duration: 300ms;
}

/* Appearance fallbacks */
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Object-fit fallbacks for IE11 */
@supports not (object-fit: cover) {
    img {
        width: 100%;
        height: auto;
    }
}

/* Sticky position fallback for older browsers */
@supports not (position: sticky) {
    .sticky {
        position: relative;
    }
}

/* Grid fallback for IE11 - convert to flexbox */
@supports not (display: grid) {
    .grid {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .grid > * {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        margin-bottom: 1rem;
    }
    
    .grid-cols-2 > * {
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }
    
    .grid-cols-3 > * {
        -webkit-flex: 0 0 33.333%;
        -ms-flex: 0 0 33.333%;
        flex: 0 0 33.333%;
    }
}

/* Backdrop filter fallbacks */
@supports not (backdrop-filter: blur(1px)) {
    .backdrop-blur-sm,
    .backdrop-blur {
        background-color: rgba(255, 255, 255, 0.9);
    }
}

/* CSS Custom Properties fallback for IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE11 specific fallbacks */
    body {
        font-family: 'Montserrat', Arial, sans-serif;
        padding-top: 64px;
    }
    
    header {
        height: 64px;
    }
    
    /* IE11 doesn't support CSS variables, so use direct colors */
    .bg-green-500 { background-color: #22c55e; }
    .bg-green-600 { background-color: #16a34a; }
    .text-green-500 { color: #22c55e; }
    .text-green-600 { color: #16a34a; }
    .border-green-500 { border-color: #22c55e; }
    
    /* Fix flexbox gap in IE11 */
    .gap-4 > * {
        margin-right: 1rem;
        margin-bottom: 1rem;
    }
    
    .gap-4 > *:last-child {
        margin-right: 0;
    }
}

/* Safari-specific fixes */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        /* Safari-only CSS */
        input, textarea, select {
            -webkit-appearance: none;
        }
        
        button {
            -webkit-appearance: button;
        }
    }
}

/* Old Android browser fixes */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select, textarea, input {
        font-size: 16px !important; /* Prevents zoom on focus */
    }
}

/* Text size adjust for old mobile browsers */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fix for old Safari (9-10) */
@supports not (display: grid) {
    .container {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Ensure images load properly in old browsers */
img {
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic; /* IE8+ */
}

/* Box sizing for old browsers */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Shadow fallbacks for old browsers */
.shadow {
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.shadow-md {
    -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Border radius fallbacks */
.rounded {
    -webkit-border-radius: 0.25rem;
    border-radius: 0.25rem;
}

.rounded-lg {
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

.rounded-full {
    -webkit-border-radius: 9999px;
    border-radius: 9999px;
}