/**
 * AODA Accessibility Styles
 *
 * This stylesheet provides accessibility enhancements to meet WCAG 2.0 Level AA
 * compliance requirements under the Accessibility for Ontarians with Disabilities Act.
 *
 * @package Common Credentialing
 * @author AODA Compliance Initiative
 */

/* ==========================================================================
   Skip Navigation Links
   ========================================================================== */

/**
 * Screen reader only class - hides content visually but keeps it accessible
 * to screen readers and other assistive technologies
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/**
 * Skip link - visible when focused via keyboard navigation
 * Allows keyboard users to quickly jump to main content
 */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

a.sr-only-focusable {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

a.sr-only-focusable:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 10px 15px;
    background: #0056b3;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    z-index: 100000;
    border-radius: 0 0 4px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Enhanced Focus Indicators
   ========================================================================== */

/**
 * Ensure all interactive elements have visible focus indicators
 * for keyboard navigation
 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
}

/* ==========================================================================
   Radio and Checkbox Focus Indicators
   Enhanced visibility for radio buttons and checkboxes
   ========================================================================== */

/**
 * Radio and checkbox inputs need extra visible focus indicators
 * because the default focus ring can be hard to see
 */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: 3px solid #0056b3;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.3);
}

/* Style the label when input is focused (for adjacent labels) */
input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
    color: #0056b3;
    font-weight: 600;
}

/* Focus-visible support for modern browsers */
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: 3px solid #0056b3;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.3);
}

/* Custom checkbox/radio styling for Bootstrap-style inputs */
.checkbox input[type="checkbox"]:focus,
.radio input[type="radio"]:focus {
    outline: 3px solid #0056b3;
    outline-offset: 3px;
}

/* Focus indicator for checkbox/radio within labels */
.checkbox label:focus-within,
.radio label:focus-within {
    outline: 2px dashed #0056b3;
    outline-offset: 4px;
    background-color: #e8f4f8;
}

/* ==========================================================================
   Radio and Checkbox List Layout
   Replaces table-based layout with semantic HTML
   ========================================================================== */

.radio-list,
.checkbox-list {
    margin: 0;
    padding: 0;
}

.radio-list .radio,
.checkbox-list .checkbox {
    margin-bottom: 8px;
}

.radio-list .radio label,
.checkbox-list .checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    padding: 4px 0;
}

.radio-list .radio input[type="radio"],
.checkbox-list .checkbox input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 4px;
}

.radio-label-text,
.checkbox-label-text {
    flex: 1;
}

/* Navigation focus styles */
.entrada-navbar a:focus {
    background-color: #e8f4f8;
    outline: 3px solid #0056b3;
    outline-offset: -3px;
}

/* Sidebar toggle button */
.sidebar-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-toggle:hover {
    opacity: 0.8;
}

.sidebar-toggle:focus {
    outline: 3px solid #0056b3;
    background-color: #f0f0f0;
}

/* Toggle icon (expand/collapse indicator) */
.sidebar-toggle .toggle-icon::before {
    content: "\25BC"; /* Down arrow */
    font-size: 0.8em;
    transition: transform 0.3s ease;
    display: inline-block;
}

.panel.collapsed .sidebar-toggle .toggle-icon::before {
    transform: rotate(-90deg); /* Right arrow when collapsed */
}

/* Hide collapsed panel content */
.panel.collapsed .panel-body {
    display: none;
}

/* Breadcrumb focus */
.breadcrumb a:focus,
nav[aria-label="Breadcrumb"] a:focus {
    outline: 3px solid #0056b3;
    text-decoration: underline;
}

/* Button focus styles */
.btn:focus,
button.btn:focus {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
}

/* Form element focus */
.form-control:focus {
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25);
}

/* Link focus within content */
#main-content a:focus {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
}

/* ==========================================================================
   ARIA Live Regions
   ========================================================================== */

/**
 * Ensure live regions are not disruptive visually
 */
[aria-live="polite"],
[aria-live="assertive"] {
    /* Content will be styled normally but announced by screen readers */
}

/* ==========================================================================
   Screen Reader Only Text
   ========================================================================== */

/**
 * Additional context for screen readers that isn't needed visually
 */
.sr-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================================================
   High Contrast Support
   ========================================================================== */

/**
 * Ensure borders and outlines are visible in Windows High Contrast Mode
 */
@media screen and (-ms-high-contrast: active) {
    a.sr-only-focusable:focus {
        border: 2px solid;
    }

    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid;
    }
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

/**
 * Respect user's preference for reduced motion
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Error Messages and Validation
   ========================================================================== */

