/* ==========================================================================
   GEO 前端雛形 第二層通用區塊 — geo-blocks.css
   載入順序：geo-tokens.css、geo-atoms.css、geo-layout.css 之後
   表單列 .geo-form-row、卡片外框 .geo-search-card、表格 .geo-table、頁籤 .geo-tabs、
   彈窗 .geo-dialog-* 的基本樣式定義於 geo-atoms.css，本檔只補區塊元件專屬規則
   ========================================================================== */

/* 以 hidden 屬性收合（元件本身的 display 會蓋過瀏覽器內建的 hidden，需明確指定） */
geo-field[hidden],
geo-search-card[hidden],
geo-keyword-bar[hidden],
geo-tab-item[hidden],
geo-data-table[hidden],
geo-section[hidden],
geo-detail[hidden],
geo-form[hidden],
geo-file-list[hidden],
geo-photo-list[hidden],
geo-export-dialog[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   1. 表單列 <geo-field>
   -------------------------------------------------------------------------- */
geo-field {
  display: block;
}

/* 多選下拉、多行輸入：標題與第一行控制項垂直置中對齊 */
geo-field.geo-form-row--top > .geo-form-title {
  padding-top: calc((var(--geo-input-height, 40px) - 1.5em) / 2);
}

/* 【本專案暫時修改｜使用者同意，待技能調整時併入元件庫】欄位內含多行輸入框時，
   欄位名稱頂端與輸入框上緣切齊（使用者選定；原本內距 8px 與單行輸入框同高） */
geo-field.geo-form-row--top:has(> .geo-form-content > geo-textarea) > .geo-form-title {
  padding-top: 0;
}

/* 缺少 label：紅字提示 */
.geo-form-title.is-missing {
  color: var(--geo-error);
  font-weight: 400;
  -webkit-text-stroke: 0;
}

/* 必填未填（業務彈窗按下確認時標示） */
geo-field.is-invalid > .geo-form-title {
  color: var(--geo-error);
}

geo-field.is-invalid > .geo-form-content::after {
  content: "此欄位為必填";
  flex-basis: 100%;
  font-size: 14px;
  line-height: 1.4;
  color: var(--geo-error);
}

/* 表單錯誤摘要：固定在頂列下方，捲到哪都看得到；清單過長時內部捲動 */
.geo-error-summary {
  position: sticky;
  top: var(--geo-appbar-height, 64px);
  z-index: 30;
  margin-bottom: 12px;
  border: 1.5px solid var(--geo-error);
  border-radius: var(--geo-rounded-sm, 4px);
  background-color: var(--geo-surface);
  box-shadow: var(--geo-elevation-1);
}

.geo-error-summary[hidden] {
  display: none;
}

.geo-error-summary-toggle {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--geo-error);
  text-align: left;
  cursor: pointer;
}

.geo-error-summary-toggle::after {
  content: " ▴";
}

.geo-error-summary.is-collapsed .geo-error-summary-toggle::after {
  content: " ▾";
}

.geo-error-summary-list {
  max-height: 33vh;
  margin: 0;
  padding: 0 12px 8px 32px;
  overflow-y: auto;
  color: var(--geo-error);
}

.geo-error-summary.is-collapsed .geo-error-summary-list {
  display: none;
}

.geo-error-summary-item button {
  padding: 2px 0;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--geo-error);
  text-decoration: underline;
  cursor: pointer;
}

.geo-section-error-badge {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: var(--geo-rounded-sm, 4px);
  background-color: var(--geo-error);
  font-size: 14px;
  font-weight: 700;
  color: var(--geo-text-white, #fff);
}

/* --------------------------------------------------------------------------
   2. 進階搜尋卡片 <geo-search-card>
   -------------------------------------------------------------------------- */
geo-search-card {
  display: block;
  width: 100%;
}

/* 單欄：條件列垂直排列 */
.geo-search-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--geo-space-1, 4px);
}

/* 單欄：表單元件統一最大寬度，右緣對齊 */
.geo-search-card-body > .geo-form-row > .geo-form-content > :is(geo-input, geo-textarea, geo-editor, geo-select, geo-date-input, geo-date-roc, geo-date-range) {
  width: 100%;
  max-width: 380px;
}

/* 雙欄：表單元件填滿欄寬 */
.geo-form-grid-2col > .geo-form-row > .geo-form-content > :is(geo-input, geo-textarea, geo-editor, geo-select, geo-date-input, geo-date-roc, geo-date-range) {
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. 窄版 RWD（is-compact、is-stacked 由 geo-blocks.js 依區塊本身寬度自動切換）
   -------------------------------------------------------------------------- */
geo-search-card.is-compact .geo-form-grid-2col {
  grid-template-columns: minmax(0, 1fr);
}

:is(geo-search-card, .geo-form-dialog-card, geo-detail:not(.geo-detail--inline), geo-form).is-stacked .geo-form-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

:is(geo-search-card, .geo-form-dialog-card, geo-detail:not(.geo-detail--inline), geo-form).is-stacked .geo-form-title {
  width: 100%;
  min-width: 0;
  padding-top: 0;
  text-align: left;
}

:is(geo-search-card, .geo-form-dialog-card, geo-detail:not(.geo-detail--inline), geo-form).is-stacked .geo-form-content {
  width: 100%;
}

geo-search-card.is-stacked .geo-search-card-body > .geo-form-row > .geo-form-content > :is(geo-input, geo-textarea, geo-editor, geo-select, geo-date-input, geo-date-roc, geo-date-range) {
  max-width: none;
}

/* 窄版日期區間：起訖兩格並排會截斷日期，改為上下排列、每格滿版 */
:is(geo-search-card, .geo-form-dialog-card, geo-detail:not(.geo-detail--inline), geo-form).is-stacked .geo-date-range-roc {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

:is(geo-search-card, .geo-form-dialog-card, geo-detail:not(.geo-detail--inline), geo-form).is-stacked .geo-date-range-roc .geo-date-range-separator {
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. 關鍵字搜尋列 <geo-keyword-bar>
   -------------------------------------------------------------------------- */
.geo-keyword-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap, 6px);
  padding: 16px 0;
}

/* 輸入框優先佔寬，最寬 380px；寬度不足時按鈕自動換到下一行 */
.geo-keyword-bar > geo-input {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 380px;
}

/* 同一列最右側的說明文字（info，例如資料同步更新日期）；寬度不足時換到下一行並靠右 */
.geo-keyword-bar-info {
  margin-left: auto;
  font-size: var(--geo-fs-body, 16px);
  color: var(--geo-text-secondary);
}

/* --------------------------------------------------------------------------
   5. 頁籤 <geo-tabs>
   -------------------------------------------------------------------------- */
geo-tabs,
geo-tab-item {
  display: block;
}

/* 頁籤過多或手機寬度時可左右捲動，文字不擠壓換行；出現捲軸時高度自動增加，不遮住目前頁籤底線 */
geo-tabs > .geo-tabs {
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

geo-tabs > .geo-tabs > .geo-tab-item {
  min-width: max-content;
}

/* RWD：手機寬度（600px 以下，與資料表格卡片化同斷點）頁籤由橫式改直式清單堆疊，
   不再左右捲動；每項滿版、靠左對齊，目前頁籤改用左側色條標示（橫式底線在直式清單中不易辨識） */
@media (max-width: 600px) {
  geo-tabs > .geo-tabs {
    flex-direction: column;
    height: auto;
    overflow-x: visible;
    box-shadow: none;
    border: 1px solid var(--geo-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--geo-radius-base, 4px);
    margin-bottom: 20px;
  }

  geo-tabs > .geo-tabs > .geo-tab-item {
    min-width: 0;
    width: 100%;
    height: 44px;
    justify-content: flex-start;
    text-align: left;
    border-bottom: 1px solid var(--geo-border, rgba(0, 0, 0, 0.12));
    border-left: 3px solid transparent;
  }

  geo-tabs > .geo-tabs > .geo-tab-item:last-child {
    border-bottom: none;
  }

  geo-tabs > .geo-tabs > .geo-tab-item.is-active {
    background: rgba(2, 62, 138, 0.08);
    border-bottom-color: var(--geo-border, rgba(0, 0, 0, 0.12));
    border-left-color: var(--geo-primary, #023e8a);
  }
}

/* orientation="vertical"：左側直式選單＋右側內容並排（例如登入頁多種登入方式），601px 以上才並排；
   601px 以下沿用上面 600px 斷點的橫式頁籤直式堆疊樣式（堆疊在內容上方），不重複定義 */
@media (min-width: 601px) {
  geo-tabs.geo-tabs-vertical {
    display: flex;
    align-items: flex-start;
    gap: var(--geo-space-6, 24px);
  }

  geo-tabs.geo-tabs-vertical > .geo-tabs {
    flex: 0 0 180px;
    flex-direction: column;
    height: auto;
    overflow: visible;
    box-shadow: none;
    gap: 4px;
    margin-bottom: 0;
  }

  geo-tabs.geo-tabs-vertical > .geo-tabs > .geo-tab-item {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 64px;
    padding: 12px 16px;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    border-bottom: none;
    border-radius: var(--geo-radius-base, 4px);
  }

  geo-tabs.geo-tabs-vertical > .geo-tabs > .geo-tab-item.is-active {
    background: var(--geo-primary, #023e8a);
    color: var(--geo-text-white, #fff);
    border-bottom-color: transparent;
  }

  geo-tabs.geo-tabs-vertical > geo-tab-item {
    flex: 1 1 0;
    min-width: 0;
    /* 各頁籤內容多寡不同時，卡片高度不隨切換縮放：以最高頁籤內容的高度為準（geo-blocks.js 量測後寫入） */
    min-height: var(--geo-tabs-min-height, auto);
  }
}

/* --------------------------------------------------------------------------
   6. 資料表格 <geo-data-table>
   -------------------------------------------------------------------------- */
geo-data-table {
  display: block;
  width: 100%;
}

/* variant="list"：隱藏表格，改顯示清單（比照地圖圖台範本查詢結果：勾選＋狀態徽章＋標題＋副標題） */
.geo-data-table-list {
  display: none;
}

.geo-data-table.is-list .geo-data-table-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.geo-data-table.is-list .geo-table-responsive {
  display: none;
}

.geo-data-table-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--geo-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--geo-radius-base, 4px);
}

.geo-data-table-list-row:hover,
.geo-data-table-list-row.is-active {
  background-color: var(--geo-hover, rgba(0, 0, 0, 0.03));
}

.geo-data-table-list-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.geo-data-table-list-title {
  font-weight: 700;
  color: var(--geo-text-primary);
}

.geo-data-table-list-sub {
  font-size: var(--geo-fs-caption, 13px);
  color: var(--geo-text-secondary);
}

.geo-data-table-list-row .geo-data-table-empty,
.geo-data-table-list > .geo-data-table-empty {
  padding: 24px;
  color: var(--geo-text-secondary);
  text-align: center;
}

.geo-data-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap, 6px);
  margin-bottom: 16px;
}

.geo-data-table-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--geo-fs-body, 16px);
  color: var(--geo-text-primary);
}

