/* Mobile-Optimized Forms
 * Comprehensive mobile form styling for better UX on mobile devices
 * Includes touch-friendly targets, proper spacing, and responsive layouts
 */

/* ============================================
   BASE MOBILE FORM STYLES
   ============================================ */

@media (max-width: 768px) {
    /* Form Container Optimization */
    form,
    .form-container,
    .create-quiz-form,
    .upload-form,
    .settings-form {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    /* Form Groups - Better Spacing */
    .form-group {
        margin-bottom: 1.25rem;
        width: 100%;
    }

    /* Labels - Better Readability */
    .form-group label,
    label {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-color, #333);
        line-height: 1.4;
    }

    /* Text Inputs - Touch-Friendly */
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group input[type="number"],
    .form-group input[type="date"],
    .form-group input[type="time"],
    .form-group input[type="tel"],
    .form-group input[type="url"],
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="tel"],
    input[type="url"] {
        width: 100%;
        min-height: 44px; /* Minimum touch target size */
        padding: 0.75rem 1rem;
        font-size: 16px; /* Prevents zoom on iOS */
        border: 2px solid var(--border-color, #ddd);
        border-radius: 8px;
        background-color: var(--white, #fff);
        color: var(--text-color, #333);
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* Input Focus States */
    .form-group input:focus,
    input:focus {
        outline: none;
        border-color: var(--primary-color, var(--cfa-red, #e51636));
        box-shadow: 0 0 0 3px rgba(229, 22, 54, 0.1);
    }

    /* Textareas - Mobile Optimized */
    .form-group textarea,
    textarea {
        width: 100%;
        min-height: 100px;
        padding: 0.75rem 1rem;
        font-size: 16px; /* Prevents zoom on iOS */
        border: 2px solid var(--border-color, #ddd);
        border-radius: 8px;
        background-color: var(--white, #fff);
        color: var(--text-color, #333);
        font-family: inherit;
        resize: vertical;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    textarea:focus {
        outline: none;
        border-color: var(--primary-color, var(--cfa-red, #e51636));
        box-shadow: 0 0 0 3px rgba(229, 22, 54, 0.1);
    }

    /* Select Dropdowns - Touch-Friendly */
    .form-group select,
    select {
        width: 100%;
        min-height: 44px; /* Minimum touch target size */
        padding: 0.75rem 1rem;
        padding-right: 2.5rem; /* Space for dropdown arrow */
        font-size: 16px; /* Prevents zoom on iOS */
        border: 2px solid var(--border-color, #ddd);
        border-radius: 8px;
        background-color: var(--white, #fff);
        color: var(--text-color, #333);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 12px;
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    select:focus {
        outline: none;
        border-color: var(--primary-color, var(--cfa-red, #e51636));
        box-shadow: 0 0 0 3px rgba(229, 22, 54, 0.1);
    }

    /* Checkboxes - Larger Touch Targets */
    .form-group input[type="checkbox"],
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        margin-right: 0.75rem;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* Radio Buttons - Larger Touch Targets */
    .form-group input[type="radio"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        margin-right: 0.75rem;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* Checkbox/Radio Labels - Better Alignment */
    .form-group label input[type="checkbox"],
    .form-group label input[type="radio"],
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        display: flex;
        align-items: center;
        font-weight: 500;
        cursor: pointer;
        line-height: 1.5;
    }

    /* Range Inputs - Touch-Friendly */
    .form-group input[type="range"],
    input[type="range"] {
        width: 100%;
        height: 8px;
        min-height: 44px; /* Touch target area */
        padding: 1rem 0;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        cursor: pointer;
    }

    /* Form Help Text */
    .form-help,
    small.form-help,
    .form-group small {
        display: block;
        margin-top: 0.5rem;
        font-size: 0.85rem;
        color: var(--text-light, #666);
        line-height: 1.4;
    }

    /* Form Sections - Better Spacing */
    .form-section {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border-color, #e0e0e0);
    }

    .form-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .form-section h3 {
        font-size: 1.2rem;
        margin-bottom: 1.25rem;
        color: var(--text-color, #333);
    }

    /* Form Rows - Stack on Mobile */
    .form-row {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 0;
    }

    .form-row .form-group {
        margin-bottom: 0;
        width: 100%;
    }

    /* Input Groups - Stack on Mobile */
    .input-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .input-group input {
        width: 100%;
    }

    .input-group button,
    .input-group .btn {
        width: 100%;
        min-height: 44px;
    }

    /* Form Actions - Stack Buttons */
    .form-actions,
    .upload-actions,
    .bio-actions,
    .preferences-actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        margin-top: 1.5rem;
    }

    .form-actions .btn,
    .upload-actions .btn,
    .bio-actions .btn,
    .preferences-actions .btn {
        width: 100%;
        min-height: 44px;
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        justify-content: center;
    }

    /* Buttons - Touch-Friendly */
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .btn i {
        font-size: 1rem;
    }

    /* Button Groups - Stack on Mobile */
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }
    
    .demo-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        width: 100%;
    }

    .btn-group .btn,
    .demo-buttons .btn {
        width: 100%;
    }

    /* Optional Label Styling */
    .optional-label {
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--text-light, #666);
        margin-left: 0.5rem;
    }

    /* Required Field Indicators */
    .required-indicator,
    label:has(+ input[required]):after,
    label:has(+ select[required]):after {
        content: " *";
        color: var(--error-color, #e51636);
        font-weight: bold;
    }

    /* Error States */
    .form-group.error input,
    .form-group.error select,
    .form-group.error textarea,
    input.error,
    select.error,
    textarea.error {
        border-color: var(--error-color, #e51636);
    }

    .error-message {
        display: block;
        margin-top: 0.5rem;
        font-size: 0.85rem;
        color: var(--error-color, #e51636);
    }

    /* Success States */
    .form-group.success input,
    .form-group.success select,
    .form-group.success textarea,
    input.success,
    select.success,
    textarea.success {
        border-color: var(--success-color, #28a745);
    }
}

/* ============================================
   VERY SMALL SCREENS (480px and below)
   ============================================ */

@media (max-width: 480px) {
    /* Tighter Spacing for Small Screens */
    .form-group {
        margin-bottom: 1rem;
    }

    .form-group label,
    label {
        font-size: 0.9rem;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group input[type="number"],
    .form-group input[type="date"],
    .form-group input[type="time"],
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    .form-group select,
    select {
        padding: 0.625rem 0.875rem;
        font-size: 16px; /* Keep at 16px to prevent zoom */
    }

    .form-group textarea,
    textarea {
        padding: 0.625rem 0.875rem;
        font-size: 16px; /* Keep at 16px to prevent zoom */
        min-height: 80px;
    }

    .form-section h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    /* Even tighter spacing for very small screens */
    .question-form,
    .question-item {
        padding: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .form-section {
        margin-bottom: 1.5rem;
        padding-bottom: 1.25rem;
    }
}

/* ============================================
   SPECIFIC FORM LAYOUTS
   ============================================ */

@media (max-width: 768px) {
    /* Quiz Info Layout - Stack Columns */
    .quiz-info-layout {
        flex-direction: column;
        gap: 1.5rem;
    }

    .quiz-left-section,
    .quiz-right-section {
        width: 100%;
        gap: 1.25rem;
    }

    /* Two-Column Layouts - Stack */
    .form-two-column,
    .form-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Settings Input Groups - Better Mobile Layout */
    .input-group {
        flex-direction: row;
        align-items: stretch;
    }

    .input-group input {
        flex: 1;
    }

    .input-group .edit-btn {
        min-width: 44px;
        flex-shrink: 0;
    }

    /* Tag Input Areas */
    .tag-management-container,
    .quiz-tags {
        width: 100%;
    }

    /* File Upload Areas */
    .file-upload-area,
    .upload-dropzone {
        min-height: 120px;
        padding: 1.5rem;
    }

    /* Search Inputs in Forms */
    .form-group input[type="search"],
    #questionBankSearch {
        width: 100%;
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 16px;
    }

    /* Question Forms in Quizzes */
    .question-form,
    .question-item {
        width: 100%;
        padding: 1rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-color, #e0e0e0);
        border-radius: 8px;
    }

    .question-form .form-group,
    .question-item .form-group {
        margin-bottom: 1rem;
    }

    /* Inline Form Controls - Stack on Mobile */
    .form-inline,
    .form-controls-inline {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* File Inputs */
    input[type="file"] {
        width: 100%;
        min-height: 44px;
        padding: 0.75rem;
        font-size: 1rem;
        cursor: pointer;
    }

    /* Password Input Groups with Show/Hide */
    .password-input-group {
        position: relative;
        width: 100%;
    }

    .password-toggle-btn {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
        cursor: pointer;
        color: var(--text-light, #666);
    }
}

/* ============================================
   FORM MODAL OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    .modal-content form,
    .modal-body form {
        padding: 0;
    }

    .modal-content .form-group,
    .modal-body .form-group {
        margin-bottom: 1.25rem;
    }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Ensure proper focus indicators for touch */
    input:focus,
    select:focus,
    textarea:focus,
    button:focus {
        outline: 2px solid var(--primary-color, var(--cfa-red, #e51636));
        outline-offset: 2px;
    }

    /* Larger tap targets for all interactive elements */
    button,
    .btn,
    input[type="submit"],
    input[type="button"],
    input[type="checkbox"],
    input[type="radio"],
    label {
        -webkit-tap-highlight-color: rgba(229, 22, 54, 0.2);
    }
}