/* ── Accessibility panel ── */

.accessibility-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1050;
  width: 280px;
  background: var(--sis-white);
  border: 1px solid var(--sis-border);
  border-radius: .75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 1rem;
  display: none;
  font-size: .82rem;
}
.accessibility-panel.show {
  display: block;
}
.accessibility-panel h6 {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sis-muted);
  margin: 0 0 .25rem 0;
}
.accessibility-panel .palette-options {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .75rem;
}
.accessibility-panel .palette-dot {
  width: auto;
  height: auto;
  border-radius: .375rem;
  cursor: pointer;
  border: 2px solid var(--sis-border);
  background: var(--sis-bg-subtle);
  padding: .35rem .6rem;
  font-size: .72rem;
  font-weight: 500;
  text-align: left;
  transition: border-color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: inherit;
}
.accessibility-panel .palette-dot::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.accessibility-panel .palette-dot.active {
  border-color: var(--sis-accent);
  background: #eff6ff;
}
.palette-dot.p-normal::before { background: #3b82f6; }
.palette-dot.p-deuteranopia::before { background: #3b82f6; box-shadow: inset 0 0 0 3px #f59e0b; }
.palette-dot.p-protanopia::before { background: #3b82f6; box-shadow: inset 0 0 0 3px #ef4444; }
.palette-dot.p-tritanopia::before { background: #3b82f6; box-shadow: inset 0 0 0 3px #22c55e; }
.palette-dot.p-highcontrast::before { background: #000; border: 1px solid #999; }
.palette-dot.p-monochrome::before { background: linear-gradient(135deg, #333 50%, #999 50%); }
.palette-dot.p-custom::before { 
    background: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
}

#customPaletteColors {
    border-top: 1px solid var(--sis-border-light);
    padding-top: .5rem;
    margin-bottom: .5rem;
}
.custom-color-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.custom-color-row label {
    font-size: .68rem;
    font-weight: 500;
    color: var(--sis-muted);
    margin: 0;
    min-width: 3em;
}
.custom-color-row input[type="color"] {
    width: 32px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--sis-border);
    border-radius: 4px;
    cursor: pointer;
    background: none;
}

.accessibility-panel .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
  gap: .5rem;
}
.accessibility-panel .setting-row label {
  font-size: .78rem;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
}

/* ── Color palette themes ── */
/* Normal (default) — no changes */

/* Deuteranopia (red-green, common) — shift red→blue, green→orange */
html.body-deuteranopia {
  --sis-danger: #1e40af;
  --sis-danger-bg: #eff6ff;
  --sis-danger-border: #bfdbfe;
  --sis-danger-text: #1e3a8a;
  --sis-success: #d97706;
  --sis-success-bg: #fffbeb;
  --sis-success-border: #fde68a;
  --sis-success-text: #92400e;
}
html.body-deuteranopia .text-danger { color: #1e40af !important; }
html.body-deuteranopia .text-success { color: #d97706 !important; }
html.body-deuteranopia .bg-danger { background-color: #1e40af !important; }
html.body-deuteranopia .bg-success { background-color: #d97706 !important; }
html.body-deuteranopia .dot-red { background-color: #1e40af !important; }
html.body-deuteranopia .dot-green { background-color: #d97706 !important; }

/* Protanopia (red-blind) — shift red→blue, green→cyan */
html.body-protanopia {
  --sis-danger: #2563eb;
  --sis-danger-bg: #eff6ff;
  --sis-danger-border: #bfdbfe;
  --sis-danger-text: #1e40af;
  --sis-success: #0891b2;
  --sis-success-bg: #ecfeff;
  --sis-success-border: #a5f3fc;
  --sis-success-text: #155e75;
}
html.body-protanopia .text-danger { color: #2563eb !important; }
html.body-protanopia .text-success { color: #0891b2 !important; }
html.body-protanopia .bg-danger { background-color: #2563eb !important; }
html.body-protanopia .bg-success { background-color: #0891b2 !important; }
html.body-protanopia .dot-red { background-color: #2563eb !important; }
html.body-protanopia .dot-green { background-color: #0891b2 !important; }

/* Tritanopia (blue-yellow) — shift blue→teal, yellow→pink */
html.body-tritanopia {
  --sis-accent: #0d9488;
  --sis-accent-dark: #0f766e;
  --sis-warning: #db2777;
  --sis-warning-bg: #fdf2f8;
  --sis-warning-border: #fbcfe8;
  --sis-warning-text: #9d174d;
}
html.body-tritanopia .text-warning { color: #db2777 !important; }
html.body-tritanopia .bg-warning { background-color: #db2777 !important; }
html.body-tritanopia .btn-primary { background-color: #0d9488 !important; border-color: #0d9488 !important; }

/* High Contrast */
html.body-highcontrast {
  --sis-dark: #000;
  --sis-border: #000;
  --sis-muted: #000;
  --sis-bg-light: #fff;
  --sis-bg-subtle: #fff;
  --sis-white: #fff;
  --sis-gray: #000;
}
html.body-highcontrast * { border-color: #000 !important; }
html.body-highcontrast .text-muted { color: #000 !important; }
html.body-highcontrast .text-success { color: #000 !important; font-weight: 700; }
html.body-highcontrast .text-danger { color: #000 !important; font-weight: 700; text-decoration: underline; }
html.body-highcontrast .text-warning { color: #000 !important; font-weight: 700; }

/* Monochrome — grayscale via variables + media filter. Deliberately avoids an
   ancestor `filter`, which would turn the element into a containing block for
   fixed-position descendants (Bootstrap modals/toasts) and misposition them. */
html.body-monochrome {
  --sis-dark: #2b2b2b;
  --sis-dark-hover: #3f3f3f;
  --sis-accent: #4b5563;
  --sis-accent-dark: #374151;
  --sis-border: #c9c9c9;
  --sis-border-light: #e3e3e3;
  --sis-muted: #6e6e6e;
  --sis-gray: #969696;
  --sis-heading: #1f1f1f;
  --sis-title: #111111;
  --sis-bg-light: #f7f7f7;
  --sis-bg-subtle: #fafafa;
  --sis-white: #ffffff;
  --sis-danger: #555555;
  --sis-danger-bg: #ececec;
  --sis-danger-border: #d4d4d4;
  --sis-danger-text: #1f1f1f;
  --sis-warning: #7a7a7a;
  --sis-warning-bg: #f2f2f2;
  --sis-warning-border: #dcdcdc;
  --sis-warning-text: #333333;
  --sis-success: #6b6b6b;
  --sis-success-bg: #f0f0f0;
  --sis-success-border: #d9d9d9;
  --sis-success-text: #2a2a2a;
  --sis-info-bg: #f0f0f0;
  --sis-info-border: #d9d9d9;
  --sis-body-bg: #f5f5f5;
  --sis-header-bg: #ececec;
  --sis-card-bg: #ffffff;
  --sis-section-alt-bg: #efefef;
}
html.body-monochrome img,
html.body-monochrome video,
html.body-monochrome canvas,
html.body-monochrome svg {
  filter: grayscale(100%);
}
html.body-monochrome .text-danger,
html.body-monochrome .text-success,
html.body-monochrome .text-warning,
html.body-monochrome .text-primary,
html.body-monochrome .text-info {
  color: #333333 !important;
}
html.body-monochrome .bg-danger,
html.body-monochrome .bg-success,
html.body-monochrome .bg-warning,
html.body-monochrome .bg-primary,
html.body-monochrome .bg-info {
  background-color: #666666 !important;
}

/* ── Bold text toggle ── */
body.a11y-bold { font-weight: 600; }
body.a11y-bold h1, body.a11y-bold h2, body.a11y-bold h3,
body.a11y-bold h4, body.a11y-bold h5, body.a11y-bold h6 { font-weight: 700; }
body.a11y-bold .fw-semibold { font-weight: 700 !important; }
body.a11y-bold .fw-normal { font-weight: 600 !important; }
body.a11y-bold b, body.a11y-bold strong,
body.a11y-bold th, body.a11y-bold .btn, body.a11y-bold .badge { font-weight: 700; }

/* ── 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;
  }
}