.geo-data-table-total {
  font-weight: 600;
}

.geo-data-table-info > geo-select {
  width: 96px;
}

/* 工具列右側：slot="toolbar" 的按鈕或開關，以及「新增」 */
.geo-data-table-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap, 6px);
  margin-left: auto;
}

.geo-data-table-actions:empty {
  display: none;
}

.geo-data-table-sort {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
}

.geo-data-table-sort.is-idle {
  opacity: 0.6;
}

.geo-data-table .geo-table td.is-number {
  font-variant-numeric: tabular-nums;
}

/* RWD：數字、日期、狀態、操作不換行，文字欄保留最小寬度；放不下時表格在框內左右捲動，不擠壓欄位 */
.geo-data-table .geo-table td:not(.text-start) {
  white-space: nowrap;
}

.geo-data-table .geo-table td.text-start {
  min-width: 10em;
}

/* 表格比框寬時（geo-blocks.js 量測後依序加 class，欄位名稱與內容不動）：
   .is-wrap-long 先讓文字欄的表頭與長文字格（超過 12 字，.is-long）換行，名稱、編號這類短內容維持一行；
   .is-wrap 仍放不下時其餘文字格也換行，每行至少約 4 個字（長文字欄維持上方的 10em）；
   .is-compact 換行後仍放不下，格子左右內距 16px 縮為 8px，長文字欄最小改約 4 個字、截斷欄（ellipsis）最寬約 8 個字（完整內容在提示框） */
.geo-data-table .geo-table-responsive.is-wrap-long .geo-table :is(th.is-wrap, td.is-wrap.is-long),
.geo-data-table .geo-table-responsive.is-wrap .geo-table :is(th, td).is-wrap {
  white-space: normal;
  text-wrap: balance;
}

.geo-data-table .geo-table-responsive.is-wrap-long:not(.is-compact) .geo-table :is(th.is-wrap, td.is-wrap.is-long):not(.text-start),
.geo-data-table .geo-table-responsive.is-wrap .geo-table :is(th, td).is-wrap:not(.text-start) {
  min-width: calc(4em + 32px);
}

.geo-data-table .geo-table-responsive.is-compact .geo-table :is(th, td) {
  padding-left: 8px;
  padding-right: 8px;
}

.geo-data-table .geo-table-responsive.is-compact .geo-table :is(th, td).is-wrap:not(.text-start),
.geo-data-table .geo-table-responsive.is-compact .geo-table td.is-wrap.text-start {
  min-width: calc(4em + 16px);
}

.geo-data-table .geo-table-responsive.is-compact .geo-table th.is-ellipsis {
  width: auto !important;
}

.geo-data-table .geo-table-responsive.is-compact .geo-table td.is-ellipsis .geo-table-ellipsis {
  max-width: min(var(--geo-ellipsis-width, 240px), 8em);
}

.geo-table-actions {
  display: inline-flex;
  justify-content: center;
  gap: var(--geo-btn-gap-table, 6px);
  white-space: nowrap;
}

.geo-data-table .geo-table td.geo-data-table-empty {
  padding: 24px;
  color: var(--geo-text-secondary);
}

.geo-data-table .geo-table td.geo-data-table-error {
  padding: 24px;
  color: var(--geo-error);
}

/* RWD：手機寬度（600px 以下）表格由橫式改直式卡片，不再框內左右捲動；每筆資料一張卡片，
   欄位名稱（data-label，由 geo-blocks.js 輸出）在左、內容在右；長文字欄位改上下排列 */
@media (max-width: 600px) {
  .geo-data-table .geo-table-responsive {
    overflow-x: visible;
  }

  .geo-data-table .geo-table,
  .geo-data-table .geo-table tbody {
    display: block;
    width: 100%;
  }

  .geo-data-table .geo-table thead {
    display: none;
  }

  .geo-data-table .geo-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--geo-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--geo-radius-base, 4px);
    overflow: hidden;
  }

  .geo-data-table .geo-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .geo-data-table .geo-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    padding: 10px 16px;
    text-align: right !important;
    white-space: normal;
    border-bottom: 1px solid var(--geo-border, rgba(0, 0, 0, 0.12));
  }

  .geo-data-table .geo-table td:last-child {
    border-bottom: none;
  }

  .geo-data-table .geo-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-weight: 700;
    text-align: left;
    color: var(--geo-text-primary);
  }

  /* 長文字（地址、審查事項等，text-start）與表格內填寫欄位改欄位名稱在上、內容在下，避免擠成一行 */
  .geo-data-table .geo-table td.text-start,
  .geo-data-table .geo-table td.is-edit {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left !important;
  }

  .geo-data-table .geo-table td.is-edit > :is(geo-input, geo-select, geo-textarea) {
    width: 100%;
  }

  /* 操作欄按鈕放不下時換行，不擠出卡片外 */
  .geo-data-table .geo-table td.is-actions .geo-table-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* 查無資料、設定錯誤：整張卡片置中一行文字，不需要欄位名稱 */
  .geo-data-table .geo-table td.geo-data-table-empty,
  .geo-data-table .geo-table td.geo-data-table-error {
    display: block;
    text-align: center !important;
  }

  .geo-data-table .geo-table td.geo-data-table-empty::before,
  .geo-data-table .geo-table td.geo-data-table-error::before {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   7. 業務彈窗 <geo-form-dialog>（開啟時加上 .is-open，由 .geo-dialog-overlay 顯示）
   -------------------------------------------------------------------------- */
geo-form-dialog {
  display: none;
}

.geo-form-dialog-card {
  max-width: 600px;
}

/* 說明文字（geo-note）在雙欄的進階搜尋卡片內獨占一整列 */
.geo-form-grid-2col > geo-note {
  grid-column: 1 / -1;
}

.geo-form-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--geo-space-4, 16px);
  max-height: 60vh;
}

