/* ============================================================
   Accessibility Panel — self-contained CSS
   (no Bootstrap / Font Awesome required)
   Theme-aware: uses --bs-* variables injected by
   accessibility-panel.js, falling back to light values.
   ============================================================ */

/* ============================================================
   Bootstrap table theme integration
   (Bootstrap .table classes recolor via the app's theme tokens
   so Light/Dark/High-Contrast/Colour-Blind all apply)
   ============================================================ */
.table {
  --bs-table-bg: var(--bg-page, #ffffff);
  --bs-table-striped-bg: var(--bg-surface, #efefef);
  --bs-table-color: var(--text-body, #333333);
  --bs-table-border-color: var(--border-light, #cccccc);
}
.table thead th {
  background-color: var(--primary-light, #3e76c6);
  color: var(--text-on-primary, #ffffff);
  border-color: var(--border-light, #cccccc);
}

/* ============================================================
   Theme sync with legacy dponline.css variables
   The panel owns theme switching (Light/Dark/Auto). Legacy
   dponline.css has its own dark palette under body.dark-mode
   (synced by accessibility-panel.js) and an OS-level auto-dark
   media query. This block pins the light palette whenever the
   panel theme is Light so the OS media query can't leak dark
   values in (Auto mode resolves via JS matchMedia instead).
   ============================================================ */
body.theme-mode-light {
  --text-body: #333333;
  --text-secondary: #555555;
  --text-muted: #666666;
  --primary: #084298;
  --primary-hover: #052c65;
  --primary-light: #3e76c6;
  --primary-dark: #234b85;
  --primary-darker: #1a3a6b;
  --link-color: #084298;
  --link-hover: #052c65;
  --bg-body: #e9e9e9;
  --bg-page: #ffffff;
  --bg-surface: #efefef;
  --bg-header: #2c47a4;
  --bg-nav: #234b85;
  --bg-footer: #336699;
  --bg-input: #ffffff;
  --border-default: #848d96;
  --border-light: #cccccc;
  --btn-primary-bg: #7a5a00;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #5c4400;
  --btn-secondary-bg: #234b85;
  --btn-secondary-text: #ffffff;
}

/* Dark status colors (not covered by dponline.css body.dark-mode) */
body.dark-mode {
  --success: #75b798;
  --success-text: #75b798;
  --danger: #ea868f;
  --warning: #ffda6a;
  --info: #6edff6;
  --link-visited: #b197fc;
}

/* ---------- Trigger button ---------- */
#accessibility-trigger {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1045;
}
#accessibility-trigger .acs-trigger {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background-color: #0dcaf0;
  color: #212529;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#accessibility-trigger .acs-trigger:hover,
#accessibility-trigger .acs-trigger:focus {
  background-color: #31d2f2;
}
#accessibility-trigger .acs-trigger.active {
  background-color: #0aa2c0;
  color: #ffffff;
}
#accessibility-trigger .acs-trigger:focus-visible {
  outline: 3px solid #084298;
  outline-offset: 2px;
}

/* ---------- Backdrop ---------- */
.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.offcanvas-backdrop.fade.show {
  opacity: 1;
  visibility: visible;
}

/* ---------- Offcanvas panel ---------- */
.offcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1055;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 100%;
  background-color: var(--bs-body-bg, #ffffff);
  color: var(--bs-body-color, #495057);
  border-left: 1px solid var(--bs-border-color, #dee2e6);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.25s ease, visibility 0.25s ease;
  overflow-y: auto;
}
.offcanvas.show {
  visibility: visible;
  transform: translateX(0);
}

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}
.offcanvas-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  border: 0;
  border-radius: 0.375rem;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
  opacity: 0.5;
  cursor: pointer;
}
.btn-close:hover {
  opacity: 0.75;
}
[data-bs-theme='dark'] .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.offcanvas-body {
  flex: 1 1 auto;
}

/* ---------- Utility classes (used by panel markup) ---------- */
.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-grow-1 {
  flex-grow: 1;
}
.flex-fill {
  flex: 1 1 auto;
}
.flex-wrap {
  flex-wrap: wrap;
}
.justify-content-between {
  justify-content: space-between;
}
.align-items-center {
  align-items: center;
}
.gap-1 {
  gap: 0.25rem;
}
.w-100 {
  width: 100%;
}
.text-center {
  text-align: center;
}
.small {
  font-size: 0.875em;
}
.fw-semibold {
  font-weight: 600;
}
.fs-6 {
  font-size: 1rem;
}
.text-body {
  color: var(--bs-body-color, #495057);
}
.text-secondary {
  color: var(--bs-secondary-color, #6c757d);
}
.text-muted {
  color: var(--bs-secondary-color, #6c757d);
}
.p-0 {
  padding: 0 !important;
}
.p-3 {
  padding: 1rem;
}
.px-3 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.pt-3 {
  padding-top: 1rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 1rem;
}
.overflow-auto {
  overflow: auto;
}
.border-bottom {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.border-top {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Tabs ---------- */
.nav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.nav-tabs {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.nav-tabs .nav-item {
  margin-bottom: -1px;
}
.nav-tabs .nav-link {
  display: block;
  padding: 0.5rem 0.9rem;
  margin-bottom: -1px;
  background: none;
  border: 1px solid transparent;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  color: var(--bs-link-color, #084298);
  text-decoration: none;
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
}
.nav-tabs .nav-link:hover {
  color: var(--bs-link-hover-color, #052c65);
}
.nav-tabs .nav-link.active {
  color: var(--bs-body-color, #495057);
  background-color: var(--bs-body-bg, #ffffff);
  border-color: var(--bs-border-color, #dee2e6) var(--bs-border-color, #dee2e6) var(--bs-body-bg, #ffffff);
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .tab-pane.active {
  display: block;
}

/* ---------- Buttons ---------- */
/* .btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background-color: transparent;
} */
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 0.2rem;
}
.btn:focus-visible {
  outline: 2px solid #084298;
  outline-offset: 2px;
}
.btn-outline-primary {
  color: var(--bs-link-color, #084298);
  border-color: var(--bs-link-color, #084298);
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
  color: #ffffff;
  background-color: var(--bs-link-color, #084298);
  border-color: var(--bs-link-color, #084298);
}
.btn-outline-danger {
  color: #a02330;
  border-color: #a02330;
}
.btn-outline-danger:hover,
.btn-outline-danger.active {
  color: #ffffff;
  background-color: #a02330;
  border-color: #a02330;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
}

.acs-font-size-display {
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

/* ---------- Skip link ---------- */
.acs-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: #084298;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}
.acs-skip-link:focus {
  left: 10px;
  top: 10px;
}

/* ---------- Typography application (settings -> page) ---------- */
#main-content {
  zoom: var(--acs-font-size-scale, 1);
  line-height: var(--acs-line-height, 1.5);
  letter-spacing: var(--acs-letter-spacing, 0em);
  word-spacing: var(--acs-word-spacing, 0em);
  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, inherit);
}

/* ---------- Extra settings ---------- */
body.highlight-titles-on h1,
body.highlight-titles-on h2,
body.highlight-titles-on h3,
body.highlight-titles-on h4,
body.highlight-titles-on h5,
body.highlight-titles-on h6 {
  background-color: #fff176 !important;
  color: #000000 !important;
}
body.highlight-links-on a {
  background-color: #fff176 !important;
  color: #000000 !important;
  text-decoration: underline !important;
}
body.hide-images-on img {
  display: none !important;
}
/* ============================================================
   Color Filters (Monochrome / High / Low Contrast)
   NOTE: applying `filter` directly to <body> creates a new
   containing block and BREAKS all position:fixed elements
   (trigger, panel, backdrop). Instead we use a fixed overlay
   with `backdrop-filter`, which filters everything painted
   below it without affecting the fixed accessibility UI.
   ============================================================ */
body.color-filter-monochrome::before,
body.color-filter-high-contrast::before,
body.color-filter-low-contrast::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040; /* below trigger (1045), backdrop (1050), panel (1055) */
  pointer-events: none;
}
body.color-filter-monochrome::before {
  -webkit-backdrop-filter: grayscale(100%);
  backdrop-filter: grayscale(100%);
}
body.color-filter-high-contrast::before {
  -webkit-backdrop-filter: contrast(1.6);
  backdrop-filter: contrast(1.6);
}
body.color-filter-low-contrast::before {
  -webkit-backdrop-filter: contrast(0.7);
  backdrop-filter: contrast(0.7);
}

/* ============================================================
   Colour-Blind Friendly mode (Okabe-Ito / WCAG AAA palette)
   Replaces red/green confusion with blue/orange distinction.
   Targets this app's real color system:
   - CSS variables from dponline.css (--success/--danger/--warning)
   - Bootstrap tokens injected by accessibility-panel.js (--bs-*)
   - Inline server-rendered colours (ASP.NET ForeColor="Red"
     renders as style="color:Red")
   ============================================================ */
body.colour-blind-on {
  /* Legacy app tokens (dponline.css) */
  --success: #00548f; /* green -> blue (deuteranopia safe) */
  --success-text: #00548f;
  --danger: #8f3d00; /* red -> dark orange */
  --warning: #6b5400;
  --info: #005f45;
  --link-color: #00548f;
  --link-hover: #052c65;
  /* Bootstrap tokens injected by accessibility-panel.js */
  --bs-success: #00548f;
  --bs-danger: #8f3d00;
  --bs-warning: #6b5400;
  --bs-info: #005f45;
  --bs-primary: #00548f;
  --bs-link-color: #00548f;
  --bs-link-hover-color: #052c65;
}

/* Inline server-rendered colours (ASP.NET ForeColor / style=) */
body.colour-blind-on [style*='color:Red'],
body.colour-blind-on [style*='color: Red'],
body.colour-blind-on [style*='color:red'],
body.colour-blind-on [style*='color: red'] {
  color: #8f3d00 !important;
}
body.colour-blind-on [style*='color:Green'],
body.colour-blind-on [style*='color: Green'],
body.colour-blind-on [style*='color:green'],
body.colour-blind-on [style*='color: green'] {
  color: #00548f !important;
}

/* Symbol markers so red/green state is not colour-only (WCAG 1.4.1) */
body.colour-blind-on .text-danger:not(:empty)::before,
body.colour-blind-on [style*='color:Red']:not(:empty)::before,
body.colour-blind-on [style*='color: Red']:not(:empty)::before,
body.colour-blind-on [style*='color:red']:not(:empty)::before,
body.colour-blind-on [style*='color: red']:not(:empty)::before {
  content: '\2717  ';
}
body.colour-blind-on .text-success:not(:empty)::before,
body.colour-blind-on [style*='color:Green']:not(:empty)::before,
body.colour-blind-on [style*='color: Green']:not(:empty)::before,
body.colour-blind-on [style*='color:green']:not(:empty)::before,
body.colour-blind-on [style*='color: green']:not(:empty)::before {
  content: '\2713  ';
}