/**
 * BCSS Shared UI - Accessibility Helpers (WCAG 2.1 AA)
 *
 * Ensures all admin and app interfaces meet WCAG 2.1 AA standards.
 * Required for healthcare applications handling PHI.
 */

/* ===== 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);
}

/* 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: var(--bg-primary) !important;  /* Dark background for WCAG AAA contrast (12.6:1 with white) */
    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;
    }
}

/* ===== Color Contrast (WCAG 1.4.3) ===== */

/* Ensure all text meets 4.5:1 contrast ratio minimum */
.text-muted {
    color: var(--gray-700) !important; /* Darkened from Bootstrap's #6c757d for better contrast */
}

/* Empty state text - WCAG AA compliant (4.5:1 on white) */
.empty-state-text,
.text-center .text-muted,
.bcss-card .text-muted,
.table .text-muted {
    color: var(--gray-700) !important; /* 8.59:1 contrast on white */
}

.text-secondary {
    color: var(--gray-700) !important;
}

/* ACC-L03: Defensive override — .text-info ALWAYS uses accessible variant.
   Raw --info-color (#0dcaf0, 2.0:1) must never appear on text elements.
   This override ensures all .text-info usage meets WCAG AA 4.5:1. */
.text-info {
    color: var(--info-text-color) !important; /* 4.6:1 on white */
}

/* text-primary: use accessible primary color (5.5:1 on white instead of 3.07:1) */
.text-primary {
    color: var(--primary-color-accessible) !important;
}

/* Link contrast - WCAG AA compliant (5.5:1 on white backgrounds) */
/* Scoped to content areas; excludes nav/sidebar/toolbar links which have their own contrast rules */
main a:not(.btn, .nav-link, .navbar-brand, .sidebar-nav-item, .dropdown-item),
.content-wrapper a:not(.btn, .nav-link, .navbar-brand, .sidebar-nav-item, .dropdown-item),
.admin-content a:not(.btn, .nav-link, .navbar-brand, .sidebar-nav-item, .dropdown-item),
a.text-primary,
a.btn-link {
    color: var(--text-link-accessible, var(--primary-color-accessible)) !important;
}

main a:not(.btn, .nav-link, .navbar-brand, .sidebar-nav-item, .dropdown-item):hover,
.content-wrapper a:not(.btn, .nav-link, .navbar-brand, .sidebar-nav-item, .dropdown-item):hover,
.admin-content a:not(.btn, .nav-link, .navbar-brand, .sidebar-nav-item, .dropdown-item):hover,
a.text-primary:hover,
a.btn-link:hover {
    color: var(--primary-active) !important;
}

/* Bootstrap link colors - ensure WCAG AA on all backgrounds */
a:not(.btn) {
    color: var(--primary-color);  /* Bootstrap primary - 4.52:1 on white */
}

/* ACC-Q01: Links on gray backgrounds need darker color for WCAG AA contrast.
   Scoped to light mode only — in dark mode, #0a58ca on dark backgrounds (e.g. #343434)
   gives only 1.68:1 contrast, failing WCAG AA. Dark mode counterpart below uses #6ea8fe. */
:root:not([data-theme="dark"]) .bg-light a:not(.btn),
:root:not([data-theme="dark"]) .bg-gray-100 a:not(.btn),
:root:not([data-theme="dark"]) .bg-gray-200 a:not(.btn),
:root:not([data-theme="dark"]) .card-header a:not(.btn),
:root:not([data-theme="dark"]) .table-header a:not(.btn),
:root:not([data-theme="dark"]) .bcss-card a:not(.btn),
:root:not([data-theme="dark"]) .sidebar a:not(.btn, .sidebar-nav-item),
:root:not([data-theme="dark"]) .table tbody a:not(.btn) {
    color: #0a58ca !important;  /* 5.8:1+ contrast on all gray backgrounds */
}

