/* Accessibility Enhancements for WCAG 2.1 AA Compliance */

/* Skip to Content Link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--bs-primary);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 0.25rem 0;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--bs-warning);
    outline-offset: 2px;
}

/* Enhanced Focus Indicators for Keyboard Navigation */
.keyboard-focus,
*:focus-visible {
    outline: 3px solid var(--bs-primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25) !important;
}

/* Remove focus outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Button Focus States */
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Link Focus States */
a:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
    text-decoration: underline;
}

/* Form Input Focus States */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
    border-color: var(--bs-primary);
}

/* Screen Reader Only Content */
.sr-only,
.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;
}

.sr-only-focusable:focus,
.visually-hidden-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }

    button,
    .btn {
        border: 2px solid currentColor !important;
    }

    a {
        text-decoration: underline;
    }
}

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

/* Text Spacing for Readability */
.text-spacing {
    line-height: 1.5;
    letter-spacing: 0.12em;
    word-spacing: 0.16em;
}

p,
li,
td,
th {
    line-height: 1.5;
}

/* Minimum Touch Target Size (44x44px) */
button,
.btn,
a,
input[type="checkbox"],
input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
}

/* Exception for inline links in paragraphs */
p a,
li a {
    min-height: auto;
    min-width: auto;
    padding: 0.25rem;
    margin: -0.25rem;
}

/* Checkbox and Radio Accessibility */
input[type="checkbox"],
input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Required Field Indicator */
.required-indicator,
.form-label.required::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: bold;
    margin-left: 0.25rem;
}

/* Error Message Accessibility */
.invalid-feedback,
.error-message {
    display: block;
    font-size: 0.875rem;
    color: var(--bs-danger);
    margin-top: 0.25rem;
}

.is-invalid {
    border-color: var(--bs-danger) !important;
}

/* Success Message Accessibility */
.valid-feedback,
.success-message {
    display: block;
    font-size: 0.875rem;
    color: var(--bs-success);
    margin-top: 0.25rem;
}

.is-valid {
    border-color: var(--bs-success) !important;
}

/* ARIA Live Region Styling */
[role="status"],
[role="alert"] {
    position: relative;
}

.aria-live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Accessible Tables */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    text-align: left;
    font-weight: 600;
    background-color: var(--bs-light);
}

/* Table Focus Styles */
table tr:focus-within {
    background-color: var(--bs-primary-bg-subtle);
    outline: 2px solid var(--bs-primary);
}

/* Accessible Modals */
.modal {
    color: var(--bs-body-color);
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

/* Ensure Modal Content is Readable */
.modal-dialog {
    color: var(--bs-body-color);
}

/* Fix modal width issue with centered modals */
/* Bootstrap's flex centering causes width to collapse - force it to expand */
/* Only apply when modal is shown to avoid animation issues */
.modal.show .modal-dialog-centered {
    margin-left: 1.75rem !important;
    margin-right: 1.75rem !important;
    flex-grow: 1 !important;
}

/* Tooltip Accessibility */
.tooltip {
    font-size: 0.875rem;
    pointer-events: none;
}

/* Keyboard Shortcut Indicator */
.keyboard-shortcut {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-family: monospace;
    margin: 0 0.25rem;
}

/* External Link Indicator */
.external-link::after {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Color Blind Safe Colors */
.color-success {
    background-color: #0077bb;
    color: white;
}

.color-warning {
    background-color: #ee7733;
    color: white;
}

.color-danger {
    background-color: #cc3311;
    color: white;
}

.color-info {
    background-color: #33bbee;
    color: white;
}

/* Ensure Sufficient Color Contrast */
.text-muted {
    color: #6c757d !important;
}

/* Dark Mode Contrast Adjustments */
[data-bs-theme="dark"] .text-muted {
    color: #adb5bd !important;
}

/* Focus Trap for Modals */
.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Loading State Accessibility */
.loading-spinner[role="status"]::after {
    content: "Loading...";
    position: absolute;
    left: -10000px;
}

/* Disabled State Clarity */
button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Progress Indicator Accessibility */
.progress {
    background-color: var(--bs-secondary-bg);
}

.progress-bar {
    background-color: var(--bs-primary);
    transition: width 0.3s ease;
}

/* Pagination Accessibility */
.pagination .page-link {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-link:focus {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
    z-index: 3;
}

/* Breadcrumb Accessibility */
.breadcrumb-item+.breadcrumb-item::before {
    content: ">";
    padding: 0 0.5rem;
}

.breadcrumb-item.active {
    font-weight: 600;
}

/* Ensure all interactive elements are keyboard accessible */
[onclick]:not(button):not(a) {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

[onclick]:not(button):not(a):focus {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}