/**
 * Ensure error messages are clearly visible and associated with form fields
 */
.error-message,
[role="alert"].error {
    color: #d32f2f;
    font-weight: bold;
    margin-top: 5px;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #d32f2f;
    border-width: 2px;
}

/* ==========================================================================
   Required Fields
   ========================================================================== */

/**
 * Visual indicator for required fields
 */
.required-indicator,
[aria-required="true"]::after {
    /* Note: asterisk should be in markup, not CSS content */
}

/* ==========================================================================
   Loading States
   ========================================================================== */

/**
 * Loading indicators with proper ARIA announcements
 */
[aria-busy="true"] {
    opacity: 0.6;
    cursor: wait;
}

.loading-spinner[role="status"] {
    /* Spinner will have sr-only text describing loading state */
}

/* ==========================================================================
   Navbar Dropdown Contrast Improvements
   WCAG AA requires 4.5:1 contrast ratio for normal text
   ========================================================================== */

/**
 * Improve dropdown menu contrast for better readability
 */
.dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #333333;
}

.dropdown-menu > li > a {
    color: #1a1a1a; /* Darker text for better contrast on white background */
    padding: 8px 20px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: #0056b3; /* High contrast blue background */
}

.dropdown-menu > li.active > a,
.dropdown-menu > li.active > a:hover,
.dropdown-menu > li.active > a:focus {
    color: #ffffff;
    background-color: #003d82; /* Darker blue for active state */
}

/* Navbar dropdown toggle */
.navbar .dropdown-toggle {
    color: #1a1a1a;
}

.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle:focus {
    color: #000000;
    background-color: #e8e8e8;
}

/* Entrada navbar specific styles */
.entrada-navbar .dropdown-menu > li > a {
    color: #1a1a1a;
}

.entrada-navbar .dropdown-menu > li > a:hover,
.entrada-navbar .dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: #0056b3;
    outline: none;
}

/* Focus indicator for dropdown items */
.dropdown-menu > li > a:focus {
    outline: 3px solid #0056b3;
    outline-offset: -3px;
}

/* Ensure dividers are visible */
.dropdown-menu .divider {
    background-color: #666666;
}

/* Permission masks and similar dropdowns */
.permission-mask-dropdown .dropdown-menu > li > a,
.navbar-right .dropdown-menu > li > a {
    color: #1a1a1a;
    background-color: #ffffff;
}

.permission-mask-dropdown .dropdown-menu > li > a:hover,
.permission-mask-dropdown .dropdown-menu > li > a:focus,
.navbar-right .dropdown-menu > li > a:hover,
.navbar-right .dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: #0056b3;
}

/* ==========================================================================
   Accessible Tables
   ========================================================================== */

/**
 * Table captions for screen readers
 * Provides context about the table's purpose
 */
table caption {
    font-size: 1.1em;
    font-weight: 600;
    padding: 10px 0;
    text-align: left;
    color: #333333;
}

table caption.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/**
 * Table header styles
 */
table thead th {
    background-color: #f5f5f5;
    border-bottom: 2px solid #ddd;
    font-weight: bold;
    padding: 8px;
    text-align: left;
}

table thead th[scope="col"] {
    vertical-align: bottom;
}

/**
 * Sortable column headers
 */
table thead th[aria-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px;
}

table thead th[aria-sort]:hover,
table thead th[aria-sort]:focus {
    background-color: #e8e8e8;
    outline: 2px solid #0056b3;
    outline-offset: -2px;
}

/* Sort indicators for non-DataTable tables only.
   DataTables provides its own visual sort indicators via background images,
   so we only add ::after arrows to tables that use aria-sort without DataTables. */
table:not(.dataTable) thead th[aria-sort="ascending"]::after {
    content: " \25B2";
    font-size: 0.75em;
    color: #0056b3;
}

table:not(.dataTable) thead th[aria-sort="descending"]::after {
    content: " \25BC";
    font-size: 0.75em;
    color: #0056b3;
}

table:not(.dataTable) thead th[aria-sort="none"]::after {
    content: " \25B4\25BE";
    font-size: 0.65em;
    color: #999999;
    letter-spacing: -0.2em;
}

/**
 * Row headers
 */
table tbody th[scope="row"] {
    font-weight: 600;
    background-color: #f9f9f9;
    text-align: left;
}

/**
 * Table cells
 */
table td,
table th {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}

/**
 * Empty cell indicator
 */
table td:empty::before {
    content: "\2014";
    color: #999;
}