/* ACC-Q01: Dark mode counterpart — #6ea8fe gives 4.5:1+ contrast on dark surfaces */
[data-theme="dark"] .bg-light a:not(.btn),
[data-theme="dark"] .bg-gray-100 a:not(.btn),
[data-theme="dark"] .bg-gray-200 a:not(.btn),
[data-theme="dark"] .card-header a:not(.btn),
[data-theme="dark"] .table-header a:not(.btn),
[data-theme="dark"] .bcss-card a:not(.btn),
[data-theme="dark"] .sidebar a:not(.btn, .sidebar-nav-item),
[data-theme="dark"] .table tbody a:not(.btn) {
    color: #6ea8fe !important;  /* 4.5:1+ contrast on dark backgrounds */
}

/* Sidebar navigation items on gray sidebar background (#394855) */
.sidebar a.sidebar-nav-item {
    color: var(--white) !important; /* White text ensures 7:1+ contrast */
}

[data-theme="dark"] a:not(.btn) {
    color: #6ea8fe;  /* Lighter blue for dark backgrounds - 4.5:1+ on #1a1a2e */
}

/* VIS-J04: Removed @media (prefers-color-scheme: dark) block.
 * PERF-023 convention: all dark mode uses [data-theme="dark"] only.
 * The equivalent rule exists above as [data-theme="dark"] a:not(.btn). */

/* Ensure button text has proper contrast (WCAG AA: 4.5:1) */
/* Using !important to override Bootstrap defaults */
.btn-primary {
    background-color: var(--primary-color-accessible) !important;  /* Darkened for WCAG AA (4.5:1 with white) */
    border-color: var(--primary-active) !important;  /* ACC-CT02: Darker border for 3:1 border-vs-background contrast */
    color: var(--white) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-active) !important;
    border-color: var(--primary-active) !important;
    color: var(--white) !important;
}

/* ACC-I05: Dark mode override — use dark-mode.css --btn-primary-bg (#4a7a9a)
   instead of --primary-color-accessible (#c5d7e7) which has 1.48:1 contrast with white */
[data-theme="dark"] .btn-primary {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
}

.btn-secondary {
    background-color: var(--gray-700) !important; /* Darkened for better contrast */
    border-color: var(--gray-700) !important;
    color: var(--white) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--gray-800) !important;
    border-color: var(--gray-800) !important;
    color: var(--white) !important;
}

/* Outline secondary button - darken text for WCAG AA */
.btn-outline-secondary {
    border-color: var(--gray-600) !important;
    color: var(--gray-700) !important;  /* Darker text for 4.5:1 contrast on white */
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--gray-700) !important;
    border-color: var(--gray-700) !important;
    color: var(--white) !important;
}

/* Outline buttons - WCAG AA compliant text colors (4.5:1 on white) */
.btn-outline-primary {
    border-color: var(--primary-color-accessible) !important;
    color: var(--primary-color-accessible) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary-color-accessible) !important;
    border-color: var(--primary-color-accessible) !important;
    color: var(--white) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--primary-active) !important;
    border-color: var(--primary-active) !important;
    color: var(--white) !important;
}

/* Toggle button labels (used in dashboard filters) */
.btn-group-toggle .btn-outline-primary,
.btn-check + .btn-outline-primary {
    color: var(--primary-color-accessible) !important;
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    background-color: var(--primary-color-accessible) !important;
    border-color: var(--primary-color-accessible) !important;
    color: var(--white) !important;
}

/* ===== Keyboard Navigation (WCAG 2.1.1) ===== */

/* Ensure all interactive elements are keyboard accessible */
[role="button"],
[role="link"],
.clickable {
    cursor: pointer;
}

[role="button"]:not(button, a),
.clickable {
    /* Make non-button elements keyboard accessible */
    user-select: none;
}

[role="button"]:not(button, a):focus,
.clickable:focus {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* ACC-FV01: Ensure custom interactive elements have :focus-visible outline (WCAG 2.4.7) */
[role="button"]:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex="0"]:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-outline-color) !important;
    outline-offset: var(--focus-outline-offset, 2px) !important;
}

/* ===== Touch Targets (WCAG 2.5.5) ===== */

