:root {
  --bg: #faf7f2;
  --fg: #2b2320;
  --accent: #c0392b;
  --border: #e0d8cd;
  --row-hover: #f3ece1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #201a16;
    --fg: #f0e9e0;
    --accent: #e07a5f;
    --border: #3a322b;
    --row-hover: #2a231d;
  }
}

* { box-sizing: border-box; }

/* 版面是「整頁不捲、只有資料區捲」的直向 flex：標題、分頁籤、工具列與分頁列
   都固定在畫面上，中間的 .scroll-area 吃掉剩下的高度自己捲。
   之所以不用 position: sticky 把 header 黏在文件頂端，是因為那樣還要量出
   header 的實際高度餵給表頭的 top（分頁籤會換行，高度是浮動的），
   量錯就會露出一條縫或蓋住內容 */
html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  flex: none;
  padding: 1.25rem 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

header h1 {
  margin: 0 0 0.75rem;
  font-size: 1.3rem;
}

nav#tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

nav#tabs button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-bottom: none;
  background: transparent;
  color: var(--fg);
  cursor: grab;
  border-radius: 6px 6px 0 0;
  font-size: 0.95rem;
}

nav#tabs button.active {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

nav#tabs button.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* **不要在這裡設 max-width**。原本是 1100px，結果視窗拉寬之後表格還是停在
   1100px、欄位擠成一團不會跟著變寬（在大螢幕上特別明顯）。列表要用滿整個
   視窗，欄寬才會隨視窗縮放。
   閱讀用的 .detail-view 另外有自己的 max-width——那裡是整段文章，行太長
   反而難讀，兩者的需求相反，不要一起處理 */