/* 欄位名稱在上、輸入欄位或資料內容在下（表單與檢視模式、所有寬度皆同）；加 row-label 屬性改欄位名稱在左、內容在右 */
.geo-form-dialog-card:not(.is-row-label) .geo-form-dialog-body > .geo-form-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 0;
}

.geo-form-dialog-card:not(.is-row-label) .geo-form-dialog-body > .geo-form-row > .geo-form-title {
  width: 100%;
  min-width: 0;
  padding-top: 0;
  text-align: left;
  font-weight: 700;
}

.geo-form-dialog-card:not(.is-row-label) .geo-form-dialog-body > .geo-form-row > .geo-form-content {
  width: 100%;
}

/* row-label：欄位名稱在左、內容在右（比照 geo-form／geo-detail），寬度不足時（.is-stacked）自動改回上下排列 */
.geo-form-dialog-card.is-row-label .geo-form-dialog-body > .geo-form-row {
  margin-bottom: 0;
}

/* 以圖示取代欄位名稱 <geo-field icon>（檔案上傳彈窗）：圖示在左、欄位在右，所有寬度皆同 */
.geo-form-dialog-card .geo-form-row.geo-form-row--icon {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

.geo-form-dialog-card .geo-form-row--icon > .geo-form-title.geo-form-title--icon {
  display: flex;
  width: auto;
  min-width: 0;
  padding-top: 8px;
  color: var(--geo-text-secondary);
  line-height: 1;
}

.geo-form-dialog-card .geo-form-row--icon > .geo-form-content {
  flex: 1;
  width: auto;
}

/* 選擇檔案欄位左側已有迴紋針圖示，不重複顯示元件內的圖示 */
.geo-form-row--icon geo-file-input .geo-file-icon {
  display: none;
}

/* 格式與容量說明文字 */
.geo-upload-note {
  padding-top: 6px;
  line-height: 1.6;
}

/* 只給螢幕報讀的文字 */
.geo-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. 頁面外殼 <geo-app-shell>（頂列、選單、麵包屑的基本樣式沿用 geo-layout.css）
   -------------------------------------------------------------------------- */
geo-app-shell {
  display: block;
}

/* 組裝前（尚未加上 .geo-app-shell 這個自我標記 class）先隱藏，避免使用者看到頂列／選單從無到有組裝、
   或組裝瞬間的寬度變化被 .app-sidebar／.app-bar 既有的 transition 放大成「先縮一下再展開」的閃爍 */
geo-app-shell:not(.geo-app-shell) {
  visibility: hidden;
}

/* 群組標題為按鈕（可用鍵盤操作），外觀與選單項目一致 */
button.nav-group-header {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
}

.nav-group:not(.is-open) > .nav-group-children {
  display: none;
}

.app-bar-left {
  min-width: 0;
}

.app-bar-right {
  flex-shrink: 0;
}

.app-bar-logo {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* 內容區塊：標題與麵包屑下方的白色區塊，頁面內容由上而下排列 */
.app-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 20px 16px;
  background-color: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius-base, 4px);
  box-shadow: var(--geo-elevation-1);
}

/* 左右留白 16px：內容區塊內的區塊卡片在 1280 寬仍夠寬，唯讀明細資料與分組表單維持雙欄 */
.geo-app-shell .app-main {
  padding-left: 16px;
  padding-right: 16px;
}

/* 搜尋列在內容區塊頂端時不再多留上方空白 */
.app-content > geo-keyword-bar:first-of-type {
  padding-top: 0;
}

/* 內容區塊標題列：頁面名稱（content-title，依資料變動）在左，頁面按鈕（slot="page-actions"，例如「回查詢頁」）在右 */
.content-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.content-title-row[hidden] {
  display: none;
}

.content-title {
  font-size: var(--geo-fs-title, 24px);
  font-weight: 700;
  color: var(--geo-text-primary);
  margin: 0;
  line-height: 1.3;
  /* 空字串時維持存在（不用 display:none)：justify-content: space-between 只有一個 flex 子項時會靠左，
     留著這個零寬度項目才能讓沒有設定 content-title、只有頁面按鈕的頁面仍然把按鈕推到最右側 */
}

.page-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap, 6px);
}

/* 系統名稱過長時以省略號結尾，不換行 */
.app-bar-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page-title.is-missing {
  color: var(--geo-error);
}

/* RWD：寬度 960px 以下選單為抽屜（抽屜規則位於 geo-atoms.css），收起時不顯示陰影，避免畫面左緣露出一條陰影 */
@media (max-width: 960px) {
  .app-sidebar:not(.is-mobile-open) {
    box-shadow: none;
  }
}

/* RWD：手機寬度縮小系統名稱、隱藏使用者名稱文字 */
@media (max-width: 600px) {
  .app-bar {
    padding: 0 8px;
  }

  .app-bar-left {
    gap: 8px;
  }

  .app-bar-logo {
    font-size: 17px;
  }

  .app-content {
    padding: 16px;
  }

  .user-pill-name {
    display: none;
  }

  .app-bar-zone-badge {
    display: none;
  }
}

.geo-form-dialog-body > .geo-form-row > .geo-form-content > :is(geo-input, geo-textarea, geo-editor, geo-select, geo-date-input, geo-date-roc, geo-date-range) {
  width: 100%;
}

/* --------------------------------------------------------------------------
   9. 資料表格擴充：警示底色、合併儲存格、表格內直接填寫
   -------------------------------------------------------------------------- */
.geo-data-table .geo-table tbody tr.is-warning > td {
  background-color: var(--geo-row-warning);
}

/* 分類欄（merge）：灰底、粗體、置中，警示列也維持灰底；合併後右側加分隔線（比照文件檢核表） */
.geo-data-table .geo-table tbody td.is-group,
.geo-data-table .geo-table tbody tr.is-warning > td.is-group {
  background-color: var(--geo-cell-group);
  font-weight: 700;
}

.geo-data-table .geo-table td.is-merged {
  border-right: 1px solid var(--geo-border);
}

/* 表格內直接填寫與操作欄：上下間距比文字欄小 */
.geo-data-table .geo-table tbody td.is-edit {
  padding: 8px 16px;
}

.geo-data-table .geo-table tbody td:is([data-edit="input"], [data-edit="textarea"]) {
  padding: 8px 12px;
}

.geo-data-table .geo-table tbody td.is-actions {
  padding: 8px;
}

/* 操作欄是最後一欄時固定在表格右側：表格在框內左右捲動時操作按鈕一直看得到；還沒捲到最右邊時左側加陰影（手機卡片模式不適用） */
@media (min-width: 601px) {
  .geo-data-table .geo-table :is(th, td).is-actions:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
  }

  .geo-data-table .geo-table tbody td.is-actions:last-child {
    background-color: var(--geo-surface);
  }

  .geo-data-table .geo-table tbody tr:hover > td.is-actions:last-child {
    background-image: linear-gradient(rgba(2, 62, 138, 0.04), rgba(2, 62, 138, 0.04));
  }

  .geo-data-table .geo-table tbody tr.is-warning > td.is-actions:last-child {
    background-image: linear-gradient(var(--geo-row-warning), var(--geo-row-warning));
  }

  .geo-data-table .geo-table-responsive.is-overflow:not(.is-scroll-end) .geo-table :is(th, td).is-actions:last-child {
    box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.2);
  }
}