/**
 * Action buttons in tables
 */
table .btn-group,
table .action-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}

table .btn-group .btn,
table .action-buttons .btn {
    padding: 4px 8px;
    font-size: 0.9em;
}

/**
 * Focus styles for table elements
 */
table a:focus,
table button:focus,
table .btn:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

table tbody tr:focus-within {
    background-color: #f0f7ff;
}

/**
 * DataTables specific accessibility styles
 */
.dataTables_wrapper {
    margin-bottom: 20px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25);
    outline: none;
}

.dataTables_wrapper .dataTables_info {
    padding: 10px 0;
    color: #666666;
}

.dataTables_wrapper .dataTables_paginate {
    padding: 10px 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px;
    margin: 0 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #ffffff;
    color: #333333;
    text-decoration: none;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    background-color: #e8e8e8;
    border-color: #0056b3;
    outline: 2px solid #0056b3;
    outline-offset: -2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff;
    font-weight: bold;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #999999;
    cursor: not-allowed;
    opacity: 0.6;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:focus {
    background-color: #ffffff;
    border-color: #ddd;
    outline: none;
}

/**
 * DataTable sorting headers
 */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 18px;
}

table.dataTable thead th.sorting:focus,
table.dataTable thead th.sorting_asc:focus,
table.dataTable thead th.sorting_desc:focus {
    outline: 2px solid #0056b3;
    outline-offset: -2px;
    background-color: #e8e8e8;
}

/**
 * Processing indicator
 */
.dataTables_wrapper .dataTables_processing {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    font-weight: bold;
}

/* ==========================================================================
   Color Contrast Fixes for WCAG 2.0 Level AA Compliance
   Minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text
   ========================================================================== */

/**
 * Fix low contrast gray text (#666, #999) - ensure minimum 4.5:1 ratio
 * #666 on white = 5.74:1 (passes)
 * #999 on white = 2.85:1 (fails) -> changed to #595959 = 7.0:1
 * #767676 is the lightest gray that passes WCAG AA on white (4.54:1)
 */

/* Override light gray text that fails contrast */
.text-muted,
.help-block,
.form-control-static,
small,
.small {
    color: #595959 !important; /* 7.0:1 contrast ratio on white */
}

/* Ensure button text inherits proper color - the .small override above
   breaks contrast on colored buttons (e.g. btn-primary white text on blue) */
.btn small,
.btn .small {
    color: inherit !important;
}

/* Placeholder text contrast fix */
::-webkit-input-placeholder {
    color: #767676; /* Minimum passing contrast */
}
::-moz-placeholder {
    color: #767676;
    opacity: 1;
}
:-ms-input-placeholder {
    color: #767676;
}
::placeholder {
    color: #767676;
}

/* Form hint/help text */
.form-hint,
.hint,
.help-inline {
    color: #595959;
}

/* Disabled state - ensure readable even when disabled */
.form-control:disabled,
.form-control[disabled],
.form-control[readonly],
.btn.disabled,
.btn:disabled {
    color: #595959;
    opacity: 0.8;
}

/**
 * Link contrast improvements
 */
a {
    color: #0056b3; /* 7.21:1 contrast ratio on white */
}

a:hover,
a:focus {
    color: #003d82; /* Darker on hover/focus for better visibility */
}

/* Visited links */
a:visited {
    color: #6B2D5B; /* 7.79:1 contrast ratio, purple for visited */
}

/**
 * Button contrast improvements
 */

