/**
 * Windows High-Contrast / Contrast Adjustment Accessibility
 *
 * Ensures:
 * 1. Content remains adjustable by Windows contrast settings (no blocking of system behavior).
 * 2. Elements without a visible border get a transparent border so they become visible when
 *    contrast is adjusted (transparent borders are drawn by the system in high-contrast).
 * 3. Focus, active and selection states are indicated by a high-contrast, non-color-dependent
 *    visual marker (thick outline/border) in addition to any color change.
 *
 * References: WCAG 2.1, Windows High Contrast, CSS Media Queries Level 5 forced-colors.
 */

/* Legacy Microsoft high-contrast (IE/older Edge) */
@media (-ms-high-contrast: active) {
    /* Ensure focusable/interactive elements have a border so they get a visible edge when contrast is adjusted */
    body button,
    body input,
    body select,
    body textarea,
    body a[href],
    body [tabindex]:not([tabindex="-1"]),
    body .ui-button,
    body .ui-inputfield,
    body .ui-selectonemenu,
    body .ui-selectonemenu-label,
    body .ui-chkbox-box,
    body .ui-radiobutton-box,
    body .ui-paginator-page,
    body .ui-tabs-header,
    body .ui-accordion-header,
    body .ui-menuitem-link,
    body .ui-datatable th,
    body .ui-datatable td,
    body .form-input,
    body .form-select,
    body .btn,
    body .pager,
    body .form-checkbox-js,
    body .form-radio-js,
    body .content-list-item,
    body .navbar-nav a,
    body .brandnav a,
    body .pagination a,
    body .close,
    body .notification-dismissible .close,
    body .ui-inputswitch,
    body .ui-inputswitch-handle,
    body .modal-content,
    body hr {
        border: 1px solid transparent;
    }

    /* InputSwitch: outline on checked state so on/off is color-independent */
    body .ui-inputswitch.ui-inputswitch-checked {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    /* Selection/active/focus: high-contrast, non-color-dependent marker (thick border) */
    body .ui-state-focus,
    body .ui-state-active,
    body .ui-state-highlight,
    body .ui-tabs-header.ui-state-active,
    body .ui-accordion-header.ui-state-active,
    body .ui-button.ui-state-focus,
    body .ui-button.ui-state-active,
    body .ui-inputfield.ui-state-focus,
    body .ui-selectonemenu.ui-state-focus,
    body .ui-chkbox-box.ui-state-focus,
    body .ui-chkbox-box.ui-state-active,
    body .ui-radiobutton-box.ui-state-focus,
    body .ui-radiobutton-box.ui-state-active,
    body .ui-paginator-page.ui-state-active,
    body .ui-paginator-page.ui-state-focus,
    body a:focus,
    body a.content-list-item.active,
    body .content-list-item.selected,
    body .nav > li > a:focus,
    body .navbar-nav > li > a:focus,
    body .navbar-nav > li > a.active,
    body .brandnav > ul > li > a:focus,
    body .brandnav > ul > li > a.active,
    body .brandnav-lvl-1 > ul > li > a:focus,
    body .brandnav-lvl-1 > ul > li > a.active,
    body .brandnav-lvl-1 > ul > .active > a,
    body .brandnav-lvl-3 > ul > li > a:focus,
    body .brandnav-lvl-3 > ul > li > a.active,
    body .pagination > li > a:focus,
    body .pagination > .active > a,
    body .btn:focus,
    body .btn.active,
    body .btn-default:focus,
    body .btn-default.active,
    body .form-input:focus,
    body .form-select:focus,
    body .form-select-js-options > li.selected,
    body .form-select-js-options > li.active,
    body .pager:focus,
    body .pager.active,
    body .breadcrumb > .active,
    body .brand-footer-nav .active > a,
    body .brand-footer-content-list > .content-list-item.active,
    body .notification-dismissible > .close:focus,
    body tr.ui-datatable-selectable.ui-state-highlight,
    body .ui-treetable .ui-treetable-data tr.ui-state-highlight {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    /* Ensure outline is not removed by existing rules that set outline: 0 */
    body a:focus,
    body button:focus,
    body input:focus,
    body select:focus,
    body textarea:focus,
    body .ui-button:focus,
    body .form-input:focus,
    body .form-select:focus,
    body .btn:focus,
    body .pager:focus,
    body .close:focus {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* Standard forced-colors (modern browsers / Windows high-contrast) */
@media (forced-colors: active) {
    /* Transparent borders become visible when contrast is adjusted */
    body button,
    body input,
    body select,
    body textarea,
    body a[href],
    body [tabindex]:not([tabindex="-1"]),
    body .ui-button,
    body .ui-inputfield,
    body .ui-selectonemenu,
    body .ui-selectonemenu-label,
    body .ui-chkbox-box,
    body .ui-radiobutton-box,
    body .ui-paginator-page,
    body .ui-tabs-header,
    body .ui-accordion-header,
    body .ui-menuitem-link,
    body .ui-datatable th,
    body .ui-datatable td,
    body .form-input,
    body .form-select,
    body .btn,
    body .pager,
    body .form-checkbox-js,
    body .form-radio-js,
    body .content-list-item,
    body .navbar-nav a,
    body .brandnav a,
    body .pagination a,
    body .close,
    body .notification-dismissible .close,
    body .ui-inputswitch,
    body .ui-inputswitch-handle,
    body .modal-content,
    body hr {
        border: 1px solid transparent;
    }

    /* InputSwitch: outline on checked state so on/off is color-independent */
    body .ui-inputswitch.ui-inputswitch-checked {
        outline: 3px solid CanvasText;
        outline-offset: 2px;
    }

    /* Selection/active/focus: non-color-dependent marker using system colors */
    body .ui-state-focus,
    body .ui-state-active,
    body .ui-state-highlight,
    body .ui-tabs-header.ui-state-active,
    body .ui-accordion-header.ui-state-active,
    body .ui-button.ui-state-focus,
    body .ui-button.ui-state-active,
    body .ui-inputfield.ui-state-focus,
    body .ui-selectonemenu.ui-state-focus,
    body .ui-chkbox-box.ui-state-focus,
    body .ui-chkbox-box.ui-state-active,
    body .ui-radiobutton-box.ui-state-focus,
    body .ui-radiobutton-box.ui-state-active,
    body .ui-paginator-page.ui-state-active,
    body .ui-paginator-page.ui-state-focus,
    body a:focus,
    body a.content-list-item.active,
    body .content-list-item.selected,
    body .nav > li > a:focus,
    body .navbar-nav > li > a:focus,
    body .navbar-nav > li > a.active,
    body .brandnav > ul > li > a:focus,
    body .brandnav > ul > li > a.active,
    body .brandnav-lvl-1 > ul > li > a:focus,
    body .brandnav-lvl-1 > ul > li > a.active,
    body .brandnav-lvl-1 > ul > .active > a,
    body .brandnav-lvl-3 > ul > li > a:focus,
    body .brandnav-lvl-3 > ul > li > a.active,
    body .pagination > li > a:focus,
    body .pagination > .active > a,
    body .btn:focus,
    body .btn.active,
    body .btn-default:focus,
    body .btn-default.active,
    body .form-input:focus,
    body .form-select:focus,
    body .form-select-js-options > li.selected,
    body .form-select-js-options > li.active,
    body .pager:focus,
    body .pager.active,
    body .breadcrumb > .active,
    body .brand-footer-nav .active > a,
    body .brand-footer-content-list > .content-list-item.active,
    body .notification-dismissible > .close:focus,
    body tr.ui-datatable-selectable.ui-state-highlight,
    body .ui-treetable .ui-treetable-data tr.ui-state-highlight {
        outline: 3px solid CanvasText;
        outline-offset: 2px;
    }

    body a:focus,
    body button:focus,
    body input:focus,
    body select:focus,
    body textarea:focus,
    body .ui-button:focus,
    body .form-input:focus,
    body .form-select:focus,
    body .btn:focus,
    body .pager:focus,
    body .close:focus {
        outline: 3px solid CanvasText;
        outline-offset: 2px;
    }
}

/* prefers-contrast: high — optional enhancement when user prefers more contrast (not only forced-colors) */
@media (prefers-contrast: high) {
    body .ui-state-focus,
    body .ui-state-active,
    body .ui-state-highlight,
    body .ui-tabs-header.ui-state-active,
    body .ui-accordion-header.ui-state-active,
    body .ui-button.ui-state-focus,
    body .ui-button.ui-state-active,
    body a:focus,
    body .btn:focus,
    body .btn.active,
    body .form-input:focus,
    body .form-select:focus,
    body .pagination > .active > a,
    body .content-list-item.selected,
    body tr.ui-datatable-selectable.ui-state-highlight {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}