/* ==========================================================================
   Accessibility CSS - US-080 WCAG 2.1 AA Compliance
   ========================================================================== */

/* ==========================================================================
   Skip Links
   ========================================================================== */

/* Skip links always visible when focused (even without accessibility mode) */
.skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.75rem 1.5rem;
    background-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary) !important;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: left 0.1s ease;
}

.skip-link:focus {
    left: 0;
    outline: 3px solid var(--dp-status-warning);
    outline-offset: 2px;
}

/* ==========================================================================
   Focus Indicators - WCAG 2.4.7 Focus Visible
   Enhanced only in accessibility mode
   ========================================================================== */

/* Enhanced focus styles for accessibility mode */
.accessibility-mode :focus-visible {
    outline: 3px solid var(--dp-border-focus);
    outline-offset: 2px;
}

.accessibility-mode :focus:not(:focus-visible) {
    outline: none;
}

/* Button focus */
.accessibility-mode .btn:focus-visible {
    outline: 3px solid var(--dp-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem var(--dp-border-focus);
}

/* Form control focus */
.accessibility-mode .form-control:focus-visible,
.accessibility-mode .form-select:focus-visible {
    border-color: var(--dp-interactive-primary);
    box-shadow: 0 0 0 0.25rem var(--dp-border-focus);
    outline: none;
}

/* Link focus */
.accessibility-mode a:focus-visible {
    outline: 3px solid var(--dp-border-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Card focus (for clickable cards) */
.accessibility-mode .card:focus-visible,
.accessibility-mode .card.clickable:focus-visible {
    outline: 3px solid var(--dp-border-focus);
    outline-offset: 2px;
}

/* Table row focus */
.accessibility-mode tr:focus-visible {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: -2px;
}

/* Dropdown item focus */
.accessibility-mode .dropdown-item:focus-visible {
    background-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    outline: none;
}

/* Nav link focus */
.accessibility-mode .nav-link:focus-visible {
    outline: 3px solid var(--dp-border-focus);
    outline-offset: 2px;
}

/* Modal focus */
.accessibility-mode .modal:focus-visible {
    outline: none;
}

.accessibility-mode .modal-content:focus-visible {
    outline: 3px solid var(--dp-border-focus);
    outline-offset: 2px;
}

/* Checkbox/Radio focus */
.accessibility-mode .form-check-input:focus-visible {
    border-color: var(--dp-interactive-primary);
    box-shadow: 0 0 0 0.25rem var(--dp-border-focus);
}

/* ==========================================================================
   Color Contrast - WCAG 1.4.3 Contrast (Minimum) AA
   Only in accessibility mode
   NOTE: Hardcoded colors intentional per WCAG SC 1.4.3 / 1.4.11 —
   these override theme tokens to guarantee minimum contrast ratios.
   ========================================================================== */

/* High contrast text utilities */
.accessibility-mode .text-high-contrast {
    color: #000 !important;
}

.accessibility-mode.dark-mode .text-high-contrast {
    color: #fff !important;
}

/* Ensure minimum 4.5:1 contrast for normal text */
.accessibility-mode .text-muted {
    color: #595959 !important; /* 4.5:1 on white */
}

.accessibility-mode.dark-mode .text-muted {
    color: #a3a3a3 !important; /* 4.5:1 on dark bg */
}

/* Link contrast */
.accessibility-mode a.navbar-brand.fw-bold:not(.btn) {
    color: #fff; /* 4.5:1 on white */
}

.accessibility-mode a:not(.btn) {
    color: #0056b3; /* 4.5:1 on white */
}

.accessibility-mode.dark-mode a:not(.btn) {
    color: #6ea8fe; /* 4.5:1 on dark bg */
}

/* Badge contrast fix */
.accessibility-mode .badge.bg-warning {
    color: #000 !important;
}

.accessibility-mode .badge.bg-info {
    color: #000 !important;
}

/* ==========================================================================
   Form Accessibility
   Only in accessibility mode
   ========================================================================== */

/* Required field indicator */
.accessibility-mode .form-label.required::after,
.accessibility-mode label.required::after {
    content: " *";
    color: var(--dp-status-danger);
    font-weight: bold;
}

/* Error state for form controls */
.accessibility-mode .form-control.is-invalid,
.accessibility-mode .form-select.is-invalid {
    border-color: var(--dp-status-danger);
    border-width: 2px;
}

/* Error message styling */
.accessibility-mode .invalid-feedback {
    color: var(--dp-status-danger);
    font-weight: 500;
}

/* Associate error with input via aria-describedby */
.accessibility-mode .form-control[aria-invalid="true"] {
    border-color: var(--dp-status-danger);
}

/* Disabled state - ensure sufficient contrast */
.accessibility-mode .form-control:disabled,
.accessibility-mode .form-select:disabled,
.accessibility-mode .btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ==========================================================================
   Screen Reader Only Content
   ========================================================================== */

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

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

/* ==========================================================================
   Keyboard Navigation
   Only in accessibility mode
   ========================================================================== */

/* Focus trap container */
.accessibility-mode .focus-trap {
    outline: none;
}

/* Keyboard-only styles */
.accessibility-mode.keyboard-user *:focus {
    outline: 3px solid var(--dp-border-focus) !important;
    outline-offset: 2px !important;
}

/* Tab order indicator (dev mode) */
.accessibility-mode[data-show-tab-order] [tabindex]:not([tabindex="-1"])::before {
    content: attr(tabindex);
    position: absolute;
    top: -8px;
    left: -8px;
    background: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 50%;
}

/* ==========================================================================
   Motion & Animation - WCAG 2.3.3 Animation from Interactions
   ========================================================================== */

/* Respect user's motion preferences */
@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;
    }
    
    .carousel-item {
        transition: none;
    }
    
    .modal.fade .modal-dialog {
        transition: none;
    }
    
    .collapse {
        transition: none;
    }
}

/* No flashing content - WCAG 2.3.1 */
.no-flash {
    animation: none !important;
}

/* ==========================================================================
   Touch Target Size - WCAG 2.5.5 Target Size
   Only in accessibility mode
   ========================================================================== */

/* Minimum 44x44px touch targets */
/* Exclude Quill editor buttons to prevent icon distortion */
.accessibility-mode .btn:not(.ql-picker):not([class*="ql-"]),
.accessibility-mode .nav-link,
.accessibility-mode .dropdown-item,
.accessibility-mode .form-check-input,
.accessibility-mode .page-link {
    min-height: 44px;
    min-width: 44px;
}

/* Touch target for small buttons */
.accessibility-mode .btn-sm:not(.ql-picker):not([class*="ql-"]) {
    min-height: 36px;
    min-width: 36px;
    padding: 0.375rem 0.75rem;
}

/* Icon buttons need adequate size */
.accessibility-mode .btn-icon:not(.ql-picker):not([class*="ql-"]) {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Images & Media
   Only in accessibility mode for dev indicators
   ========================================================================== */

/* Ensure images have alt text indicator (dev mode) */
.accessibility-mode[data-show-missing-alt] img:not([alt])::after {
    content: "Missing alt text!";
    position: absolute;
    background: red;
    color: white;
    padding: 2px 4px;
    font-size: 10px;
}

/* Decorative images - no additional styling needed in accessibility mode */

/* ==========================================================================
   Tables Accessibility
   Only in accessibility mode
   ========================================================================== */

/* Table caption */
.accessibility-mode table caption {
    caption-side: top;
    padding: 0.5rem;
    font-weight: 600;
    text-align: left;
}

/* Sortable column indicator */
.accessibility-mode th[aria-sort] {
    cursor: pointer;
}

.accessibility-mode th[aria-sort]::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.accessibility-mode th[aria-sort="ascending"]::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid currentColor;
}

.accessibility-mode th[aria-sort="descending"]::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid currentColor;
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (forced-colors: active) {
    .btn {
        border: 2px solid currentColor;
    }
    
    .form-control,
    .form-select {
        border: 2px solid currentColor;
    }
    
    .card {
        border: 2px solid currentColor;
    }
    
    :focus-visible {
        outline: 3px solid currentColor !important;
    }
}

/* ==========================================================================
   Dark Mode Accessibility Adjustments
   Only in accessibility mode
   ========================================================================== */

.accessibility-mode.dark-mode {
    --dp-border-focus: var(--dp-border-focus); /* focus ring color overridden per dark-mode token */
}

.dark-mode .skip-link {
    background-color: var(--dp-interactive-primary-hover);
}

.accessibility-mode.dark-mode .invalid-feedback {
    color: var(--dp-border-error); /* dark-mode invalid text: WCAG AA on dark bg */
}

.accessibility-mode.dark-mode .form-control.is-invalid,
.accessibility-mode.dark-mode .form-select.is-invalid {
    border-color: var(--dp-border-error); /* dark-mode invalid border */
}

/* ==========================================================================
   Print Accessibility
   ========================================================================== */

@media print {
    .skip-links,
    .visually-hidden {
        display: none !important;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666; /* print: intentional */
    }
    
    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }
}

/* ==========================================================================
   Rich Text Editor Exclusions
   Preserve Quill.js editor functionality and appearance
   ========================================================================== */

/* Exclude Quill editor from min-size constraints */
.accessibility-mode .ql-toolbar button,
.accessibility-mode .ql-toolbar .ql-picker,
.accessibility-mode .ql-toolbar .ql-picker-label,
.accessibility-mode .ql-container button {
    min-height: initial !important;
    min-width: initial !important;
}

/* Preserve Quill editor focus styles */
.accessibility-mode .ql-toolbar button:focus,
.accessibility-mode .ql-picker:focus {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 1px;
}

/* Ensure Quill icons display correctly */
.accessibility-mode .ql-toolbar .ql-stroke {
    stroke: currentColor;
}

.accessibility-mode .ql-toolbar .ql-fill {
    fill: currentColor;
}

/* Maintain Quill editor contrast */
.accessibility-mode .ql-editor {
    min-height: 150px;
}

.accessibility-mode.dark-mode .ql-toolbar,
.accessibility-mode.dark-mode .ql-container {
    border-color: var(--dp-text-secondary);
}

.accessibility-mode.dark-mode .ql-editor {
    background-color: var(--dp-text-primary);
    color: var(--dp-surface-page);
}