/* Default/secondary button */
.btn-default,
.btn-default:visited,
a.btn-default,
a.btn-default:visited,
a.btn-default:link,
button.btn-default,
input.btn-default {
    color: #333333 !important;
    background-color: #ffffff !important;
    border-color: #333333 !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
a.btn-default:hover,
a.btn-default:focus,
a.btn-default:active {
    color: #ffffff !important;
    background-color: #333333 !important;
    border-color: #333333 !important;
}

/* Primary button - ensure text is readable */
.btn-primary,
.btn-primary:visited,
a.btn-primary,
a.btn-primary:visited,
a.btn-primary:link,
button.btn-primary,
input.btn-primary {
    color: #ffffff !important;
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
    color: #ffffff !important;
    background-color: #003d82 !important;
    border-color: #003d82 !important;
}

/* Success button */
.btn-success,
.btn-success:visited,
a.btn-success,
a.btn-success:visited,
a.btn-success:link,
button.btn-success,
input.btn-success {
    color: #ffffff !important;
    background-color: #2e7d32 !important; /* Darker green, 4.5:1+ contrast */
    border-color: #2e7d32 !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
a.btn-success:hover,
a.btn-success:focus,
a.btn-success:active {
    color: #ffffff !important;
    background-color: #1b5e20 !important;
    border-color: #1b5e20 !important;
}

/* Warning button - text must be dark for light backgrounds */
.btn-warning,
.btn-warning:visited,
a.btn-warning,
a.btn-warning:visited,
a.btn-warning:link,
button.btn-warning,
input.btn-warning {
    color: #1a1a1a !important;
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
a.btn-warning:hover,
a.btn-warning:focus,
a.btn-warning:active {
    color: #1a1a1a !important;
    background-color: #e0a800 !important;
    border-color: #d39e00 !important;
}

/* Danger button */
.btn-danger,
.btn-danger:visited,
a.btn-danger,
a.btn-danger:visited,
a.btn-danger:link,
button.btn-danger,
input.btn-danger {
    color: #ffffff !important;
    background-color: #c62828 !important; /* 5.25:1 contrast ratio */
    border-color: #c62828 !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
a.btn-danger:hover,
a.btn-danger:focus,
a.btn-danger:active {
    color: #ffffff !important;
    background-color: #8e0000 !important;
    border-color: #8e0000 !important;
}

/* Info button */
.btn-info,
.btn-info:visited,
a.btn-info,
a.btn-info:visited,
a.btn-info:link,
button.btn-info,
input.btn-info {
    color: #ffffff !important;
    background-color: #0277bd !important; /* Darker cyan, better contrast */
    border-color: #0277bd !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
a.btn-info:hover,
a.btn-info:focus,
a.btn-info:active {
    color: #ffffff !important;
    background-color: #01579b !important;
    border-color: #01579b !important;
}

/**
 * Alert/notification contrast improvements
 */

/* Success alert */
.alert-success {
    color: #1e4620; /* 7.1:1 contrast on #d4edda */
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* Warning alert */
.alert-warning {
    color: #664d03; /* 7.4:1 contrast on #fff3cd */
    background-color: #fff3cd;
    border-color: #ffeaa8;
}

/* Danger/error alert */
.alert-danger {
    color: #721c24; /* 6.6:1 contrast on #f8d7da */
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Info alert */
.alert-info {
    color: #0c5460; /* 7.8:1 contrast on #d1ecf1 */
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/**
 * Table contrast improvements
 */
table tbody tr.odd,
table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

table tbody tr.even,
table tbody tr:nth-child(even) {
    background-color: #f8f9fa; /* Light gray that maintains text contrast */
}

/* Table header text */
table thead th {
    color: #1a1a1a; /* Very dark for headers */
}

/* Selected/highlighted rows */
table tbody tr.selected,
table tbody tr.highlight {
    background-color: #cce5ff; /* Light blue highlight */
    color: #004085;
}

table tbody tr.selected td,
table tbody tr.highlight td {
    color: #004085;
}

/**
 * Badge/label contrast improvements
 * Must override Bootstrap's default label colors for WCAG compliance
 */
.badge,
.label {
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* Ensure all child elements (spans, icons) inherit the label text color */
.label *,
.label span,
.label .glyphicon,
.badge *,
.badge span {
    color: inherit !important;
}

/* Button elements styled as labels - reset button defaults */
button.label {
    border: none;
    cursor: pointer;
    font-size: 75%;
    line-height: 1;
    vertical-align: baseline;
    padding: .2em .6em .3em;
    background-image: none;
    display: inline-block;
}

button.label:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

.badge-default,
.label-default,
.label.label-default,
a.label-default,
a.label-default:link,
a.label-default:visited,
a.label-default:hover,
a.label-default:focus,
a.label-default:active,
.label-default[href],
.label-default[href]:hover,
.label-default[href]:focus,
a.label.label-default,
a.label.label-default:link,
a.label.label-default:visited,
a.label.label-default:hover,
a.label.label-default:focus,
a.label.label-default:active,
a.my-popover.label.label-default,
a.my-popover.label.label-default:visited {
    background-color: #595959 !important;
    color: #ffffff !important;
}

.badge-primary,
.label-primary,
.label.label-primary,
a.label-primary,
a.label-primary:link,
a.label-primary:visited,
a.label-primary:hover,
a.label-primary:focus,
a.label-primary:active,
.label-primary[href],
.label-primary[href]:hover,
.label-primary[href]:focus,
a.label.label-primary,
a.label.label-primary:link,
a.label.label-primary:visited,
a.label.label-primary:hover,
a.label.label-primary:focus,
a.label.label-primary:active,
a.my-popover.label.label-primary,
a.my-popover.label.label-primary:visited,
button.label-primary,
button.label-primary:hover,
button.label-primary:focus,
button.label-primary:active,
button.label.label-primary,
button.my-popover.label.label-primary {
    background-color: #0056b3 !important;
    color: #ffffff !important;
}

.badge-success,
.label-success,
.label.label-success,
a.label-success,
a.label-success:link,
a.label-success:visited,
a.label-success:hover,
a.label-success:focus,
a.label-success:active,
.label-success[href],
.label-success[href]:hover,
.label-success[href]:focus,
a.label.label-success,
a.label.label-success:link,
a.label.label-success:visited,
a.label.label-success:hover,
a.label.label-success:focus,
a.label.label-success:active,
a.my-popover.label.label-success,
a.my-popover.label.label-success:visited {
    background-color: #2e7d32 !important;
    color: #ffffff !important;
}

.badge-warning,
.label-warning,
.label.label-warning,
a.label-warning,
a.label-warning:link,
a.label-warning:visited,
a.label-warning:hover,
a.label-warning:focus,
a.label-warning:active,
.label-warning[href],
.label-warning[href]:hover,
.label-warning[href]:focus,
a.label.label-warning,
a.label.label-warning:link,
a.label.label-warning:visited,
a.label.label-warning:hover,
a.label.label-warning:focus,
a.label.label-warning:active,
a.my-popover.label.label-warning,
a.my-popover.label.label-warning:visited {
    background-color: #ffc107 !important;
    color: #1a1a1a !important;
}

.badge-danger,
.label-danger,
.label.label-danger,
div.label.label-danger,
a.label-danger,
a.label-danger:link,
a.label-danger:visited,
a.label-danger:hover,
a.label-danger:focus,
a.label-danger:active,
.label-danger[href],
.label-danger[href]:hover,
.label-danger[href]:focus,
a.label.label-danger,
a.label.label-danger:link,
a.label.label-danger:visited,
a.label.label-danger:hover,
a.label.label-danger:focus,
a.label.label-danger:active,
a.my-popover.label.label-danger,
a.my-popover.label.label-danger:visited {
    background-color: #c62828 !important;
    color: #ffffff !important;
}

.badge-info,
.label-info,
.label.label-info,
a.label-info,
a.label-info:link,
a.label-info:visited,
a.label-info:hover,
a.label-info:focus,
a.label-info:active,
.label-info[href],
.label-info[href]:hover,
.label-info[href]:focus,
a.label.label-info,
a.label.label-info:link,
a.label.label-info:visited,
a.label.label-info:hover,
a.label.label-info:focus,
a.label.label-info:active,
a.my-popover.label.label-info,
a.my-popover.label.label-info:visited {
    background-color: #0277bd !important;
    color: #ffffff !important;
}

/**
 * Navigation contrast
 */
.nav-tabs > li > a {
    color: #1a1a1a;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #1a1a1a;
    background-color: #ffffff;
    border-bottom-color: transparent;
}

.nav-pills > li > a {
    color: #0056b3;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #ffffff;
    background-color: #0056b3;
}

/**
 * Breadcrumb contrast
 */
.breadcrumb {
    background-color: #f5f5f5;
}

.breadcrumb > li + li::before {
    color: #595959;
}

.breadcrumb > .active {
    color: #1a1a1a;
    font-weight: 600;
}

/**
 * Panel/card contrast
 */
.panel-heading {
    color: #1a1a1a;
}

.panel-default > .panel-heading {
    background-color: #f5f5f5;
    color: #1a1a1a;
}

.panel-primary > .panel-heading {
    background-color: #0056b3;
    color: #ffffff;
}

.panel-success > .panel-heading {
    background-color: #2e7d32;
    color: #ffffff;
}

.panel-warning > .panel-heading {
    background-color: #ffc107;
    color: #1a1a1a;
}

.panel-danger > .panel-heading {
    background-color: #c62828;
    color: #ffffff;
}

.panel-info > .panel-heading {
    background-color: #0277bd;
    color: #ffffff;
}

/**
 * Pagination contrast
 */
.pagination > li > a,
.pagination > li > span {
    color: #0056b3;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
    color: #003d82;
    background-color: #e9ecef;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    color: #767676; /* Minimum passing contrast for disabled */
}

/**
 * Form validation states contrast
 */
.has-success .control-label,
.has-success .help-block,
.has-success .form-control-feedback {
    color: #1e4620;
}

.has-success .form-control {
    border-color: #2e7d32;
}

.has-warning .control-label,
.has-warning .help-block,
.has-warning .form-control-feedback {
    color: #664d03;
}

.has-warning .form-control {
    border-color: #ffc107;
}

.has-error .control-label,
.has-error .help-block,
.has-error .form-control-feedback {
    color: #721c24;
}

.has-error .form-control {
    border-color: #c62828;
}

/**
 * Input group addon contrast
 */
.input-group-addon {
    color: #1a1a1a;
    background-color: #e9ecef;
    border-color: #ced4da;
}

/**
 * List group contrast
 */
.list-group-item {
    color: #1a1a1a;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff;
}

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
    color: #595959;
    background-color: #f8f9fa;
}

/**
 * Well/jumbotron contrast
 */
.well {
    background-color: #f5f5f5;
    color: #1a1a1a;
}

.jumbotron {
    background-color: #e9ecef;
    color: #1a1a1a;
}

/**
 * Progress bar contrast - ensure text on progress bar is readable
 */
.progress-bar {
    color: #ffffff;
    background-color: #0056b3;
}

.progress-bar-success {
    background-color: #2e7d32;
}

.progress-bar-info {
    background-color: #0277bd;
}

.progress-bar-warning {
    background-color: #ffc107;
    color: #1a1a1a;
}

.progress-bar-danger {
    background-color: #c62828;
}

/* ==========================================================================
   Keyboard Help Styles
   ========================================================================== */

/**
 * Keyboard shortcut key styling
 */
kbd {
    display: inline-block;
    padding: 3px 8px;
    font-family: monospace;
    font-size: 14px;
    color: #333333;
    background-color: #f7f7f7;
    border: 1px solid #cccccc;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
    white-space: nowrap;
}

/**
 * Keyboard shortcuts definition list
 */
.keyboard-shortcuts {
    margin-bottom: 20px;
}

.keyboard-shortcuts dt {
    font-weight: bold;
    margin-top: 10px;
    color: #333333;
}

.keyboard-shortcuts dd {
    margin-left: 20px;
    margin-bottom: 10px;
    color: #555555;
}

/**
 * Keyboard help modal specific styles
 */
#keyboard-help-modal h3 {
    margin-top: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dddddd;
    color: #333333;
    font-size: 18px;
}

#keyboard-help-modal h3:first-of-type {
    margin-top: 15px;
}

#keyboard-help-modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/**
 * Keyboard help hint in sidebar
 */
.keyboard-help-hint {
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.keyboard-help-hint .btn-link {
    color: #0056b3;
    text-decoration: none;
}

.keyboard-help-hint .btn-link:hover,
.keyboard-help-hint .btn-link:focus {
    color: #003d7a;
    text-decoration: underline;
}

.keyboard-help-hint kbd {
    font-size: 12px;
    padding: 2px 5px;
    margin-left: 5px;
}

/* ============================================================================
   COLOR CONTRAST FIXES (WCAG 2.0 AA - 4.5:1 minimum ratio)
   ============================================================================ */

/**
 * Bootstrap alert boxes - improved text contrast
 * Default Bootstrap alert colors don't meet WCAG AA contrast requirements
 */

/* Error/Danger alerts - darker red text for better contrast */
.alert-error,
.alert-danger,
#display-error-box {
    color: #4a0e0e !important; /* WCAG AA compliant: ~12:1 contrast on #f2dede background */
    background-color: #f2dede !important;
}

/* Ensure all text within error alerts inherits contrast-compliant color */
.alert-error,
.alert-error *,
.alert-error ul,
.alert-error li,
.alert-error strong,
.alert-error li strong,
.alert-danger,
.alert-danger *,
.alert-danger ul,
.alert-danger li,
.alert-danger strong,
.alert-danger li strong,
#display-error-box,
#display-error-box *,
#display-error-box ul,
#display-error-box li,
#display-error-box strong,
#display-error-box li strong,
#display-error-box > ul > li,
#display-error-box > ul > li strong,
#display-error-box > ul > li > strong {
    color: #4a0e0e !important;
    background-color: #f2dede !important;
}

/* Close button in error alerts - override Bootstrap's low opacity */
.alert-error .close,
.alert-danger .close,
.alert-error button.close,
.alert-danger button.close,
.alert.alert-error .close,
.alert.alert-danger .close,
#display-error-box .close,
#display-error-box > .close,
#display-error-box > button,
#display-error-box > button.close {
    color: #4a0e0e !important;
    background-color: #f2dede !important;
    opacity: 1 !important; /* Full opacity for WCAG contrast compliance */
    text-shadow: none !important; /* Remove text shadow that affects contrast */
}

/* Close button span must inherit color, not opacity */
.alert-error .close span,
.alert-danger .close span,
.alert-error button.close span,
.alert-danger button.close span,
#display-error-box .close span,
#display-error-box > .close span,
#display-error-box > button span,
#display-error-box > button.close span,
#display-error-box > button > span {
    color: #4a0e0e !important;
    background-color: #f2dede !important;
}

.alert-error .close:hover,
.alert-error .close:focus,
.alert-danger .close:hover,
.alert-danger .close:focus,
#display-error-box .close:hover,
#display-error-box .close:focus {
    color: #2d0909 !important;
    opacity: 1;
}

/* Warning alerts - darker text for better contrast */
.alert-warning {
    color: #66512c !important; /* WCAG AA compliant on #fcf8e3 background */
}

/* Info alerts - darker blue text for better contrast */
.alert-info {
    color: #245269 !important; /* WCAG AA compliant: ~7:1 contrast on #d9edf7 background */
}

/* Success alerts - darker green text for better contrast */
.alert-success {
    color: #2b542c !important; /* WCAG AA compliant on #dff0d8 background */
}

/**
 * Display message boxes - improved text contrast
 */
.display-error {
    color: #6b1a1a !important; /* WCAG AA compliant on light red backgrounds */
}

.display-notice {
    color: #66512c !important; /* WCAG AA compliant on light yellow backgrounds */
}

.display-success {
    color: #2b542c !important; /* WCAG AA compliant on light green backgrounds */
}

.display-generic {
    color: #245269 !important; /* WCAG AA compliant on light blue backgrounds */
}

/* ==========================================================================
   Form Text Contrast Fixes
   Ensure h2 and p elements in forms have sufficient contrast
   ========================================================================== */

/**
 * Verify Identity and form headings/paragraphs need high contrast
 * The default #516E5C color may not meet WCAG AA on all backgrounds
 */
#main-content form h2,
#main-content form p,
#main-content > div > form h2,
#main-content > div > form p,
.form-horizontal h2,
.form-horizontal p,
form.form-horizontal h2,
form.form-horizontal p {
    color: #1a1a1a !important; /* Very high contrast: ~16:1 on white */
}

/* Security question / verify identity specific styling */
#main-content form .col-md-12 h2,
#main-content form .col-md-12 p {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Ensure forms have explicit white background for WCAG contrast computation */
#main-content form,
#content form,
.inner-content form,
form.form-horizontal {
    background-color: #ffffff !important;
}

/* Ensure all form divs have white background */
#main-content form > div,
#content form > div,
form.form-horizontal > div {
    background-color: #ffffff !important;
}

/* ============================================================================
   LEGACY CSS OVERRIDES (common.css fixes for WCAG 2.0 AA compliance)
   These override low-contrast colors defined in common.css
   ============================================================================ */

/**
 * Fix #999 gray text - fails WCAG AA (2.85:1 contrast on white)
 * Changed to #595959 which provides 7:1 contrast ratio
 */

/* Pagination controls */
#pagination-links,
#pagination-links a,
#pagination-buttons,
#pagination-buttons a {
    color: #595959 !important;
}

/* Zoom controls */
a.zoomin,
a.zoomout,
a.img-selector {
    color: #595959 !important;
}

a.zoomin:hover,
a.zoomout:hover,
a.img-selector:hover,
a.img-selector.active {
    color: #333333 !important;
}

/* Disabled table rows and elements */
table.tableList tbody tr.disabled,
table.tableList tbody tr.disabled td,
table.manage_awards tr.disabled,
table.manage_awards tr.disabled td,
table.mspr_table tr.unapproved,
table.mspr_table tr.unapproved td,
.session-button.disabled,
tr.disabled,
tr.disabled td,
.disabled-row,
.disabled-row td {
    color: #595959 !important;
}

/* Form label hints - fix grey keyword */
.label-hint,
.form-hint,
.help-text {
    color: #595959 !important;
}

/* Muted text - ensure WCAG AA compliance */
.text-muted,
.muted,
.content-small.muted {
    color: #595959 !important;
}

/* Placeholder text - ensure minimum 4.5:1 contrast */
::placeholder {
    color: #767676 !important;
    opacity: 1 !important;
}

::-webkit-input-placeholder {
    color: #767676 !important;
    opacity: 1 !important;
}

::-moz-placeholder {
    color: #767676 !important;
    opacity: 1 !important;
}

:-ms-input-placeholder {
    color: #767676 !important;
}

/* Inline color overrides - fix any #ccc or light gray inline styles */
[style*="color: #ccc"],
[style*="color:#ccc"],
[style*="color: #cccccc"],
[style*="color:#cccccc"] {
    color: #767676 !important;
}

/* Copyright and footer text */
.copyright,
a.copyright {
    color: #595959 !important;
}

/* jQuery UI elements */
.ui-state-disabled,
.ui-state-disabled span {
    color: #595959 !important;
    opacity: 0.8 !important;
}

/* Chosen dropdown disabled state */
.chosen-disabled,
.chosen-disabled .chosen-single,
.chosen-disabled .chosen-choices {
    color: #595959 !important;
    opacity: 0.8 !important;
}

/* DataTables disabled buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #595959 !important;
}

/* ============================================================================
   ADDITIONAL FORM ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/**
 * Error state styling for form inputs
 */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.has-error input,
.has-error select,
.has-error textarea {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 1px #c62828 !important;
}

/**
 * Focus state for invalid inputs
 */
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.25) !important;
    outline: 2px solid #c62828 !important;
    outline-offset: 2px !important;
}