/* ACC-L13: Minimum 44x44px touch targets — (any-pointer: coarse) catches hybrid devices */
@media (any-pointer: coarse) {
    button,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"],
    select,
    .btn,
    .form-check-input {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Exception for inline text links */
a:not(.btn, [role="button"], .nav-link, .sidebar-nav-item, .dropdown-item) {
    min-height: auto;
    min-width: auto;
}

/* Navigation links and interactive items need touch target sizing */
.nav-link,
.dropdown-item,
.top-bar button,
.top-bar a,
.top-bar .dropdown-toggle {
    min-height: 44px;
    min-width: 44px;
}

/* Mobile-specific touch target enhancements (WCAG 2.5.5 Target Size) */
/* VIS-004 P1: Standardized to modern range syntax */
@media (width <= 991.98px) {
    .navbar-nav .nav-link,
    .navbar-nav .dropdown-item {
        min-height: 44px;
        padding-bottom: 12px;
        padding-top: 12px;
    }

    /* ACC-I11: Submenu touch target sizing for touch devices */
    .submenu-link {
        min-height: 44px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .form-check-input {
        height: 1.5em !important;
        width: 1.5em !important;
    }

    .form-check-label {
        align-items: center;
        display: inline-flex;
        min-height: 44px;
    }
}

/* ===== ARIA Live Regions ===== */
[aria-live="polite"],
[aria-live="assertive"] {
    position: relative;
}

.alert[role="alert"] {
    /* Ensure alerts are announced to screen readers */
}

/* ===== Landmarks (WCAG 1.3.1) ===== */

/* Visual indicators for landmark regions (development only) */
body.show-landmarks main {
    outline: 3px solid blue;
}

body.show-landmarks nav {
    outline: 3px solid green;
}

body.show-landmarks aside {
    outline: 3px solid orange;
}

body.show-landmarks header {
    outline: 3px solid purple;
}

body.show-landmarks footer {
    outline: 3px solid red;
}

/* ===== Form Accessibility ===== */

/* Associate labels with inputs (WCAG 3.3.2) */
input:not([aria-label], [aria-labelledby]) {
    /* Warn if input has no label in development */
}

/* Required field indicators (WCAG 3.3.2) */
.required[aria-required="true"] label::after,
.required label[for]::after {
    color: var(--danger-color);
    content: " *";
    font-weight: var(--font-weight-bold);
}

/* Error message association (WCAG 3.3.1) */
.form-control.is-invalid[aria-describedby] {
    /* Ensures error messages are associated with inputs */
}

/* ===== Table Accessibility ===== */

/* Ensure tables have proper headers (WCAG 1.3.1) */
table caption {
    caption-side: top;
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-md);
    text-align: left;
}

table th[scope="col"],
table th[scope="row"] {
    /* Proper scope ensures screen readers understand table structure */
}

/* ===== Modal Accessibility (WCAG 2.4.3) ===== */
.modal {
    /* Bootstrap modals already handle focus trapping */
}

.modal-backdrop {
    /* Backdrop is for visual users, ensure modal has proper ARIA attributes */
}

/* ===== Disclosure Widgets (WCAG 4.1.2) ===== */
[aria-expanded="true"] {
    /* Visual indicator for expanded state */
}

[aria-expanded="false"] {
    /* Visual indicator for collapsed state */
}

/* ===== 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 box-shadow in high contrast mode for keyboard navigation visibility */
    *:focus-visible {
        box-shadow: var(--shadow-focus) !important;
        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;
    }
}

/* ===== Dark Background Text Contrast (WCAG 1.4.3) ===== */

/* Light-background navbars: dark text for contrast */
.navbar-light .nav-link {
    color: var(--gray-800) !important;
}

.navbar-light .nav-link:hover,
.navbar-light .nav-link:focus {
    color: var(--gray-900) !important;
}

/* Dark-background public navbar: all text white (7:1+ on #394855) */
/* ACC-CT04: Explicit background-color for contrast checker detection.
   linear-gradient() only sets background-image, leaving backgroundColor transparent.
   This provides a solid fallback that automated contrast analysis tools can measure. */
.bg-header,
.bg-header .navbar {
    background-color: var(--bcss-color-2) !important;
}

.bg-header {
    color: #fff !important;
}

.bg-header .nav-link,
.navbar[class*="bg-dark"] .nav-link {
    color: #fff !important;
}

.bg-header .nav-link:hover,
.bg-header .nav-link:focus,
.navbar[class*="bg-dark"] .nav-link:hover,
.navbar[class*="bg-dark"] .nav-link:focus {
    color: #fff !important;
}

/* Admin top bar: all text white on dark background */
.top-bar,
.top-bar .app-brand,
.top-bar .app-brand span,
.top-bar button:not(.dropdown-item),
.top-bar a:not(.dropdown-item) {
    color: var(--top-bar-text) !important;
}

/* ACC-CT02: Force white on top-bar brand — specificity must beat Bootstrap a{color} */
.top-bar a.app-brand,
.top-bar a.app-brand span,
.top-bar a.app-brand i,
header.top-bar a.app-brand,
header.top-bar .top-bar-left a.app-brand {
    color: var(--top-bar-text) !important;
    text-decoration: none !important;
}

/* Admin sidebar: override Bootstrap .nav-link blue default with white text */
.sidebar .nav-link,
.sidebar .nav-link:link,
.sidebar .nav-link:visited {
    color: var(--sidebar-text) !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
    color: var(--sidebar-text) !important;
}

.sidebar .nav-link.active {
    color: var(--sidebar-text) !important;
}

/* Sidebar brand, text spans, and separators */
.sidebar .brand-link,
.sidebar .brand-text {
    color: var(--sidebar-text) !important;
}

.sidebar .nav-text,
.sidebar .nav-icon,
.sidebar .separator-text,
.sidebar .submenu-arrow,
.sidebar .brand-icon {
    color: inherit !important;
}

/* ACC-CT01: brand-text in top bar uses CSS var so dark mode (#e0e0e0 on #16213e = 13.9:1)
   and light mode (#fff on #394855 = 7.9:1) both meet WCAG AA large-text (3:1+) */
.top-bar .brand-text,
.top-bar .app-brand .brand-text {
    color: var(--top-bar-text) !important;
}

/* Sidebar separator text: brightened for 5:1+ contrast on dark sidebar bg (#394855)
   Base styling defined in sidebar.css via --sidebar-text-muted variable */
.sidebar .separator-text {
    color: #b0bfcc !important;
}

/* ACC-CT03: Ensure card-header has opaque background for contrast computation.
   Bootstrap's .card-header uses rgba(33,37,41,0.03) — contrast checkers parse RGB
   ignoring alpha, computing dark-on-dark ratio ~1:1. Opaque fallback fixes this.
   ACC-Q06: Uses --card-header-bg so dark-mode.css can override without --white leaking. */
.card-header {
    background-color: var(--card-header-bg, var(--white)) !important;
}

/* ===== Bootstrap Contextual Background Cards (WCAG 1.4.3) ===== */

/* Cards with dark backgrounds must have white text */
.card.bg-primary,
.card.bg-primary h1, .card.bg-primary h2, .card.bg-primary h3,
.card.bg-primary h4, .card.bg-primary h5, .card.bg-primary h6,
.card.bg-primary small, .card.bg-primary p, .card.bg-primary span,
.card.bg-success,
.card.bg-success h1, .card.bg-success h2, .card.bg-success h3,
.card.bg-success h4, .card.bg-success h5, .card.bg-success h6,
.card.bg-success small, .card.bg-success p, .card.bg-success span {
    color: #fff !important;
}

/* bg-info: darken background for white text contrast (4.5:1+) — light mode only */
:root:not([data-theme="dark"]) .card.bg-info {
    background-color: #0a7c94 !important;
}

:root:not([data-theme="dark"]) .card.bg-info,
:root:not([data-theme="dark"]) .card.bg-info h1, :root:not([data-theme="dark"]) .card.bg-info h2, :root:not([data-theme="dark"]) .card.bg-info h3,
:root:not([data-theme="dark"]) .card.bg-info h4, :root:not([data-theme="dark"]) .card.bg-info h5, :root:not([data-theme="dark"]) .card.bg-info h6,
:root:not([data-theme="dark"]) .card.bg-info small, :root:not([data-theme="dark"]) .card.bg-info p, :root:not([data-theme="dark"]) .card.bg-info span {
    color: #fff !important;
}

/* bg-warning: use dark text for contrast on yellow background (WCAG AA 4.5:1) — light mode only */
:root:not([data-theme="dark"]) .card.bg-warning,
:root:not([data-theme="dark"]) .card.bg-warning h1, :root:not([data-theme="dark"]) .card.bg-warning h2, :root:not([data-theme="dark"]) .card.bg-warning h3,
:root:not([data-theme="dark"]) .card.bg-warning h4, :root:not([data-theme="dark"]) .card.bg-warning h5, :root:not([data-theme="dark"]) .card.bg-warning h6,
:root:not([data-theme="dark"]) .card.bg-warning small, :root:not([data-theme="dark"]) .card.bg-warning p, :root:not([data-theme="dark"]) .card.bg-warning span {
    color: #212529 !important;
}

/* badge-warning: use dark text on yellow background (WCAG AA compliance) — light mode only */
:root:not([data-theme="dark"]) .badge-warning,
:root:not([data-theme="dark"]) .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* alert-warning: dark text in light mode, let dark-mode.css handle dark theme */
:root:not([data-theme="dark"]) .alert-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* ===== Badge Contrast (WCAG 1.4.3 AA / 1.4.6 AAA) ===== */

/* Info badge: darken background for white text (7:1 AAA contrast) — light mode only */
/* ACC-CT03: .badge-info (Bootstrap 4 syntax) added for legacy markup compatibility */
:root:not([data-theme="dark"]) .badge.bg-info,
:root:not([data-theme="dark"]) .badge-info,
:root:not([data-theme="dark"]) .badge.bg-info.coming-soon-badge,
:root:not([data-theme="dark"]) .coming-soon-badge {
    background-color: #0a7c94 !important;
    color: #fff !important;
}

/* Success badge: ensure AAA contrast (7:1+) — light mode only */
:root:not([data-theme="dark"]) .badge-success,
:root:not([data-theme="dark"]) .badge.bg-success {
    background-color: #0d6832 !important; /* 7.4:1 contrast */
    color: #fff !important;
}

/* Danger badge: ensure AAA contrast (7:1+) — light mode only */
:root:not([data-theme="dark"]) .badge-danger,
:root:not([data-theme="dark"]) .badge.bg-danger {
    background-color: #a71d2a !important; /* 7.2:1 contrast */
    color: #fff !important;
}

/* ===== Button Contrast (WCAG 1.4.3) ===== */

.btn-outline-primary {
    border-color: var(--primary-color-accessible) !important;
    color: var(--primary-color-accessible) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary-color-accessible) !important;
    border-color: var(--primary-color-accessible) !important;
    color: #fff !important;
}

