/* =============================================================================
   NotarisPlatform - Accessibility Enhancements
   WCAG 2.1 AA compliant accessibility features
   ============================================================================= */

/* Skip to content link - Hidden by default, visible on focus */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--text-inverse);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 var(--border-radius-md) 0;
    font-weight: var(--font-weight-semibold);
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible styles for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    *:focus-visible {
        outline: 3px solid;
        outline-offset: 3px;
    }

    .mud-button-root:focus-visible,
    .mud-icon-button:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: 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;
}

/* Focus trap for modals */
.focus-trap {
    position: relative;
}

/* Keyboard shortcut hints */
.keyboard-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-family: var(--font-family-mono);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    margin-left: var(--spacing-xs);
}

/* ARIA live regions - visible for polite/assertive announcements */
.aria-live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* E-learning-specific accessibility helpers */
.elearning-accessibility-scope .mud-button-root,
.elearning-accessibility-scope .mud-icon-button,
.elearning-accessibility-scope .mud-chip,
.elearning-accessibility-scope .mud-pagination-item {
    min-height: 24px;
}

.elearning-accessibility-scope .mud-icon-button,
.elearning-accessibility-scope .mud-chip,
.elearning-accessibility-scope .mud-pagination-item {
    min-width: 24px;
}

.elearning-accessibility-scope .mud-chip {
    line-height: 1.35;
}

.elearning-accessibility-scope fieldset {
    min-width: 0;
}

.elearning-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.elearning-tab {
    min-height: 44px;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(14, 116, 144, 0.2);
    border-radius: 999px;
    background: #ffffff;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    text-transform: none;
}

.elearning-tab[aria-selected="true"],
.elearning-tab.is-active {
    background: rgba(14, 116, 144, 0.12);
    border-color: rgba(14, 116, 144, 0.45);
    color: #0f4c5c;
}

.elearning-tab-panel {
    margin-top: 1rem;
}

.mud-breadcrumb-item-disabled,
.mud-breadcrumb-item-disabled a,
.mud-breadcrumb-item-disabled .mud-link,
.mud-breadcrumb-item-disabled .mud-typography,
.mud-breadcrumb-item.mud-disabled,
.mud-breadcrumb-item.mud-disabled > a {
    color: #475569 !important;
    opacity: 1 !important;
}

.mud-breadcrumbs a[href="#"],
.mud-breadcrumbs a[href="#"]:visited,
.mud-breadcrumbs a[href="#"]:hover,
.mud-breadcrumbs a[href="#"]:focus-visible {
    color: #475569 !important;
}

.mud-chip.elearning-accessibility-chip--primary {
    color: #0f4c81 !important;
    border-color: rgba(15, 76, 129, 0.28) !important;
    background: #dbeafe !important;
}

.mud-chip.elearning-accessibility-chip--info {
    color: #0b5563 !important;
    border-color: rgba(11, 85, 99, 0.28) !important;
    background: #dceff3 !important;
}

.mud-chip.elearning-accessibility-chip--success {
    color: #155724 !important;
    border-color: rgba(21, 87, 36, 0.28) !important;
    background: #dff3e2 !important;
}

.mud-chip.elearning-accessibility-chip--warning {
    color: #5f3700 !important;
    border-color: rgba(95, 55, 0, 0.28) !important;
    background: #f4e3c2 !important;
}

.mud-chip.elearning-accessibility-chip--error {
    color: #7b1d29 !important;
    border-color: rgba(123, 29, 41, 0.28) !important;
    background: #f8dde1 !important;
}

