/* Compatibility Fixes for Cross-Browser Support */

/* IE11 and older browser fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE11 specific fixes */
    .container {
        display: block;
    }
    
    .row {
        display: block;
    }
    
    .col {
        display: inline-block;
        vertical-align: top;
    }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    .form-control {
        box-shadow: none;
    }
}

/* Safari specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .form-control {
        -webkit-appearance: none;
        border-radius: 0;
    }
}

/* Chrome specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    .btn {
        -webkit-appearance: none;
    }
}

/* Flexbox fallbacks for older browsers */
.flex-container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex-item {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

/* Grid fallbacks for older browsers */
.grid-container {
    display: -ms-grid;
    display: grid;
}

/* CSS Grid fallback for IE */
@supports not (display: grid) {
    .grid-container {
        display: flex;
        flex-wrap: wrap;
    }
    
    .grid-item {
        flex: 1 1 300px;
        margin: 0.5rem;
    }
}

/* CSS Custom Properties fallback */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

/* Fallback for browsers that don't support CSS custom properties */
.primary-color { color: #007bff; }
.secondary-color { color: #6c757d; }
.success-color { color: #28a745; }
.danger-color { color: #dc3545; }
.warning-color { color: #ffc107; }
.info-color { color: #17a2b8; }

/* Print styles */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    .btn {
        border: 1px solid #000;
    }
    
    .no-print {
        display: none !important;
    }
}

/* High DPI display fixes */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url('logo@2x.png');
        background-size: contain;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #ffffff;
        --border-color: #333333;
    }
    
    body {
        background-color: var(--bg-color);
        color: var(--text-color);
    }
    
    .card {
        background-color: #2d2d2d;
        border-color: var(--border-color);
    }
    
    .form-control {
        background-color: #2d2d2d;
        border-color: var(--border-color);
        color: var(--text-color);
    }
}