/* =============================================================================
   FILE MANAGER STYLES
   ============================================================================= */

/* Alpine.js cloak to prevent FOUC */
[x-cloak] {
    display: none !important;
}

/* iOS Safari fixes and base styles */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.app-container {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    background: white;
}

/* iOS-specific scrolling class */
.ios-scroll {
    -webkit-overflow-scrolling: touch;
    transform: translate3d(0, 0, 0);
    overscroll-behavior: contain;
    touch-action: pan-y;
    position: relative;
    z-index: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* =============================================================================
   INPUT FIXES FOR iOS
   ============================================================================= */

/* Prevent iOS zoom on input focus */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    font-size: 16px !important;
    -webkit-appearance: none;
    border-radius: 8px;
    transform: translateZ(0);
}

/* =============================================================================
   TOUCH AND INTERACTION
   ============================================================================= */

/* Touch targets - iOS requires 44px minimum */
.touch-target {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* File item styling */
.file-item {
    transition: none;
    -webkit-tap-highlight-color: transparent;
}

.file-item:active {
    background-color: #f3f4f6;
}

/* Button styling */
button {
    -webkit-appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    touch-action: manipulation;
}

/* =============================================================================
   SCROLLBAR STYLING
   ============================================================================= */

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

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */

/* Loading animation */
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Disable all transitions for better performance */
* {
    transition: none !important;
    animation: none !important;
}

/* Re-enable only essential animations */
.animate-spin {
    animation: spin 1s linear infinite !important;
}

/* =============================================================================
   SAFE AREA SUPPORT
   ============================================================================= */

/* iOS Safari safe area support */
@supports (padding: max(0px)) {
    .safe-area-top {
        padding-top: max(12px, env(safe-area-inset-top));
    }
    
    .safe-area-bottom {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Viewport height fix */
.full-height {
    height: 100vh;
    height: -webkit-fill-available;
}

/* Prevent text selection on touch */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* =============================================================================
   UPPY UPLOAD COMPONENT STYLES
   ============================================================================= */

/* Title form styling */
.uppy-title-form {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 100;
}

.uppy-title-form .form-group {
    max-width: 500px;
    margin: 0 auto;
}

.uppy-title-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #374151;
    font-size: 14px;
}

.uppy-title-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 16px !important; /* Prevent iOS zoom */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: white;
    outline: none;
    -webkit-appearance: none;
}

.uppy-title-form input[type="text"]:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.uppy-title-form input[type="text"]:invalid,
.uppy-title-form.has-error input[type="text"] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.uppy-title-form .helper-text {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.uppy-title-form .error-text {
    font-size: 12px;
    color: #ef4444;
    margin-top: 4px;
    display: none;
}

.uppy-title-form.has-error .error-text {
    display: block;
}

/* Shake animation for validation feedback */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}


/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

/* Responsive adjustments */
@media (max-width: 768px) {
    #uppy-dashboard .uppy-Dashboard-AddFiles {
        margin: 8px !important;
    }
    
    .uppy-title-form {
        padding: 12px 16px;
    }
}