/**
 * Mobile Form Optimization
 * 
 * Goals:
 * - Trigger correct mobile keyboard for each input type
 * - Prevent iOS auto-zoom (16px minimum font size)
 * - Full-width submit buttons on mobile
 * - Inline validation with clear error messaging
 * - Autofocus first field on modal open
 * - Comfortable spacing between form fields
 * 
 * Phase: 3.3 - Form Optimization
 * Date: December 30, 2025
 */

/* ========================================================================
   MOBILE-ONLY FORM STYLES (< 768px)
   ======================================================================== */

@media (max-width: 767px) {
    
    /* ====================================================================
       1. INPUT SIZING - Prevent iOS zoom
       ==================================================================== */
    
    /* All text inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 48px;
        padding: 12px 16px;
        border-radius: 8px;
    }
    
    /* Textarea comfortable height */
    textarea {
        min-height: 120px;
        line-height: 1.5;
    }
    
    /* ====================================================================
       2. FORM GROUPS - Better spacing
       ==================================================================== */
    
    .form-group,
    .mb-3,
    .form-floating {
        margin-bottom: 20px !important;
    }
    
    /* Form labels larger and bolder */
    .form-label,
    label:not(.form-check-label) {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #1f2937;
    }
    
    /* Required field indicator */
    .form-label.required::after,
    label.required::after {
        content: " *";
        color: #ef4444;
        font-weight: 700;
    }
    
    /* ====================================================================
       3. SUBMIT BUTTONS - Full width on mobile
       ==================================================================== */
    
    /* Primary submit buttons */
    form .btn-primary,
    form .btn-success,
    form button[type="submit"],
    .modal-footer .btn-primary {
        width: 100%;
        min-height: 52px;
        font-size: 16px;
        font-weight: 600;
        margin-top: 16px;
        margin-bottom: 8px;
        border-radius: 10px;
        text-transform: none;
    }
    
    /* Secondary buttons (cancel, etc.) */
    form .btn-secondary,
    form .btn-outline-secondary,
    .modal-footer .btn-secondary {
        width: 100%;
        min-height: 48px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    
    /* Button group stacking */
    .modal-footer,
    form .button-group {
        display: flex;
        flex-direction: column-reverse; /* Primary button on top */
        gap: 8px;
    }
    
    /* ====================================================================
       4. INPUT ICONS - Better visual hierarchy
       ==================================================================== */
    
    /* Input group icons */
    .input-group-text {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        background-color: #f3f4f6;
    }
    
    /* Icon prepend/append */
    .input-group .form-control {
        font-size: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* ====================================================================
       5. VALIDATION STATES - Clear visual feedback
       ==================================================================== */
    
    /* Valid state */
    .form-control.is-valid,
    .was-validated .form-control:valid {
        border-color: #10b981 !important;
        border-width: 2px;
        padding-right: 48px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%2310b981' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 24px 24px;
    }
    
    /* Invalid state */
    .form-control.is-invalid,
    .was-validated .form-control:invalid {
        border-color: #ef4444 !important;
        border-width: 2px;
        padding-right: 48px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ef4444' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3e%3cpath fill='%23ef4444' d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 24px 24px;
    }
    
    /* Validation feedback text */
    .valid-feedback,
    .invalid-feedback {
        font-size: 14px;
        margin-top: 6px;
        display: block;
        font-weight: 500;
    }
    
    .valid-feedback {
        color: #10b981;
    }
    
    .invalid-feedback {
        color: #ef4444;
    }
    
    /* ====================================================================
       6. SELECT DROPDOWNS - Larger touch area
       ==================================================================== */
    
    select.form-select,
    select.form-control {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 40px 12px 16px; /* Extra right padding for arrow */
        background-position: right 12px center;
        background-size: 20px 20px;
        cursor: pointer;
    }
    
    /* Multiple select */
    select[multiple] {
        min-height: 120px;
        padding: 8px;
    }
    
    select[multiple] option {
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 4px;
    }
    
    /* ====================================================================
       7. CHECKBOXES & RADIOS - Enhanced
       ==================================================================== */
    
    /* Larger checkboxes */
    .form-check-input[type="checkbox"],
    .form-check-input[type="radio"] {
        width: 24px;
        height: 24px;
        margin-top: 0;
        margin-right: 12px;
        cursor: pointer;
        flex-shrink: 0;
    }
    
    /* Checkbox/radio labels */
    .form-check-label {
        font-size: 15px;
        line-height: 1.5;
        cursor: pointer;
        padding: 4px 0;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Form check wrapper */
    .form-check {
        min-height: 44px;
        padding: 10px 0;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
    }
    
    /* Stacked checkboxes */
    .form-check + .form-check {
        margin-top: 8px;
    }
    
    /* Switch toggle larger */
    .form-switch .form-check-input {
        width: 48px;
        height: 28px;
        background-size: 24px;
    }
    
    /* ====================================================================
       8. DATE & TIME INPUTS - Native pickers
       ==================================================================== */
    
    /* Date picker */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"] {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 16px;
        cursor: pointer;
    }
    
    /* Calendar icon for date inputs */
    input[type="date"]::before,
    input[type="datetime-local"]::before {
        content: "📅";
        margin-right: 8px;
        font-size: 18px;
    }
    
    /* ====================================================================
       9. RANGE SLIDERS - Larger thumb
       ==================================================================== */
    
    input[type="range"] {
        height: 48px;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        cursor: pointer;
    }
    
    /* Slider track */
    input[type="range"]::-webkit-slider-track {
        height: 8px;
        background: #e5e7eb;
        border-radius: 4px;
    }
    
    input[type="range"]::-moz-range-track {
        height: 8px;
        background: #e5e7eb;
        border-radius: 4px;
    }
    
    /* Slider thumb */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 32px;
        height: 32px;
        background: #2563eb;
        border-radius: 50%;
        margin-top: -12px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    }
    
    input[type="range"]::-moz-range-thumb {
        width: 32px;
        height: 32px;
        background: #2563eb;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    }
    
    /* ====================================================================
       10. FILE UPLOAD - Better UX
       ==================================================================== */
    
    input[type="file"] {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 16px;
        cursor: pointer;
    }
    
    input[type="file"]::file-selector-button {
        min-height: 40px;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 600;
        border: none;
        border-radius: 6px;
        background-color: #2563eb;
        color: white;
        cursor: pointer;
        margin-right: 12px;
    }
    
    input[type="file"]::file-selector-button:active {
        background-color: #1d4ed8;
    }
    
    /* ====================================================================
       11. MODAL FORMS - Full-screen on mobile
       ==================================================================== */
    
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }
    
    .modal-content {
        height: 100vh;
        border-radius: 0;
        border: none;
    }
    
    .modal-header {
        min-height: 64px;
        padding: 16px 20px;
        border-bottom: 2px solid #e5e7eb;
        position: sticky;
        top: 0;
        z-index: 1050;
        background: white;
    }
    
    .modal-title {
        font-size: 20px;
        font-weight: 700;
    }
    
    .modal-body {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
    }
    
    .modal-footer {
        padding: 16px 20px;
        border-top: 2px solid #e5e7eb;
        position: sticky;
        bottom: 0;
        background: white;
    }
    
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.75);
    }
    
    /* ====================================================================
       12. HELP TEXT - More prominent
       ==================================================================== */
    
    .form-text,
    .help-text,
    small.text-muted {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 6px;
        display: block;
        color: #6b7280;
    }
    
    /* Info icon with tooltip */
    .form-label .info-icon {
        margin-left: 6px;
        color: #6b7280;
        cursor: help;
        font-size: 16px;
    }
    
    /* ====================================================================
       13. DISABLED STATES - Clear visual indication
       ==================================================================== */
    
    input:disabled,
    select:disabled,
    textarea:disabled,
    .form-control:disabled {
        background-color: #f3f4f6 !important;
        color: #9ca3af !important;
        cursor: not-allowed;
        opacity: 0.6;
    }
    
    .btn:disabled,
    .btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    /* ====================================================================
       14. PLACEHOLDER TEXT - Visible but not intrusive
       ==================================================================== */
    
    ::placeholder {
        color: #9ca3af;
        opacity: 1;
        font-size: 15px;
    }
    
    :-ms-input-placeholder {
        color: #9ca3af;
        font-size: 15px;
    }
    
    ::-ms-input-placeholder {
        color: #9ca3af;
        font-size: 15px;
    }
    
    /* ====================================================================
       15. FOCUS STATES - Clear indication
       ==================================================================== */
    
    .form-control:focus,
    .form-select:focus,
    textarea:focus {
        border-color: #2563eb;
        border-width: 2px;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
        outline: none;
    }
    
    /* ====================================================================
       16. AUTOFILL STYLES - Consistent appearance
       ==================================================================== */
    
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px white inset;
        -webkit-text-fill-color: #1f2937;
        font-size: 16px;
        transition: background-color 5000s ease-in-out 0s;
    }
    
    /* ====================================================================
       17. FLOATING LABELS - Bootstrap floating labels
       ==================================================================== */
    
    .form-floating > .form-control,
    .form-floating > .form-select {
        min-height: 58px;
        padding-top: 20px;
        padding-bottom: 10px;
        font-size: 16px;
    }
    
    .form-floating > label {
        font-size: 14px;
        padding: 16px;
    }
    
    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label {
        font-size: 12px;
        padding-top: 8px;
        padding-bottom: 0;
    }
    
    /* ====================================================================
       18. HORIZON CRM SPECIFIC FORMS
       ==================================================================== */
    
    /* Lead creation form */
    #createLeadModal .modal-body input,
    #createLeadModal .modal-body select {
        font-size: 16px;
    }
    
    /* Client creation form */
    #createClientModal .modal-body input,
    #createClientModal .modal-body select {
        font-size: 16px;
    }
    
    /* Quote builder */
    #quoteBuilderForm .form-control {
        font-size: 16px;
    }
    
    /* Task form */
    #createTaskModal .modal-body input[type="checkbox"] {
        width: 28px;
        height: 28px;
    }
    
    /* Appointment form */
    #createAppointmentModal input[type="datetime-local"] {
        min-height: 52px;
    }
    
    /* Email composition */
    #composeEmailModal textarea {
        min-height: 200px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        line-height: 1.6;
    }
}

/* ========================================================================
   TABLET ADJUSTMENTS (768px - 991px)
   ======================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    
    /* Slightly smaller but comfortable */
    input, select, textarea {
        font-size: 15px;
        min-height: 44px;
    }
    
    /* Buttons can be smaller on tablet */
    form .btn-primary,
    form .btn-success {
        width: auto;
        min-width: 200px;
    }
    
    /* Modals not full-screen on tablet */
    .modal-dialog {
        margin: 1.75rem auto;
        max-width: 600px;
        height: auto;
    }
    
    .modal-content {
        height: auto;
        border-radius: 12px;
    }
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-control:focus {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .form-control,
    .btn,
    input {
        transition: none !important;
    }
}