/* 
 * Validation Accessibility Styles
 * WCAG 2.1 Level AA Compliant Form Validation
 * 
 * This stylesheet provides accessible validation styling for forms including:
 * - Multi-sensory error feedback (color, pattern, icons, text)
 * - Screen reader support via ARIA live regions
 * - High contrast mode support
 * - Reduced motion support
 * - Colorblind-friendly indicators
 * - Focus-visible for keyboard navigation
 * - Forced-colors mode support
 */

/* ============================================================================
   Base Error Field Styling - Syncfusion Components
   ============================================================================ */

/* Error styling with red border AND dashed pattern for colorblind users */
.e-error.e-outline,
.e-error .e-input-group,
.e-error .e-float-input,
.e-error .e-ddl,
span.e-error > .e-ddl,
span.e-error > .e-autocomplete,
span.e-error > .e-autocomplete > .e-input-group {
    border-color: #dc3545 !important;
    border-width: 2px !important;
    border-style: dashed !important;
}

/* Focus state for error fields */
.e-error.e-outline:focus-within,
.e-error .e-input-group.e-input-focus,
.e-error .e-float-input.e-input-focus,
.e-error .e-ddl.e-input-focus,
span.e-error > .e-autocomplete > .e-input-group.e-input-focus {
    border-color: #dc3545 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Ensure sufficient color contrast for error labels (WCAG AA: 4.5:1) */
.e-error .e-float-text,
span.e-error .e-float-text {
    color: #721c24 !important;
}

/* ============================================================================
   Validation Message Styling
   ============================================================================ */

/* Blazor ValidationMessage component styling */
.validation-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 8px 12px;
    margin-top: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: slideIn 0.3s ease-out;
    /* Minimum touch target size for mobile */
    min-height: 44px;
}

/* Warning icon for error messages (non-color visual cue) */
.validation-message::before {
    content: "⚠";
    font-size: 16px;
    flex-shrink: 0;
    /* Ensure icon is visible in high contrast mode */
    font-weight: bold;
}

/* Support for ValidationSummary component */
.validation-errors {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Role should be set to "alert" in markup for screen readers */
}

.validation-errors li {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Minimum touch target size */
    min-height: 44px;
}

.validation-errors li::before {
    content: "⚠ ";
    font-size: 16px;
    flex-shrink: 0;
    font-weight: bold;
}

/* ============================================================================
   Animations
   ============================================================================ */

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   Focus Styles for Keyboard Navigation
   ============================================================================ */

/* Enhanced focus indicators - only show on keyboard navigation */
.e-error:focus-visible,
span.e-error:focus-visible,
.e-error input:focus-visible,
.e-error .e-input:focus-visible {
    outline: 3px solid #dc3545;
    outline-offset: 2px;
    /* Ensure visibility in Windows High Contrast Mode */
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5);
}

/* Standard focus-within for containers */
.e-error:focus-within,
span.e-error:focus-within {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

/* ============================================================================
   High Contrast Mode Support (Windows High Contrast)
   ============================================================================ */

@media (prefers-contrast: high) {
    .e-error.e-outline,
    .e-error .e-input-group,
    .e-error .e-float-input,
    span.e-error > .e-ddl,
    span.e-error > .e-autocomplete > .e-input-group {
        border-width: 3px !important;
        /* Use system colors in high contrast mode */
        border-color: CanvasText !important;
    }
    
    .validation-message,
    .validation-errors li {
        border-width: 2px;
        font-weight: bold;
        border-color: CanvasText;
    }
}

/* ============================================================================
   Forced Colors Mode (Windows High Contrast Mode)
   ============================================================================ */

@media (forced-colors: active) {
    .e-error.e-outline,
    .e-error .e-input-group,
    .e-error .e-float-input,
    span.e-error > .e-ddl,
    span.e-error > .e-autocomplete > .e-input-group {
        border: 2px dashed CanvasText !important;
        forced-color-adjust: none;
    }

    .validation-message,
    .validation-errors li {
        border: 2px solid CanvasText;
        background-color: Canvas;
        color: CanvasText;
        forced-color-adjust: none;
    }

    .validation-message::before,
    .validation-errors li::before {
        color: CanvasText;
    }
}

/* ============================================================================
   Reduced Motion Support (Accessibility)
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .validation-message,
    .validation-errors li {
        animation: none;
        /* Instantly show without animation */
    }
    
    /* Remove smooth scrolling for skip links */
    .skip-to-error {
        scroll-behavior: auto;
    }
}

/* ============================================================================
   Skip to Error Link (Keyboard Navigation)
   ============================================================================ */

.skip-to-error {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    background-color: #dc3545;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

.skip-to-error:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 1em;
}

/* ============================================================================
   Success Validation State (Optional)
   ============================================================================ */

.e-success.e-outline,
.e-success .e-input-group,
.e-success .e-float-input {
    border-color: #28a745 !important;
    border-width: 2px !important;
}

.e-success.e-outline:focus-within,
.e-success .e-input-group.e-input-focus,
.e-success .e-float-input.e-input-focus {
    border-color: #28a745 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* Success focus-visible for keyboard nav */
.e-success:focus-visible,
.e-success input:focus-visible {
    outline: 3px solid #28a745;
    outline-offset: 2px;
}

/* ============================================================================
   Dark Theme Support (Optional)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .validation-message,
    .validation-errors li {
        color: #f8d7da;
        background-color: #5a1f27;
        border-color: #dc3545;
    }

    .e-error .e-float-text,
    span.e-error .e-float-text {
        color: #f8d7da !important;
    }
}

/* ============================================================================
   Screen Reader Only Text
   ============================================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Allow focus on sr-only elements */
.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================================================
   Touch Target Improvements for Mobile
   ============================================================================ */

@media (pointer: coarse) {
    /* Increase touch targets for mobile */
    .validation-message,
    .validation-errors li {
        padding: 12px 16px;
        min-height: 48px;
    }
}