/* stylelint-disable declaration-no-important -- Screen-reader helpers, forced-colors, reduced-motion require !important */
/* stylelint-disable bcss-tokens/no-hardcoded-color -- Forced-colors media query and high-contrast values */
/**
 * BCSS Shared UI - Accessibility Critical (WCAG 2.1 AA)
 *
 * PERF-0301-02: Split from accessibility.css for render-path optimization.
 * This file contains critical accessibility rules that must load synchronously:
 * - Screen reader utilities
 * - Focus indicators (WCAG 2.4.7)
 * - Skip-link (WCAG 2.4.1)
 * - Reduced motion (WCAG 2.3.3)
 * - High contrast mode support
 *
 * Companion file: accessibility-components.css (loaded async via data-load-media)
 */

/* ===== Screen Reader Only Content ===== */
.sr-only,
.visually-hidden {
    border-width: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.sr-only-focusable:not(:focus, :focus-within),
.visually-hidden-focusable:not(:focus, :focus-within) {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

/* ===== Focus Indicators (WCAG 2.4.7) ===== */
*:focus {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* ACC-001 P0: Removed *:focus:not(:focus-visible) { outline: none; } to prevent
   removing keyboard focus indicators. Modern browsers support :focus-visible natively.
   Fallback: older browsers show outline on all focus (mouse + keyboard), which is
   accessible even if slightly annoying. Better than risking invisible keyboard focus. */

*:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* ACC-0302b-09: Table responsive containers need visible focus for keyboard scrolling */
.table-responsive:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset, 2px);
}

/* Enhanced focus for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Bootstrap Override: restore focus-visible over Bootstrap's outline:0 (WCAG 2.4.7) */
/* Bootstrap 5.3.3 sets outline:0 on these classes at specificity (0,1,1), */
/* overriding our *:focus-visible at (0,0,1). These class-level selectors win. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.dropdown-toggle:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.navbar-toggler:focus-visible,
.list-group-item:focus-visible,
[data-bs-toggle]:focus-visible {
    box-shadow: var(--shadow-focus) !important;
    outline: var(--focus-outline-width, 3px) solid var(--focus-outline-color) !important;
    outline-offset: var(--focus-outline-offset, 2px) !important;
}

/* Dark backgrounds: white focus outline for visibility */
.sidebar .sidebar-nav-item:focus-visible,
.sidebar .sidebar-nav-group-header:focus-visible,
.sidebar .nav-link:focus-visible,
.top-bar .btn:focus-visible,
.top-bar .dropdown-toggle:focus-visible,
.top-bar a:focus-visible,
.bg-dark a:focus-visible,
.bg-header a:focus-visible,
.bg-header .nav-link:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25) !important;
    outline-color: #fff !important;
}

/* Skip to content link (WCAG 2.4.1) */
.skip-to-content,
.skip-link {
    background: #1a1a2e !important;  /* Fixed: --bg-primary is dark-mode only; hardcode for reliable WCAG AAA contrast (12.6:1) in all modes */
    border-radius: 0 0 var(--border-radius) 0;
    color: var(--white) !important;
    font-weight: var(--font-weight-semibold, 600);
    left: 0;
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    position: absolute;
    text-decoration: none;
    top: -100px;
    z-index: var(--z-skip-nav, 10000);
}

.skip-to-content:focus,
.skip-link:focus {
    background: #1a1a2e !important;  /* Ensure dark background persists on focus */
    outline: 3px solid var(--white);
    outline-offset: -3px;
    top: 0;
}

.skip-to-content:hover,
.skip-link:hover {
    background: #16213e !important;  /* Slightly lighter dark on hover */
    color: var(--white) !important;
}

/* ===== Reduced Motion (WCAG 2.3.3) ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    /* ACC-R06: Suppress hover transforms for icon buttons */
    .btn-group-sm .btn:has(i:only-child):hover,
    .btn.btn-sm:has(> i:only-child):hover,
    .btn-outline-primary:hover .fas,
    .btn-outline-secondary:hover .fas {
        transform: none !important;
    }
}

/* ===== High Contrast Mode Support ===== */
/* ACC-B04: High contrast mode relies on OS-level @media (prefers-contrast: more).
   There is no togglable .high-contrast class. Browsers automatically increase
   contrast when the OS accessibility setting is enabled. */
@media (prefers-contrast: more) {
    /* Increase border thickness */
    *,
    *::before,
    *::after {
        border-width: 2px !important;
    }

    /* Increase outline thickness */
    *:focus-visible {
        outline-width: 4px !important;
    }

    /* Form control focus */
    .form-control:focus-visible,
    .form-select:focus-visible,
    input:focus-visible,
    textarea:focus-visible {
        outline: 4px solid #000 !important;
        outline-offset: 2px !important;
    }

    /* Remove subtle shadows */
    * {
        box-shadow: none !important;
    }

    /* ACC-026: Preserve focus outline in high contrast mode for keyboard navigation visibility */
    /* ACC-R04: Removed redundant box-shadow (already suppressed by * { box-shadow: none } above) */
    /* stylelint-disable-next-line no-duplicate-selectors -- intentional: override with forced-colors safe fallback */
    *:focus-visible {
        outline: 4px solid ButtonText !important; /* ACC-L09: Forced-colors safe fallback */
    }

    /* Ensure all navigation links meet WCAG AAA (7:1) in high contrast */
    .nav-link,
    .navbar .nav-link,
    .breadcrumb-item a {
        color: #000 !important;
        font-weight: 600 !important;
    }

    /* Pagination buttons - ensure visibility */
    .page-link,
    .pagination .page-link {
        background: #fff !important;
        border-color: #000 !important;
        color: #000 !important;
    }

    .page-link:hover,
    .page-link:focus {
        background: #000 !important;
        color: #fff !important;
    }

    .page-item.active .page-link {
        background: #000 !important;
        border-color: #000 !important;
        color: #fff !important;
    }

    /* Carousel controls - ensure visibility */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: #000 !important;
        border: 3px solid #fff !important;
        border-radius: 50%;
    }

    /* Skip link - ensure maximum contrast */
    .skip-link,
    .skip-to-content,
    a.skip-link,
    a.skip-to-content {
        background: #000 !important;
        border: 3px solid #fff !important;
        color: #fff !important;
    }

    /* Footer - ensure visible background */
    footer,
    .footer,
    .public-footer,
    .admin-footer {
        background: #fff !important;
        border-top: 3px solid #000 !important;
    }

    /* Footer text and links - ensure high contrast */
    .footer-brand,
    .footer-tagline,
    .footer-copyright,
    .footer-heading,
    .footer-address,
    footer a,
    .footer a,
    .public-footer a,
    .admin-footer a {
        color: #000 !important;
        font-weight: 600 !important;
    }

    footer a:hover,
    .footer a:hover,
    .public-footer a:hover,
    .admin-footer a:hover {
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
    }
}

/* ===== Focus-Visible Reinforcement (catch-all for uncovered Bootstrap overrides) ===== */
/* Some Bootstrap 5 components reset outline on :focus. These rules ensure all interactive
   elements maintain visible focus indicators for keyboard navigation (WCAG 2.4.7). */
.card:focus-visible,
.badge:focus-visible,
.alert:focus-visible,
.modal-dialog :focus-visible,
.offcanvas :focus-visible,
.toast :focus-visible,
.tab-pane :focus-visible,
input[type="checkbox"]:focus-visible + label,
input[type="radio"]:focus-visible + label,
summary:focus-visible,
details:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[contenteditable]:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-outline-color) !important;
    outline-offset: var(--focus-outline-offset, 2px) !important;
}