/* Outline info button: darken for contrast — light mode only */
:root:not([data-theme="dark"]) .btn-outline-info {
    border-color: #0a7c94 !important;
    color: #0a7c94 !important;
}

:root:not([data-theme="dark"]) .btn-outline-info:hover,
:root:not([data-theme="dark"]) .btn-outline-info:focus {
    background-color: #0a7c94 !important;
    border-color: #0a7c94 !important;
    color: #fff !important;
}

/* ACC-CTA01: Dark mode CTA — override global heading color rules (WCAG 1.4.3) */
[data-theme="dark"] .cta-section,
[data-theme="dark"] .cta-section h2,
[data-theme="dark"] .cta-section p {
    color: #ffffff !important;
}

/* Outline warning button: darken text for contrast on white */
.btn-outline-warning {
    border-color: var(--warning-text-color) !important;
    color: var(--warning-text-color) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: var(--warning-text-color) !important;
    border-color: var(--warning-text-color) !important;
    color: #fff !important;
}

/* Disabled buttons: still need minimum contrast for readability */
/* A11Y-042 P2: Enhanced visual distinction for disabled state */
/* ACC-005 P0: Increased opacity from 0.7 to 0.85 for better contrast (WCAG 1.4.3) */
.btn:disabled,
.btn.disabled {
    background-color: var(--gray-200) !important;
    border-color: var(--gray-400) !important;
    color: var(--gray-700) !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
}

