/**
 * DataLoader.js Stylesheet
 * Styles for enhanced data loading features including skeleton loading and validation errors
 */

/* ============================================================================
   Skeleton Loading Animation
   ============================================================================ */

.skeleton-loading {
    background: linear-gradient(90deg,
        #f0f0f0 0%,
        #f0f0f0 40%,
        #e0e0e0 50%,
        #f0f0f0 60%,
        #f0f0f0 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-pulse 1.5s ease-in-out infinite !important;
    color: transparent !important;
    pointer-events: none !important;
    user-select: none !important;
    border-color: #e0e0e0 !important;
}

.skeleton-loading::placeholder {
    color: transparent !important;
}

@keyframes skeleton-pulse {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .skeleton-loading {
        animation: none !important;
        background: #f0f0f0 !important;
    }
}

/* ============================================================================
   Loading States
   ============================================================================ */

.data-loading {
    opacity: 0.7;
    cursor: wait;
}

.data-loaded {
    animation: fadeIn 0.3s ease-in;
}

.data-error {
    border: 2px solid #F44336;
    background-color: #FFEBEE;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================================================
   Validation Error Styles
   ============================================================================ */

.field-error {
    color: #F44336;
    font-size: 12px;
    margin-top: 4px;
    display: block;
    font-weight: 400;
    line-height: 1.4;
}

[data-bind].error {
    border-color: #F44336 !important;
    border-width: 2px !important;
    background-color: #FFEBEE;
}

[data-bind].error:focus {
    outline: 2px solid #F44336;
    outline-offset: 2px;
}

/* ============================================================================
   Data Load Error Message
   ============================================================================ */

.data-load-error {
    padding: 16px;
    background-color: #FFEBEE;
    border: 1px solid #F44336;
    border-radius: 4px;
    margin: 8px 0;
}

.data-load-error .error-message {
    color: #C62828;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

/* ============================================================================
   Conditional Display
   ============================================================================ */

[data-show-if].hidden {
    display: none !important;
    visibility: hidden !important;
}

/* ============================================================================
   Accessibility Improvements
   ============================================================================ */

/* Focus states for keyboard navigation */
[data-bind]:focus {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
}

[data-bind]:focus.error {
    outline-color: #F44336;
}

/* Screen reader only content */
.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;
}

/* ============================================================================
   Loading Indicator Styles
   ============================================================================ */

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #2196F3;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   Responsive Adjustments
   ============================================================================ */

@media (max-width: 768px) {
    .field-error {
        font-size: 11px;
    }

    .data-load-error {
        padding: 12px;
    }

    .data-load-error .error-message {
        font-size: 13px;
    }
}

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

@media (prefers-color-scheme: dark) {
    .skeleton-loading {
        background: linear-gradient(90deg,
            #2a2a2a 0%,
            #2a2a2a 40%,
            #3a3a3a 50%,
            #2a2a2a 60%,
            #2a2a2a 100%
        ) !important;
    }

    .data-error {
        background-color: #5d1f1f;
        border-color: #ef5350;
    }

    [data-bind].error {
        background-color: #5d1f1f;
        border-color: #ef5350 !important;
    }

    .data-load-error {
        background-color: #5d1f1f;
        border-color: #ef5350;
    }

    .data-load-error .error-message {
        color: #ef9a9a;
    }

    .field-error {
        color: #ef9a9a;
    }
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
    .skeleton-loading {
        animation: none !important;
        background: #f0f0f0 !important;
    }

    .data-loading,
    .loading-spinner {
        display: none !important;
    }

    .field-error {
        color: #000 !important;
    }
}