/* ========================================
   508 ACCESSIBILITY COMPLIANCE STYLES
   ======================================== */

/* ----------------
   1. SKIP LINKS
   ---------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color, #0071e3);
    color: #fff;
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    transition: top 0.3s ease;
}

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

/* ----------------
   2. FOCUS STATES
   ---------------- */

/* Enhanced focus indicators for all interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
.nav-item:focus,
.btn:focus,
.scan-button:focus {
    outline: 3px solid var(--accent-color, #2997ff);
    outline-offset: 2px;
}

/* Focus visible for keyboard navigation only */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-item:focus-visible,
.btn:focus-visible,
.scan-button:focus-visible {
    outline: 3px solid var(--accent-color, #2997ff);
    outline-offset: 2px;
}

/* High contrast focus for dark backgrounds */
.sidebar a:focus-visible,
.sidebar button:focus-visible,
.hud-panel a:focus-visible,
.hud-panel button:focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
}

/* ----------------
   3. COLOR CONTRAST
   ---------------- */

/* Ensure minimum 4.5:1 contrast ratio for text */
.text-muted,
.text-secondary,
.status-desc,
.feature-item,
.info-text {
    color: #a1a1a6; /* Improved from #86868b for better contrast */
}

/* Links in body text need sufficient contrast */
a:not(.btn):not(.nav-item) {
    color: var(--accent-color, #2997ff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:not(.btn):not(.nav-item):hover {
    text-decoration-thickness: 2px;
}

/* Error messages with sufficient contrast */
.error-message {
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.15);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #ff4d4d;
    display: none; /* Hidden by default until there's an error */
}

/* Show error message only when it has content */
.error-message:not(:empty) {
    display: block;
}

/* ----------------
   4. FORM ACCESSIBILITY
   ---------------- */

/* Required field indicators */
.form-group label[for]::after {
    content: "";
}

.form-group.required label::after {
    content: " *";
    color: #ff6b6b;
}

/* Error states */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
}

.form-group .error-text {
    color: #ff6b6b;
    font-size: 0.85rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-group .error-text::before {
    content: "⚠";
}

/* Success states */
.form-group.has-success input,
.form-group.has-success select {
    border-color: var(--success-color, #30d158);
}

/* Disabled states */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Placeholder contrast */
::placeholder {
    color: #6e6e73;
    opacity: 1;
}

/* ----------------
   5. MOTION & ANIMATION
   ---------------- */

/* Reduce motion for users who prefer it */
@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;
    }
    
    .scan-overlay,
    .cyberpunk-filter,
    .scan-line {
        display: none !important;
    }
    
    .glass-panel {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .hud-panel {
        transition: none !important;
    }
}

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

/* Allow element to be focusable when navigated to */
.sr-only-focusable:focus,
.visually-hidden-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ----------------
   7. LANDMARK REGIONS
   ---------------- */

/* Visual indicators for skip navigation targets */
main:target,
[role="main"]:target {
    outline: 3px solid var(--accent-color, #2997ff);
    outline-offset: -3px;
}

/* ----------------
   8. TABLE ACCESSIBILITY
   ---------------- */

.data-table,
.user-table {
    border-collapse: collapse;
}

.data-table caption,
.user-table caption {
    text-align: left;
    padding: 10px 0;
    font-weight: 600;
    color: var(--text-primary, #f5f5f7);
}

.data-table th,
.user-table th {
    text-align: left;
    font-weight: 600;
}

/* Row focus for keyboard navigation */
.data-table tbody tr:focus-within,
.user-table tbody tr:focus-within {
    outline: 2px solid var(--accent-color, #2997ff);
    outline-offset: -2px;
}

/* ----------------
   9. BUTTON STATES
   ---------------- */

/* Ensure buttons have visible states */
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

/* Loading state */
.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

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

/* ----------------
   10. ICON ACCESSIBILITY
   ---------------- */

/* Decorative icons should be hidden from screen readers via aria-hidden="true" in HTML */

/* Icons with meaning need accessible names */
.icon-btn {
    min-width: 44px;
    min-height: 44px;
}

/* ----------------
   11. HIGH CONTRAST MODE
   ---------------- */

@media (prefers-contrast: high) {
    :root {
        --glass-bg: rgba(0, 0, 0, 0.9);
        --glass-border: rgba(255, 255, 255, 0.5);
    }
    
    .glass-panel,
    .dashboard-card,
    .auth-card,
    .hud-panel {
        border-width: 2px;
    }
    
    a, .btn, button {
        text-decoration: underline;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* ----------------
   12. TOUCH TARGET SIZES
   ---------------- */

/* Ensure minimum 44x44px touch targets */
.btn,
.nav-item,
button,
a.btn,
input[type="checkbox"],
input[type="radio"] {
    min-height: 44px;
}

input[type="checkbox"],
input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
}

/* ----------------
   13. LIVE REGIONS
   ---------------- */

/* Styles for ARIA live regions */
[aria-live="polite"],
[aria-live="assertive"] {
    position: relative;
}

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

/* ----------------
   14. DIALOG/MODAL ACCESSIBILITY
   ---------------- */

[role="dialog"],
[role="alertdialog"] {
    position: fixed;
    z-index: 9999;
}

/* Trap focus indicator */
.modal-open {
    overflow: hidden;
}

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