/**
 * ERPAthos Mobile-Friendly Forms
 * 
 * Ensures optimal form usability on mobile devices:
 * - Single column layouts on mobile (< 768px)
 * - Labels positioned above inputs
 * - Clear validation messages
 * - Touch-friendly input sizes
 * - Proper spacing and readability
 */

/* ========================================
 * MOBILE FORM LAYOUT (< 768px)
 * Force single column layout on mobile devices
 * ======================================== */

@media (max-width: 767px) {
    /* Force all Bootstrap columns to full width on mobile */
    .row.g-3 > [class*="col-"],
    .row.g-2 > [class*="col-"],
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    /* Ensure form rows stack vertically */
    .form-row,
    .row {
        flex-direction: column;
    }
}

/* ========================================
 * LABELS ABOVE INPUTS
 * Ensure labels are always positioned above inputs
 * with proper spacing on mobile
 * ======================================== */

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm, 0.5rem);
    font-weight: 500;
    color: #212529;
}

@media (max-width: 767px) {
    .form-label {
        /* Extra spacing on mobile for better readability */
        margin-bottom: var(--spacing-md, 1rem);
        font-size: var(--font-size-md);
    }
    
    /* Remove any inline label positioning */
    .form-group.row .form-label,
    .row .form-label {
        margin-right: 0;
        text-align: left;
    }
}

/* ========================================
 * TOUCH-FRIENDLY INPUT SIZING
 * Minimum 44px height for touch targets (WCAG 2.1)
 * ======================================== */

@media (max-width: 767px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea.form-control,
    select.form-select {
        min-height: 44px;
        padding: 0.625rem 0.75rem; /* 10px 12px */
        /* Font size 16px prevents iOS Safari automatic zoom on focus (iOS zooms when font-size < 16px) */
        font-size: 1rem; /* 16px */
    }
    
    /* Buttons also need proper touch targets */
    .btn {
        min-height: 44px;
        padding: 0.625rem 1rem;
        font-size: 1rem;
    }
    
    /* Checkboxes and radio buttons */
    .form-check-input {
        min-width: 24px;
        min-height: 24px;
        margin-top: 0;
    }
    
    .form-check-label {
        padding-left: 0.5rem;
        font-size: 1rem;
    }
}

/* ========================================
 * VALIDATION MESSAGES
 * Clear, non-overlapping validation messages
 * ======================================== */

.validation-message,
.invalid-feedback,
.text-danger {
    display: block;
    margin-top: var(--spacing-sm, 0.5rem);
    font-size: 0.875rem;
    color: #dc3545;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .validation-message,
    .invalid-feedback {
        /* Extra spacing and visibility on mobile */
        margin-top: var(--spacing-md, 1rem);
        margin-bottom: var(--spacing-md, 1rem);
        padding: var(--spacing-sm, 0.5rem);
        font-size: 0.9375rem;
        background-color: #fee;
        border-left: 3px solid #dc3545;
        border-radius: 0.25rem;
    }
    
    /* Optional icon support for validation messages.
     * Only adds icons when the parent has the .has-validation-icon class.
     * This prevents duplicate icons when HTML already provides them.
     */
    .has-validation-icon .validation-message::before,
    .has-validation-icon .invalid-feedback::before {
        content: "⚠ ";
        margin-right: 0.25rem;
    }
}

/* Validation summary styling */
.validation-summary-errors {
    padding: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-lg, 1.5rem);
    background-color: #fee;
    border: 1px solid #dc3545;
    border-radius: 0.375rem;
}

@media (max-width: 767px) {
    .validation-summary-errors {
        padding: var(--spacing-lg, 1.5rem);
        font-size: 1rem;
    }
    
    .validation-summary-errors ul {
        margin-bottom: 0;
        padding-left: 1.25rem;
    }
    
    .validation-summary-errors li {
        margin-bottom: var(--spacing-sm, 0.5rem);
    }
}

/* Invalid input state - use box-shadow instead of border-width to avoid layout shifts */
.invalid,
.is-invalid,
.form-control.invalid,
input.invalid,
select.invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545;
}

