/* 
 * 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;
    }
}

/* ============================================================================
   Syncfusion AutoComplete/Dropdown Popup Width Constraints
   Prevents popup from extending beyond the input width or viewport.
   The popup is rendered in a portal at document root, so global CSS is needed.
   Using high specificity selectors to override Syncfusion's inline styles.
   ============================================================================ */

/* 
   APPROACH: Use CSS attribute selectors to target popups by their 
   inline style width and override with max-width constraint.
   Syncfusion sets width inline, but max-width can still constrain it.
*/

/* High specificity: Target the popup wrapper and content */
body .e-popup.e-ddl.e-popup-open,
body .e-popup.e-autocomplete.e-popup-open,
body .e-popup.e-dropdownbase.e-popup-open,
html body .e-popup.e-ddl,
html body .e-popup.e-autocomplete,
html body .e-popup.e-dropdownbase {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* 
   KEY FIX: Override inline width style by setting width to auto 
   and constraining with max-width. This works because max-width 
   takes precedence over width when max-width is smaller.
*/
body .e-popup.e-ddl[style*="width"],
body .e-popup.e-autocomplete[style*="width"],
body .e-popup.e-dropdownbase[style*="width"] {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(var(--tv-popup-max-width, 100%), 100vw) !important;
}

/* Target the inner list container with high specificity */
body .e-popup.e-ddl .e-content.e-dropdownbase,
body .e-popup.e-autocomplete .e-content.e-dropdownbase,
body .e-popup.e-ddl .e-dropdownbase.e-content,
body .e-popup.e-autocomplete .e-dropdownbase.e-content,
html body .e-popup .e-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Target the UL list element */
body .e-popup.e-ddl ul.e-list-parent,
body .e-popup.e-autocomplete ul.e-list-parent,
body .e-popup ul.e-ul {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure popup list items wrap text or truncate instead of extending */
body .e-popup.e-ddl .e-list-item,
body .e-popup.e-autocomplete .e-list-item,
body .e-popup.e-dropdownbase .e-list-item,
body .e-popup.e-ddl li.e-list-item,
body .e-popup.e-autocomplete li.e-list-item {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Target item text spans - truncate with ellipsis */
body .e-popup.e-ddl .e-list-item span,
body .e-popup.e-autocomplete .e-list-item span,
body .e-popup .e-list-item > span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Mobile: Constrain popup with viewport padding */
@media (max-width: 767px) {
    body .e-popup.e-ddl,
    body .e-popup.e-autocomplete,
    body .e-popup.e-dropdownbase,
    html body .e-popup.e-ddl.e-popup-open,
    html body .e-popup.e-autocomplete.e-popup-open,
    body .e-popup.e-ddl[style*="width"],
    body .e-popup.e-autocomplete[style*="width"] {
        max-width: calc(100vw - 16px) !important;
        width: auto !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;
    }
}