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

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

/* --------------------------------------------------------------------------
   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-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-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, 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, 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, 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-select, geo-date-input, geo-date-roc, geo-date-range) {
  max-width: none;
}

/* 窄版日期區間：起訖兩格並排會截斷日期，改為上下排列、每格滿版 */
:is(geo-search-card, .geo-form-dialog-card, geo-detail, 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, 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;
}

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

.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-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);
}

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

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

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

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

.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-body > .geo-form-row > .geo-form-content {
  width: 100%;
}

/* 以圖示取代欄位名稱 <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;
}

/* 群組標題為按鈕（可用鍵盤操作），外觀與選單項目一致 */
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;
}

/* 內容區塊：標題與麵包屑下方的白色區塊，頁面內容由上而下排列（比照 HTML 範本與公司範本 PageLayout） */
.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);
}

/* 左右留白比照公司範本 v-container（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-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;
}

/* 放在區塊卡片內的資料表格：外框、圓角與陰影 */
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;
}

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

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);
}

/* --------------------------------------------------------------------------
   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-image-upload),
.geo-form-body .geo-form-grid-2col > .geo-form-row > .geo-form-content > :is(geo-input, geo-textarea, 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);
}

/* 外殼內容區改由整頁捲動，底部動作列才能固定在畫面底部 */
.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;
}

/* --------------------------------------------------------------------------
   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-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;
  justify-content: space-between;
  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;
}

/* --------------------------------------------------------------------------
   17. 唯讀活動時間軸 <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;
}

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