/* ==========================================================================
   Friendly Healthcare Map - Accessibility Enhancements
   ========================================================================== */

/* ---- 定位點 (WCAG 無障礙導盲磚 :::) ---- */
/* 定位點容器需要 position 才能讓 absolute 定位生效 */
main[role="main"] {
  position: relative;
}

/* 定位點預設：低調顯示 */
.a11y-anchor {
  position: absolute;
  left: 0;
  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1;
  color: var(--color-text-light, #718096);
  text-decoration: none;
  z-index: 1;
}

.a11y-anchor-inline {
  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
}

/*
 * ---- Accesskey 區塊聚焦樣式（參考 cam.moe.gov.tw） ----
 * Alt+U / Alt+Z：僅 ::: 定位點變黃色圓形 + 紅虛線，區塊本身無外框
 * Alt+C：內容區塊用黑色實線框住，::: 不變
 * 使用 !important 確保覆蓋 [tabindex]:focus-visible 及 body.keyboard-nav *:focus
 */

/* 所有 accesskey 區塊：清除通用 focus 陰影（不用 transparent 以免蓋掉元素本身背景） */
#U:focus, #U:focus-visible,
#C:focus, #C:focus-visible,
#Z:focus, #Z:focus-visible,
#S:focus, #S:focus-visible,
#homepage-dashboard:focus, #homepage-dashboard:focus-visible,
.admin-panel:focus, .admin-panel:focus-visible {
  box-shadow: none !important;
}

/* Alt+U / Alt+Z：區塊無外框 */
#U:focus, #U:focus-visible,
#Z:focus, #Z:focus-visible {
  outline: none !important;
}

/* Alt+U / Alt+Z / Skip Link：::: 定位點變黃色圓形 + 紅虛線 */
#U:focus > .a11y-anchor,
#Z:focus .a11y-anchor-inline,
.a11y-anchor:focus,
.a11y-anchor:target {
  display: inline-block;
  width: 1.75em;
  height: 1.75em;
  line-height: 1.75em;
  text-align: center;
  font-size: 0.75rem;
  background: #FFDD00 !important;
  color: #333 !important;
  border-radius: 50%;
  border: 2px dashed #E53E3E;
  box-shadow: 0 0 0 2px rgba(255, 221, 0, 0.4) !important;
  vertical-align: middle;
}

/* Alt+C / Alt+S：內容區塊用黑色實線框住，::: 不變 */
#C:focus, #C:focus-visible,
#S:focus, #S:focus-visible,
#homepage-dashboard:focus, #homepage-dashboard:focus-visible,
.admin-panel:focus, .admin-panel:focus-visible {
  outline: 3px solid #333 !important;
  outline-offset: -3px;
}

/* ---- Focus indicators (WCAG 2.4.7 - Focus Visible) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible:not(#U):not(#C):not(#Z):not(#S):not(#homepage-dashboard):not(.admin-panel) {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  background-color: var(--focus-bg-color);
  color: var(--focus-text-color);
  box-shadow: 0 4px 0 0 var(--color-primary);
}

/* Navigation links: ensure yellow focus is visible even on current-page items */
.site-nav__link:focus-visible,
.site-nav__split-main:focus-visible,
.site-nav__split-toggle:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color) !important;
  outline-offset: var(--focus-outline-offset) !important;
  background: var(--focus-bg-color) !important;
  color: var(--focus-text-color) !important;
  box-shadow: 0 4px 0 0 var(--color-primary) !important;
}