/* 放在區塊卡片內的資料表格：外框、圓角與陰影 */
geo-section .geo-data-table > .geo-table-responsive {
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-rounded-md, 8px);
  box-shadow: var(--geo-elevation-1);
}

geo-section .geo-data-table .geo-table {
  margin-bottom: 0;
}

geo-section .geo-data-table > .geo-data-table-pager {
  margin-top: 16px;
}

.geo-data-table .geo-table td.is-edit {
  white-space: normal;
}

.geo-data-table .geo-table td.is-edit > :is(geo-input, geo-select) {
  display: block;
  min-width: 160px;
}

.geo-data-table .geo-table td.is-edit > geo-textarea {
  display: block;
  min-width: 200px;
}

/* 表格內多行輸入框預設一行高，與單行輸入框同為 40px，可拖曳右下角拉高 */
.geo-data-table .geo-table td.is-edit .geo-textarea-control {
  padding: 5px 12px;
}

.geo-data-table .geo-table td.is-edit .geo-textarea-field {
  display: block;
  min-height: 0;
}

.geo-table-radios {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}

.geo-table-radios > geo-radio {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. 區塊卡片 <geo-section>（collapsible 時可收合）
   -------------------------------------------------------------------------- */
geo-section {
  display: block;
  padding: 24px;
  background-color: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-rounded-sm, 4px);
  box-shadow: var(--geo-elevation-1);
}

.geo-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap, 6px);
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--geo-border);
}

geo-section.is-collapsed > .geo-section-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.geo-section-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--geo-fs-section, 18px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--geo-text-primary);
}

/* 開闔區塊：整列可點擊，箭頭在標題列最右側（展開時朝上、收合時朝下） */
.geo-section-header.is-collapsible {
  cursor: pointer;
}

.geo-section-toggle {
  display: block;
  width: 100%;
  padding: 2px 0;
  border: none;
  border-radius: var(--geo-rounded-sm, 4px);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.geo-section-toggle:focus-visible {
  outline: 2px solid var(--geo-primary);
  outline-offset: 2px;
}

.geo-section-arrow {
  flex-shrink: 0;
  color: var(--geo-text-secondary);
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

geo-section.is-collapsed > .geo-section-header .geo-section-arrow {
  transform: none;
}

.geo-section-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap, 6px);
  margin-left: auto;
}

.geo-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--geo-space-4, 16px);
  min-width: 0;
}

/* 區塊內容最下方置中的按鈕（slot="footer-actions"），例如單一動作按鈕不要貼著左邊 */
.geo-section-footer-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap, 6px);
}

/* --------------------------------------------------------------------------
   10.5 頁面級多欄版面 <geo-columns><geo-column>（is-compact 依本身寬度自動切換為單欄，斷點同雙欄表單）
   -------------------------------------------------------------------------- */
.geo-columns {
  display: flex;
  gap: var(--geo-space-6, 24px);
  align-items: flex-start;
}

.geo-columns.is-compact {
  flex-direction: column;
}

.geo-columns.is-compact > .geo-column {
  flex: 1 1 auto !important;
  width: 100%;
}

.geo-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: var(--geo-space-6, 24px);
  min-width: 0;
  min-height: 0;
}

/* match-height：各欄高度統一為最高欄的高度（例如篩選＋清單欄搭配地圖欄），窄版單欄堆疊時不生效。
   高度與捲動本身由 GeoColumns._matchHeight()（geo-blocks.js）量測後以 inline style（height、overflow-y）設定在
   有 <geo-section fill> 的欄位「整欄」上（該欄所有區塊一起捲動，不用先收合上面的區塊才看得到下面的內容）；
   不用 align-items: stretch（那會取含 fill 欄「未捲動前的完整內容高度」，等於沒有限制，見該方法內的註解）。
   <geo-section fill> 本身只是「這一欄要整欄捲動」的標記，不需要額外樣式。 */

/* --------------------------------------------------------------------------
   11. 唯讀明細資料 <geo-detail>（is-medium、is-compact、is-stacked 依區塊寬度自動切換）
   -------------------------------------------------------------------------- */
geo-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 24px;
}

/* 雙欄：左右各留十二分之一空白，資料往中間集中（比照詳細頁案件基本資料） */
geo-detail.geo-detail--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: 8.333%;
}

/* 三欄：寬度小於 960px 時改雙欄 */
geo-detail.geo-detail--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

geo-detail.geo-detail--3col.is-medium {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: 8.333%;
}

/* 寬度小於 860px 時一律單欄 */
geo-detail.is-compact:is(.geo-detail--2col, .geo-detail--3col) {
  grid-template-columns: minmax(0, 1fr);
  padding-inline: 0;
}

/* 標題固定寬度靠右，資料緊接在右 */
geo-detail > .geo-form-row > .geo-form-title {
  width: 170px;
  min-width: 170px;
}

geo-detail.geo-detail--3col:not(.is-medium, .is-stacked) > .geo-form-row > .geo-form-title {
  width: 140px;
  min-width: 140px;
}

/* 同一個區塊卡片內，單欄唯讀明細資料與可編輯分組表單上下並列時（例如設定狀態在上、要填的欄位在下），
   表單欄位名稱與明細同寬，標題與內容上下對齊；寬度不足改上下排列時不受影響（.is-stacked 規則優先） */
geo-section:has(geo-detail:not(.geo-detail--2col, .geo-detail--3col)) geo-form .geo-form-title {
  width: 170px;
  min-width: 170px;
}

geo-detail > .geo-form-row {
  align-items: flex-start;
  margin-bottom: 0;
}

geo-detail > .geo-form-row.is-full,
geo-detail > .geo-detail-error {
  grid-column: 1 / -1;
}

geo-detail .geo-form-content {
  min-height: 1.6em;
  word-break: break-word;
}

.geo-detail-error {
  color: var(--geo-error);
}

/* 純文字內容列（geo-field plain）：不顯示欄位標題，內容靠左佔滿整列，保留原始換行 */
.geo-form-row--plain {
  display: block;
}

.geo-form-row--plain > .geo-form-content {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

/* boxed：內容外加一層框線與底色，呈現「這個欄位本身是區塊裡的小區塊」（例如子表格＋新增鈕） */
.geo-form-row.is-boxed > .geo-form-content {
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-rounded-sm, 4px);
  background-color: var(--geo-surface);
  padding: 12px;
}

/* --------------------------------------------------------------------------
   12. 可編輯分組表單 <geo-form>（底部動作列固定在畫面底部）
   -------------------------------------------------------------------------- */
geo-form {
  display: block;
}

.geo-form-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.geo-form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--geo-space-4, 16px);
}

.geo-form-grid > .geo-form-row,
.geo-form-body .geo-form-grid-2col > .geo-form-row {
  margin-bottom: 0;
}

.geo-form-grid > .geo-form-row > .geo-form-content > :is(geo-input, geo-select, geo-date-input, geo-date-roc, geo-date-range, geo-file-input) {
  width: 100%;
  max-width: 480px;
}

.geo-form-grid > .geo-form-row > .geo-form-content > :is(geo-textarea, geo-editor, geo-image-upload),
.geo-form-body .geo-form-grid-2col > .geo-form-row > .geo-form-content > :is(geo-input, geo-textarea, geo-editor, geo-select, geo-date-input, geo-date-roc, geo-date-range, geo-file-input, geo-image-upload) {
  width: 100%;
}

.geo-form-body .geo-form-grid-2col > .geo-form-wide,
.geo-form-body .geo-form-grid-2col > .geo-form-row.is-full {
  grid-column: 1 / -1;
}

geo-form.is-compact .geo-form-grid-2col {
  grid-template-columns: minmax(0, 1fr);
}

.geo-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap, 6px);
  margin-top: 18px;
  padding: 12px 16px;
  background-color: var(--geo-surface);
  border-top: 1px solid var(--geo-border);
  box-shadow: var(--geo-elevation-up);
}