/**
 * Error message styling
 */
.error-message,
.field-error,
.validation-error {
    color: #c62828 !important;
    font-weight: 500;
}

/**
 * Ensure checkbox/radio groups have visible grouping
 */
[role="group"] {
    padding: 5px;
    border-radius: 4px;
}

[role="group"]:focus-within {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* =========================================================
   KEYBOARD NAVIGATION FOCUS STYLES
   Enhanced focus visibility when using keyboard navigation
   ========================================================= */

/* Only show enhanced focus when using keyboard */
body.keyboard-nav *:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25) !important;
}

/* Buttons get slightly different focus */
body.keyboard-nav button:focus,
body.keyboard-nav .btn:focus,
body.keyboard-nav input[type="button"]:focus,
body.keyboard-nav input[type="submit"]:focus,
body.keyboard-nav input[type="reset"]:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.35) !important;
}

/* Links get underline enhancement */
body.keyboard-nav a:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
    text-decoration: underline !important;
}

/* Form inputs */
body.keyboard-nav input:focus,
body.keyboard-nav select:focus,
body.keyboard-nav textarea:focus {
    border-color: #0066cc !important;
    outline: 3px solid #0066cc !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25) !important;
}

/* Checkboxes and radios */
body.keyboard-nav input[type="checkbox"]:focus,
body.keyboard-nav input[type="radio"]:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 3px !important;
}