/* Form input border contrast (WCAG 1.4.11 Non-text Contrast 3:1) */
/* Bootstrap default #ced4da = 1.7:1 on white; #6c757d = 3.9:1 */
.form-control,
.form-select,
.form-check-input {
    border-color: var(--gray-600) !important;
}

/* Disabled form inputs need darker border for contrast on gray backgrounds */
.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled {
    border-color: var(--input-border-disabled, var(--gray-700)) !important;
}

/* Placeholder text contrast (WCAG 1.4.3 Minimum Contrast) */
::placeholder {
    color: var(--gray-600) !important;
    opacity: 1 !important;
}

/* Icon-only button hover states */
.btn-group-sm .btn:has(i:only-child),
.btn.btn-sm:has(> i:only-child),
.btn:has(> .fas:only-child),
.btn:has(> .far:only-child) {
    transition: background-color var(--transition-fast),
                transform var(--transition-fast);
}

.btn-group-sm .btn:has(i:only-child):hover,
.btn.btn-sm:has(> i:only-child):hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* Fallback for browsers without :has() support */
.btn-outline-primary:hover .fas,
.btn-outline-secondary:hover .fas {
    transform: scale(1.1);
    transition: transform var(--transition-fast);
}

/* ===== Focus Visible for Admin Navigation (WCAG 2.4.7) ===== */