main {
  flex: 1;
  /* min-height: 0 是關鍵：flex 項目的預設 min-height 是 auto，不歸零的話
     內容多高它就多高，.scroll-area 永遠不會出現捲軸，整頁又變回一起捲 */
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.scroll-area {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.toolbar {
  flex: none;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.toolbar input[type="search"] {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}

button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

button.secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}

.error {
  background: #fdecea;
  color: #a33;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* 訪客模式的唯讀說明橫幅。flex:none 是必要的——它在 main 這個直向 flex
   裡面，不寫的話內容一多就會被壓扁 */
.guest-banner {
  flex: none;
  background: var(--row-hover);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  line-height: 1.7;
}
.guest-banner strong { color: var(--accent); margin-right: 0.4rem; }
.guest-rights { display: block; opacity: 0.75; font-size: 0.8rem; }

/* 唯一的隱藏規則。**!important 是必要的，不是偷懶**：這是個單一 class 選擇器，
   任何宣告在它「後面」的同權重規則（`.pager { display: flex }`、
   `.overlay { display: flex }`…）都會贏過它，元素加了 hidden 卻還是看得到。
   2026-08-16 就是這樣出事：詳細頁上分頁列沒被藏住，按「下一頁」換的是底下
   那張看不見的表格，畫面上內容完全沒變，看起來像 bug。
   有了 !important 就不必再為每個元件補 `.X.hidden` 特例 */
.hidden { display: none !important; }

.ref-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.ref-link:hover { text-decoration: none; border-bottom-style: solid; }

/* 一般的 table（不是 display:block + thead/tbody 各自 display:table）。
   那種寫法會讓 table 自己變成捲動容器，表頭的 position: sticky 就會黏在
   「永遠不捲的 table 內部」而不是外面的 .scroll-area，等於沒作用。
   橫向捲動改由 .scroll-area 負責 */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  word-break: break-word;
}

th { font-weight: 600; }

/* 表頭黏在捲動容器頂端。border-collapse 之下框線屬於表格而不是儲存格，
   sticky 的時候會跟著內容捲走，所以底線改用 inset shadow 畫 */
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* 表頭可以拖曳調整欄位左右順序（.columns-table 是「管理欄位」對話框裡的
   靜態表格，排除掉不給拖的暗示） */
thead th[draggable="true"] { cursor: grab; }
thead th.dragging { opacity: 0.4; cursor: grabbing; }

tbody tr:hover { background: var(--row-hover); }

/* 從參照連結跳過來的那一列。搜尋會比對描述等所有文字欄位，常常不只一列命中
   （例如 A 的描述提到了 B），標出來才知道哪一列是點過來的目標 */
tbody tr.row-target > td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* 左緣的色條用 inset shadow 畫，不用 border-left——border 會把這一列的
   儲存格往右推 3px，跟其他列對不齊 */
tbody tr.row-target > td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.row-actions button {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  margin-right: 0.3rem;
}

.overlay {
  position: fixed;
  inset: 0;
  /* **一定要壓過 sticky 表頭**。定位元素的堆疊順序是「正 z-index 的一律畫在
     z-index:auto 的上面，跟 DOM 先後無關」，所以 thead th 的 z-index:2 會
     穿透這層遮罩浮在對話框上（2026-08-16 實際發生） */
  z-index: 100;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem;
  overflow-y: auto;
}

.record-form {
  background: var(--bg);
  color: var(--fg);
  padding: 1.5rem;
  border-radius: 10px;
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--border);
}

.record-form h2 { margin-top: 0; }

.field {
  margin-bottom: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.field label {
  font-size: 0.85rem;
  font-weight: 600;
}

.field input, .field select, .field textarea {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
}

.field textarea { min-height: 4rem; resize: vertical; }

/* 參照下拉上面的即時篩選框。做得比下拉本身低調一點——它是找選項的工具，
   不是要填的欄位，不該看起來像另一個必填格 */
.ref-search {
  padding: 0.3rem 0.5rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.82rem;
}
.ref-search:focus { border-style: solid; border-color: var(--accent); outline: none; }

/* 列表分頁列。只有一頁時只顯示「共 N 列」，不長出沒用的上一頁/下一頁 */
.pager {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  opacity: 0.9;
}
.pager button {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}
.pager button:disabled { opacity: 0.35; cursor: default; }
/* 目前所在頁：反白且不可點（disabled），但不要跟著吃上面那條 0.35 透明度
   ——那會讓「你在第幾頁」反而變成最看不清楚的一個 */
.pager button.pager-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pager button.pager-current:disabled { opacity: 1; }
.pager-gap { opacity: 0.5; padding: 0 0.15rem; }
.pager-info { opacity: 0.8; margin-left: 0.35rem; }

.pager-jump {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.6rem;
}
.pager-jump input {
  width: 4.5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.85rem;
}

/* 多選參照欄位的「已選清單＋搜尋加入」 */
.multi-picker { display: flex; flex-direction: column; gap: 0.45rem; }

.multi-chosen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 1.9rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.multi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: var(--row-hover);
  border: 1px solid var(--border);
  font-size: 0.82rem;
}

/* 搜尋結果一次最多 20 筆，超過就捲——避免打一個字就洗出整頁候選 */
.multi-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-height: 8rem;
  overflow-y: auto;
}
.multi-candidate {
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 0.82rem;
}
.multi-candidate:hover { border-style: solid; border-color: var(--accent); color: var(--accent); }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

.hint {
  font-size: 0.82rem;
  opacity: 0.75;
  margin-top: -0.3rem;
}

/* 兩欄勾選（我的分頁／訪客可見）+ 表名。用 grid 而不是 flex，兩個勾選框
   才會對齊成直的兩行，跟標題列對得起來 */
.tabs-visibility-row {
  display: grid;
  grid-template-columns: 4.5rem 4.5rem 1fr;
  align-items: center;
  justify-items: center;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.tabs-visibility-row > span:last-child { justify-self: start; }
.tabs-visibility-head {
  font-size: 0.78rem;
  opacity: 0.7;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
}

.columns-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
}
.columns-table th, .columns-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--border);
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.inline-form input[type="text"] {
  flex: 1;
  min-width: 160px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}
.inline-form select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}

.compound-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
  font-size: inherit;
}
.compound-link:hover { border-bottom-style: solid; }

