/**
 * Accessibility: keyboard navigation (Tab) and focus styles
 * - Skip link: first focusable element so keyboard users can jump to main content
 * - Focus-visible: clear focus ring on interactive elements when navigating with Tab
 */

/* Skip link: visually hidden until focused, first in tab order */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--primary-color, #1a365d);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid var(--accent-color, #f97316);
    outline-offset: 2px;
}

/* RTL: skip link on the right (start of line in RTL) */
[dir="rtl"] .skip-link {
    left: auto;
    right: 0;
    border-radius: 0 0 0 4px;
}

/* Ensure focus is visible; use :focus-visible to avoid outline on mouse click */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--accent-color, #f97316);
    outline-offset: 2px;
}

/* Fallback for older browsers that don't support :focus-visible */
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;
}

/* Sidebar nav links: visible focus on dark background */
.sidebar .nav-link:focus-visible,
.sidebar .sidebar-brand:focus-visible,
.sidebar .btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Main content target for skip link: allow programmatic focus, no extra outline */
#main-content:focus {
    outline: none;
}

#main-content:focus-visible {
    outline: 2px dashed var(--accent-color, #f97316);
    outline-offset: 4px;
}

/* Prevent duplicate outline when focus is set by skip-link (script may call .focus()) */
#main-content.skip-target {
    outline: none;
}