/* =========================================================
   a11y.css
   Accessibility toolbar styles (Bootstrap 5 compatible)
   ========================================================= */

/* ---------- Toolbar ---------- */
.a11y-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  margin: .5rem 0;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
}

.a11y-toolbar .btn-group + .btn-group {
  margin-left: 0;
}

/* ---------- Dark mode: inverted colours ---------- */
html.a11y-theme-dark {
  background: #fff;
  filter: invert(1) hue-rotate(180deg);
}

/* Re-invert media and the toolbar so they keep their original colours */
html.a11y-theme-dark img:not(.kgplogo),
html.a11y-theme-dark picture,
html.a11y-theme-dark video,
html.a11y-theme-dark iframe,
html.a11y-theme-dark canvas,
html.a11y-theme-dark svg image,
html.a11y-theme-dark .a11y-spare {
  filter: invert(1) hue-rotate(180deg);
}

/* ---------- Navbar: keep its original colours (counter-inversion) ---------- */
html.a11y-theme-dark .navbar,
html.a11y-theme-dark nav,
html.a11y-theme-dark header {
  filter: invert(1) hue-rotate(180deg) !important;
}

html.a11y-theme-dark .navbar img,
html.a11y-theme-dark .navbar picture,
html.a11y-theme-dark .navbar svg,
html.a11y-theme-dark .navbar .a11y-toolbar,
html.a11y-theme-dark nav img,
html.a11y-theme-dark nav picture,
html.a11y-theme-dark nav svg,
html.a11y-theme-dark nav .a11y-toolbar {
  filter: none !important;
}