/* static-actions：頁面不長、不需要固定在畫面底部時，單純的按鈕列 */
.geo-form-actions.is-static {
  position: static;
  background-color: transparent;
  border-top: none;
  box-shadow: none;
  padding: 0;
}

/* 外殼內容區改由整頁捲動，底部動作列才能固定在畫面底部 */
.app-main.has-sticky-actions {
  min-width: 0;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   13. 檔案管理清單 <geo-file-list>
   -------------------------------------------------------------------------- */
geo-file-list {
  display: block;
  width: 100%;
}

.geo-file-link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--geo-primary);
  text-align: left;
  text-decoration: underline;
  word-break: break-all;
  cursor: pointer;
}

.geo-file-link:focus-visible {
  outline: 2px solid var(--geo-primary);
  outline-offset: 2px;
}

/* 簡易模式：灰底小框，只列「附件」標籤與檔名連結，不出現表格 */
.geo-file-list--simple {
  display: block;
  background: var(--geo-search-card);
  border-radius: var(--geo-radius-base);
  padding: var(--geo-space-4) var(--geo-space-5);
}

.geo-file-list-simple-label {
  font-size: var(--geo-fs-caption);
  font-weight: 700;
  color: var(--geo-text-secondary);
  margin-bottom: var(--geo-space-2);
}

.geo-file-simple-link {
  display: block;
  width: 100%;
  padding: var(--geo-space-1) 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--geo-fs-body);
  color: var(--geo-primary);
  text-align: left;
  text-decoration: underline;
  word-break: break-all;
  cursor: pointer;
}

.geo-file-simple-link:focus-visible {
  outline: 2px solid var(--geo-primary);
  outline-offset: 2px;
}

.geo-file-list-empty {
  font-size: var(--geo-fs-caption);
  color: var(--geo-text-secondary);
}

/* --------------------------------------------------------------------------
   14. 照片管理清單 <geo-photo-list>
   -------------------------------------------------------------------------- */
geo-photo-list {
  display: block;
  width: 100%;
}

.geo-photo-list-toolbar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap, 6px);
  margin-bottom: 16px;
}

.geo-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}

.geo-photo-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background-color: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-rounded-md, 8px);
  box-shadow: var(--geo-elevation-1);
}

.geo-photo-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  background-color: var(--geo-surface);
}

.geo-photo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.geo-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--geo-text-disabled);
}

.geo-photo-info {
  flex: 1;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-content: start;
  gap: 10px 16px;
  margin: 0;
  padding: 20px 24px 16px;
  background-color: var(--geo-search-card);
  font-size: var(--geo-fs-body, 16px);
  line-height: 1.5;
}

.geo-photo-info dt {
  font-weight: 700;
  text-align: right;
  color: var(--geo-text-primary);
  -webkit-text-stroke: var(--geo-label-stroke, 0.3px) currentColor;
}

.geo-photo-info dd {
  margin: 0;
  color: var(--geo-text-primary);
  white-space: pre-line;
  word-break: break-word;
}

.geo-photo-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap-table, 6px);
  padding: 0 16px 16px;
  background-color: var(--geo-search-card);
}

.geo-photo-empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  color: var(--geo-text-secondary);
  border: 1px dashed var(--geo-border);
  border-radius: var(--geo-rounded-sm, 4px);
}

.geo-photo-empty.is-missing {
  color: var(--geo-error);
}

.geo-photo-viewer-card {
  max-width: min(960px, 100%);
}

.geo-photo-viewer-body {
  display: flex;
  justify-content: center;
}

.geo-photo-viewer-body img {
  max-width: 100%;
  max-height: calc(85vh - 140px);
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   15. 匯出欄位勾選彈窗 <geo-export-dialog>（開啟時加上 .is-open，由 .geo-dialog-overlay 顯示）
   -------------------------------------------------------------------------- */
geo-export-dialog {
  display: none;
}

.geo-export-dialog-card {
  max-width: 1100px;
}

.geo-export-dialog-body {
  max-height: 60vh;
}

/* 核取方塊依彈窗寬度排列，每欄至少 220px（寬版一列 4 個） */
.geo-export-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 12px 24px;
}

.geo-export-dialog-body > geo-divider {
  margin: 16px 0;
}

.geo-export-dialog .geo-dialog-footer {
  flex-wrap: wrap;
}

.geo-export-error {
  color: var(--geo-error);
}

/* --------------------------------------------------------------------------
   16. 動態列表 <geo-repeater>
   -------------------------------------------------------------------------- */
geo-repeater {
  display: block;
  width: 100%;
}

.geo-repeater-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.geo-repeater-list:empty {
  display: none;
}

.geo-repeater-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 0;
}

.geo-repeater-row-text {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--geo-fs-body, 16px);
  color: var(--geo-text-primary);
  word-break: break-word;
}

/* 刪除鈕：不管前面文字有幾行都維持垂直置中、不被壓縮 */
.geo-repeater-row > geo-btn {
  align-self: center;
  flex-shrink: 0;
}

.geo-repeater-add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.geo-repeater-add > :is(geo-input, geo-select, geo-date-input) {
  flex: 1 1 160px;
  min-width: 0;
}

.geo-repeater-add > geo-checkbox {
  flex: 0 0 auto;
}

.geo-repeater-add > geo-btn {
  flex: 0 0 auto;
}

/* 新增、刪除鈕改帶圓角的正方形（寬高一致），不要一般按鈕文字留白造成的長方形 */
.geo-repeater-row > geo-btn > button,
.geo-repeater-add > geo-btn > button {
  width: var(--geo-btn-xsmall-h);
  padding: 0;
}

/* --------------------------------------------------------------------------
   17. 多步驟填寫 <geo-stepper>／<geo-step-item>
   -------------------------------------------------------------------------- */
geo-stepper {
  display: block;
}

geo-step-item {
  display: block;
}

.geo-stepper-panel {
  display: flex;
  gap: 32px;
}

.geo-stepper-vertical .geo-stepper-panel {
  align-items: flex-start;
}

.geo-stepper-vertical .geo-stepper-panel > geo-steps {
  flex: 0 0 240px;
}

.geo-stepper-horizontal .geo-stepper-panel {
  flex-direction: column;
  gap: 24px;
}

.geo-stepper-body {
  flex: 1 1 auto;
  min-width: 0;
}

.geo-stepper.is-compact .geo-stepper-panel {
  flex-direction: column;
}

.geo-stepper.is-compact .geo-stepper-panel > geo-steps {
  flex: 0 0 auto;
}

/* 動作列緊接目前步驟內容，按鈕全部靠右：另加的按鈕（暫存草稿等）排最前面，接著上一步、下一步 */
.geo-stepper-actions {
  display: flex;
  align-items: center;
  gap: var(--geo-btn-gap);
  margin-top: 24px;
  flex-wrap: wrap;
}

.geo-stepper-actions-right {
  display: flex;
  align-items: center;
  gap: var(--geo-btn-gap);
  margin-left: auto;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   18. 唯讀活動時間軸 <geo-timeline>（圓點、連接線、標籤樣式沿用 geo-atoms.css 的 .geo-steps-vertical／.geo-step）
   -------------------------------------------------------------------------- */
geo-timeline {
  display: block;
}

.geo-timeline-time {
  font-size: 12px;
  color: var(--geo-text-secondary);
}

.geo-timeline-empty {
  padding: 24px;
  text-align: center;
  color: var(--geo-text-secondary);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   19. AI 對話面板 <geo-chat-panel>
   -------------------------------------------------------------------------- */
geo-chat-panel {
  display: block;
}

.geo-chat-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.geo-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px;
}

.geo-chat-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 80%;
}

.geo-chat-message.is-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.geo-chat-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--geo-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.geo-chat-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  background-color: var(--geo-background);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.geo-chat-message.is-user .geo-chat-bubble {
  background-color: var(--geo-primary);
  color: #fff;
}

.geo-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.geo-chat-suggestions geo-chip {
  cursor: pointer;
}

.geo-chat-input-row {
  display: flex;
  gap: var(--geo-btn-gap);
  align-items: flex-start;
}

