/* =========================================================
   Accessibility Panel Styles
   Theme CSS variables are injected dynamically by
   accessibility-panel.js via <style id="acs-theme-style">
   ========================================================= */

/* --- Body class accessibility state --- */
body.theme-mode-light { --acs-theme-mode: light; }
body.theme-mode-dark  { --acs-theme-mode: dark; }
body.theme-mode-auto  { --acs-theme-mode: auto; }

/* --- Content typography scoped to main content wrapper --- */
.page-wrapper {
    font-size: calc(1rem * var(--acs-font-size-scale, 1));
    line-height: var(--acs-line-height, 1.5);
    letter-spacing: var(--acs-letter-spacing, normal);
    word-spacing: var(--acs-word-spacing, normal);
    font-weight: var(--acs-font-weight, 400);
    font-style: var(--acs-font-style, normal);
    text-align: var(--acs-text-align, left);
    text-transform: var(--acs-text-transform, none);
    font-family: var(--acs-font-family, var(--bs-body-font-family));
}

/* =========================================================
   Panel Baseline — prevents any non-theme inheritance
   ========================================================= */

#accessibilityPanel {
    width: 400px;
    max-width: 100vw;
    --acs-font-size-scale: 1;
    --acs-line-height: 1.5;
    --acs-letter-spacing: normal;
    --acs-word-spacing: normal;
    --acs-font-weight: 400;
    --acs-font-style: normal;
    --acs-text-align: left;
    --acs-text-transform: none;
    font-family: var(--bs-body-font-family, 'Barlow', Helvetica, Arial, sans-serif);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: normal;
    word-spacing: normal;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    text-transform: none;
    filter: none;
}

#accessibilityPanel,
#accessibilityPanel .offcanvas-header,
#accessibilityPanel .offcanvas-body,
#accessibilityPanel .tab-content,
#accessibilityPanel .nav,
#accessibilityPanel .nav-link,
#accessibilityPanel .btn,
#accessibilityPanel button,
#accessibilityPanel label,
#accessibilityPanel p,
#accessibilityPanel input,
#accessibilityPanel select,
#accessibilityPanel textarea {
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-align: initial;
    filter: none;
}

#accessibilityPanel button,
#accessibilityPanel .btn,
#accessibilityPanel .nav-link,
#accessibilityPanel label,
#accessibilityPanel p,
#accessibilityPanel input,
#accessibilityPanel select,
#accessibilityPanel textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Panel layout stability */
#accessibilityPanel .offcanvas-body {
    min-height: 0;
    overflow: hidden;
}

#accessibilityPanel .tab-content {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#accessibilityPanel .border-top {
    flex-shrink: 0;
}