/* 分組列表裡跟在每個子項後面的小動作鈕（✎ 編輯 / ✕ 刪除）。刻意做得很輕：
   那一格可能有五六個子項、每個後面掛一到兩個鈕，做成一般按鈕會把整格塞滿、
   蓋過真正要讀的內容 */
.inline-act {
  background: none;
  border: none;
  padding: 0 0.15rem 0 0.2rem;
  color: var(--fg);
  opacity: 0.35;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}
.inline-act:hover { opacity: 1; color: var(--accent); }

.compound-detail { max-width: 560px; }

/* 長文字欄位：列表只顯示摘要，樣式比照 .ref-link / .compound-link，
   讓「有底線＝點得下去」在整個介面是同一個意思 */
.long-text-link {
  /* 夾成兩行、超出的部分由瀏覽器自己加省略號。用 CSS 而不是在 JS 裡
     截固定字數，摘要長度才會隨欄寬自動調整——欄位多的表每欄只有 ~110px，
     截 40 字一樣會折成七八行，等於沒解決問題 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: var(--accent);
  /* 多行的摘要用 text-decoration 而不是 border-bottom：後者只會在整塊的
     最底下畫一條，看起來像分隔線不像連結 */
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.long-text-link:hover { text-decoration: underline solid; }

/* 主要識別欄的連結。跟 .long-text-link 的差別是不夾行、也不截字——
   識別名稱本來就短，夾掉反而看不出是哪一筆 */
.record-link {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.record-link:hover { text-decoration: underline solid; }

/* 序號欄顯示的是「ING-001」這種短代號，UUID 只在 tooltip。
   max-width: 0 是給 table-layout 用的「盡量壓縮這一欄」訊號，不是真的 0 寬 */
.id-cell {
  white-space: nowrap;
  max-width: 0;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.detail-view { max-width: 720px; }

/* 就地編輯時再放寬。對話框是 480px，長描述在那個寬度裡要一直捲——
   使用者 2026-08-15 要求改成在詳細頁編輯，重點就是這個寬度 */
.detail-view.editing { max-width: 960px; }
.detail-edit .field textarea { min-height: 8rem; }
.detail-view h2 { margin: 0 0 0.2rem; font-size: 1.2rem; }

.detail-subtitle {
  margin: 0 0 1.5rem;
  font-size: 0.82rem;
  opacity: 0.65;
}

.detail-field { margin-bottom: 1.6rem; }
.detail-field h3 {
  font-size: 0.85rem;
  margin: 0 0 0.4rem;
  opacity: 0.75;
}
/* 從列表點進來的那個欄位標成重點，一頁有好幾個欄位時才知道自己點的是哪個 */
.detail-field.focused h3 { color: var(--accent); opacity: 1; }
.detail-field p {
  margin: 0 0 0.7rem;
  /* 作法步驟那種內含換行的文字要保留原本斷行，這是詳細頁最主要的可讀性來源 */
  white-space: pre-wrap;
  line-height: 1.8;
  font-size: 0.95rem;
}
.detail-field p:last-child { margin-bottom: 0; }

/* 分點敘述（①②③ 或 1. 2. 3.）拆出來的清單。用 <ol> 保留原本的編號語意，
   縮排靠 padding-left 而不是預設的 margin，項目才會跟前後段落對齊 */
.detail-list {
  margin: 0 0 0.7rem;
  padding-left: 1.5rem;
  line-height: 1.8;
  font-size: 0.95rem;
}
.detail-list:last-child { margin-bottom: 0; }
.detail-list li { margin-bottom: 0.35rem; }
.detail-list li:last-child { margin-bottom: 0; }

.detail-section {
  margin-bottom: 1.1rem;
}
.detail-section h3 {
  font-size: 0.9rem;
  margin: 0 0 0.4rem;
  opacity: 0.8;
}
.detail-section ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
}
.detail-section li { margin-bottom: 0.3rem; }
.detail-empty { font-size: 0.85rem; opacity: 0.6; }
.signature-badge {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  background: var(--accent);
  color: #fff;
  margin-left: 0.4rem;
}