.geo-chat-input-row geo-input {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   地圖 <geo-map>（OpenLayers）：圖釘、資訊視窗、圖例、側邊欄、工具列、面板
   -------------------------------------------------------------------------- */
geo-map {
  --geo-map-dark: rgba(38, 50, 56, 0.96);
  --geo-map-dark-line: rgba(255, 255, 255, 0.18);
  display: block;
  position: relative;
  width: 100%;
  min-height: 240px;
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius-base);
  overflow: hidden;
  background-color: var(--geo-background);
}

geo-map .geo-map-canvas {
  position: absolute;
  inset: 0;
}

/* 格線底圖（離線或 base-map="none"） */
geo-map.is-grid .geo-map-canvas {
  background-color: var(--geo-background);
  background-image:
    linear-gradient(var(--geo-divider) 1px, transparent 1px),
    linear-gradient(90deg, var(--geo-divider) 1px, transparent 1px);
  background-size: 48px 48px;
}

geo-map .geo-map-missing {
  padding: var(--geo-space-4);
  color: var(--geo-error);
  font-size: var(--geo-fs-body);
}

geo-map .geo-map-notice {
  position: absolute;
  left: 50%;
  bottom: var(--geo-space-10);
  transform: translateX(-50%);
  z-index: 9;
  padding: 4px 14px;
  border-radius: var(--geo-rounded-pill);
  background-color: var(--geo-map-dark);
  color: var(--geo-text-white);
  font-size: var(--geo-fs-caption);
  box-shadow: var(--geo-elevation-2);
  white-space: nowrap;
}

/* OpenLayers 內建控制項改用 Token 配色 */
geo-map .ol-zoom {
  top: auto;
  left: auto;
  right: var(--geo-space-3);
  bottom: var(--geo-space-10);
}

geo-map .ol-control button {
  background-color: var(--geo-surface);
  color: var(--geo-text-primary);
  border-radius: var(--geo-rounded-xs);
  box-shadow: var(--geo-elevation-1);
}

geo-map .ol-control button:hover {
  background-color: var(--geo-background);
}

geo-map .ol-scale-line {
  left: auto;
  right: 60px;
  bottom: var(--geo-space-3);
  background-color: rgba(255, 255, 255, 0.85);
}

geo-map .ol-scale-line-inner {
  color: var(--geo-text-primary);
  border-color: var(--geo-text-primary);
  font-size: var(--geo-fs-caption);
}

geo-map .ol-attribution {
  font-size: var(--geo-fs-caption);
  right: auto;
  left: 0;
  bottom: 0;
}

geo-map.has-sidebar .ol-attribution {
  left: 52px;
}

/* 底圖切換（沒有側邊欄時） */
geo-map .geo-map-switcher {
  position: absolute;
  top: var(--geo-space-3);
  right: var(--geo-space-3);
  z-index: 5;
  display: flex;
  gap: var(--geo-btn-gap, 6px);
  padding: 4px;
  background-color: var(--geo-surface);
  border-radius: var(--geo-radius-base);
  box-shadow: var(--geo-elevation-2);
}

geo-map .geo-map-switcher geo-btn.is-active {
  opacity: 1;
  outline: 2px solid var(--geo-primary);
  border-radius: var(--geo-radius-base);
}

/* 圖例 */
geo-map .geo-map-legend {
  position: absolute;
  right: 56px;
  bottom: var(--geo-space-10);
  z-index: 5;
  padding: var(--geo-space-2) var(--geo-space-3);
  background-color: var(--geo-surface);
  border-radius: var(--geo-radius-base);
  box-shadow: var(--geo-elevation-2);
  font-size: var(--geo-fs-caption);
  color: var(--geo-text-primary);
}

geo-map .geo-map-legend-title {
  display: flex;
  justify-content: space-between;
  gap: var(--geo-space-4);
  font-weight: 700;
  margin-bottom: 4px;
}

geo-map .geo-map-legend-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--geo-text-secondary);
}

geo-map .geo-map-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.7;
}

geo-map .geo-map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

/* 資訊視窗（黑色 80% 透明、寬 250px、標題列加底線與關閉叉叉、內容逐行「欄位：值」、可放圖片與按鈕） */
geo-map .geo-map-popup {
  position: relative;
  width: 250px;
  box-sizing: border-box;
  padding: 0.5em;
  background-color: rgba(0, 0, 0, 0.8);
  color: var(--geo-text-white);
  border-radius: 0.4em;
  font-size: var(--geo-fs-body);
}

geo-map .geo-map-popup[hidden] {
  display: none;
}

geo-map .geo-map-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid var(--geo-text-white);
}

geo-map .geo-map-popup-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

geo-map .geo-map-popup-close {
  position: relative;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  border: none;
  background: transparent;
  opacity: 0.5;
  cursor: pointer;
}

geo-map .geo-map-popup-close:hover {
  opacity: 1;
}

geo-map .geo-map-popup-close::before,
geo-map .geo-map-popup-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  width: 0.8em;
  height: 2px;
  background-color: var(--geo-text-white);
}

geo-map .geo-map-popup-close::before {
  transform: rotate(45deg);
}

geo-map .geo-map-popup-close::after {
  transform: rotate(-45deg);
}

geo-map .geo-map-popup-body {
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.9em;
}

geo-map .geo-map-popup-wrap {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

geo-map .geo-map-popup-img {
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  border: 1px solid #eee;
}

geo-map .geo-map-popup-text {
  flex: 1;
  min-width: 0;
}

geo-map .geo-map-popup-row {
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}

geo-map .geo-map-popup-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.6em;
}

/* 左側面板：圖層查詢、空間定位、圖層套疊 */
geo-map .geo-map-sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}

geo-map .geo-map-sidebar-panel {
  display: none;
  width: 320px;
  max-width: calc(100vw - 60px);
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: var(--geo-space-3);
  background-color: var(--geo-map-dark);
  color: var(--geo-text-white);
  pointer-events: auto;
}

geo-map .geo-map-sidebar.is-open .geo-map-sidebar-panel {
  display: block;
}

geo-map .geo-map-sidebar-title {
  font-size: var(--geo-fs-card);
  font-weight: 700;
  margin: 0 0 var(--geo-space-3);
}

geo-map .geo-map-sidebar-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--geo-space-3) 0 0 0;
  pointer-events: auto;
}

geo-map .geo-map-tab {
  width: 40px;
  height: 46px;
  border: none;
  border-radius: var(--geo-radius-base);
  background-color: var(--geo-surface);
  color: var(--geo-primary);
  cursor: pointer;
  box-shadow: var(--geo-elevation-2);
}

geo-map .geo-map-tab.is-active {
  background-color: var(--geo-primary);
  color: var(--geo-text-white);
}

/* sidebar="locate"（簡易地圖編輯坐標）：面板預設整個隱藏，開始編輯（openEditLocate()）後才顯示 */
geo-map.is-locate-only .geo-map-sidebar {
  display: none;
}

geo-map.is-locate-only.is-editing-locate .geo-map-sidebar {
  display: flex;
}

geo-map.has-sidebar .ol-zoom {
  right: var(--geo-space-3);
}

geo-map .geo-map-card {
  margin-bottom: var(--geo-space-3);
  background-color: var(--geo-surface);
  color: var(--geo-text-primary);
  border-radius: var(--geo-radius-base);
  overflow: hidden;
}

geo-map .geo-map-card-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: var(--geo-space-2) var(--geo-space-3);
  border: none;
  background-color: var(--geo-cell-group);
  color: var(--geo-primary);
  font-size: var(--geo-fs-body);
  font-weight: 700;
  cursor: pointer;
}

geo-map .geo-map-card.is-folded .geo-map-card-body {
  display: none;
}

geo-map .geo-map-card-body {
  padding: var(--geo-space-3);
}

geo-map .geo-map-card-actions,
geo-map .geo-map-panel-actions {
  display: flex;
  justify-content: center;
  gap: var(--geo-btn-gap, 6px);
  margin-top: var(--geo-space-2);
}

geo-map .geo-map-subtabs {
  display: flex;
  border-bottom: 1px solid var(--geo-border);
  margin-bottom: var(--geo-space-3);
}