@media (max-width: 767px) {
    /* Make invalid state more visible on mobile */
    .invalid,
    .is-invalid {
        box-shadow: 0 0 0 1px #dc3545, 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
}

/* Valid input state - use box-shadow instead of border-width to avoid layout shifts */
.valid.modified:not([type=checkbox]),
.is-valid {
    border-color: #26b050 !important;
    box-shadow: 0 0 0 1px #26b050;
}

@media (max-width: 767px) {
    .valid.modified:not([type=checkbox]),
    .is-valid {
        box-shadow: 0 0 0 1px #26b050, 0 0 0 0.2rem rgba(38, 176, 80, 0.25);
    }
}

/* ========================================
 * FORM SPACING ON MOBILE
 * Adequate spacing between form elements
 * ======================================== */

@media (max-width: 767px) {
    /* Spacing between form groups - only target columns within form contexts */
    .form-group,
    .row.g-3 > [class*="col-"],
    .row.g-2 > [class*="col-"],
    .form-row > [class*="col-"] {
        margin-bottom: var(--spacing-lg, 1.5rem) !important;
    }
    
    /* Helper text spacing */
    .form-text,
    small.form-text {
        display: block;
        margin-top: var(--spacing-sm, 0.5rem);
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    /* Input group spacing */
    .input-group {
        margin-bottom: var(--spacing-lg, 1.5rem);
    }
}

/* ========================================
 * DATEPICKER MOBILE OPTIMIZATION
 * Touch-friendly date pickers
 * ======================================== */

@media (max-width: 767px) {
    /* Native date inputs on mobile */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        min-height: 44px;
        padding: 0.625rem 0.75rem;
        font-size: 1rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    /* Date input specific styling */
    input[type="date"]::-webkit-calendar-picker-indicator {
        width: 24px;
        height: 24px;
        padding: 0.25rem;
        cursor: pointer;
    }
    
    /* Custom date picker component */
    .effective-date-picker .row > div {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .effective-date-picker .form-select,
    .effective-date-picker .form-control {
        min-height: 44px;
        font-size: 1rem;
    }
}

/* ========================================
 * MODAL FORMS ON MOBILE
 * Optimize modal forms for mobile devices
 * ======================================== */

@media (max-width: 767px) {
    /* Modal body padding */
    .modal-body {
        padding: var(--spacing-lg, 1.5rem);
    }
    
    /* Modal footer padding (buttons styled in FORM ACTIONS section above) */
    .modal-footer {
        padding: var(--spacing-lg, 1.5rem);
    }
}

/* ========================================
 * FORM ALERTS AND MESSAGES
 * Better visibility for alerts in forms
 * ======================================== */

@media (max-width: 767px) {
    .alert {
        padding: var(--spacing-lg, 1.5rem);
        font-size: 0.9375rem;
        margin-bottom: var(--spacing-lg, 1.5rem);
    }
    
    .alert i,
    .alert .bi {
        font-size: 1.25rem;
        vertical-align: middle;
    }
}

/* ========================================
 * CHECKBOX AND RADIO GROUPS
 * Improved touch targets for checkboxes and radios
 * ======================================== */

@media (max-width: 767px) {
    .form-check {
        padding-left: 0;
        margin-bottom: var(--spacing-lg, 1.5rem);
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .form-check-input {
        margin-left: 0;
        margin-right: var(--spacing-md, 1rem);
        flex-shrink: 0;
    }
    
    .form-check-label {
        flex-grow: 1;
        cursor: pointer;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
}

/* ========================================
 * REQUIRED FIELD INDICATORS
 * Clear indication of required fields
 * ======================================== */

.form-label .text-danger,
.form-label span.text-danger {
    margin-left: 0.25rem;
    font-weight: bold;
}

@media (max-width: 767px) {
    .form-label .text-danger,
    .form-label span.text-danger {
        font-size: 1.125rem;
    }
}

/* ========================================
 * INPUT GROUPS ON MOBILE
 * Stack input group elements vertically if needed
 * ======================================== */

@media (max-width: 767px) {
    .input-group {
        flex-wrap: wrap;
    }
    
    .input-group > .form-control,
    .input-group > .form-select {
        flex: 1 1 100%;
    }
    
    .input-group-text {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ========================================
 * FORM ACTIONS / BUTTONS
 * Better button layout on mobile
 * ======================================== */

@media (max-width: 767px) {
    /* Stack action buttons vertically on mobile.
     * Note: Using 'column' (not 'column-reverse') to maintain HTML order.
     * This ensures buttons appear in the expected order: Opslaan, Opslaan en Nieuwe, Concept, Annuleren.
     */
    .form-actions,
    .modal-footer,
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md, 1rem);
    }
    
    .form-actions .btn,
    .modal-footer .btn,
    .btn-group .btn {
        width: 100%;
        margin: 0;
    }
}

/* ========================================
 * SELECT / DROPDOWN OPTIMIZATION
 * Better mobile experience for dropdowns
 * ======================================== */

@media (max-width: 767px) {
    .form-select,
    select.form-control {
        min-height: 44px;
        font-size: 1rem;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
        padding-right: 2.5rem;
    }
    
    /* Multiple select sizing */
    select[multiple].form-select {
        min-height: 132px; /* 3 items * 44px */
    }
}

/* ========================================
 * TEXTAREA OPTIMIZATION
 * Better mobile textarea experience
 * ======================================== */

@media (max-width: 767px) {
    textarea.form-control {
        min-height: 72px; /* ~3 lines minimum (16px * 1.5 line-height * 3) */
        font-size: 1rem;
        line-height: 1.5;
        resize: vertical;
    }
}

/* ========================================
 * FOCUS STATES
 * Enhanced focus visibility for accessibility
 * Using consistent focus pattern from site.css
 * ======================================== */

@media (max-width: 767px) {
    .form-control:focus,
    .form-select:focus,
    input:focus,
    textarea:focus,
    select:focus {
        /* Use the same two-layer focus pattern from site.css for consistency */
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
        outline: none;
    }
    
    .btn:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
        outline: none;
    }
}

/* Note: -webkit-appearance rules for date/time inputs are defined 
 * in the DATEPICKER MOBILE OPTIMIZATION section above to avoid duplication */