/* Remove default outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---- High-contrast mode (Black bg + White text) ---- */
.high-contrast {
  --color-bg:           #000000;
  --color-bg-secondary: #1a1a1a;
  --color-bg-white:     #000000;
  --color-bg-warm:      #1a1a1a;
  --color-text:         #FFFFFF;
  --color-text-light:   #CCCCCC;
  --color-text-inverse: #FFFFFF;
  --color-border:       #FFFFFF;
  --color-border-dark:  #CCCCCC;
  --color-primary:      #4DA6FF;
  --color-primary-dark: #80BFFF;
  --color-primary-light:#003366;
  --color-primary-gradient: linear-gradient(135deg, #4DA6FF 0%, #80BFFF 100%);
  --color-secondary:    #80BFFF;
  --color-accent:       #FFD700;
  --color-link:         #4DA6FF;
  --color-link-hover:   #80BFFF;
  --color-level-A:      #68D391;
  --color-level-A-bg:   #1a2e1a;
  --color-level-B:      #63B3ED;
  --color-level-B-bg:   #1a2330;
  --color-level-C:      #FBD38D;
  --color-level-C-bg:   #2e2a1a;
  --color-level-D:      #FEB2B2;
  --color-level-D-bg:   #2e1a1a;
}

/* ---- Yellow-on-Black theme (for cataracts / macular degeneration) ---- */
.theme-yellow-black {
  --color-bg:           #1a1400;
  --color-bg-secondary: #2e2500;
  --color-bg-white:     #1a1400;
  --color-bg-warm:      #2e2500;
  --color-text:         #FFD700;
  --color-text-light:   #CCAA00;
  --color-text-inverse: #1a1400;
  --color-border:       #FFD700;
  --color-border-dark:  #CCAA00;
  --color-primary:      #FFD700;
  --color-primary-dark: #FFE44D;
  --color-primary-light:#3d3200;
  --color-primary-gradient: linear-gradient(135deg, #FFD700 0%, #FFE44D 100%);
  --color-secondary:    #FFE44D;
  --color-accent:       #FFA500;
  --color-link:         #FFD700;
  --color-link-hover:   #FFE44D;
  --color-level-A:      #98FB98;
  --color-level-A-bg:   #1a2e1a;
  --color-level-B:      #87CEEB;
  --color-level-B-bg:   #1a2330;
  --color-level-C:      #FFD700;
  --color-level-C-bg:   #2e2a1a;
  --color-level-D:      #FFA07A;
  --color-level-D-bg:   #2e1a1a;
}

.theme-yellow-black .site-header {
  background: #2e2500;
  border-bottom-color: #FFD700;
}

.theme-yellow-black .btn-primary {
  background: #FFD700 !important;
  color: #1a1400 !important;
  border-color: #FFD700 !important;
}

.theme-yellow-black .btn-primary:hover {
  background: #FFE44D !important;
}

/* ---- Colorblind-friendly theme (avoids red-green contrast) ---- */
.theme-colorblind {
  --color-primary:      #0072B2;   /* Blue */
  --color-primary-dark: #005A8D;
  --color-primary-light:#E0F0FF;
  --color-primary-gradient: linear-gradient(135deg, #005A8D 0%, #145080 100%);
  --color-secondary:    #56B4E9;   /* Light blue */
  --color-accent:       #E69F00;   /* Orange */
  --color-accent-light: #FFF4E0;
  --color-success:      #0072B2;   /* Blue instead of green */
  --color-warning:      #E69F00;   /* Orange */
  --color-orange:       #E69F00;
  --color-danger:       #D55E00;   /* Vermillion instead of red */
  --color-info:         #56B4E9;
  --color-level-A:      #0072B2;   /* Blue */
  --color-level-A-bg:   #E0F0FF;
  --color-level-B:      #56B4E9;   /* Sky blue */
  --color-level-B-bg:   #E8F4FD;
  --color-level-C:      #E69F00;   /* Orange */
  --color-level-C-bg:   #FFF8E0;
  --color-level-D:      #D55E00;   /* Vermillion */
  --color-level-D-bg:   #FFEDE0;
  --color-link:         #0072B2;
  --color-link-hover:   #005A8D;
}

.high-contrast .site-header {
  background: #000000;
  border-bottom: 2px solid #FFFFFF;
}

.high-contrast .site-nav__link:hover {
  background: var(--focus-bg-color);
  color: var(--focus-text-color);
}

.high-contrast .site-nav__link:focus:not(:focus-visible) {
  background: transparent;
}

.high-contrast .result-card {
  border-color: #FFFFFF;
}

.high-contrast .result-card:hover,
.high-contrast .result-card:focus-within {
  border-color: var(--color-primary);
  background: #1a1a1a;
}

.high-contrast .result-card__phone a {
  color: #FFFF00;
}

.high-contrast .result-card__btn--detail {
  background: #FFFF00;
  color: #000;
  border-color: #FFFF00;
}

.high-contrast .result-card__btn--nav {
  background: #000;
  color: #FFFF00;
  border-color: #FFFF00;
}

.high-contrast .form-input,
.high-contrast .form-select {
  background: #1a1a1a;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.high-contrast .accessibility-feature {
  background: #1a1a1a;
  border: 1px solid #555;
}

.high-contrast .notification-toast {
  background: #1a1a1a;
  color: #FFFFFF;
}

.high-contrast #legend-panel {
  background: #000000;
  border: 2px solid #FFFFFF;
}

.high-contrast .leaflet-popup-content-wrapper {
  background: #000000;
  color: #FFFFFF;
}

.high-contrast .leaflet-popup-tip {
  background: #000000;
}

.high-contrast a {
  color: #4DA6FF;
}

.high-contrast .btn-primary {
  background: #4DA6FF;
  color: #000000;
  border-color: #4DA6FF;
}

.high-contrast .btn-secondary {
  color: #4DA6FF;
  border-color: #4DA6FF;
}

.high-contrast .measure-tooltip {
  background: #FFD700;
  color: #000000;
  border: 2px solid #FFFFFF;
}
.high-contrast .measure-tooltip::before {
  border-top-color: #FFD700;
}

/* ---- Font size 3-level switching (參考 cam.moe.gov.tw) ----
 * 標準(M) = 預設 1rem, 加大(L) = 1.125rem, 特大(XL) = 1.25rem
 * 使用 data-font attribute on <html>
 * 向下相容：.large-text 映射到 XL */
[data-font="L"] {
  --font-size-xs:   0.875rem;   /* 14px */
  --font-size-sm:   1rem;       /* 16px */
  --font-size-base: 1.125rem;   /* 18px */
  --font-size-md:   1.25rem;    /* 20px */
  --font-size-lg:   1.375rem;   /* 22px */
  --font-size-xl:   1.625rem;   /* 26px */
  --font-size-2xl:  2.125rem;   /* 34px */
  --font-size-3xl:  2.625rem;   /* 42px */
}

[data-font="XL"],
.large-text {
  --font-size-xs:   0.9375rem;  /* 15px */
  --font-size-sm:   1.0625rem;  /* 17px */
  --font-size-base: 1.25rem;    /* 20px */
  --font-size-md:   1.375rem;   /* 22px */
  --font-size-lg:   1.5rem;     /* 24px */
  --font-size-xl:   1.75rem;    /* 28px */
  --font-size-2xl:  2.375rem;   /* 38px */
  --font-size-3xl:  3rem;       /* 48px */
}

[data-font="L"] .site-header,
[data-font="XL"] .site-header,
.large-text .site-header {
  height: 72px;
}

[data-font="L"] #map,
[data-font="XL"] #map,
.large-text #map {
  height: calc(100vh - 72px);
  margin-top: 72px;
}

[data-font="L"] #search-panel,
[data-font="XL"] #search-panel,
.large-text #search-panel {
  top: 72px;
  height: calc(100vh - 72px);
}