geo-map .geo-map-subtabs button {
  flex: 1;
  padding: var(--geo-space-2) 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--geo-text-secondary);
  font-size: var(--geo-fs-body);
  cursor: pointer;
}

geo-map .geo-map-subtabs button.is-active {
  color: var(--geo-primary);
  border-bottom-color: var(--geo-primary);
  font-weight: 700;
}

geo-map .geo-map-results {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
}

geo-map .geo-map-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--geo-space-2) var(--geo-space-1);
  border: none;
  border-bottom: 1px solid var(--geo-divider);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

geo-map .geo-map-result:hover {
  background-color: var(--geo-background);
}

geo-map .geo-map-result span {
  color: var(--geo-text-secondary);
  font-size: var(--geo-fs-caption);
}

geo-map .geo-map-empty {
  padding: var(--geo-space-2);
  color: var(--geo-text-secondary);
  font-size: var(--geo-fs-caption);
  text-align: center;
}

geo-map .geo-map-layer-row {
  display: flex;
  align-items: center;
  gap: var(--geo-space-2);
  padding: var(--geo-space-2) 0;
  border-bottom: 1px solid var(--geo-divider);
  cursor: pointer;
}

geo-map .geo-map-layer-row span {
  flex: 1;
}

geo-map .geo-map-chip {
  padding: 1px 8px;
  border: 1px solid var(--geo-primary);
  border-radius: var(--geo-rounded-xs);
  background: transparent;
  color: var(--geo-primary);
  font-size: var(--geo-fs-caption);
  cursor: pointer;
}

geo-map .geo-map-layer-opacity {
  width: 100%;
}

/* 右上工具列與工具面板 */
geo-map .geo-map-toolbar {
  position: absolute;
  top: var(--geo-space-4);
  right: var(--geo-space-4);
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100% - 70px);
  padding: 4px;
  background-color: var(--geo-map-dark);
  border-radius: var(--geo-radius-base);
  box-shadow: var(--geo-elevation-3);
}

geo-map .geo-map-toolbtn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: var(--geo-radius-base);
  background: transparent;
  color: var(--geo-text-white);
  cursor: pointer;
}

geo-map .geo-map-toolbtn:hover {
  background-color: var(--geo-map-dark-line);
}

geo-map .geo-map-toolbtn.is-active {
  color: var(--geo-nav-active);
  background-color: var(--geo-map-dark-line);
}

geo-map .geo-map-panel {
  position: absolute;
  top: 70px;
  right: var(--geo-space-4);
  z-index: 7;
  width: 300px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 90px);
  overflow-y: auto;
  box-sizing: border-box;
  background-color: var(--geo-map-dark);
  color: var(--geo-text-white);
  border-radius: var(--geo-radius-base);
  box-shadow: var(--geo-elevation-3);
}

/* 個人化地圖浮動視窗較窄（內容只有兩顆按鈕與說明文字） */
geo-map .geo-map-panel.is-narrow-panel {
  width: 240px;
}

geo-map .geo-map-panel[hidden] {
  display: none;
}

geo-map .geo-map-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--geo-space-2) var(--geo-space-3);
  border-bottom: 1px solid var(--geo-map-dark-line);
  font-weight: 700;
}

geo-map .geo-map-panel-close {
  border: none;
  background: transparent;
  color: var(--geo-text-white);
  font-size: 20px;
  cursor: pointer;
}

geo-map .geo-map-panel-body {
  padding: var(--geo-space-3);
}

geo-map .geo-map-panel-body > *,
geo-map .geo-map-panel-body geo-input,
geo-map .geo-map-panel-body geo-select {
  margin-bottom: var(--geo-space-2);
}

geo-map .geo-map-panel-sub {
  margin-top: var(--geo-space-3);
  font-weight: 700;
}

geo-map .geo-map-tool-grid {
  display: flex;
  justify-content: space-around;
}

geo-map .geo-map-drawbtn {
  width: 48px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--geo-text-white);
  cursor: pointer;
}

geo-map .geo-map-drawbtn.is-active {
  color: var(--geo-nav-active);
  background-color: var(--geo-map-dark-line);
  border-radius: var(--geo-radius-base);
}

geo-map .geo-map-draw-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background-color: var(--geo-map-dark-line);
  border-radius: var(--geo-radius-base);
  margin-bottom: 4px;
}

geo-map .geo-map-draw-item button {
  border: none;
  background: transparent;
  color: var(--geo-text-white);
  cursor: pointer;
  text-align: left;
}

geo-map .geo-map-check-row {
  display: flex;
  gap: var(--geo-space-4);
}

geo-map .geo-map-coord-line,
geo-map .geo-map-analyze-box {
  padding: var(--geo-space-2);
  background-color: var(--geo-surface);
  color: var(--geo-text-primary);
  border-radius: var(--geo-radius-base);
}

geo-map .geo-map-coord-line {
  margin-bottom: var(--geo-space-2);
}

/* 空間分析：環域半徑的中心點座標與「自訂點位」同一列 */
geo-map .geo-map-analyze-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--geo-space-2);
}

geo-map .geo-map-analyze-center .geo-map-coord-line {
  padding: 0;
}

/* 空間分析：自訂範圍的三個繪製方式（線、四邊形、自訂多邊形）圖示按鈕，選取中的填滿主色 */
geo-map .geo-map-shape-row {
  display: flex;
  justify-content: space-between;
  gap: var(--geo-space-2);
  margin-bottom: var(--geo-space-2);
}

geo-map .geo-map-shape-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  height: 48px;
  border: none;
  border-radius: var(--geo-rounded-sm);
  background-color: var(--geo-map-dark);
  color: var(--geo-text-white);
  cursor: pointer;
}

geo-map .geo-map-shape-btn.is-on {
  background-color: var(--geo-primary);
  box-shadow: 0 0 0 2px var(--geo-secondary);
}

geo-map .geo-map-panel .geo-map-results {
  background-color: var(--geo-surface);
  color: var(--geo-text-primary);
  border-radius: var(--geo-radius-base);
}

geo-map .geo-map-panel .geo-map-empty {
  background-color: var(--geo-surface);
  color: var(--geo-text-secondary);
  border-radius: var(--geo-radius-base);
}

geo-map .geo-map-panel-body .geo-input-label,
geo-map .geo-map-panel-body label {
  color: var(--geo-text-white);
}

geo-map .geo-map-analyze-box .geo-input-label,
geo-map .geo-map-analyze-box label {
  color: var(--geo-text-primary);
}

geo-map .geo-map-card-body geo-input,
geo-map .geo-map-card-body geo-select {
  display: block;
  margin-bottom: var(--geo-space-3);
}

/* geo-field（欄位名稱在左、輸入或選單在右）用在圖層查詢、空間定位、圖層套疊、列印、圖面標繪等狹窄面板：
   標題欄縮短為 76px（預設 140px 在 320px 寬側欄放不下），並縮小列距；深色浮動面板（.geo-map-panel-body）內文字改白色 */
geo-map .geo-map-sidebar-panel geo-field,
geo-map .geo-map-panel-body geo-field {
  margin-bottom: var(--geo-space-2);
}

geo-map .geo-map-sidebar-panel .geo-form-row,
geo-map .geo-map-panel-body .geo-form-row {
  gap: 8px;
  margin-bottom: 0;
}

geo-map .geo-map-sidebar-panel .geo-form-title,
geo-map .geo-map-panel-body .geo-form-title {
  width: 76px;
  min-width: 76px;
  font-size: var(--geo-fs-body);
}

geo-map .geo-map-sidebar-panel .geo-form-title,
geo-map .geo-map-panel-body .geo-form-title {
  color: var(--geo-text-white);
}

/* 白底卡片（.geo-map-card 內文、.geo-map-analyze-box）浮在深色面板上，欄位名稱一律用深色，否則白字配白底看不見 */
geo-map .geo-map-card .geo-form-title,
geo-map .geo-map-card .geo-input-label,
geo-map .geo-map-card label {
  color: var(--geo-text-primary);
}