.mud-chip.elearning-accessibility-chip--neutral {
    color: #334155 !important;
    border-color: rgba(51, 65, 85, 0.28) !important;
    background: #e2e8f0 !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--primary,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--primary {
    background-color: #dbeafe !important;
    border-color: rgba(15, 76, 129, 0.28) !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--info,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--info {
    background-color: #dceff3 !important;
    border-color: rgba(11, 85, 99, 0.28) !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--success,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--success {
    background-color: #dff3e2 !important;
    border-color: rgba(21, 87, 36, 0.28) !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--warning,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--warning {
    background-color: #f4e3c2 !important;
    border-color: rgba(95, 55, 0, 0.28) !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--error,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--error {
    background-color: #f8dde1 !important;
    border-color: rgba(123, 29, 41, 0.28) !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--neutral,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--neutral {
    background-color: #e2e8f0 !important;
    border-color: rgba(51, 65, 85, 0.28) !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--primary .mud-chip-content,
.mud-chip.mud-chip-filled.elearning-accessibility-chip--primary .mud-icon-root,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--primary .mud-chip-content,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--primary .mud-icon-root {
    color: #0f4c81 !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--info .mud-chip-content,
.mud-chip.mud-chip-filled.elearning-accessibility-chip--info .mud-icon-root,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--info .mud-chip-content,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--info .mud-icon-root {
    color: #0b5563 !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--success .mud-chip-content,
.mud-chip.mud-chip-filled.elearning-accessibility-chip--success .mud-icon-root,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--success .mud-chip-content,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--success .mud-icon-root {
    color: #155724 !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--warning .mud-chip-content,
.mud-chip.mud-chip-filled.elearning-accessibility-chip--warning .mud-icon-root,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--warning .mud-chip-content,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--warning .mud-icon-root {
    color: #5f3700 !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--error .mud-chip-content,
.mud-chip.mud-chip-filled.elearning-accessibility-chip--error .mud-icon-root,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--error .mud-chip-content,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--error .mud-icon-root {
    color: #7b1d29 !important;
}
.mud-chip.mud-chip-filled.elearning-accessibility-chip--neutral .mud-chip-content,
.mud-chip.mud-chip-filled.elearning-accessibility-chip--neutral .mud-icon-root,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--neutral .mud-chip-content,
.mud-chip.mud-chip-outlined.elearning-accessibility-chip--neutral .mud-icon-root {
    color: #334155 !important;
}

.mud-chip.elearning-accessibility-chip--primary .mud-chip-content,
.mud-chip.elearning-accessibility-chip--primary .mud-icon-root,
.mud-chip.elearning-accessibility-chip--info .mud-chip-content,
.mud-chip.elearning-accessibility-chip--info .mud-icon-root,
.mud-chip.elearning-accessibility-chip--success .mud-chip-content,
.mud-chip.elearning-accessibility-chip--success .mud-icon-root,
.mud-chip.elearning-accessibility-chip--warning .mud-chip-content,
.mud-chip.elearning-accessibility-chip--warning .mud-icon-root,
.mud-chip.elearning-accessibility-chip--error .mud-chip-content,
.mud-chip.elearning-accessibility-chip--error .mud-icon-root,
.mud-chip.elearning-accessibility-chip--neutral .mud-chip-content,
.mud-chip.elearning-accessibility-chip--neutral .mud-icon-root {
    color: inherit !important;
}

.elearning-accessibility-scope .elearning-accessibility-alert--warning {
    background: #fff7e6 !important;
    border-color: rgba(95, 55, 0, 0.28) !important;
}

.elearning-accessibility-scope .elearning-accessibility-alert--warning .mud-alert-message,
.elearning-accessibility-scope .elearning-accessibility-alert--warning .mud-alert-icon,
.elearning-accessibility-scope .elearning-accessibility-alert--warning .mud-typography,
.elearning-accessibility-scope .elearning-accessibility-alert--warning .mud-button-root {
    color: #5f3700 !important;
}

.elearning-accessibility-scope .elearning-accessibility-alert--error {
    background: #fdf0f2 !important;
    border-color: rgba(123, 29, 41, 0.28) !important;
}

.elearning-accessibility-scope .elearning-accessibility-alert--error .mud-alert-message,
.elearning-accessibility-scope .elearning-accessibility-alert--error .mud-alert-icon,
.elearning-accessibility-scope .elearning-accessibility-alert--error .mud-typography,
.elearning-accessibility-scope .elearning-accessibility-alert--error .mud-button-root {
    color: #7b1d29 !important;
}

.elearning-accessibility-scope .elearning-accessibility-alert--success {
    background: #edf8ef !important;
    border-color: rgba(21, 87, 36, 0.28) !important;
}

.elearning-accessibility-scope .elearning-accessibility-alert--success .mud-alert-message,
.elearning-accessibility-scope .elearning-accessibility-alert--success .mud-alert-icon,
.elearning-accessibility-scope .elearning-accessibility-alert--success .mud-typography,
.elearning-accessibility-scope .elearning-accessibility-alert--success .mud-button-root {
    color: #155724 !important;
}

.elearning-accessibility-text--default {
    color: var(--mud-palette-text-primary) !important;
}

.elearning-accessibility-text--warning {
    color: #5f3700 !important;
}

.elearning-accessibility-text--error {
    color: #7b1d29 !important;
}

/* Loading indicator for async operations */
.loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.loading-indicator[aria-busy="true"]::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-indicator[aria-busy="true"]::after {
        animation: none;
        border-right-color: currentColor;
        opacity: 0.5;
    }
}