[data-font="L"] #facility-detail-panel,
[data-font="XL"] #facility-detail-panel,
.large-text #facility-detail-panel {
  top: 72px;
  height: calc(100vh - 72px);
}

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

  #search-panel,
  #facility-detail-panel {
    transition: none;
  }

  .notification-toast {
    animation: none;
  }
}

/* ---- Keyboard navigation indicator ---- */
body.keyboard-nav *:focus:not(#U):not(#C):not(#Z):not(#S):not(#homepage-dashboard):not(.admin-panel) {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  background-color: var(--focus-bg-color);
  color: var(--focus-text-color);
}

/* ---- ARIA live region ---- */
.aria-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Accessibility toolbar ---- */
.a11y-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  position: relative;
}

.a11y-toolbar .btn-icon {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  min-width: 36px;
  min-height: 36px;
}

.a11y-toolbar .btn-icon:hover {
  background: var(--focus-bg-color);
  color: var(--focus-text-color);
}

.a11y-toolbar .btn-icon[aria-pressed="true"] {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* Aa toggle button */
.a11y-settings-toggle {
  font-size: 1.125rem !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 0.25rem 0.5rem;
}

/* ---- 樣式設定下拉面板 (Style Settings Panel) ---- */
.a11y-settings-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  min-width: 200px;
  background: var(--color-bg-white, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--border-radius-md, 8px);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
}

.a11y-settings-panel.is-open {
  display: block;
}

.a11y-settings-panel__group {
  margin-bottom: var(--space-md);
}

.a11y-settings-panel__group:last-child {
  margin-bottom: 0;
}

