/**
 * FishTrip - Cross-Browser Compatible Styles
 * Provides vendor prefixes and compatibility fixes for all browsers
 */

/* ========================================
   1. CSS RESET & VENDOR PREFIX FIXES
   ======================================== */

/* User Select - Cross-browser support */
.no-select,
.leaflet-container,
.leaflet-control {
    -webkit-user-select: none;  /* Safari 3+ */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Chrome 54+, Edge 79+ */
}

.text-select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.select-all {
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

/* User Drag - Cross-browser support */
.no-drag,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    -webkit-user-drag: none;  /* Safari, Chrome */
    -khtml-user-drag: none;   /* Konqueror */
    -moz-user-drag: none;     /* Firefox (for future compatibility) */
    user-drag: none;          /* Future standard */
}

/* Touch Action - For better mobile support */
.leaflet-container {
    -ms-touch-action: none;
    touch-action: none;
}

.leaflet-container.leaflet-touch-drag {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
}

/* ========================================
   2. LEAFLET MAP FIXES
   ======================================== */

/* Override problematic Leaflet styles */
.leaflet-container {
    /* Remove unsupported -ms-zoom */
    zoom: 1;
    /* Proper touch handling */
    -webkit-tap-highlight-color: transparent;
}

/* Fix for Firefox grab cursor */
.leaflet-grab {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

.leaflet-dragging .leaflet-grab {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

/* ========================================
   3. BACKDROP FILTER COMPATIBILITY
   ======================================== */

.glass-effect,
.glass-card {
    /* Fallback for browsers without backdrop-filter support */
    background: rgba(255, 255, 255, 0.95);

    /* Modern browsers with backdrop-filter */
    @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
        background: rgba(255, 255, 255, 0.15);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ========================================
   4. FORM ACCESSIBILITY STYLES
   ======================================== */

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus styles for better accessibility */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-input,
    .form-select,
    .form-textarea {
        border-width: 2px;
    }
}

/* ========================================
   5. RESPONSIVE UTILITIES
   ======================================== */

/* Container queries fallback with media queries */
.responsive-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

/* Mobile first breakpoints */
@media (min-width: 640px) {
    .responsive-grid-sm {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .responsive-grid-md {
        grid-template-columns: repeat(2, 1fr);
    }

    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .responsive-grid-lg {
        grid-template-columns: repeat(3, 1fr);
    }

    .responsive-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) {
    .responsive-grid-xl {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button,
    a,
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .stats-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ========================================
   6. ANIMATION PERFORMANCE
   ======================================== */

/* Use GPU acceleration for animations */
.animate-transform {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

/* Smooth transitions with vendor prefixes */
.transition-all {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* ========================================
   7. FLEXBOX COMPATIBILITY
   ======================================== */

.flex-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

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

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

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

/* ========================================
   8. SCROLL BEHAVIOR
   ======================================== */

/* Smooth scrolling with reduced motion support */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Custom scrollbar styles */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #1f2937;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* ========================================
   9. PRINT STYLES
   ======================================== */

@media print {
    /* Hide non-essential elements */
    .no-print,
    nav,
    .sidebar,
    .modal,
    button {
        display: none !important;
    }

    /* Optimize for printing */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    a {
        text-decoration: underline;
    }

    /* Prevent page breaks inside elements */
    .no-break {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* ========================================
   10. ACCESSIBILITY PREFERENCES
   ======================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
    * {
        border-color: currentColor !important;
    }

    button,
    .btn {
        border: 2px solid currentColor;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1f2937;
        --text-color: #f3f4f6;
        --border-color: #374151;
    }
}

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

/* ========================================
   11. MOBILE-SPECIFIC FIXES
   ======================================== */

/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS specific styles */
    input,
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on focus */
    }

    /* Fix for iOS bounce scrolling */
    .scroll-container {
        -webkit-overflow-scrolling: touch;
    }
}

/* Android fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Android specific styles */
    select {
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2714%27%20height%3D%278%27%20viewBox%3D%270%200%2014%208%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%208L0%200h14z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.7em center;
        background-size: 0.65em auto;
    }
}

/* ========================================
   12. COMPONENT-SPECIFIC STYLES
   ======================================== */

/* Stats cards with proper transitions */
.stats-card {
    -webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;
    -moz-transition: transform 0.3s ease, box-shadow 0.3s ease;
    -ms-transition: transform 0.3s ease, box-shadow 0.3s ease;
    -o-transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    will-change: transform, box-shadow;
}

@media (hover: hover) {
    .stats-card:hover {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);

        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
}

/* Modal z-index management */
.modal-backdrop {
    z-index: 9998;
}

.modal-content {
    z-index: 9999;
}

/* Ensure maps stay below modals */
.leaflet-container {
    z-index: 1;
}

/* ========================================
   13. LOADING STATES
   ======================================== */

.spinner {
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Skeleton loading animation */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    -webkit-animation: loading 1.5s infinite;
    animation: loading 1.5s infinite;
}

@-webkit-keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}