#sidebar {
  width: 450px;
}

.panel-heading{
   width: 450px;
}
.panel-body{
  width: 450px;
  margin-bottom: 15px;
}
.feature-row {
  cursor: pointer;
  width: 450px;
}

/* Query widget */
#btnRunQuery {
  position: absolute;
  margin-top: 10px;
  margin-left: 305px;
  z-index: 1001;
}

.pagination, .dataTables_info {
  font-size: 0.625rem;
}

/* Shift the Data Tables Search box to the left to fit the narrow sidebar */
#tblQueryResults_filter {
  margin-left: -28px;
  margin-top: 10px;
}

table.dataTable {
	font-size: 0.75rem;
}

div.dataTables_wrapper div.dataTables_paginate {
	text-align: center;
}

#drawQueryWidget {
  display: none;
  height: 20px;
  margin-top: 10px;
}

#queryDrawControlHelp {
  position: absolute;
  top: 35px;
  left: 35px;
}

.legend {
  text-align: left;
  line-height: 18px;
  color: #555;
  background-color: #727272;
  padding: 10px;
}

.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}

.leaflet-bookmarks-control .bookmarks-icon-wrapper {
  position: absolute;
  top: 3px;
  left: 3px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
  display: none;
}

#filterOutput {
  margin-top: 15px;
  font-style: italic;
  font-size: 0.875rem;
  color: white;
  padding: 15px;
  display: none;
}

/* 全域可見焦點框（WCAG 2.4.7），比照主站 header.php：虛線（dashed）、
   淺色底用加深橘 #B26A00、深色導覽列用 #E59700 確保 1.4.11 對比 */
:focus-visible {
  outline: 2px dashed #b26a00;
  outline-offset: 2px;
}
.navbar :focus-visible {
  outline-color: #e59700;
}
/* leaflet.css 對控制項連結會移除 outline，補回一致的虛線焦點框；
   地圖容器本身（tabindex=0，支援方向鍵平移）也需要可見焦點 */
.leaflet-container a:focus-visible,
.leaflet-container button:focus-visible,
.leaflet-container input:focus-visible,
#map:focus-visible {
  outline: 2px dashed #b26a00 !important;
  outline-offset: 2px;
}
/* 地圖上的點位／cluster 標記（div 元素，tabindex=0）：
   Tab 聚焦時需有可見焦點框，否則使用者不知道目前停在哪個標記上 */
.leaflet-marker-icon:focus-visible,
.leaflet-marker-icon.marker-cluster:focus-visible {
  outline: 3px dashed #b26a00 !important;
  outline-offset: 3px;
}
/* Bootstrap 4 的 button/link focus 預設只有 box-shadow，統一補虛線框 */
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible {
  outline: 2px dashed #b26a00;
  outline-offset: 2px;
}

/* 跳到主內容快速連結（WCAG 2.4.1）：比照主站，平時隱藏、鍵盤聚焦時滑入顯示，
   為每頁第一個 Tab 焦點 */
.skip-to-main {
  position: fixed;
  top: -48px;
  left: 12px;
  z-index: 1200;
  background: #1f2a37;
  color: #fff !important;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  white-space: nowrap;
  transition: top 0.15s ease;
}
.skip-to-main:focus {
  top: 10px;
  color: #fff !important;
}

/* 台灣無障礙規範三區定位點（:::），比照主站樣式 */
.accesskey-landmark {
  text-decoration: none;
  font-weight: 700;
  padding: 0 4px;
}
/* 定位點只會被快捷鍵／Tab 刻意聚焦，除 :focus-visible 外也涵蓋 :focus，
   確保 Alt+U/C 觸發的程式聚焦一定顯示可見焦點框 */
.accesskey-landmark:focus-visible,
.accesskey-landmark:focus {
  outline: 2px dashed #b26a00;
  outline-offset: 2px;
}
.navbar .accesskey-landmark:focus-visible,
.navbar .accesskey-landmark:focus {
  outline-color: #e59700;
}
.navbar .accesskey-landmark {
  color: rgba(231, 240, 252, 0.88);
}
.navbar .accesskey-landmark:hover,
.navbar .accesskey-landmark:focus {
  color: #ffffff;
}
/* Bootstrap 4 的 .sr-only 只寫 padding:0（無 !important），而本檔在 CDN 之後載入，
   下方 .accesskey-landmark／-map 的 padding 與背景會蓋回去，讓隱藏中的定位點仍佔幾個像素。
   這裡於未聚焦時明確歸零，聚焦時再由 .sr-only-focusable:focus 還原 */
.accesskey-landmark.sr-only:not(:focus):not(:active) {
  padding: 0;
  border: 0;
  background: none;
}

/* 中央內容區定位點：平時不佔版面（地圖滿版），取得焦點才顯示 */
.accesskey-landmark-map {
  position: absolute;
  top: 60px;
  left: 12px;
  z-index: 1100;
  background: #1f2a37;
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
}

/* WCAG AA: raise navbar link contrast on dark background */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link.dropdown-toggle {
  color: #d1d5db;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.dropdown-toggle:hover,
.navbar-dark .navbar-nav .nav-link.dropdown-toggle:focus {
  color: #ffffff;
}

.navbar .btn-outline-success {
  color: #d8f5df;
  border-color: #8fd1a5;
}

.navbar .btn-outline-success:hover,
.navbar .btn-outline-success:focus {
  color: #102418;
  background-color: #c9ecd4;
  border-color: #c9ecd4;
}

.leaflet-bookmarks-control .bookmarks-list .bookmark-remove {
  color: #4b5563;
  opacity: 0;
  visibility: hidden;
}

.leaflet-bookmarks-control .bookmarks-list .bookmark-item:hover .bookmark-remove,
.leaflet-bookmarks-control .bookmarks-list .bookmark-item:focus-within .bookmark-remove,
.leaflet-bookmarks-control .bookmarks-list .bookmark-remove:focus,
.leaflet-bookmarks-control .bookmarks-list .bookmark-remove:hover {
  color: #0f304a;
  opacity: 1;
  visibility: visible;
}

/* 圖層控制核取方塊／底圖單選鈕觸控目標放大（WCAG 2.5.8：最小 24x24）：
   Leaflet 預設 13x13，手機幾乎點不準；label 整列加高後
   （3+18+3=24px）整行皆為可點區域 */
.leaflet-control-layers input[type="checkbox"],
.leaflet-control-layers input[type="radio"] {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  accent-color: #2b6ea6;
}
.leaflet-control-layers label {
  display: block;
  margin: 0;
  padding: 3px 0;
  line-height: 1.5;
}