/* --- Highlight Titles (scoped to .page-wrapper) --- */
body.highlight-titles-on .page-wrapper h1,
body.highlight-titles-on .page-wrapper h2,
body.highlight-titles-on .page-wrapper h3,
body.highlight-titles-on .page-wrapper h4,
body.highlight-titles-on .page-wrapper h5,
body.highlight-titles-on .page-wrapper h6 {
    background-color: rgba(255, 255, 0, 0.2) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

/* --- Highlight Links (scoped to .page-wrapper) --- */
body.highlight-links-on .page-wrapper a:not(.btn):not([data-bs-toggle="offcanvas"]):not([data-bs-dismiss="offcanvas"]):not(.nav-link) {
    background-color: rgba(0, 114, 189, 0.15) !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

/* --- Hide Images (scoped to .page-wrapper) --- */
body.hide-images-on .page-wrapper img,
body.hide-images-on .page-wrapper picture,
body.hide-images-on .page-wrapper svg {
    display: none !important;
}

/* --- Color Filters (scoped to .page-wrapper) --- */
body.color-filter-monochrome .page-wrapper {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

body.color-filter-low-contrast .page-wrapper {
    filter: contrast(0.6) brightness(1.1);
    -webkit-filter: contrast(0.6) brightness(1.1);
}

body.color-filter-high-contrast .page-wrapper {
    --bs-body-color: #f0f0f0 !important;
    --bs-body-bg: #000 !important;
    --bs-border-color: #555 !important;
    --bs-primary: #ffff00 !important;
    --bs-primary-rgb: 255, 255, 0 !important;
    --bs-link-color: #ffff00 !important;
    --bs-link-hover-color: #ffcc00 !important;
    --bs-secondary-color: #ccc !important;
    --bs-tertiary-color: #aaa !important;
    --bs-nav-link-color: #ffff00 !important;
}

body.color-filter-high-contrast .page-wrapper,
body.color-filter-high-contrast .page-wrapper .container,
body.color-filter-high-contrast .page-wrapper .card,
body.color-filter-high-contrast .page-wrapper .modal-content,
body.color-filter-high-contrast .page-wrapper .card-login,
body.color-filter-high-contrast .page-wrapper .card-login-content,
body.color-filter-high-contrast .page-wrapper .footer-copyright,
body.color-filter-high-contrast .page-wrapper .page-footer {
    background-color: #000 !important;
    color: #f0f0f0 !important;
}

body.color-filter-high-contrast .page-wrapper a:not(.btn):not([data-bs-toggle="offcanvas"]):not([data-bs-dismiss="offcanvas"]):not(.nav-link) {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

body.color-filter-high-contrast .page-wrapper a:hover:not(.btn) {
    color: #ffcc00 !important;
}

body.color-filter-high-contrast .page-wrapper .btn-primary {
    background-color: #ffff00 !important;
    border-color: #ffff00 !important;
    color: #000 !important;
}

body.color-filter-high-contrast .page-wrapper .btn {
    border-color: #ffff00 !important;
    color: #ffff00 !important;
}

body.color-filter-high-contrast .page-wrapper .btn-outline-primary {
    border-color: #ffff00 !important;
    color: #ffff00 !important;
}

body.color-filter-high-contrast .page-wrapper input,
body.color-filter-high-contrast .page-wrapper textarea,
body.color-filter-high-contrast .page-wrapper select {
    background-color: #111 !important;
    color: #f0f0f0 !important;
    border-color: #666 !important;
}

body.color-filter-high-contrast .page-wrapper table,
body.color-filter-high-contrast .page-wrapper th {
    border-color: #555 !important;
    color: #f0f0f0 !important;
}

body.color-filter-high-contrast .page-wrapper th {
    background-color: #1a1a1a !important;
}

body.color-filter-high-contrast .page-wrapper tr:nth-of-type(odd) td {
    background-color: #0d0d0d !important;
}

body.color-filter-high-contrast .page-wrapper .text-danger,
body.color-filter-high-contrast .page-wrapper .text-updated,
body.color-filter-high-contrast .page-wrapper .text-success,
body.color-filter-high-contrast .page-wrapper .text-primary {
    color: #ffff00 !important;
}

body.color-filter-high-contrast .page-wrapper .bg-white,
body.color-filter-high-contrast .page-wrapper .bg-light,
body.color-filter-high-contrast .page-wrapper .bg-opacity-10 {
    background-color: #1a1a1a !important;
}

body.color-filter-high-contrast .section-navbar .text-danger,
body.color-filter-high-contrast .section-navbar .nav-link,
body.color-filter-high-contrast .section-navbar .text-success,
body.color-filter-high-contrast .section-navbar .text-primary {
    color: #ffff00 !important;
}

body.color-filter-high-contrast .section-navbar .x-sub-menu{    background-color: var(--bs-navbar-bg) !important;}
/* --- Accessibility Trigger Baseline --- */

#accessibility-trigger {
    position: fixed;
    left: 16px;
    bottom: 56px;
    z-index: 1080;
    width: 56px;
    height: 56px;
    font-family: var(--bs-body-font-family, 'Barlow', Helvetica, Arial, sans-serif);
    font-size: 16px;
    line-height: 1;
    letter-spacing: normal;
    word-spacing: normal;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    text-transform: none;
    filter: none;
}

#accessibility-trigger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    padding: 0 !important;
    border-radius: 50% !important;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    letter-spacing: normal;
    word-spacing: normal;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    text-transform: none;
    filter: none;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

#accessibility-trigger-btn i,
#accessibility-trigger-btn .fa,
#accessibility-trigger-btn svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    line-height: 1;
    letter-spacing: normal;
    word-spacing: normal;
    text-align: center;
    text-transform: none;
    filter: none;
    visibility: visible !important;
    opacity: 1 !important;
}

#accessibility-trigger-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

#accessibility-trigger-btn:focus-visible {
    outline: 3px solid #ff0;
    outline-offset: 2px;
}

#accessibility-trigger-btn.active {
    background-color: #0dcaf0;
}

