/**
 * The Flock - Accessibility Improvements
 * WCAG 2.1 AA Compliant Styles
 */

/* =============================================================================
   SKIP NAVIGATION
   ============================================================================= */

.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary, #7c3aed);
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    z-index: 9999;
    border-radius: 0 0 var(--radius, 0.375rem) var(--radius, 0.375rem);
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid white;
    outline-offset: 2px;
}

/* =============================================================================
   FOCUS STATES
   ============================================================================= */

/* Visible focus ring for all interactive elements */
*:focus-visible {
    outline: 2px solid var(--primary, #7c3aed);
    outline-offset: 2px;
}

/* Remove default outline when using :focus-visible */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for buttons */
.btn:focus-visible,
button:focus-visible {
    outline: 2px solid var(--primary, #7c3aed);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
}

/* Enhanced focus for form inputs */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary, #7c3aed);
    outline-offset: 0;
    border-color: var(--primary, #7c3aed);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* Enhanced focus for links */
a:focus-visible {
    outline: 2px solid var(--primary, #7c3aed);
    outline-offset: 2px;
    text-decoration: underline;
}

/* Enhanced focus for cards and clickable areas */
.card:focus-visible,
.widget-card:focus-visible,
.nav-item:focus-visible {
    outline: 2px solid var(--primary, #7c3aed);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
}

/* =============================================================================
   COLOR CONTRAST FIXES
   ============================================================================= */

/* Ensure text meets AA contrast requirements (4.5:1 for normal text, 3:1 for large) */

/* Muted text - #4b5563 (gray-600) for WCAG AA compliance */
.text-muted,
.text-secondary {
    color: #4b5563 !important;
}

/* Badge contrast fixes */
.badge-secondary {
    background-color: #595959;
    color: white;
}

.badge-warning {
    background-color: #c27803;
    color: white;
}

.badge-info {
    background-color: #0e7490;
    color: white;
}

/* Link colors - ensure sufficient contrast */
a {
    color: #6d28d9;
}

a:hover {
    color: #5b21b6;
}

/* Placeholder text - improved contrast */
::placeholder {
    color: #6b7280;
    opacity: 1;
}

/* Disabled state - maintain readability */
:disabled,
.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Table row hover - accessible contrast */
.table tbody tr:hover {
    background-color: #f3f4f6;
}

/* =============================================================================
   SCREEN READER UTILITIES
   ============================================================================= */

/* Visually hidden but accessible to screen readers */
.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: 0;
}

/* Show on focus for skip links */
.sr-only-focusable:focus,
.visually-hidden-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* =============================================================================
   ARIA LIVE REGIONS
   ============================================================================= */

/* Toast notifications should be aria-live="polite" */
.toast-container [role="alert"] {
    position: relative;
}

/* Loading indicators */
.loading-overlay[aria-busy="true"] {
    /* Screen readers will announce loading state */
}

/* Form validation messages */
.form-error[role="alert"],
.form-success[role="status"] {
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* =============================================================================
   TOUCH TARGETS
   ============================================================================= */

/* Minimum 44x44px touch target size */
.btn,
button,
a.nav-item,
.dropdown-item {
    min-height: 44px;
    min-width: 44px;
}

/* Icon-only buttons need explicit sizing */
.btn-icon,
.icon-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Checkbox and radio - standard sizing with adequate touch area via label */
.form-check {
    min-height: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.form-check-label {
    padding: 0.375rem 0;
    cursor: pointer;
    line-height: 1.4;
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@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;
    }

    /* Keep essential loading indicators visible but static */
    .loading-spinner {
        animation: none;
    }

    /* Remove hover transforms */
    .card:hover,
    .btn:hover,
    .widget-card:hover {
        transform: none !important;
    }
}

/* =============================================================================
   HIGH CONTRAST MODE
   ============================================================================= */

@media (prefers-contrast: high) {
    /* Increase border visibility */
    .card,
    .btn,
    input,
    select,
    textarea {
        border-width: 2px;
        border-color: currentColor;
    }

    /* Ensure text is fully opaque */
    .text-muted,
    .text-secondary {
        color: inherit !important;
        opacity: 0.8;
    }

    /* Increase focus visibility */
    *:focus-visible {
        outline-width: 3px;
    }

    /* Remove gradients for better visibility */
    .btn-primary,
    .btn-success,
    .btn-warning,
    .btn-danger {
        background: currentColor;
    }
}

/* =============================================================================
   KEYBOARD NAVIGATION
   ============================================================================= */

/* Dropdown menu keyboard navigation */
.dropdown-menu:focus-within {
    display: block;
}

.dropdown-item:focus {
    background-color: var(--gray-100, #f3f4f6);
    outline: none;
}

/* Tab panels */
[role="tabpanel"]:focus {
    outline: 2px solid var(--primary, #7c3aed);
    outline-offset: -2px;
}

/* Modal keyboard trap */
.modal[aria-modal="true"]:focus {
    outline: none;
}

/* =============================================================================
   FORM ACCESSIBILITY
   ============================================================================= */

/* Required field indicator */
.form-label.required::after {
    content: " *";
    color: var(--danger, #ef4444);
}

/* Error states */
.form-control.is-invalid {
    border-color: var(--danger, #ef4444);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus {
    border-color: var(--danger, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Success states */
.form-control.is-valid {
    border-color: var(--success, #10b981);
}

.form-control.is-valid:focus {
    border-color: var(--success, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Help text */
.form-text,
.help-text {
    font-size: 0.875rem;
    color: #595959;
    margin-top: 0.25rem;
}

/* Error messages */
.invalid-feedback,
.error-message {
    font-size: 0.875rem;
    color: var(--danger, #ef4444);
    margin-top: 0.25rem;
}

/* =============================================================================
   TABLE ACCESSIBILITY
   ============================================================================= */

/* Sortable table headers */
th[aria-sort] {
    cursor: pointer;
}

th[aria-sort="ascending"]::after {
    content: " ↑";
}

th[aria-sort="descending"]::after {
    content: " ↓";
}

/* Row selection indicators */
tr[aria-selected="true"] {
    background-color: rgba(124, 58, 237, 0.1);
}

/* =============================================================================
   DIALOG/MODAL ACCESSIBILITY
   ============================================================================= */

/* Modal backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Dialog focus management */
.modal[role="dialog"] {
    /* Focus trap styles */
}

/* Close button positioning */
.modal .close-btn,
.modal .btn-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    min-width: 44px;
    min-height: 44px;
}

/* =============================================================================
   NOTIFICATION ACCESSIBILITY
   ============================================================================= */

/* Toast notifications */
.toast[role="alert"] {
    /* Ensure role="alert" for screen readers */
}

.toast[role="status"] {
    /* Less urgent notifications */
}

/* Flash messages */
.flash-message[role="alert"] {
    padding: 1rem;
    border-radius: var(--radius, 0.375rem);
    margin-bottom: 1rem;
}

/* =============================================================================
   ICON ACCESSIBILITY
   ============================================================================= */

/* Decorative icons should be hidden from screen readers */
[aria-hidden="true"] {
    speak: never;
}

/* Icons with meaning need labels */
.icon-btn[aria-label] {
    /* Ensure aria-label is present */
}

/* Icon + text buttons - hide icon from screen readers */
.btn svg,
.btn i[data-feather] {
    pointer-events: none;
}

/* ===== DARK MODE OVERRIDES ===== */

/* Dark mode: explicit theme selection */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary {
    color: var(--text-secondary, #cbd5e1) !important;
}

[data-theme="dark"] a {
    color: #a78bfa !important;
}

[data-theme="dark"] a:hover {
    color: #c4b5fd !important;
}

/* Dark mode: auto theme via system preference */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .text-muted,
    [data-theme="auto"] .text-secondary {
        color: var(--text-secondary, #cbd5e1) !important;
    }

    [data-theme="auto"] a {
        color: #a78bfa !important;
    }

    [data-theme="auto"] a:hover {
        color: #c4b5fd !important;
    }
}