/* ====================================
   VELORA MOBILE FORM OPTIMIZATION
   Mobile-specific form enhancements
   Extends base form system from velora-unified-theme.css and buttons.css
   
   Note: .form-input-wrapper and .form-input-with-icon are defined in buttons.css
   as the canonical source. Only mobile-specific overrides should be added here.
   ==================================== */

/* ========================================
   MOBILE TOUCH TARGETS
   WCAG 2.1 AA compliance: 44x44px minimum
   ======================================== */

/* Base form inputs - mobile touch targets */
.velora-input,
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select {
    min-height: 44px;
    min-width: 44px;
    padding: 1rem 1.25rem;
    touch-action: manipulation; /* Prevents double-tap zoom on iOS */
}

/* ========================================
   MOBILE LABEL STYLING
   Optimized typography and spacing
   ======================================== */

/* Mobile-optimized labels */
.velora-form-label,
.form-group label,
label {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: var(--velora-text-primary);
}

/* ========================================
   FORM HINTS
   Mobile typography optimization
   ======================================== */

.velora-form-hint,
.form-hint {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.4;
    margin-top: 0.5rem;
    color: var(--velora-text-muted);
}

/* ========================================
   ERROR MESSAGES
   Enhanced visibility and icon support
   ======================================== */

.velora-form-error,
.error-message {
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--velora-error);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.velora-form-error::before,
.error-message::before {
    content: '⚠';
    font-size: 1rem;
    flex-shrink: 0;
}

/* ========================================
   SUCCESS MESSAGES
   Visual feedback for successful validation
   ======================================== */

.velora-form-success,
.success-message {
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--velora-success);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.velora-form-success::before,
.success-message::before {
    content: '✓';
    font-size: 1rem;
    flex-shrink: 0;
}

/* ========================================
   WARNING STATE
   Amber/yellow warning styling
   ======================================== */

.velora-input-warning,
.velora-form-warning,
.warning-message {
    border-color: var(--velora-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.05);
}

.velora-form-warning,
.warning-message {
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--velora-warning, #f59e0b);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.velora-form-warning::before,
.warning-message::before {
    content: '⚠';
    font-size: 1rem;
    flex-shrink: 0;
}

/* ========================================
   INFO STATE
   Blue informational styling
   ======================================== */

.velora-input-info,
.velora-form-info,
.info-message {
    border-color: var(--velora-info, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
}

.velora-form-info,
.info-message {
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--velora-info, #3b82f6);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.velora-form-info::before,
.info-message::before {
    content: 'ℹ';
    font-size: 1rem;
    flex-shrink: 0;
}

/* ========================================
   VALIDATION ICONS
   Positioned within form groups
   Note: .form-input-wrapper and .form-input-with-icon are defined in buttons.css
   ======================================== */

.validation-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.validation-icon.success {
    color: var(--velora-success);
}

.validation-icon.error {
    color: var(--velora-error);
}

.validation-icon.warning {
    color: var(--velora-warning, #f59e0b);
}

.validation-icon.info {
    color: var(--velora-info, #3b82f6);
}

/* ========================================
   MOBILE FOCUS STATES
   Enhanced visibility for mobile
   Design-system-level defaults for .velora-input and .form-input only
   ======================================== */

.velora-input:focus,
.form-input:focus {
    outline: 2px solid var(--velora-accent-primary);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(107, 70, 193, 0.15);
}

/* ========================================
   FORM ROW MOBILE STACKING
   Stack to single column on mobile
   ======================================== */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ========================================
   CHECKBOX AND RADIO MOBILE ENHANCEMENTS
   Larger touch targets
   ======================================== */

input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
    margin-right: 0.75rem;
    cursor: pointer;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0;
    cursor: pointer;
}

/* ========================================
   DATE/TIME INPUT MOBILE FORMATTING
   Optimized for mobile pickers
   ======================================== */

input[type="date"],
input[type="time"] {
    font-size: 1.0625rem; /* 17px prevents iOS zoom */
    padding: 1rem 1.25rem;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    padding: 0.5rem;
    cursor: pointer;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   Progressive enhancement
   ======================================== */

/* Tablet and below */
@media (max-width: 768px) {
    .velora-input,
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        padding: 1rem 1.25rem;
        font-size: 1.0625rem; /* 17px prevents iOS zoom */
    }

    .velora-form-label,
    .form-group label,
    label {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Large mobile devices */
@media (max-width: 640px) {
    .velora-input,
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        padding: 1rem 1.25rem;
    }

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

    .velora-form-hint,
    .form-hint {
        font-size: 0.875rem;
    }

    .velora-form-error,
    .error-message {
        font-size: 0.9375rem;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .velora-input,
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        padding: 0.875rem 1rem;
        font-size: 1.0625rem;
    }

    .velora-form-label,
    .form-group label,
    label {
        font-size: 0.9375rem;
        margin-bottom: 0.625rem;
    }

    .velora-form-hint,
    .form-hint {
        font-size: 0.8125rem;
    }

    .velora-form-error,
    .error-message,
    .velora-form-success,
    .success-message,
    .velora-form-warning,
    .warning-message,
    .velora-form-info,
    .info-message {
        font-size: 0.875rem;
    }
}

/* Minimum supported screen size */
@media (max-width: 320px) {
    .velora-input,
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        padding: 0.75rem 0.875rem;
        font-size: 1.0625rem;
    }

    .velora-form-label,
    .form-group label,
    label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   REDUCED MOTION SUPPORT
   Accessibility compliance
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .velora-input,
    .form-input,
    input,
    textarea,
    select,
    .validation-icon {
        transition: none;
    }
}

/* ========================================
   DARK MODE OVERRIDES
   Validation states and focus indicators
   ======================================== */

[data-theme="dark"] .velora-input:focus,
[data-theme="dark"] .form-input:focus {
    outline-color: var(--velora-accent-primary);
    box-shadow: 0 0 0 4px rgba(107, 70, 193, 0.25);
}

[data-theme="dark"] .velora-input-warning,
[data-theme="dark"] .velora-form-warning {
    border-color: var(--velora-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .velora-input-info,
[data-theme="dark"] .velora-form-info {
    border-color: var(--velora-info, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
}