/* ========================================
   RESPONSIVE & CROSS-BROWSER STYLES
   Universal responsive rules for all pages
   ======================================== */

/* ========================================
   Cross-Browser Compatibility
   ======================================== */

/* Flexbox fallbacks */
.flex,
.flex-center,
.flex-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

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

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

/* Grid fallbacks */
.grid {
    display: -ms-grid;
    display: grid;
}

/* Transform prefixes */
[class*="transform"],
[class*="hover"]:hover {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

/* Transition prefixes */
* {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

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

/* ========================================
   Tablet & Desktop
   ======================================== */
@media (max-width: 1024px) {
    /* Table horizontal scroll */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========================================
   Touch Device Optimizations
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    button,
    a {
        /*min-height: 44px;*/
        /*min-width: 44px;*/
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover,
    button:hover,
    a:hover {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    
    /* Better tap highlighting */
    * {
        -webkit-tap-highlight-color: rgba(40, 172, 117, 0.1);
        tap-highlight-color: rgba(40, 172, 117, 0.1);
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .no-print,
    header,
    footer,
    .sidebar,
    .btn {
        display: none !important;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ========================================
   High DPI / Retina Displays
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Sharper borders */
    .card,
    .btn,
    .form-input {
        border-width: 0.5px;
    }
}

/* ========================================
   Reduced Motion (Accessibility)
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        -moz-transition-duration: 0.01ms !important;
        -o-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   Dark Mode Support
   ======================================== */
@media (prefers-color-scheme: dark) {
    body:not(.light-theme) {
        --color-background: #1A1D23;
        --color-white: #23262D;
        --color-text-primary: #E6E9ED;
        --color-text-secondary: #AAB2BD;
        --color-border: #2F3339;
    }
}

/* ========================================
   Orientation Changes
   ======================================== */
@media (orientation: landscape) and (max-height: 500px) {
    /* Compact header for landscape mobile */
    header {
        height: 48px;
    }
    
    .content-wrapper {
        padding: 16px 0;
    }
}

/* ========================================
   IE11 Specific Fixes
   ======================================== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE11 flexbox fixes */
    .flex {
        display: -ms-flexbox;
    }
    
    .flex-center {
        -ms-flex-align: center;
        -ms-flex-pack: center;
    }
    
    .flex-between {
        -ms-flex-align: center;
        -ms-flex-pack: justify;
    }
    
    /* IE11 grid fallback */
    .grid {
        display: block;
    }
    
    .grid > * {
        display: inline-block;
        vertical-align: top;
        width: calc(50% - 10px);
        margin-right: 10px;
    }
}

/* ========================================
   Safari Specific Fixes
   ======================================== */
@supports (-webkit-appearance: none) {
    /* Fix for Safari input styling */
    .form-input,
    .form-select {
        -webkit-appearance: none;
        appearance: none;
    }
    
    /* Fix for Safari button styling */
    .btn {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* ========================================
   Firefox Specific Fixes
   ======================================== */
@-moz-document url-prefix() {
    /* Firefox scrollbar styling */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary) var(--color-background);
    }
}