/* ---------- Logo (outside navbar): keep its original colours ---------- */
html.a11y-theme-dark img.a11y-spare {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* ---------- High contrast: black, white and yellow, shades preserved ---------- */
/* Bootstrap derives its shades and borders from these variables, so
   setting them keeps the variants (muted text, light panels, etc.) distinct. */
/* ---------- High Contrast: Black, White and Yellow ---------- */
html.a11y-theme-contrast {
  --bs-body-bg: #000;
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: #fff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: #e0e0e0;
  --bs-tertiary-color: #bdbdbd;
  --bs-secondary-bg: #1f1f1f;
  --bs-tertiary-bg: #141414;
  --bs-border-color: #fff;
  --bs-border-color-translucent: rgba(255, 255, 255, .6);
  --bs-link-color: #ff0;
  --bs-link-color-rgb: 255, 255, 0;
  --bs-link-hover-color: #ffff80;
  --bs-light-rgb: 20, 20, 20;
  --bs-dark-rgb: 0, 0, 0;
}

/* ---------- Blacken Page Backgrounds ---------- */
html.a11y-theme-contrast,
html.a11y-theme-contrast body {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
}

/* ---------- Remove Background Images and Colours ---------- */
html.a11y-theme-contrast body *,
html.a11y-theme-contrast body *::before,
html.a11y-theme-contrast body *::after {
  background-image: none !important;
}

/* ---------- Main Content and Common Containers ---------- */
html.a11y-theme-contrast main,
html.a11y-theme-contrast section,
html.a11y-theme-contrast article,
html.a11y-theme-contrast .container,
html.a11y-theme-contrast .container-fluid,
html.a11y-theme-contrast .row,
html.a11y-theme-contrast .card,
html.a11y-theme-contrast .modal-content,
html.a11y-theme-contrast .dropdown-menu,
html.a11y-theme-contrast .a11y-toolbar {
  background-color: #000 !important;
  color: #fff !important;
}

/* ---------- Text ---------- */
html.a11y-theme-contrast body,
html.a11y-theme-contrast p,
html.a11y-theme-contrast span,
html.a11y-theme-contrast label,
html.a11y-theme-contrast li,
html.a11y-theme-contrast td,
html.a11y-theme-contrast th,
html.a11y-theme-contrast h1,
html.a11y-theme-contrast h2,
html.a11y-theme-contrast h3,
html.a11y-theme-contrast h4,
html.a11y-theme-contrast h5,
html.a11y-theme-contrast h6 {
  color: #fff !important;
}

/* ---------- Links ---------- */
html.a11y-theme-contrast a {
  color: #ff0 !important;
  text-decoration: none !important;
}

/* ---------- Bootstrap Buttons ---------- */
html.a11y-theme-contrast .btn {
  background-color: #000 !important;
  color: #ff0 !important;
  border: 1px solid #ff0 !important;
}

/* ---------- Form Controls ---------- */
html.a11y-theme-contrast input,
html.a11y-theme-contrast select,
html.a11y-theme-contrast textarea {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

/* ---------- Tables and DataTables ---------- */
html.a11y-theme-contrast table,
html.a11y-theme-contrast .table,
html.a11y-theme-contrast .dataTable {
  --bs-table-bg: #000;
  --bs-table-color: #fff;
  --bs-table-border-color: #fff;
  background-color: #000 !important;
  color: #fff !important;
}

html.a11y-theme-contrast th,
html.a11y-theme-contrast td {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
html.a11y-theme-contrast .dt-buttons .dt-button,
html.a11y-theme-contrast .dt-button,
html.a11y-theme-contrast .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #000 !important;
  background-image: none !important;
  color: #ff0 !important;
  border: 1px solid #ff0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.a11y-theme-contrast .dt-buttons .dt-button:hover,
html.a11y-theme-contrast .dt-buttons .dt-button:focus,
html.a11y-theme-contrast .dt-buttons .dt-button:active,
html.a11y-theme-contrast .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html.a11y-theme-contrast .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #ff0 !important;
  background-image: none !important;
  color: #000 !important;
  border-color: #ff0 !important;
}

/* =====================================================
   NAVBAR: HIGH-CONTRAST THEME
   Black background, white text, yellow highlights
   ===================================================== */

html.a11y-theme-contrast .navbar {
  background: #202020 !important;
  border-bottom: 2px solid #ff0 !important;
  color: #fff !important;
}

html.a11y-theme-contrast .navbar .navbar-brand {
  color: #ff0 !important;
}

html.a11y-theme-contrast .navbar .nav-link {
  color: #fff !important;
  background: transparent !important;
  border-radius: .25rem;
}

html.a11y-theme-contrast .navbar .nav-link:hover,
html.a11y-theme-contrast .navbar .nav-link:focus {
  color: #000 !important;
  background: #ff0 !important;
}

html.a11y-theme-contrast .navbar .nav-link.active,
html.a11y-theme-contrast .navbar .show > .nav-link {
  color: #ff0 !important;
  background: #404000 !important;
  border-bottom: 2px solid #ff0;
}

html.a11y-theme-contrast .navbar .dropdown-menu {
  background: #202020 !important;
  border: 1px solid #ff0 !important;
}

html.a11y-theme-contrast .navbar .dropdown-item {
  color: #fff !important;
  background: transparent !important;
}

html.a11y-theme-contrast .navbar .dropdown-item:hover,
html.a11y-theme-contrast .navbar .dropdown-item:focus,
html.a11y-theme-contrast .navbar .dropdown-item.active {
  color: #000 !important;
  background: #ff0 !important;
}

html.a11y-theme-contrast .navbar-toggler {
  background: #333 !important;
  border: 1px solid #ff0 !important;
}

html.a11y-theme-contrast .navbar-toggler-icon {
  filter: invert(1);
}
/* ---------- Yellow Theme: Black Background, Yellow Text ---------- */
html.a11y-theme-yellow {
  --bs-body-bg: #000;
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: #ff0;
  --bs-body-color-rgb: 255, 255, 0;
  --bs-emphasis-color: #ff0;
  --bs-secondary-color: #cccc00;
  --bs-tertiary-color: #999900;
  --bs-secondary-bg: #1a1a00;
  --bs-tertiary-bg: #0d0d00;
  --bs-border-color: #ff0;
  --bs-border-color-translucent: rgba(255, 255, 0, .6);
  --bs-link-color: #fff;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color: #ffffcc;
  --bs-light-rgb: 34, 34, 0;
  --bs-dark-rgb: 0, 0, 0;
}

/* ---------- Blacken Page Backgrounds ---------- */
html.a11y-theme-yellow,
html.a11y-theme-yellow body {
  background-color: #000 !important;
  background-image: none !important;
  color: #ff0 !important;
}

/* ---------- Remove Background Images and Gradients ---------- */
html.a11y-theme-yellow body *,
html.a11y-theme-yellow body *::before,
html.a11y-theme-yellow body *::after {
  background-image: none !important;
}

/* ---------- Main Content and Common Containers ---------- */
html.a11y-theme-yellow main,
html.a11y-theme-yellow section,
html.a11y-theme-yellow article,
html.a11y-theme-yellow .container,
html.a11y-theme-yellow .container-fluid,
html.a11y-theme-yellow .row,
html.a11y-theme-yellow .card,
html.a11y-theme-yellow .modal-content,
html.a11y-theme-yellow .dropdown-menu,
html.a11y-theme-yellow .a11y-toolbar {
  background-color: #000 !important;
  color: #ff0 !important;
}

/* ---------- Text ---------- */
html.a11y-theme-yellow body,
html.a11y-theme-yellow p,
html.a11y-theme-yellow span,
html.a11y-theme-yellow label,
html.a11y-theme-yellow li,
html.a11y-theme-yellow td,
html.a11y-theme-yellow th,
html.a11y-theme-yellow h1,
html.a11y-theme-yellow h2,
html.a11y-theme-yellow h3,
html.a11y-theme-yellow h4,
html.a11y-theme-yellow h5,
html.a11y-theme-yellow h6 {
  color: #ff0 !important;
}

/* ---------- Links ---------- */
html.a11y-theme-yellow a {
  color: #fff !important;
  text-decoration: none !important;
}

/* ---------- Bootstrap Buttons ---------- */
html.a11y-theme-yellow .btn {
  background-color: #000 !important;
  color: #ff0 !important;
  border: 1px solid #ff0 !important;
}

/* ---------- Form Controls ---------- */
html.a11y-theme-yellow input,
html.a11y-theme-yellow select,
html.a11y-theme-yellow textarea {
  background-color: #000 !important;
  color: #ff0 !important;
  border: 1px solid #ff0 !important;
}

/* ---------- Tables and DataTables ---------- */
html.a11y-theme-yellow table,
html.a11y-theme-yellow .table,
html.a11y-theme-yellow .dataTable {
  --bs-table-bg: #000;
  --bs-table-color: #ff0;
  --bs-table-border-color: #ff0;
  background-color: #000 !important;
  color: #ff0 !important;
}

html.a11y-theme-yellow th,
html.a11y-theme-yellow td {
  background-color: #000 !important;
  color: #ff0 !important;
  border-color: #ff0 !important;
}

html.a11y-theme-yellow .dt-buttons .dt-button,
html.a11y-theme-yellow .dt-button,
html.a11y-theme-yellow .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #000 !important;
  background-image: none !important;
  color: #ff0 !important;
  border: 1px solid #ff0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.a11y-theme-yellow .dt-buttons .dt-button:hover,
html.a11y-theme-yellow .dt-buttons .dt-button:focus,
html.a11y-theme-yellow .dt-buttons .dt-button:active,
html.a11y-theme-yellow .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html.a11y-theme-yellow .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #ff0 !important;
  background-image: none !important;
  color: #000 !important;
  border-color: #ff0 !important;
}

/* ---------- Disabled Buttons ---------- */
html.a11y-theme-contrast .dt-button.disabled,
html.a11y-theme-yellow .dt-button.disabled {
  background: #222 !important;
  color: #aaa !important;
  border-color: #888 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* ---------- DataTables Length, Search and Info ---------- */
html.a11y-theme-contrast .dataTables_wrapper .dataTables_length,
html.a11y-theme-contrast .dataTables_wrapper .dataTables_filter,
html.a11y-theme-contrast .dataTables_wrapper .dataTables_info,
html.a11y-theme-yellow .dataTables_wrapper .dataTables_length,
html.a11y-theme-yellow .dataTables_wrapper .dataTables_filter,
html.a11y-theme-yellow .dataTables_wrapper .dataTables_info {
  color: inherit !important;
}

html.a11y-theme-contrast .dataTables_wrapper .dataTables_filter input,
html.a11y-theme-contrast .dataTables_wrapper .dataTables_length select,
html.a11y-theme-yellow .dataTables_wrapper .dataTables_filter input,
html.a11y-theme-yellow .dataTables_wrapper .dataTables_length select {
  background: #000 !important;
  color: inherit !important;
  border: 1px solid currentColor !important;
}

/* =====================================================
   NAVBAR: YELLOW THEME
   Black background, yellow text, shaded active items
   ===================================================== */

html.a11y-theme-yellow .navbar {
  background: #202000 !important;
  border-bottom: 2px solid #ff0 !important;
  color: #ff0 !important;
}

html.a11y-theme-yellow .navbar .navbar-brand {
  color: #ff0 !important;
}

html.a11y-theme-yellow .navbar .nav-link {
  color: #ff0 !important;
  background: transparent !important;
  border-radius: .25rem;
}

html.a11y-theme-yellow .navbar .nav-link:hover,
html.a11y-theme-yellow .navbar .nav-link:focus {
  color: #000 !important;
  background: #ff0 !important;
}

html.a11y-theme-yellow .navbar .nav-link.active,
html.a11y-theme-yellow .navbar .show > .nav-link {
  color: #fff !important;
  background: #454500 !important;
  border-bottom: 2px solid #ff0;
}

html.a11y-theme-yellow .navbar .dropdown-menu {
  background: #202000 !important;
  border: 1px solid #ff0 !important;
}

html.a11y-theme-yellow .navbar .dropdown-item {
  color: #ff0 !important;
  background: transparent !important;
}

html.a11y-theme-yellow .navbar .dropdown-item:hover,
html.a11y-theme-yellow .navbar .dropdown-item:focus,
html.a11y-theme-yellow .navbar .dropdown-item.active {
  color: #000 !important;
  background: #ff0 !important;
}

html.a11y-theme-yellow .navbar-toggler {
  background: #333300 !important;
  border: 1px solid #ff0 !important;
}

html.a11y-theme-yellow .navbar-toggler-icon {
  filter: invert(1);
}


/* =====================================================
   NAVBAR: COMMON ICONS AND DISABLED ITEMS
   ===================================================== */

html.a11y-theme-contrast .navbar .nav-link.disabled,
html.a11y-theme-yellow .navbar .nav-link.disabled {
  color: #aaa !important;
  opacity: 1 !important;
}

html.a11y-theme-contrast .navbar .nav-link i,
html.a11y-theme-contrast .navbar .nav-link svg,
html.a11y-theme-yellow .navbar .nav-link i,
html.a11y-theme-yellow .navbar .nav-link svg {
  color: inherit !important;
}

/* ---------- Grayscale: the filter keeps every shade proportional ---------- */
html.a11y-theme-yellow {
  filter: grayscale(100%);
}

html.a11y-theme-bw a {
  text-decoration: none !important;
}

/* ---------- Keep the active toolbar button readable in the high-contrast modes ---------- */
html.a11y-theme-contrast .a11y-btn.active,
html.a11y-theme-yellow .a11y-btn.active {
  background-color: #ff0 !important;
  color: #000 !important;
  border-color: #ff0 !important;
}

/* ---------- Underline links ---------- */
html.a11y-underline a {
  text-decoration: underline !important;
}

/* ---------- Highlight keyboard focus ---------- */
html.a11y-focus :focus {
  outline: 3px solid #ffc107 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px #000 !important;
}


/* Fix navbar stacking when accessibility themes are active */
html.a11y-theme-dark .navbar,
html.a11y-theme-yellow .navbar,
html.a11y-theme-contrast .navbar {
  position: relative;
  z-index: 1030;
}

html.a11y-theme-dark .navbar .dropdown-menu,
html.a11y-theme-yellow .navbar .dropdown-menu,
html.a11y-theme-contrast .navbar .dropdown-menu {
  z-index: 1040;
}