/* ── Visible Focus Indicators — Sprint 16 (WCAG 2.1 AA 2.4.7) ── */

/* Baseline: keyboard focus gets a clear, high-contrast outline.
   :focus-visible ensures mouse clicks do NOT show the ring, only keyboard. */

:focus-visible {
    outline: 3px solid var(--brand-primary, #4826fd);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Remove the legacy outline:none on form fields — replace with focus-visible ring */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.share-input:focus-visible {
    outline: 3px solid var(--brand-primary, #4826fd);
    outline-offset: 1px;
}

/* Interactive elements — explicit rules for clarity and specificity */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.ttl-btn:focus-visible,
.view-toggle-btn:focus-visible,
.sidebar-nav li a:focus-visible,
.theme-toggle:focus-visible,
.help-btn:focus-visible,
.mobile-menu-btn:focus-visible {
    outline: 3px solid var(--brand-primary, #4826fd);
    outline-offset: 2px;
}

/* On the dark sidebar, use a lighter ring for contrast against the dark bg */
.sidebar-nav li a:focus-visible,
.sidebar-logout:focus-visible,
.sidebar-toggle:focus-visible {
    outline: 3px solid var(--brand-lavender, #7F67FE);
    outline-offset: 2px;
}

/* Elements on the confirm modal / toast close */
.confirm-ok-btn:focus-visible,
.confirm-cancel-btn:focus-visible,
.toast-close:focus-visible,
.share-modal-close:focus-visible,
.help-drawer-close:focus-visible,
.flash-close:focus-visible {
    outline: 3px solid var(--brand-primary, #4826fd);
    outline-offset: 2px;
}

/* Fallback for browsers without :focus-visible support —
   only applies plain :focus when :focus-visible is unsupported */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus {
        outline: 3px solid var(--brand-primary, #4826fd);
        outline-offset: 2px;
    }
}