/* geo-map-analyze-box 本身是白底卡片（浮在深色面板上），欄位名稱改回深色才看得見 */
geo-map .geo-map-analyze-box .geo-form-title {
  color: var(--geo-text-primary);
}

geo-map .geo-map-measure-tip,
geo-map .geo-map-measure-label {
  padding: 2px 8px;
  border-radius: var(--geo-rounded-xs);
  background-color: var(--geo-map-dark);
  color: var(--geo-text-white);
  font-size: var(--geo-fs-caption);
  white-space: nowrap;
  pointer-events: none;
}

geo-map .geo-map-measure-label {
  background-color: var(--geo-warning);
  color: var(--geo-text-primary);
}

geo-map .geo-map-locate {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 6;
  padding: 2px 8px;
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-rounded-xs);
  background-color: var(--geo-surface);
  color: var(--geo-text-primary);
  font-size: var(--geo-fs-caption);
  cursor: pointer;
}

geo-map.is-narrow .geo-map-sidebar-panel {
  width: calc(100% - 56px);
  max-width: none;
}

geo-map.is-narrow.is-side-open .geo-map-toolbar,
geo-map.is-narrow.is-side-open .geo-map-panel {
  display: none;
}

@media (max-width: 720px) {
  geo-map .geo-map-legend {
    right: 52px;
  }

  geo-map .geo-map-panel {
    right: var(--geo-space-2);
    width: calc(100% - 16px);
  }

  geo-map .geo-map-toolbar {
    right: var(--geo-space-2);
    max-width: calc(100% - 64px);
  }
}

geo-map .geo-map-note {
  margin-top: var(--geo-space-3);
  font-size: var(--geo-fs-caption);
  line-height: 1.7;
}

geo-map .geo-map-ts-line {
  margin-top: var(--geo-space-3);
  color: var(--geo-nav-active);
  font-weight: 700;
}

geo-map .geo-map-ts-row {
  display: flex;
  align-items: center;
  gap: var(--geo-space-2);
}

geo-map .geo-map-ts-row input[type='range'] {
  flex: 1;
}

geo-map .geo-map-ts-play {
  width: 40px;
  height: 32px;
  border: none;
  border-radius: var(--geo-radius-base);
  background-color: var(--geo-primary);
  color: var(--geo-text-white);
  cursor: pointer;
}

geo-map .geo-map-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--geo-space-2);
  margin-bottom: var(--geo-space-2);
  font-weight: 700;
}

geo-map .geo-map-result-row {
  display: flex;
  align-items: center;
  gap: var(--geo-space-2);
  border-bottom: 1px solid var(--geo-divider);
}

geo-map .geo-map-result-row .geo-map-result {
  flex: 1;
  min-width: 0;
  border-bottom: none;
}

geo-map .geo-map-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--geo-rounded-xs);
  color: var(--geo-text-white);
  font-size: var(--geo-fs-caption);
  font-weight: 700;
}

geo-map .geo-map-chip.is-on {
  background-color: var(--geo-primary);
  color: var(--geo-text-white);
}

/* --------------------------------------------------------------------------
   資料表格勾選欄（selectable）：第一欄窄欄置中放核取方塊，表頭為全選
   -------------------------------------------------------------------------- */
.geo-data-table .geo-table th.geo-data-table-select,
.geo-data-table .geo-table td.is-select {
  width: 56px;
  text-align: center;
}

.geo-data-table .geo-table th.geo-data-table-select .geo-checkbox-wrapper,
.geo-data-table .geo-table td.is-select .geo-checkbox-wrapper {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   地圖擴充：資訊視窗多按鈕與圖片位置、重疊點位清單、圖層樣式面板、圖例圖片、滑鼠座標與鷹眼圖
   -------------------------------------------------------------------------- */
geo-map .geo-map-popup-actions {
  flex-wrap: wrap;
  gap: 6px;
}

geo-map .geo-map-popup-wrap.is-image-right {
  flex-direction: row-reverse;
}

geo-map .geo-map-popup-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

geo-map .geo-map-popup-pick {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  padding: 4px 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

geo-map .geo-map-popup-pick:hover {
  background: rgba(255, 255, 255, 0.15);
}

geo-map .geo-map-style-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

/* 調色盤：與「配色與外觀設定」相同的色彩選取器，可自由選色 */
geo-map .geo-map-colorpick {
  display: flex;
  align-items: center;
  gap: 8px;
}

geo-map .geo-map-color-input {
  width: 48px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--geo-input-border);
  border-radius: var(--geo-rounded-sm);
  background: transparent;
  cursor: pointer;
}

geo-map .geo-map-style-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

geo-map .geo-map-style-row input[type="range"] {
  flex: 1;
}

geo-map .geo-map-legend-img {
  display: block;
  max-width: 220px;
  max-height: 260px;
  margin-top: 6px;
}

geo-map .geo-map-mouse {
  position: absolute;
  right: 8px;
  bottom: 30px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--geo-text-primary);
  font-size: 12px;
}

geo-map .ol-overviewmap {
  left: auto;
  right: 8px;
  bottom: 58px;
}

geo-map .ol-overviewmap:not(.ol-collapsed) {
  background: rgba(255, 255, 255, 0.85);
}

geo-map .geo-map-draw-item button:first-child {
  flex: 1;
}

geo-map .geo-map-draw-item button + button {
  margin-left: 8px;
  opacity: 0.85;
}

/* 空間定位子頁籤較多：整排均分不斷字，放不下時整個頁籤換到下一排 */
geo-map .geo-map-subtabs {
  flex-wrap: wrap;
}

geo-map .geo-map-subtabs button {
  flex: 1 1 auto;
  padding: var(--geo-space-2) 6px;
  font-size: 14px;
  white-space: nowrap;
}

geo-map .geo-map-mouse {
  right: auto;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
}

geo-map .ol-full-screen {
  top: auto;
  right: 8px;
  bottom: 96px;
}

/* equal-height：橫式頁籤各頁籤內容多寡不同時，內容區高度統一為最高的頁籤（其後的內容位置不隨切換移動；geo-blocks.js 量測後寫入） */
geo-tabs[equal-height]:not(.geo-tabs-vertical) > geo-tab-item {
  min-height: var(--geo-tabs-min-height, auto);
}

.geo-section-title-slot {
  flex: 0 1 auto;
  min-width: 0;
}

/* keep-inline：明細整塊置中（欄位名稱固定寬度靠右、內容靠左，各列對齊），用於登入頁維護資訊這類置中呈現 */
geo-detail.geo-detail--inline {
  grid-template-columns: max-content max-content;
  justify-content: center;
  column-gap: 12px;
}

geo-detail.geo-detail--inline > .geo-form-row {
  display: contents;
}

geo-detail.geo-detail--inline .geo-form-title {
  width: auto;
  min-width: 0;
  text-align: right;
}

/* 標題位置放欄位（slot="title"）：欄位名稱不換行，與輸入框同一行 */
.geo-section-title-slot .geo-form-title {
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

.geo-section-title-slot geo-input {
  width: 120px;
}

/* 資料表格 ellipsis 欄：內容超過欄寬時尾端顯示「…」 */
.geo-table-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: var(--geo-ellipsis-width, 240px);
}

/* 資料表格批次操作列：勾選 1 筆以上時取代一般工具列；窄螢幕固定在畫面底部方便觸控 */
.geo-data-table-batch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding: 8px 16px;
  border-radius: var(--geo-rounded-sm, 4px);
  border: 1.5px solid var(--geo-primary);
  background-color: var(--geo-surface);
  color: var(--geo-primary);
}

.geo-data-table-batch[hidden] {
  display: none;
}

.geo-data-table-batch-info {
  font-size: var(--geo-fs-body, 16px);
}

.geo-data-table-batch-clear {
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.geo-data-table-batch-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--geo-btn-gap, 6px);
  margin-left: auto;
}

@media (max-width: 600px) {
  .geo-data-table-batch {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: var(--geo-elevation-up);
  }

  geo-data-table.has-batch {
    padding-bottom: 96px;
  }
}