.sidebar-nav-item:focus-visible,
.top-bar .dropdown-toggle:focus-visible,
.sidebar-toggle:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset, 2px);
}

/* On dark backgrounds, use white outline for visibility */
.top-bar .dropdown-toggle:focus-visible,
.top-bar button:focus-visible,
.sidebar-toggle:focus-visible {
    outline-color: #fff;
}

/* ===== Touch Device Accessibility (WCAG 2.5.5) ===== */
@media (hover: none) {
    .btn:hover {
        box-shadow: inherit;
        transform: none;
    }

    .card:hover {
        box-shadow: inherit;
        transform: none;
    }

    .nav-link:hover {
        background-color: inherit;
        transform: none;
    }

    .dropdown-item:hover {
        background-color: inherit;
    }

    .sidebar-nav-item:hover {
        background-color: inherit;
        transform: none;
    }

    .table-hover tbody tr:hover {
        background-color: inherit;
    }

    .carousel-indicators [data-bs-target] {
        height: 16px;
        width: 16px;
    }
}

/* ===== Carousel Accessibility (WCAG 1.4.3) ===== */

/* Carousel controls must have sufficient contrast */
.carousel-control-prev,
.carousel-control-next {
    opacity: 1 !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 50%;
    height: 3rem;
    padding: 2rem;
    width: 3rem;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.95) !important;
    border-color: rgba(255, 255, 255, 1) !important;
}

/* Carousel control text (if present) */
.carousel-control-prev span:not(.carousel-control-prev-icon),
.carousel-control-next span:not(.carousel-control-next-icon) {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    color: #000 !important;
    font-weight: 600;
    padding: 0.5rem 1rem;
}

/* ===== Print Accessibility ===== */
/* DES-H28-30 P3: Print styles use hardcoded colors intentionally for cross-browser consistency */
@media print {
    /* Ensure focus indicators don't show in print */
    *:focus,
    *:focus-visible {
        box-shadow: none !important;
        outline: none !important;
    }

    /* Show link URLs */
    a[href]::after {
        color: #666;
        content: " (" attr(href) ")";
        font-size: 90%;
    }

    /* Don't show URLs for anchors or javascript: links */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    /* ACC-I23: Exclude navigation/card links from URL printing (too noisy) */
    nav a[href]::after,
    .sidebar a[href]::after,
    .card a[href]::after,
    .navbar a[href]::after {
        content: "";
    }
}

/* ===== Announcement Region for Dynamic Content ===== */
#announcement-region {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

/* ===== Custom Accessible Components ===== */

/* Accessible tooltip */
.tooltip-accessible {
    display: inline-block;
    position: relative;
}

.tooltip-accessible[aria-describedby] {
    cursor: help;
}

