/**
 * Keyboard Navigation Styles
 * Provides clear visual indicators for keyboard navigation and accessibility
 * Uses :focus-visible to show indicators only for keyboard users (not mouse clicks)
 * WCAG 2.1 Level AA compliant focus indicators
 */

/* ============================================
   SKIP LINKS
   ============================================ */

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--focus-color, #0066cc);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 10000;
    font-weight: 600;
    transition: top 0.2s ease;
}

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

.skip-link-hidden {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.skip-link:not(.skip-link-hidden) {
    opacity: 1;
}

/* ============================================
   CORE FOCUS INDICATORS
   ============================================ */

/* Remove default outline for mouse users, but keep for keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Strong, visible focus indicators for keyboard navigation only */
*:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: var(--focus-outline-offset, 3px);
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
}

/* ============================================
   INTERACTIVE ELEMENTS
   ============================================ */

/* Buttons */
button:focus-visible,
.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: var(--focus-outline-offset, 3px);
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
    border-radius: 4px;
}

/* Links */
a:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: var(--focus-outline-offset, 3px);
    border-radius: 2px;
    text-decoration: underline;
}

/* Form Inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: var(--focus-outline-offset, 3px);
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
    border-color: var(--focus-color, #0066cc);
}

/* Override any outline: none rules in other stylesheets for keyboard users */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc) !important;
    outline-offset: var(--focus-outline-offset, 3px) !important;
}

/* ============================================
   COMPONENT-SPECIFIC FOCUS INDICATORS
   ============================================ */

/* Tabs */
.admin-tab:focus-visible,
[role="tab"]:focus-visible,
.tab-button:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: var(--focus-outline-offset, 3px);
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
    position: relative;
    z-index: 1;
    border-radius: 4px 4px 0 0;
}

/* Dropdowns and Menus */
.dropdown-item:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: -2px;
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
    background-color: var(--dropdown-hover-bg, rgba(0, 0, 0, 0.05));
}

/* Modal Elements */
.modal:focus-visible,
[role="dialog"]:focus-visible {
    outline: none;
}

.modal *:focus-visible,
[role="dialog"] *:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: var(--focus-outline-offset, 3px);
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
}

/* Cards and Clickable Elements */
.card:focus-visible,
.clickable:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: var(--focus-outline-offset, 3px);
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
    border-radius: 4px;
}

/* Table Elements */
th:focus-visible,
td:focus-visible,
th.sortable:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: -2px;
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
}

/* Search and Filter Inputs */
.search-box input:focus-visible,
.filter-select:focus-visible,
.filter-group input:focus-visible,
.filter-group select:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc) !important;
    outline-offset: var(--focus-outline-offset, 3px) !important;
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3)) !important;
}

/* Navigation Links */
.nav-link:focus-visible,
.navbar-link:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: var(--focus-outline-offset, 3px);
    border-radius: 4px;
}

/* List Items */
li[role="button"]:focus-visible,
li[tabindex]:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: var(--focus-outline-offset, 3px);
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
    border-radius: 4px;
}

/* Tags and Badges */
.tag:focus-visible,
.badge:focus-visible,
.quiz-tag:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: var(--focus-outline-offset, 3px);
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
}

/* Checkboxes and Radio Buttons */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc);
    outline-offset: 2px;
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3));
}

/* ============================================
   SPECIAL CASES
   ============================================ */

/* Elements that should not have focus indicators */
[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Disabled elements */
[disabled]:focus-visible,
button[disabled]:focus-visible,
input[disabled]:focus-visible {
    outline: none;
    box-shadow: none;
}

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

@media (prefers-contrast: high) {
    *:focus-visible {
        outline: var(--focus-outline-width, 4px) solid var(--focus-color, #0000FF) !important;
        outline-offset: var(--focus-outline-offset, 4px) !important;
        box-shadow: var(--focus-shadow, 0 0 0 4px #000000) !important;
    }
    
    .skip-link:focus {
        outline: 3px solid white !important;
        outline-offset: 2px !important;
        border: 2px solid white;
    }
    
    button:focus-visible,
    .btn:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline-width: 4px !important;
        outline-offset: 4px !important;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
    
    * {
        scroll-behavior: auto !important;
    }
    
    *:focus-visible {
        transition: none;
    }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Ensure interactive elements are visible */
button:not([disabled]),
a[href],
input:not([disabled]),
textarea:not([disabled]),
select:not([disabled]),
[tabindex]:not([tabindex="-1"]) {
    cursor: pointer;
}

/* Focus trap indicator (for debugging, can be removed in production) */
.focus-trap-active {
    position: relative;
}

.focus-trap-active::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px dashed var(--focus-color, #0066cc);
    pointer-events: none;
    z-index: -1;
}

/* Enhanced focus for specific keyboard-focused elements */
.keyboard-focused:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc) !important;
    outline-offset: var(--focus-outline-offset, 3px) !important;
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3)) !important;
}

/* ============================================
   THEME-SPECIFIC ADJUSTMENTS
   ============================================ */

/* Dark mode adjustments */
[data-theme="dark"] *:focus-visible {
    outline-color: var(--focus-color, #4da6ff);
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(77, 166, 255, 0.4));
}

/* High contrast mode adjustments */
[data-theme="high-contrast"] *:focus-visible {
    outline-color: var(--focus-color, #0000FF);
    outline-width: 4px;
    outline-offset: 4px;
    box-shadow: var(--focus-shadow, 0 0 0 4px #000000);
}

/* ============================================
   OVERRIDES FOR COMMON PATTERNS
   ============================================ */

/* Override common outline: none patterns that might be in other stylesheets */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.bio-input:focus-visible,
.review-input:focus-visible,
.goal-input:focus-visible,
.due-date-input:focus-visible,
.comment-line:focus-visible,
.trainer-initials-input:focus-visible,
.rubric-input:focus-visible,
.checklist-task-input:focus-visible,
.quiz-tag:focus-visible,
.short-answer-input:focus-visible,
.add-tag-input input:focus-visible,
.pagination-select:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc) !important;
    outline-offset: var(--focus-outline-offset, 3px) !important;
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3)) !important;
}

/* Ensure buttons maintain focus indicators even with custom styles */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-danger:focus-visible,
.btn-success:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-color, #0066cc) !important;
    outline-offset: var(--focus-outline-offset, 3px) !important;
    box-shadow: var(--focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.3)) !important;
}