/* ===================================
   FILAMENT RESPONSIVE IMPROVEMENTS
   GolAppZo - Formularios de Campeonato
   =================================== */

/* Mobile-First Responsive Design for Filament Admin Panel */

/* Base responsive improvements for all Filament forms */
@media (max-width: 768px) {
    /* Form sections */
    .fi-section {
        margin-bottom: 1rem !important;
        padding: 0.75rem !important;
    }
    
    .fi-section-header {
        margin-bottom: 0.75rem !important;
    }
    
    .fi-section-header-heading {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    .fi-section-header-description {
        font-size: 0.875rem !important;
        margin-top: 0.25rem !important;
    }

    /* Grid layouts */
    .fi-form-component-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .fi-grid-cols-2,
    .fi-grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Form inputs */
    .fi-input-wrapper input,
    .fi-input-wrapper select,
    .fi-input-wrapper textarea {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 0.75rem !important;
        min-height: 44px !important; /* Touch target */
    }
    
    .fi-select-input {
        font-size: 16px !important;
        padding: 0.75rem !important;
        min-height: 44px !important;
    }

    /* Labels */
    .fi-field-label {
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* File upload */
    .fi-file-upload {
        padding: 0.75rem !important;
    }
    
    .fi-file-upload-drop-zone {
        padding: 1.5rem 0.75rem !important;
        min-height: 100px !important;
    }

    /* Buttons */
    .fi-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        min-height: 44px !important;
    }

    /* Checkbox/Radio groups */
    .fi-checkbox-list-option,
    .fi-radio-option {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .fi-checkbox-list-option-label,
    .fi-radio-option-label {
        font-size: 0.875rem !important;
    }

    /* Date/Time pickers */
    .fi-datetime-input {
        font-size: 16px !important;
        padding: 0.75rem !important;
        min-height: 44px !important;
    }

    /* Helper text */
    .fi-field-helper-text {
        font-size: 0.75rem !important;
        margin-top: 0.25rem !important;
    }

    /* Error messages */
    .fi-field-error-message {
        font-size: 0.75rem !important;
        margin-top: 0.25rem !important;
    }
}

/* Tablet specific adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .fi-form-component-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .fi-grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .fi-section {
        padding: 1rem !important;
    }
}

/* Specific improvements for Campeonato forms */
@media (max-width: 768px) {
    /* Tournament form specific adjustments */
    .fi-resource-create-record-form,
    .fi-resource-edit-record-form {
        padding: 0.75rem !important;
    }

    /* Image upload section */
    .fi-file-upload-action-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }

    /* Multi-select components */
    .fi-select-option {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
    }

    /* Checkbox list for days of week */
    .fi-checkbox-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Time picker improvements */
    .fi-time-input {
        font-size: 16px !important;
        padding: 0.75rem !important;
    }

    /* Textarea adjustments */
    .fi-textarea {
        font-size: 16px !important;
        padding: 0.75rem !important;
        min-height: 100px !important;
    }

    /* Numeric inputs */
    .fi-input[type="number"] {
        font-size: 16px !important;
        padding: 0.75rem !important;
    }

    /* Form actions (Submit/Cancel buttons) */
    .fi-form-actions {
        padding: 1rem 0.75rem !important;
        gap: 0.75rem !important;
    }
    
    .fi-form-actions .fi-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Improvements for small screens (phones in portrait) */
@media (max-width: 480px) {
    .fi-section {
        margin: 0 -0.25rem 1rem -0.25rem !important;
        padding: 0.5rem !important;
        border-radius: 0.5rem !important;
    }
    
    .fi-section-header-heading {
        font-size: 0.9rem !important;
    }
    
    .fi-section-header-description {
        font-size: 0.8rem !important;
    }
    
    .fi-input-wrapper input,
    .fi-input-wrapper select,
    .fi-input-wrapper textarea {
        padding: 0.625rem !important;
    }
    
    .fi-checkbox-list {
        grid-template-columns: 1fr !important;
    }
    
    .fi-field-label {
        font-size: 0.8rem !important;
    }
}

/* Touch improvements for all mobile devices */
@media (hover: none) and (pointer: coarse) {
    .fi-btn,
    .fi-select-input,
    .fi-input-wrapper input,
    .fi-checkbox-list-option,
    .fi-radio-option {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Improve tap targets */
    .fi-select-option {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* Dark mode responsive adjustments */
@media (max-width: 768px) {
    .dark .fi-section {
        background-color: rgb(17 24 39) !important;
        border-color: rgb(55 65 81) !important;
    }
    
    .dark .fi-input-wrapper input,
    .dark .fi-input-wrapper select,
    .dark .fi-input-wrapper textarea {
        background-color: rgb(31 41 55) !important;
        border-color: rgb(55 65 81) !important;
        color: rgb(243 244 246) !important;
    }
    
    .dark .fi-field-label {
        color: rgb(209 213 219) !important;
    }
}

/* Focus states for better accessibility */
@media (max-width: 768px) {
    .fi-input-wrapper input:focus,
    .fi-input-wrapper select:focus,
    .fi-input-wrapper textarea:focus {
        outline: 2px solid rgb(59 130 246) !important;
        outline-offset: 2px !important;
        border-color: rgb(59 130 246) !important;
    }
}