/* =========================================================
   SKIP LINK STYLES
   Ensure skip link is properly styled
   ========================================================= */

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10000 !important;
    padding: 15px 20px !important;
    background: #0066cc !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* =========================================================
   SCROLLABLE REGION STYLES
   Styles for keyboard-accessible scrollable regions
   ========================================================= */

[role="region"][tabindex="0"] {
    position: relative;
}

[role="region"][tabindex="0"]:focus {
    outline: 2px solid #0066cc;
    outline-offset: -2px;
}

/* =========================================================
   TABLE CAPTION STYLES
   Ensure captions are properly styled
   ========================================================= */

table caption {
    padding: 10px 0;
    font-weight: bold;
    text-align: left;
    caption-side: top;
}

table caption.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   FORM FIELDSET/LEGEND STYLING
   Style fieldset and legend for horizontal form radio groups
   ========================================================= */

.form-horizontal fieldset.form-group {
    margin-bottom: 15px;
    border: none;
    padding: 0;
}

.form-horizontal fieldset.form-group legend {
    font-size: inherit;
    font-weight: 700;
    border: none;
    margin-bottom: 0;
    padding-top: 7px;
    width: auto;
    float: left;
}

.form-horizontal fieldset.form-group legend.form-required::after {
    content: "*";
    color: #c62828;
    margin-left: 3px;
}

/* =========================================================
   LOGOUT BUTTON CONTRAST FIX
   Ensure logout button text is always visible
   ========================================================= */

a.log-out,
a.log-out:visited,
a.log-out:hover,
a.log-out:focus,
a.log-out:active {
    color: #ffffff !important; /* White text for high contrast on dark background */
}

a.log-out:hover,
a.log-out:focus {
    background-color: #2a3d32 !important; /* Slightly darker on hover/focus */
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* =========================================================
   ARIA LIVE REGION STYLES
   Ensure live regions are hidden but accessible
   ========================================================= */

#a11y-live-region,
#a11y-live-assertive {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}