/**
 * Custom CSS for Selos - logistique application
 * shadcn/ui inspired design with custom animations
 */

/* Border glow animation for scanner */
@keyframes border-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3),
                    0 0 40px rgba(99, 102, 241, 0.2),
                    0 0 60px rgba(99, 102, 241, 0.1);
        border-color: rgba(99, 102, 241, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.5),
                    0 0 60px rgba(99, 102, 241, 0.3),
                    0 0 90px rgba(99, 102, 241, 0.2);
        border-color: rgba(99, 102, 241, 0.7);
    }
}

.border-glow {
    border: 3px solid rgba(99, 102, 241, 0.5);
    animation: border-glow 3s ease-in-out infinite;
    position: relative;
}

/* Smooth transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Focus styles */
input:focus,
button:focus {
    outline: none;
    ring: 2px;
    ring-color: rgba(99, 102, 241, 0.5);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    #reader {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
    }
    
    #reader video,
    #reader canvas {
        width: 100% !important;
        height: auto !important;
        max-height: 70vh;
    }
    
    .mobile-scanner {
        min-height: 300px;
        max-height: 70vh;
    }
    
    .border-glow {
        border-width: 2px;
    }
    
    /* Ensure buttons are touch-friendly */
    button, a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better text sizing on mobile */
    body {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    input, select, textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Safe area for notched devices */
.safe-area {
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
}

.pb-safe {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Touch manipulation for better mobile performance */
.touch-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection on mobile buttons */
button, a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Better focus states for mobile */
@media (hover: none) and (pointer: coarse) {
    button:active, a:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
}

/* Optimize scanner for mobile */
@media (max-width: 640px) {
    #html5qr-code-full-region {
        width: 100% !important;
        min-height: 300px !important;
    }
    
    #html5qr-code-full-region__scan_region {
        width: 100% !important;
        height: auto !important;
    }
    
    #html5qr-code-full-region__dashboard {
        padding: 0.5rem !important;
    }
    
    #html5qr-code-full-region__camera_selection {
        display: none !important; /* Masquer la sélection de caméra sur mobile */
    }
}

/* Desktop scanner adjustments */
@media (min-width: 641px) {
    #reader {
        min-height: 400px;
    }
    
    #reader video,
    #reader canvas {
        max-height: 500px;
    }
}

/* Landscape mode adjustments */
@media (max-width: 640px) and (orientation: landscape) {
    .mobile-scanner {
        min-height: 250px;
    }
    
    nav {
        height: auto !important;
        min-height: 48px;
    }
}