.a11y-settings-panel__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-light, #616E7C);
  margin-bottom: var(--space-xs);
}

.a11y-settings-panel__buttons {
  display: flex;
  gap: 2px;
}

.a11y-settings-panel__buttons button {
  flex: 1;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-bg-white, #fff);
  color: var(--color-text, #2D3748);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.a11y-settings-panel__buttons button:first-child {
  border-radius: var(--border-radius-sm, 4px) 0 0 var(--border-radius-sm, 4px);
}

.a11y-settings-panel__buttons button:last-child {
  border-radius: 0 var(--border-radius-sm, 4px) var(--border-radius-sm, 4px) 0;
}

.a11y-settings-panel__buttons button.is-active {
  background: var(--color-primary-dark, #065450);
  color: #fff;
  border-color: var(--color-primary-dark, #065450);
}

.a11y-settings-panel__buttons button:hover:not(.is-active) {
  background: var(--color-primary-light, #E6F7F6);
}

/* Theme preview swatches */
.a11y-settings-panel__buttons button .swatch {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  border: 1px solid var(--color-border, #ccc);
  vertical-align: middle;
  margin-right: 0.25em;
}

/* High-contrast overrides for settings panel */
.high-contrast .a11y-settings-panel,
.theme-yellow-black .a11y-settings-panel {
  background: var(--color-bg, #000);
  border-color: var(--color-border, #fff);
}

.high-contrast .a11y-settings-panel__buttons button,
.theme-yellow-black .a11y-settings-panel__buttons button {
  background: var(--color-bg-secondary, #1a1a1a);
  color: var(--color-text, #fff);
  border-color: var(--color-border, #555);
}

.high-contrast .a11y-settings-panel__buttons button.is-active,
.theme-yellow-black .a11y-settings-panel__buttons button.is-active {
  background: var(--color-primary, #4DA6FF);
  color: #000;
}

/* ---- Language switcher (native select) ---- */
#lang-select {
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--border-radius-sm, 4px);
  background: var(--color-bg-white, #fff);
  color: var(--color-text, #2D3748);
  cursor: pointer;
  min-height: 36px;
  font-family: var(--font-family);
  background-image: none;
  padding-right: 8px;
}

/* ---- High-contrast: Dashboard ---- */
.high-contrast .homepage-dashboard {
  background: #000000;
  color: #FFFFFF;
}

.high-contrast .dashboard-tab {
  color: #CCCCCC;
  border-color: #555;
}

.high-contrast .dashboard-tab.is-active {
  color: #FFFFFF;
  border-color: #4DA6FF;
  background: #1a1a1a;
}

.high-contrast .stat-card {
  background: #1a1a1a;
  border: 1px solid #555;
}

.high-contrast .facility-card {
  background: #1a1a1a;
  border: 1px solid #555;
  color: #FFFFFF;
}

.high-contrast .facility-card:hover,
.high-contrast .facility-card:focus {
  border-color: #4DA6FF;
}

.high-contrast .needs-card {
  background: #1a1a1a;
  border: 1px solid #555;
  color: #FFFFFF;
}

.high-contrast .needs-card:hover,
.high-contrast .needs-card:focus {
  border-color: #4DA6FF;
}

.high-contrast .grade-badge {
  border: 1px solid #FFFFFF;
}

.high-contrast .match-bar {
  background: #333;
}

.high-contrast .prefs-modal-overlay {
  background: rgba(0, 0, 0, 0.75);
}

.high-contrast .prefs-modal {
  background: #1a1a1a;
  border: 2px solid #4DA6FF;
  color: #FFFFFF;
}

.high-contrast .prefs-modal__header,
.high-contrast .prefs-modal__actions {
  border-color: #555;
}

.high-contrast .prefs-modal__close {
  color: #CCCCCC;
}

.high-contrast .prefs-modal__close:hover {
  color: #FFFFFF;
}

.high-contrast .prefs-modal__group-title {
  border-color: #555;
  color: #4DA6FF;
}

.high-contrast .prefs-modal__item {
  color: #FFFFFF;
}

.high-contrast .detail-grade-hero {
  border-color: #4DA6FF !important;
}

/* ---- Large text / data-font: Dashboard ---- */
[data-font="L"] .homepage-dashboard,
[data-font="XL"] .homepage-dashboard,
.large-text .homepage-dashboard {
  top: 72px;
}

/* ---- High-contrast: Hero ---- */
.high-contrast .dashboard-hero {
  background: #000000;
  border-bottom: 2px solid #4DA6FF;
}

.high-contrast .dashboard-hero::after {
  background: #000000;
}

.high-contrast .dashboard-hero__watermark,
.theme-yellow-black .dashboard-hero__watermark {
  opacity: 0;
}

.high-contrast .dashboard-hero__search .form-input {
  background: #1a1a1a;
  color: #FFFFFF;
  border: 2px solid #4DA6FF;
}

.high-contrast .dashboard-hero__search .btn {
  background: #FFD700;
  color: #000000;
}

/* ---- High-contrast: About / Download / Login / 404 pages ---- */
.high-contrast .about-hero,
.high-contrast .download-hero {
  background: #000000;
  border: 2px solid #4DA6FF;
}

.high-contrast .about-hero::after,
.high-contrast .download-hero::after {
  background: transparent;
}

.high-contrast .feature-item,
.high-contrast .download-card {
  background: #1a1a1a;
  border-color: #555;
  color: #FFFFFF;
}

.high-contrast .feature-item:hover,
.high-contrast .download-card:hover {
  border-color: #4DA6FF;
}

.high-contrast .login-page {
  background: #000000;
}

.high-contrast .login-card {
  background: #1a1a1a;
  color: #FFFFFF;
  border: 2px solid #4DA6FF;
}

.high-contrast .error-page__code {
  -webkit-text-fill-color: #4DA6FF;
}

.high-contrast .contact-info {
  background: #1a1a1a;
  border-color: #555;
}

.high-contrast .api-section {
  background: #1a1a1a;
  border-color: #555;
}

.high-contrast .api-endpoint {
  background: #000000;
  border-color: #555;
  color: #4DA6FF;
}

.high-contrast .empty-state__text {
  color: #FFFFFF;
}

/* ---- High-contrast: Questionnaire page ---- */
.high-contrast .q-hero {
  background: #000000;
  border: 2px solid #4DA6FF;
}

.high-contrast .wizard-card {
  background: #1a1a1a;
  border-color: #555;
  color: #FFFFFF;
}

.high-contrast .wizard-progress__dot {
  background: #333;
  border-color: #555;
  color: #CCC;
}

.high-contrast .wizard-progress__dot.is-active {
  background: #4DA6FF;
  border-color: #4DA6FF;
  color: #000;
}

.high-contrast .wizard-progress__dot.is-done {
  background: #1a1a1a;
  border-color: #4DA6FF;
  color: #4DA6FF;
}

.high-contrast .option-card {
  background: #333;
  border-color: #555;
  color: #FFFFFF;
}

.high-contrast .option-card:hover {
  background: var(--focus-bg-color);
  color: var(--focus-text-color);
}

.high-contrast .option-card.is-selected {
  border-color: #FF6B6B;
  background: #1a3a5c;
}

.high-contrast .wizard-textarea,
.high-contrast .wizard-card .form-input {
  background: #1a1a1a;
  color: #FFFFFF;
  border-color: #555;
}

.high-contrast .preview-card {
  background: #1a1a1a;
  border-color: #4DA6FF;
  color: #FFFFFF;
}

.high-contrast .preview-header {
  background: #000 !important;
  border-bottom: 2px solid #4DA6FF;
}

.high-contrast .preview-tag {
  background: #333 !important;
  color: #FFFFFF !important;
  border: 1px solid #4DA6FF;
}

.high-contrast .preview-note {
  background: #333;
  border-color: #4DA6FF;
  color: #FFFFFF;
}

.high-contrast .preview-footer {
  background: #000 !important;
  color: #CCC;
}

.high-contrast .save-indicator {
  background: #333;
  color: #CCC;
}

/* ---- High-contrast: Resources page ---- */
.high-contrast .resources-hero {
  background: #000000;
  border: 2px solid #4DA6FF;
}

.high-contrast .resource-card {
  background: #1a1a1a;
  border-color: #555;
  color: #FFFFFF;
}

.high-contrast .resource-card:hover {
  border-color: #4DA6FF;
}

.high-contrast .resource-card__link {
  color: #4DA6FF;
}

.high-contrast .hotline-banner {
  background: #1a1a1a;
  border-color: #4DA6FF;
  color: #FFFFFF;
}

.high-contrast .skeleton {
  background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
  background-size: 200% 100%;
}

/* ---- High-contrast: Admin Panel ---- */
.high-contrast .admin-panel {
  background: #000000;
  color: #FFFFFF;
}

.high-contrast .admin-panel__header {
  border-bottom-color: #4DA6FF;
}

.high-contrast .admin-sidebar {
  background: #111111;
  border-right-color: #4DA6FF;
}

.high-contrast .admin-sidebar__group-title {
  color: #4DA6FF;
}

.high-contrast .admin-sidebar__item {
  color: #CCCCCC;
}

.high-contrast .admin-sidebar__item:hover {
  background: var(--focus-bg-color) !important;
  color: var(--focus-text-color) !important;
}

.high-contrast .admin-sidebar__item.is-active {
  background: #4DA6FF;
  color: #000000;
}

.high-contrast .admin-content {
  background: #000000;
  color: #FFFFFF;
}

.high-contrast .admin-content__header {
  border-bottom-color: #555;
}

.high-contrast .admin-stat-card {
  background: #1a1a1a;
  border-color: #555;
  color: #FFFFFF;
}

.high-contrast .admin-stat-card__label {
  color: #CCCCCC;
}

.high-contrast .admin-table th {
  background: #1a1a1a;
  color: #FFFFFF;
  border-bottom-color: #555;
}

.high-contrast .admin-table td {
  border-bottom-color: #333;
  color: #FFFFFF;
}

.high-contrast .admin-table tr:hover {
  background: #1a3a5c;
}

.high-contrast .admin-filter-input,
.high-contrast .admin-filter-select {
  background: #1a1a1a;
  color: #FFFFFF;
  border-color: #555;
}

.high-contrast .admin-func-btn {
  background: #1a1a1a;
  color: #FFFFFF;
  border-color: #555;
}

.high-contrast .admin-func-btn:hover {
  background: #4DA6FF;
  color: #000000;
  border-color: #4DA6FF;
}

.high-contrast .admin-action-btn {
  background: #1a1a1a;
  color: #FFFFFF;
  border-color: #555;
}

.high-contrast .admin-pagination button {
  background: #1a1a1a;
  color: #FFFFFF;
  border-color: #555;
}

.high-contrast .admin-pagination button.is-active {
  background: #4DA6FF;
  color: #000000;
}

.high-contrast .admin-upload-area {
  border-color: #555;
  color: #CCCCCC;
}

.high-contrast .admin-upload-area:hover,
.high-contrast .admin-upload-area.dragging {
  border-color: #4DA6FF;
  background: #1a3a5c;
}

.high-contrast .admin-form input,
.high-contrast .admin-form select,
.high-contrast .admin-form textarea {
  background: #1a1a1a;
  color: #FFFFFF;
  border-color: #555;
}

.high-contrast .admin-form label {
  color: #CCCCCC;
}

.high-contrast .admin-loading {
  color: #CCCCCC;
}

.high-contrast .review-dialog {
  background: #1a1a1a;
  color: #FFFFFF;
  border: 2px solid #4DA6FF;
}

.high-contrast .review-dialog textarea {
  background: #000000;
  color: #FFFFFF;
  border-color: #555;
}

/*
 * Override inline styles in admin content area.
 * adminPanel.js uses many hardcoded colors (background:#F0FFF4, color:#4A5568
 * etc.) that become invisible in high-contrast mode. The !important rules
 * below force readable colours regardless of inline styles.
 */
.high-contrast .admin-content h4 {
  color: #4DA6FF !important;
}

.high-contrast .admin-content p {
  color: #CCCCCC !important;
}

.high-contrast .admin-content td {
  color: #FFFFFF !important;
}

.high-contrast .admin-content label {
  color: #CCCCCC !important;
}

.high-contrast .admin-content summary {
  color: #4DA6FF !important;
}

.high-contrast .admin-content pre {
  background: #111 !important;
  color: #FFFFFF !important;
  border-color: #555 !important;
}

/* Section card containers with inline background colours */
.high-contrast .admin-content > div[style],
.high-contrast .admin-content > div > div[style] {
  background: #1a1a1a !important;
  border-color: #555 !important;
  color: #FFFFFF !important;
}

/* Deeper nested panels (details, config boxes) */
.high-contrast .admin-content div[style*="background"] {
  background: #1a1a1a !important;
  border-color: #555 !important;
}

/* Table header row with inline bg */
.high-contrast .admin-content tr[style*="background"] {
  background: #1a1a1a !important;
}

.high-contrast .admin-content th[style] {
  background: #1a1a1a !important;
  color: #FFFFFF !important;
}

/* Status text colours — keep semantic but brighter */
.high-contrast .admin-content span[style*="color:#38A169"],
.high-contrast .admin-content span[style*="color:#38B2AC"],
.high-contrast .admin-content p[style*="color:#38A169"],
.high-contrast .admin-content p[style*="color:#38B2AC"] {
  color: #68D391 !important;
}

.high-contrast .admin-content span[style*="color:#E53E3E"],
.high-contrast .admin-content p[style*="color:#E53E3E"],
.high-contrast .admin-content div[style*="color:#E53E3E"] {
  color: #FEB2B2 !important;
}

.high-contrast .admin-content span[style*="color:#D69E2E"],
.high-contrast .admin-content p[style*="color:#D69E2E"] {
  color: #FBD38D !important;
}

.high-contrast .admin-content span[style*="color:#ED8936"],
.high-contrast .admin-content p[style*="color:#ED8936"] {
  color: #FBD38D !important;
}

.high-contrast .admin-content span[style*="color:#718096"],
.high-contrast .admin-content p[style*="color:#718096"],
.high-contrast .admin-content span[style*="color:#A0AEC0"],
.high-contrast .admin-content p[style*="color:#A0AEC0"],
.high-contrast .admin-content p[style*="color:#4A5568"],
.high-contrast .admin-content span[style*="color:#4A5568"] {
  color: #CCCCCC !important;
}

.high-contrast .admin-content a[style*="color:#3182CE"],
.high-contrast .admin-content span[style*="color:#3182CE"],
.high-contrast .admin-content summary[style*="color:#3182CE"] {
  color: #4DA6FF !important;
}

.high-contrast .admin-content span[style*="color:#F5A623"] {
  color: #FBD38D !important;
}

/* Form inputs inside admin panels */
.high-contrast .admin-content input[style],
.high-contrast .admin-content select[style],
.high-contrast .admin-content textarea[style] {
  background: #1a1a1a !important;
  color: #FFFFFF !important;
  border-color: #555 !important;
}

/* Inline-styled buttons with coloured backgrounds */
.high-contrast .admin-content button[style*="background:#38A169"] {
  background: #276749 !important;
  color: #FFFFFF !important;
  border-color: #68D391 !important;
}

.high-contrast .admin-content button[style*="background:#E53E3E"] {
  background: #9B2C2C !important;
  color: #FFFFFF !important;
  border-color: #FEB2B2 !important;
}

.high-contrast .admin-content button[style*="background:#EDF2F7"],
.high-contrast .admin-content button[style*="background:#F7FAFC"] {
  background: #1a1a1a !important;
  color: #FFFFFF !important;
  border-color: #555 !important;
}

/* Toggle switch track */
.high-contrast .admin-content button[style*="background:#CBD5E0"],
.high-contrast .admin-content button[style*="background:#ccc"],
.high-contrast .admin-content button[style*="background: #CBD5E0"] {
  background: #333 !important;
}

.high-contrast .admin-content button[style*="background:#48BB78"],
.high-contrast .admin-content button[style*="background: #48BB78"] {
  background: #276749 !important;
}

/* Progress bars — track dark, fill bright */
.high-contrast .admin-content div[style*="background:#e0e0e0"],
.high-contrast .admin-content div[style*="background: #e0e0e0"] {
  background: #333 !important;
}

.high-contrast .admin-content div[style*="background:#1976D2"] {
  background: #4DA6FF !important;
}

/* Toggle switch spans — keep semantic colours visible */
.high-contrast .admin-content span[style*="background:#38A169"],
.high-contrast .admin-content span[style*="background:#38B2AC"],
.high-contrast .admin-content span[style*="background: #38B2AC"] {
  background: #276749 !important;
}

.high-contrast .admin-content span[style*="background:#CBD5E0"],
.high-contrast .admin-content span[style*="background:#ccc"],
.high-contrast .admin-content span[style*="background: #ccc"] {
  background: #444 !important;
}

.high-contrast .admin-content span[style*="background:#fff"],
.high-contrast .admin-content span[style*="background: #fff"] {
  background: #FFFFFF !important;
}

/* Maintenance mode badges */
.high-contrast .admin-content span[style*="background:#d32f2f"] {
  background: #9B2C2C !important;
  color: #FFFFFF !important;
}

.high-contrast .admin-content span[style*="background:#4caf50"] {
  background: #276749 !important;
  color: #FFFFFF !important;
}

/* Muted text with #999, #666, #aaa */
.high-contrast .admin-content p[style*="color:#999"],
.high-contrast .admin-content span[style*="color:#999"],
.high-contrast .admin-content div[style*="color:#999"] {
  color: #CCCCCC !important;
}

.high-contrast .admin-content p[style*="color:#666"],
.high-contrast .admin-content span[style*="color:#666"],
.high-contrast .admin-content label[style*="color:#666"],
.high-contrast .admin-content div[style*="color:#666"] {
  color: #CCCCCC !important;
}

.high-contrast .admin-content span[style*="color:#aaa"],
.high-contrast .admin-content td[style*="color:#aaa"] {
  color: #999 !important;
}

/* Collapsible button backgrounds */
.high-contrast .admin-content button[style*="background:#F7FAFC"],
.high-contrast .admin-content button[style*="background: #F7FAFC"] {
  background: #1a1a1a !important;
  color: #FFFFFF !important;
  border-color: #555 !important;
}

/* Admin card utility classes — high contrast overrides */
.high-contrast .admin-card,
.high-contrast .admin-card--success,
.high-contrast .admin-card--info,
.high-contrast .admin-card--neutral,
.high-contrast .admin-card--result,
.high-contrast .admin-card--preview,
.high-contrast .admin-card--config {
  background: #1a1a1a !important;
  border-color: #555 !important;
  color: #FFFFFF;
}

.high-contrast .admin-text-success { color: #68D391 !important; }
.high-contrast .admin-text-danger { color: #FEB2B2 !important; }
.high-contrast .admin-text-warning { color: #FBD38D !important; }
.high-contrast .admin-text-muted { color: #CCCCCC !important; }
.high-contrast .admin-text-link { color: #4DA6FF !important; }

/* ---- Forced colors (Windows High Contrast Mode) ---- */
@media (forced-colors: active) {
  .legend-dot {
    forced-color-adjust: none;
  }

  .result-card__level-dot {
    forced-color-adjust: none;
  }

  .btn {
    border: 2px solid ButtonText;
  }

  .form-input,
  .form-select {
    border: 2px solid ButtonText;
  }
}

/* ---- Print styles ---- */
@media print {
  .site-header,
  .site-footer,
  #search-panel,
  #legend-panel,
  #search-toggle-btn,
  .a11y-toolbar,
  .notification-container {
    display: none !important;
  }

  #map {
    margin-top: 0;
    height: 100vh;
  }

  #facility-detail-panel {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    box-shadow: none;
  }
}

/* ---- 400% zoom: compact a11y settings panel ---- */
@media (max-width: 767px) {
  .a11y-settings-toggle {
    font-size: 0.5rem !important;
    padding: 0 2px !important;
  }

  .a11y-settings-panel {
    min-width: 0;
    width: max-content;
    max-width: 60vw;
    padding: 4px;
    font-size: clamp(0.5rem, 2.5vw, 0.8125rem);
  }

  .a11y-settings-panel__label {
    font-size: clamp(0.4375rem, 2vw, 0.75rem);
    margin-bottom: 2px;
  }

  .a11y-settings-panel__group {
    margin-bottom: 4px;
  }

  .a11y-settings-panel__buttons {
    gap: 1px;
  }

  .a11y-settings-panel__buttons button {
    padding: 2px 4px;
    font-size: clamp(0.4375rem, 2vw, 0.75rem);
  }

  .a11y-settings-panel__buttons button .swatch {
    width: 0.75em;
    height: 0.75em;
  }

  /* 400%: 定位點完全 sr-only（含 focus），避免與 logo 重疊 */
  .a11y-anchor,
  .a11y-anchor-inline,
  .a11y-anchor:focus,
  .a11y-anchor:target,
  #U:focus > .a11y-anchor,
  #Z:focus .a11y-anchor-inline {
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    position: absolute !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}