.acs-font-size-display {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}

@media (max-width: 575.98px) {
    #accessibility-trigger {
        width: 44px;
        height: 44px;
        left: 12px;
        bottom: 48px;
    }
    #accessibility-trigger-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 14px;
    }
    #accessibility-trigger-btn i,
    #accessibility-trigger-btn .fa,
    #accessibility-trigger-btn svg {
        font-size: 2.5em;
    }
}

/* --- Accessibility Panel --- */
#accessibilityPanel,
#accessibilityPanel .offcanvas-header,
#accessibilityPanel .offcanvas-body,
#accessibilityPanel .tab-content {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

#accessibilityPanel .border-bottom,
#accessibilityPanel .border-top,
#accessibilityPanel .nav-tabs {
    border-color: var(--bs-border-color) !important;
}

#accessibilityPanel .text-muted,
#accessibilityPanel .text-secondary {
    color: var(--bs-secondary-color) !important;
}

#accessibilityPanel .text-body {
    color: var(--bs-body-color) !important;
}

#accessibilityPanel .nav-link {
    color: var(--bs-body-color);
}

#accessibilityPanel .nav-link.active {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-body-bg);
    border-color:
        var(--bs-border-color)
        var(--bs-border-color)
        var(--bs-body-bg);
}

/* =========================================================
   Focus Styles — :focus-visible only
   ========================================================= */

/* All interactive elements inside the accessibility panel */
#accessibilityPanel button:focus-visible,
#accessibilityPanel .nav-link:focus-visible,
#accessibilityPanel [role="radio"]:focus-visible,
#accessibilityPanel [role="switch"]:focus-visible,
#accessibilityPanel [aria-pressed]:focus-visible,
#accessibilityPanel .btn-close:focus-visible,
#accessibilityPanel #acs-reset-btn:focus-visible {
    outline: 3px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 4px;
}

/* High-contrast friendly focus for dark themes */
[data-bs-theme="dark"] #accessibilityPanel button:focus-visible,
[data-bs-theme="dark"] #accessibilityPanel .nav-link:focus-visible,
[data-bs-theme="dark"] #accessibilityPanel [role="radio"]:focus-visible,
[data-bs-theme="dark"] #accessibilityPanel [role="switch"]:focus-visible,
[data-bs-theme="dark"] #accessibilityPanel [aria-pressed]:focus-visible,
[data-bs-theme="dark"] #accessibilityPanel .btn-close:focus-visible,
[data-bs-theme="dark"] #accessibilityPanel #acs-reset-btn:focus-visible {
    outline-color: #6ea8fe;
}

/* Ensure close button has visible focus */
#accessibilityPanel .btn-close:focus-visible {
    outline: 3px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 4px;
    box-shadow: none;
}

/* Ensure Bootstrap's focus ring doesn't override our focus-visible */
#accessibilityPanel .btn:focus-visible,
#accessibilityPanel .btn-close:focus-visible {
    box-shadow: none;
}