/* Accessible disclosure triangle */
.disclosure-triangle {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid currentcolor;
    display: inline-block;
    height: 0;
    margin-right: var(--spacing-sm);
    transition: transform var(--transition-fast);
    width: 0;
}

[aria-expanded="false"] .disclosure-triangle {
    transform: rotate(-90deg);
}

[aria-expanded="true"] .disclosure-triangle {
    transform: rotate(0deg);
}

/* ===== Accessible Loading States ===== */
/* VIS-H13 P2: Added position: relative for spinner pseudo-element positioning */
.loading[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading[aria-busy="true"]::after {
    animation: spinner 0.8s linear infinite;
    border: 3px solid var(--gray-300);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    content: "";
    height: 2rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
}

@keyframes spinner {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading[aria-busy="true"]::after {
        animation: none;
    }
}

/* ===== Status Messages (WCAG 4.1.3) ===== */
.status-message {
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
}

.status-message[role="status"] {
    /* Polite announcement to screen readers */
}

.status-message[role="alert"] {
    /* Immediate announcement to screen readers */
}

/* ===== Error Summary (WCAG 3.3.1) ===== */
.error-summary {
    background-color: var(--danger-light);
    border: 2px solid var(--danger-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
}

.error-summary[role="alert"] {
    /* Ensures errors are announced */
}

.error-summary h2,
.error-summary h3 {
    color: var(--danger-color);
    margin-bottom: var(--spacing-sm);
}

.error-summary ul {
    margin: 0;
    padding-left: var(--spacing-lg);
}

.error-summary a {
    color: var(--danger-color);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}

.error-summary a:hover,
.error-summary a:focus {
    color: var(--danger-hover);
}

/* ===== Touch Target Sizing (WCAG 2.5.5 - 44x44px minimum) - VIS P2 ===== */
/* Global enforcement for mobile interactive elements */
@media (width <= 767.98px) {
    /* Footer links touch targets */
    .footer-links a,
    .public-footer .footer-links a,
    .admin-footer a {
        display: inline-block;
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* ACC-Q04: Footer link touch target spacing — prevent 0px gap between adjacent items */
    .footer-links li + li {
        margin-top: var(--spacing-xs, 4px);
    }

    /* Small buttons upgrade to minimum size */
    .btn-sm {
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Icon-only buttons */
    .btn-icon,
    .header-action-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ACC-TT01: Login form touch targets minimum 44px (WCAG 2.5.5) */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card .btn,
.auth-card .btn-google {
    min-height: 44px;
}

/* ACC-TT02: Ensure inline links in card/table content meet touch target on touch devices */
@media (pointer: coarse) {
    .card-body a:not(.btn),
    td a:not(.btn) {
        display: inline-block;
        min-height: 44px;
        padding-block: 0.5rem;
    }
}

/* ===== Link Underlines for Better Accessibility (A11Y P2) ===== */
/* Ensure links are distinguishable from regular text */
main a:not(.btn, .nav-link, .dropdown-item) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

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

/* ===== Cookie Consent Banner Link ===== */
/* ACC-CC01: Cookie consent banner uses bg-dark (#212529).
 * Our --bs-info override (#0a7c94) is optimised for white backgrounds (4.6:1)
 * but only achieves 3.18:1 on dark — fails WCAG AA.
 * #7dd3e0 gives 7.7:1 on #212529 and 1.5:1 on white (decorative use only on white).
 * Uses a.cookie-consent-link (specificity 0,1,1) to beat a:not(.btn) (also 0,1,1)
 * by cascade order — this rule appears later in the file and wins. */
a.cookie-consent-link {
    color: #7dd3e0; /* 7.7:1 contrast on bg-dark (#212529) — WCAG AA */
    text-decoration: underline;
}

a.cookie-consent-link:hover,
a.cookie-consent-link:focus {
    color: #a8e6ef;
    text-decoration: underline;
}

/* Card links exception - maintain clean design */
.card a:not(.btn),
.service-card a:not(.btn) {
    text-decoration: none;
}

.card a:not(.btn):hover,
.service-card a:not(.btn):hover {
    text-decoration: underline;
}