:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --ink: #1a2332;
  --muted: #5b6b7c;
  --line: #d8e0ea;
  --accent: #0b6e4f;
  --accent-soft: #e6f4ef;
  --warn: #b45309;
  --warn-soft: #fff7ed;
  --done: #6b7280;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06);
  --radius: 12px;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(180deg, #eef3f8 0%, var(--bg) 240px);
  color: var(--ink);
  min-height: 100vh;
}

.site-header {
  background: #0f2744;
  color: #fff;
  padding: 22px 0;
}

.header-inner {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.site-header h1 {
  margin: 0 0 6px;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.subtitle {
  margin: 0;
  color: #b7c7db;
  font-size: 0.92rem;
}

.header-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.stat-pill {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.9rem;
}

.stat-pill strong { color: #9fe6c7; }

.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 22px 24px 48px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  transition: 0.15s ease;
}

.tab:hover { border-color: #9db2c9; }

.tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tab-count {
  margin-left: 6px;
  font-weight: 500;
  opacity: 0.9;
  font-size: 0.85em;
}

.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}

.filters select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.panel-meta h2 {
  margin: 0;
  font-size: 1.15rem;
}

.panel-counts {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.table-wrap {
  overflow-x: auto;
}

.tracker {
  width: 100%;
  border-collapse: collapse;
  min-width: 1180px;
}

.tracker th,
.tracker td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 0.93rem;
  line-height: 1.45;
}

.tracker th {
  background: #f7fafc;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.tracker tbody tr:hover { background: #f9fbfd; }

.tracker tr.done td {
  color: var(--done);
}

.tracker tr.done .what,
.tracker tr.done .tag-label {
  text-decoration: line-through;
}

.col-drag { width: 52px; padding-left: 8px !important; padding-right: 0 !important; }
.col-tag { width: 110px; }
.col-cat { width: 72px; }
.col-owner { width: 140px; }
.col-due { width: 150px; }
.col-status { width: 110px; }
.col-progress { min-width: 12rem; max-width: 22rem; }
.col-updated { width: 90px; }
.col-note { min-width: 180px; }

.tag-label {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 6px;
  padding: 3px 8px;
  font-weight: 700;
  font-size: 0.86rem;
  white-space: nowrap;
}

.cat-chip {
  display: inline-block;
  background: #eef2f7;
  color: #334155;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.8rem;
}

.status {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #eef2f7;
  color: #334155;
}

.status.progress { background: #e0f2fe; color: #075985; }
.status.open { background: #fee2e2; color: #991b1b; }
.status.wait { background: var(--warn-soft); color: var(--warn); }
.status.done { background: #e5e7eb; color: #4b5563; }
.status.calendar { background: #ede9fe; color: #5b21b6; }

.muted { color: var(--muted); }
.empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
}
.hidden { display: none !important; }

.site-footer {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto 28px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.85rem;
}

code {
  background: #e8eef5;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.owner-cell { min-width: 9rem; }
.owner-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  background: #fff;
  font: inherit;
}
.owner-input:focus {
  outline: 2px solid #0969da;
  outline-offset: 1px;
}
tr.done .owner-input { opacity: 0.75; }
.owner-hint { display: block; font-size: 0.75rem; margin-top: 0.2rem; }
.owner-hint.ok { color: #1a7f37; }
.owner-hint.err { color: #cf222e; }

.what-cell { min-width: 16rem; max-width: 28rem; }
.what-view { display: flex; gap: 0.5rem; align-items: flex-start; }
.what-text { flex: 1; white-space: pre-wrap; line-height: 1.45; }
.what-edit textarea.what-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line, #d8e0ea);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
  min-height: 4.5rem;
}
.what-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.4rem;
}
.btn-edit-what, .btn-save-what, .btn-cancel-what {
  border: 1px solid var(--line, #d8e0ea);
  background: #fff;
  color: var(--ink, #1a2332);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-edit-what:hover, .btn-cancel-what:hover { background: #f3f6fa; }
.btn-save-what {
  background: var(--accent, #0b6e4f);
  border-color: var(--accent, #0b6e4f);
  color: #fff;
}
.btn-save-what:hover { filter: brightness(1.05); }
.btn-save-what:disabled, .btn-cancel-what:disabled, .btn-edit-what:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.what-hint { font-size: 0.75rem; }
.what-hint.ok { color: #1a7f37; }
.what-hint.err { color: #cf222e; }

.status-cell { min-width: 7.5rem; }
.status-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line, #d8e0ea);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.status-select:focus {
  outline: 2px solid #0969da;
  outline-offset: 1px;
}
tr.done .status-select { opacity: 0.85; }
.status-hint { display: block; font-size: 0.75rem; margin-top: 0.2rem; }
.status-hint.ok { color: #1a7f37; }
.status-hint.err { color: #cf222e; }

.status-select.status {
  border-color: transparent;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  appearance: auto;
}
.status-select.status.progress { background: #e0f2fe; color: #075985; }
.status-select.status.open { background: #fee2e2; color: #991b1b; }
.status-select.status.wait { background: var(--warn-soft); color: var(--warn); }
.status-select.status.done { background: #e5e7eb; color: #4b5563; }
.status-select.status.calendar { background: #ede9fe; color: #5b21b6; }
.status-select.status:not(.progress):not(.open):not(.wait):not(.done):not(.calendar) {
  background: #eef2f7;
  color: #334155;
}

.progress-cell { min-width: 12rem; max-width: 22rem; }
.progress-view { display: flex; gap: 0.5rem; align-items: flex-start; }
.progress-text { flex: 1; white-space: pre-wrap; line-height: 1.45; }
.progress-edit textarea.progress-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line, #d8e0ea);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
  min-height: 4.5rem;
}
.progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.4rem;
}
.btn-edit-progress, .btn-save-progress, .btn-cancel-progress {
  border: 1px solid var(--line, #d8e0ea);
  background: #fff;
  color: var(--ink, #1a2332);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-edit-progress:hover, .btn-cancel-progress:hover { background: #f3f6fa; }
.btn-save-progress {
  background: var(--accent, #0b6e4f);
  border-color: var(--accent, #0b6e4f);
  color: #fff;
}
.btn-save-progress:hover { filter: brightness(1.05); }
.btn-save-progress:disabled, .btn-cancel-progress:disabled, .btn-edit-progress:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.progress-hint { font-size: 0.75rem; }
.progress-hint.ok { color: #1a7f37; }
.progress-hint.err { color: #cf222e; }


/* 編輯鈕：平常隱藏，滑過列／欄位才出現；也可點文字進入編輯 */
.what-view, .progress-view, .note-view {
  cursor: text;
  position: relative;
  border-radius: 8px;
  padding: 0.15rem 0.2rem;
  margin: -0.15rem -0.2rem;
}
.what-view:hover, .progress-view:hover, .note-view:hover {
  background: #f3f7fb;
}
.btn-edit-what, .btn-edit-progress, .btn-edit-note {
  opacity: 0;
  pointer-events: none;
  border: none;
  background: transparent;
  color: #64748b;
  padding: 0.15rem 0.35rem;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 6px;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.what-cell:hover .btn-edit-what,
.progress-cell:hover .btn-edit-progress,
.note-cell:hover .btn-edit-note,
.what-view:focus-within .btn-edit-what,
.progress-view:focus-within .btn-edit-progress,
.note-view:focus-within .btn-edit-note {
  opacity: 1;
  pointer-events: auto;
}
.btn-edit-what:hover, .btn-edit-progress:hover, .btn-edit-note:hover {
  background: #e8eef6;
  color: #0f2744;
}
.progress-text .placeholder, .note-text .placeholder {
  color: #94a3b8;
  font-size: 0.88rem;
}
.note-cell { min-width: 10rem; max-width: 18rem; }
.note-view { display: flex; gap: 0.5rem; align-items: flex-start; }
.note-text { flex: 1; white-space: pre-wrap; line-height: 1.45; color: var(--muted); }
.note-edit textarea.note-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line, #d8e0ea);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
  min-height: 4.5rem;
}
.note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.4rem;
}
.btn-edit-note, .btn-save-note, .btn-cancel-note {
  border: 1px solid var(--line, #d8e0ea);
  background: #fff;
  color: var(--ink, #1a2332);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-edit-note:hover, .btn-cancel-note:hover { background: #f3f6fa; }
.btn-save-note {
  background: var(--accent, #0b6e4f);
  border-color: var(--accent, #0b6e4f);
  color: #fff;
}
.btn-save-note:hover { filter: brightness(1.05); }
.btn-save-note:disabled, .btn-cancel-note:disabled, .btn-edit-note:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.note-hint { font-size: 0.75rem; }
.note-hint.ok { color: #1a7f37; }
.note-hint.err { color: #cf222e; }

/* ---- drag & drop reorder ---- */
.tracker td.drag-cell {
  width: 28px;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 0;
}

.drag-handle {
  display: inline-block;
  cursor: grab;
  color: #9aa7b6;
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  user-select: none;
}

.drag-handle:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.drag-handle:active { cursor: grabbing; }

.tracker tbody.is-dragging tr:hover { background: transparent; }

.tracker tr.dragging {
  opacity: 0.55;
  background: var(--accent-soft) !important;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.reorder-hint {
  font-size: 0.85rem;
  font-weight: 700;
}
.reorder-hint.ok { color: #1a7f37; }
.reorder-hint.err { color: #cf222e; }

/* ---- category chips ---- */
.subfilters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin: -6px 0 14px;
}

.cat-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 11px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: 0.15s ease;
}

.filter-chip:hover { border-color: #9db2c9; color: var(--ink); }

.filter-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ---- 本週優先 pin ---- */
.pin-tip { font-size: 0.82rem; }

.pin-count { font-size: 0.85em; }
.pin-count.over { color: var(--warn); font-weight: 700; }

.btn-pin {
  border: 0;
  background: transparent;
  color: #b8c2cf;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 3px;
  margin-left: 2px;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}

.btn-pin:hover { color: #d97706; background: var(--warn-soft); }
.btn-pin.on { color: #d97706; }
.pin-mark { color: #d97706; }
.btn-pin:disabled { opacity: 0.5; cursor: wait; }

.tracker tr.pinned:not(.done) td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

/* ---- 主導覽（三頁共用） ---- */
.nav-row { margin-bottom: 14px; align-items: center; }
.main-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.main-nav a {
  color: #c9d6e6;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: 0.15s ease;
}
.main-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.main-nav a.active { background: rgba(255,255,255,0.16); color: #fff; box-shadow: inset 0 -2px 0 #9fe6c7; }
.nav-count {
  display: inline-block;
  min-width: 1.5em;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  font-size: 0.8em;
  font-weight: 600;
  text-align: center;
}
.nav-count:empty { display: none; }
.stat-pill strong.warn { color: #fca5a5; }

/* ---- 欄位設定驅動的表格（grid.js） ---- */
.toolbar-left { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.92rem;
  min-width: 16rem;
  background: #fff;
}
.btn-primary, .btn-secondary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: #f3f6fa; }

.grid-table { min-width: 1560px; }
.grid-table td { padding: 8px 8px; }
.grid-table th { padding: 10px 8px; }
.col-actions { width: 52px; }
.grid-table .col-no { min-width: 104px; }
.grid-table .col-cat { min-width: 88px; }
.grid-table .col-src { min-width: 170px; }
.grid-table .col-loc { min-width: 120px; }
.grid-table .col-long { min-width: 15rem; max-width: 24rem; }
.grid-table .col-person { min-width: 110px; }
.grid-table .col-dates { min-width: 160px; }
.grid-table .col-impact { min-width: 112px; }
.grid-table .col-rev { min-width: 80px; }
.grid-table .col-result { min-width: 190px; }
.grid-table .col-status { min-width: 170px; }
.grid-table .col-note-g { min-width: 10rem; max-width: 16rem; }

.actions-cell { white-space: nowrap; padding-left: 6px !important; padding-right: 0 !important; }
.sub-field { display: block; }
.sub-field + .sub-field { margin-top: 4px; }
.sub-cap { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 1px; }
.cell-input, .cell-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
}
.cell-input:hover, .cell-select:hover { border-color: var(--line); background: #fff; }
.cell-input:focus, .cell-select:focus { outline: 2px solid #0969da; outline-offset: 1px; background: #fff; border-color: var(--line); }
.cell-input::placeholder { color: #b3bfcc; }
.cell-select { cursor: pointer; }
.cell-input.is-overdue { color: #b91c1c; font-weight: 700; }
.cell-select.status { font-weight: 600; border-radius: 999px; background: #eef2f7; color: #334155; }
.cell-select.status.progress { background: #e0f2fe; color: #075985; }
.cell-select.status.open { background: #fee2e2; color: #991b1b; }
.cell-select.status.wait { background: var(--warn-soft); color: var(--warn); }
.cell-select.status.done { background: #e5e7eb; color: #4b5563; }
.cell-select.status.calendar { background: #ede9fe; color: #5b21b6; }
.cell-hint { display: block; font-size: 0.72rem; margin-top: 0.1rem; }
.cell-hint.ok, .ic-hint.ok { color: #1a7f37; }
.cell-hint.err, .ic-hint.err { color: #cf222e; }

.inline-cell .ic-view {
  display: flex; gap: 0.4rem; align-items: flex-start; cursor: text;
  border-radius: 8px; padding: 0.15rem 0.2rem; margin: -0.15rem -0.2rem;
}
.inline-cell .ic-view:hover { background: #f3f7fb; }
.ic-text {
  flex: 1; white-space: pre-wrap; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
body.expand-long .ic-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
body:not(.expand-long) .clamp-3 .ic-text { -webkit-line-clamp: 3; }
body:not(.expand-long) .clamp-4 .ic-text { -webkit-line-clamp: 4; }
.ic-text .placeholder { color: #94a3b8; font-size: 0.88rem; }
.ic-btn-edit {
  opacity: 0; pointer-events: none; border: none; background: transparent; color: #64748b;
  padding: 0.15rem 0.35rem; font-size: 0.95rem; line-height: 1; border-radius: 6px; cursor: pointer;
}
.inline-cell:hover .ic-btn-edit, .ic-view:focus-within .ic-btn-edit { opacity: 1; pointer-events: auto; }
.ic-btn-edit:hover { background: #e8eef6; color: #0f2744; }
.ic-input {
  width: 100%; box-sizing: border-box; padding: 0.45rem 0.55rem; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; resize: vertical; min-height: 5rem;
}
.ic-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.ic-save, .ic-cancel {
  border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 6px;
  padding: 0.2rem 0.55rem; font: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap;
}
.ic-save { background: var(--accent); border-color: var(--accent); color: #fff; }
.ic-cancel:hover { background: #f3f6fa; }
.ic-save:disabled, .ic-cancel:disabled { opacity: 0.6; cursor: not-allowed; }
.ic-hint { font-size: 0.75rem; }

.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.badge { font-size: 0.74rem; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.badge.overdue { background: #fee2e2; color: #b91c1c; font-weight: 700; }
.badge.wait { background: #eef2f7; color: var(--muted); }
.grid-table tr.overdue:not(.done) td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.grid-table tr.pinned:not(.done) td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.grid-table tr.done .cell-input, .grid-table tr.done .ic-text { color: var(--done); }

/* 每列尾端的刪除鈕：固定在表格右側，不用橫向捲動也看得到 */
.grid-table .col-ops {
  position: sticky; right: 0; min-width: 76px; width: 76px; text-align: center;
  background: #fff; box-shadow: inset 1px 0 0 var(--line);
}
.grid-table th.col-ops { background: #f7fafc; z-index: 2; }
.grid-table tbody tr:hover td.col-ops { background: #f9fbfd; }
.btn-row-delete {
  border: 1px solid #fca5a5; background: #fff; color: #b91c1c; font: inherit; font-size: 0.82rem;
  padding: 3px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.btn-row-delete:hover { background: #fee2e2; border-color: #f87171; }
.btn-row-delete:disabled { opacity: 0.5; cursor: wait; }

/* 圖面（PDF 附件） */
.files-cell { transition: background 0.15s; }
.files-cell.drop-target { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 2px var(--accent); }
.att-list { list-style: none; margin: 0 0 4px; padding: 0; }
.att { display: flex; align-items: flex-start; gap: 4px; font-size: 0.86rem; line-height: 1.35; }
.att + .att { margin-top: 3px; }
.att a { color: #1d4ed8; text-decoration: none; word-break: break-all; flex: 1; }
.att a:hover { text-decoration: underline; }
.att-del {
  border: 0; background: transparent; color: #94a3b8; font-size: 1rem; line-height: 1;
  padding: 0 4px; border-radius: 4px; cursor: pointer;
}
.att-del:hover { color: #b91c1c; background: #fee2e2; }
.btn-upload {
  display: inline-block; border: 1px dashed #94a3b8; color: var(--muted); font-size: 0.8rem;
  padding: 2px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.btn-upload:hover { border-color: var(--accent); color: var(--accent); }
.files-cell .cell-hint { margin-top: 3px; }

@keyframes row-flash { from { background: #fef3c7; } to { background: transparent; } }
.grid-table tr.flash td { animation: row-flash 2s ease-out; }
.grid-table tr.target td { background: #fef3c7; }
.grid-table tr.target td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

/* ---- 新增 dialog ---- */
.create-dialog {
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px; width: min(640px, 94vw); color: var(--ink);
}
.create-dialog::backdrop { background: rgba(15, 39, 68, 0.35); }
.create-dialog h3 { margin: 0 0 14px; font-size: 1.1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.form-row { display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: var(--muted); }
.form-row.wide { grid-column: 1 / -1; }
.form-row input, .form-row select, .form-row textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 0.93rem; color: var(--ink);
}
.form-row textarea { resize: vertical; }
.req { color: #cf222e; margin-left: 2px; }
.form-tip { font-size: 0.82rem; margin: 12px 0 0; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
.form-actions #create-hint { margin-right: auto; font-size: 0.85rem; }

/* 小螢幕：主版面左右留白縮為 12px */
@media (max-width: 640px) {
  .header-inner, .container, .site-footer { padding-left: 12px; padding-right: 12px; }
}

/* ---- 使用者列（nav.js） ---- */
.nav-user { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.nav-user button {
  background: none;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  color: #fff;
  padding: 3px 10px;
  font: inherit;
  cursor: pointer;
}
.nav-user button:hover { background: rgba(255,255,255,0.1); }
.nav-pw-dialog { width: min(380px, 94vw); }
.form-actions #nav-pw-hint { margin-right: auto; font-size: 0.85rem; }

/* ---- 包商：唯讀欄位與不適用的說明 ---- */
.ro-value { white-space: pre-wrap; word-break: break-word; font-size: 0.88rem; }
.pin-static { color: #d97706; }
body.role-contractor .site-footer, body.role-contractor .pin-tip { display: none; }

/* ---- 登入頁 ---- */
.login-page { display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
.login-card h1 { margin: 0 0 20px; font-size: 1.2rem; }
.login-card label { display: block; margin-bottom: 14px; font-size: 0.9rem; color: var(--muted); }
.login-card input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}
.login-card .btn-primary { width: 100%; }
.login-error { min-height: 1.3em; margin: 10px 0 0; color: #cf222e; font-size: 0.88rem; }

/* ---- 帳號管理 ---- */
.users-table { width: 100%; border-collapse: collapse; }
.users-table th, .users-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.9rem; }
.users-table tr.disabled td { color: var(--done); }
.users-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.users-actions button { font-size: 0.82rem; padding: 3px 8px; }
.users-panel { margin-top: 20px; padding: 16px; }
.users-password-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.users-password-form label { font-size: 0.85rem; color: var(--muted); }
.users-password-form input { display: block; margin-top: 3px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.cats-box { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.cats-add { display: flex; gap: 6px; margin-top: 8px; }
.once-password {
  display: block;
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: 8px;
  font-size: 1.05rem;
  word-break: break-all;
  user-select: all;
}

/* ---- 疑義澄清兩欄附件、施工圖審查版次 ---- */
:root {
  --vendor-ink: #1e40af;
  --vendor-head: #dbeafe;
  --vendor-soft: #f1f7ff;
  --ours-ink: #065f46;
  --ours-head: #d1fae5;
  --ours-soft: #effaf4;
}

.nav-user-name { font-weight: 600; }

/* ---- 附件（兩頁共用） ---- */
.att-list { margin-bottom: 6px; }
.att-list .att + .att { margin-top: 6px; }
.pdf-ic {
  flex: none;
  margin-top: 1px;
  padding: 1px 3px;
  border-radius: 3px;
  background: #dc2626;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.att-body { flex: 1; min-width: 0; }
.att-body a { display: block; word-break: normal; overflow-wrap: anywhere; }
.att-meta { display: block; font-size: 0.73rem; color: var(--muted); margin-top: 1px; }
.slot-empty { margin: 0 0 6px; color: #94a3b8; font-size: 0.85rem; }
.upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; }
.upload-row .btn-upload { background: #fff; }
.drop-hint { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.admin-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #a7d8c2;
  color: var(--ours-ink);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- 說明框 ---- */
.legend-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid #0f2744;
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.87rem;
  line-height: 1.5;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid; flex: none; }
.swatch.vendor { background: var(--vendor-head); border-color: #93c5fd; }
.swatch.ours { background: var(--ours-head); border-color: #6ee7b7; }

/* ---- 疑義澄清：固定欄寬，1600px 內不橫向捲動 ---- */
body[data-page="rfi"] .grid-table.rfi-grid { min-width: 0; width: 100%; table-layout: fixed; }
.rfi-grid th { white-space: normal; padding: 9px 7px; }
.rfi-grid td { padding: 8px 7px; font-size: 0.85rem; overflow-wrap: anywhere; }
.rfi-grid .sub-cap { font-size: 0.7rem; }
.rfi-grid .sub-field + .sub-field { margin-top: 5px; }
.rfi-grid .actions-cell { padding-left: 4px !important; }
.rfi-grid .col-ops { min-width: 0; width: auto; padding-left: 4px; padding-right: 4px; }
.rfi-grid .btn-row-delete { padding: 3px 5px; font-size: 0.78rem; }
.rfi-grid .status { border-radius: 12px; line-height: 1.35; }

.rfi-grid th.th-vendor { background: var(--vendor-head); color: var(--vendor-ink); }
.rfi-grid th.th-ours { background: var(--ours-head); color: var(--ours-ink); }
.rfi-grid td.td-vendor { background: var(--vendor-soft); box-shadow: inset 1px 0 0 #bfdbfe; }
.rfi-grid td.td-ours { background: var(--ours-soft); box-shadow: inset 1px 0 0 #a7f3d0; }
.th-sub { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0; }

/* ---- 施工圖審查：項目帶 ---- */
.proj + .proj { border-top: 2px solid #c6d3e2; }
.proj-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 170px 72px 96px 86px 128px 100px 76px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  background: #e6edf6;
  border-bottom: 1px solid #c6d3e2;
}
.proj.pinned .proj-head { box-shadow: inset 4px 0 0 #f59e0b; }
.proj-ctrl { display: flex; align-items: center; gap: 2px; }
.btn-collapse {
  border: 0;
  background: transparent;
  color: #0f2744;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.btn-collapse:hover { background: #d3deeb; }
.proj-name { margin: 0; font-size: 1.12rem; font-weight: 700; color: #0f2744; }
.proj-meta { font-size: 0.9rem; font-weight: 600; }
.proj-meta .sub-cap { font-weight: 400; }

/* ---- 審查結果徽章 ---- */
.result {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}
.result.a { background: #dcfce7; color: #166534; }
.result.b { background: #ccfbf1; color: #115e59; }
.result.c { background: #ffedd5; color: #9a3412; }
.result.d { background: #fee2e2; color: #991b1b; }
.result.pending { background: #e0f2fe; color: #075985; }

/* ---- 版次：縮排＋左側連接線 ---- */
.ver-list { list-style: none; margin: 0; padding: 12px 14px 14px 37px; background: #fbfcfe; }
.ver-item { position: relative; padding: 0 0 10px 22px; }
.ver-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 2px solid #a9bbd0;
}
.ver-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 16px;
  border-top: 2px solid #a9bbd0;
}
.ver-item.add { padding-bottom: 0; }
.ver-item.add::before { bottom: auto; height: 18px; }
.ver-item.add::after { top: 16px; }

.ver {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.15fr) 124px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.ver.latest { border-color: #7fa3c9; box-shadow: 0 1px 4px rgba(15, 39, 68, 0.12); }
.ver-info { padding: 10px 12px; background: #f4f7fb; }
.ver-label { display: flex; align-items: center; gap: 6px; font-size: 1.02rem; font-weight: 700; color: #0f2744; }
.tag-latest {
  padding: 0 7px;
  border-radius: 999px;
  background: #0f2744;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}
.ver-name { margin: 6px 0 2px; font-size: 0.88rem; line-height: 1.4; }
.ver-date { font-size: 0.8rem; color: var(--muted); }

.slot { min-width: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.slot-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 10px;
  background: #eef2f7;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 700;
}
.slot-body { flex: 1; padding: 8px 10px 10px; overflow-wrap: anywhere; }
.slot.vendor .slot-title { background: var(--vendor-head); color: var(--vendor-ink); }
.slot.vendor .slot-body { background: var(--vendor-soft); }
.slot.ours .slot-title { background: var(--ours-head); color: var(--ours-ink); }
.slot.ours .slot-body { background: var(--ours-soft); }

.comment-list { margin: 0 0 7px; padding-left: 1.3em; font-size: 0.86rem; line-height: 1.5; }
.comment-list li + li { margin-top: 3px; }
.rev-dwg { list-style: none; margin: 0 0 6px; padding: 0; }
.rev-dwg > li + li { margin-top: 8px; }
.rev-no { display: block; margin-bottom: 2px; font-size: 0.86rem; font-weight: 600; }
.review-date { display: block; margin-top: 7px; font-size: 0.78rem; color: var(--muted); }

.btn-next-ver {
  border: 1px dashed #7fa3c9;
  background: #fff;
  color: #0f2744;
  border-radius: 8px;
  padding: 5px 12px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-next-ver:hover { border-color: var(--accent); color: var(--accent); }

body[data-page="rfi"] .search-input, body[data-page="shop"] .search-input { min-width: 26rem; }
.proj-head .result, .slot .result { line-height: 1.35; }
.proj-head .status, .proj-head .result { box-shadow: 0 0 0 1px rgba(15, 39, 68, 0.22); }
.proj-head .status.done { background: #fff; }
.proj-head .result.pending, .proj-head .status.progress { background: #f0f9ff; }

/* ---- 正式頁面補充（行內編輯） ---- */
.rfi-grid .ic-text, .slot-body .ic-text, .proj-note .ic-text, .ver-info .ic-text { display: block; overflow: visible; line-height: 1.5; }
.rfi-grid .ic-view, .slot-body .ic-view, .proj-note .ic-view, .ver-info .ic-view { position: relative; margin: 0; padding: 0; }
/* 鉛筆鈕疊在文字上，隱藏時不佔欄寬 */
.rfi-grid .ic-btn-edit, .slot-body .ic-btn-edit, .ver-info .ic-btn-edit { position: absolute; top: -2px; right: -4px; background: #fff; }
.rfi-grid .cell-input, .rfi-grid .cell-select, .proj-head .cell-input, .proj-head .cell-select { width: 100%; padding: 0; font-size: inherit; }
.rfi-grid .cell-select, .proj-head .cell-select { appearance: none; }
.ic-view.hidden, .ic-edit.hidden { display: none; }
.proj-head .cell-input, .proj-head .cell-select { font-weight: 600; }
.proj-head .proj-name-input { font-size: 1.12rem; font-weight: 700; color: #0f2744; }
.proj-note { display: flex; gap: 10px; align-items: baseline; padding: 6px 14px 6px 76px; background: #f1f5fa; border-bottom: 1px solid #dbe4ef; font-size: 0.86rem; }
.proj-note .inline-cell { flex: 1; min-width: 0; }
.proj-note .sub-cap { white-space: nowrap; }
.proj.done .proj-name, .proj.done .proj-name-input { color: var(--muted); }
.ver-del { margin-top: 6px; padding: 1px 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 0.74rem; cursor: pointer; }
.ver-del:hover { border-color: #fca5a5; background: #fff; color: #b91c1c; }
.slot.drop-target .slot-body, .rev-dwg > li.drop-target { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.uploading .btn-upload { opacity: 0.5; pointer-events: none; }
.slot-body .cell-hint { margin-top: 3px; }
.rev-line { display: flex; align-items: center; gap: 4px; }
.rev-input { flex: 1; min-width: 0; width: 100%; padding: 1px 2px; font-size: 0.86rem; font-weight: 600; }
.rev-add { cursor: pointer; color: var(--muted); font-size: 0.8rem; padding: 0 3px; border-radius: 4px; }
.rev-add:hover { background: #fff; color: var(--accent); }
.rev-new { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.74rem; cursor: pointer; }
.rev-new:hover { color: var(--accent); }
body.role-contractor .admin-only { display: none; }

/* 徽章／日期上疊透明原生控制項：平常看到徽章與民國年，點下去是原生下拉或日期選單 */
.pill-pick, .date-pick { position: relative; display: inline-block; }
.pill-pick select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.date-pick { min-width: 5.2em; cursor: pointer; }
.date-pick input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.date-pick input:focus { width: 9.5em; opacity: 1; z-index: 3; }
.date-pick.is-overdue, .ro-value.is-overdue { color: #b91c1c; font-weight: 700; }

/* ---- 疑義澄清：總表／詳細切換 ---- */
body:not([data-view="summary"]) .summary-only,
body[data-view="summary"] .detail-only { display: none; }
.view-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.view-toggle button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 18px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.15s ease;
}
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button:hover { color: var(--ink); }
.view-toggle button.active { background: var(--accent); color: #fff; font-weight: 600; }

body[data-page="rfi"] .rfi-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
body[data-page="rfi"] .rfi-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 6px 14px;
  font-size: 0.9rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body[data-page="rfi"] .rfi-download[aria-disabled="true"] { opacity: 0.5; cursor: default; }
body[data-page="rfi"] .rfi-row-download { margin-top: 8px; padding: 6px; font-size: 0.8rem; }
body[data-page="rfi"]:not([data-view="summary"]) .rfi-export-actions { display: none; }
@media (min-width: 1025px) {
  body[data-page="rfi"] .rfi-export-actions { margin-left: auto; }
}

/* ---- 疑義總表 ---- */
.rfi-list { min-width: 0; table-layout: fixed; }
.rfi-list .col-form { width: 220px; }
.rfi-list .col-answered { width: 110px; }
.rfi-list th { padding: 0; }
.rfi-list .sort-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.rfi-list .sort-btn:hover { color: var(--ink); }
.rfi-list td { padding: 7px 14px; }
.rfi-list tbody tr { cursor: pointer; }
.rfi-list tbody tr:hover { background: var(--accent-soft); }
.rfi-list td a { color: var(--accent); text-decoration: none; }
.rfi-list td a:hover { text-decoration: underline; }
.status.answered { background: #dcfce7; color: #166534; }

/* ---- 圖說提送 ---- */
:root {
  --ft-3d: #7c3aed;
  --ft-dwg: #1d4ed8;
  --ft-pdf: #dc2626;
  --ft-other: #64748b;
  --latest-ink: #166534;
  --latest-line: #4ade80;
}

.search-input.iss-search { min-width: 22rem; }
.scope-note { font-size: 0.86rem; color: var(--muted); }

/* ---- 檔案類型標籤 ---- */
.ft {
  display: inline-block;
  width: 42px;
  padding: 1px 0;
  border-radius: 4px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
}
.ft-3d { background: var(--ft-3d); }
.ft-dwg { background: var(--ft-dwg); }
.ft-pdf { background: var(--ft-pdf); }
.ft-other { background: var(--ft-other); }

/* ---- 小按鈕 ---- */
.btn-sm { padding: 4px 10px; font-size: 0.84rem; white-space: nowrap; text-decoration: none; display: inline-block; }
.btn-dl {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--line);
  background: #fff;
  color: #1d4ed8;
  border-radius: 6px;
  padding: 2px 8px;
  font: inherit;
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
}
.btn-dl:hover { border-color: #1d4ed8; }

/* ---- 狀態徽章、專業 ---- */
.iss-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.iss-badge.latest { background: #16a34a; color: #fff; }
.iss-badge.old { background: #e5e7eb; color: #4b5563; }
.tag-note {
  display: inline-block;
  padding: 0 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- 新增提送版次 ---- */
.new-panel { margin-bottom: 16px; }
.new-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 11fr);
  gap: 20px;
  padding: 16px 18px 18px;
}
.new-form .form-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.new-form .check { margin-top: 12px; font-size: 0.9rem; }
.new-form .form-actions { justify-content: flex-start; }
.spec-pick { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 7px 0 0; color: var(--ink); font-size: 0.9rem; }
.spec-pick input { padding: 0; margin: 0; }

.drop-zone {
  border: 2px dashed #7fa3c9;
  border-radius: 10px;
  background: #f4f8fc;
  padding: 18px 16px;
  text-align: center;
  color: #0f2744;
}
.drop-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.drop-title a { color: var(--accent); text-decoration: underline; cursor: pointer; }
.drop-sub { margin: 4px 0 0; color: var(--muted); font-size: 0.84rem; }

.up-sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  margin-top: 14px;
}
.up-sum-text { font-weight: 700; color: #0f2744; }
.up-sum-text small { margin-left: 10px; font-size: 0.82rem; font-weight: 400; color: var(--muted); }
.up-sum-btns { display: flex; gap: 6px; }
.up-sum .bar { grid-column: 1 / -1; height: 10px; }

.bar { height: 7px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.bar i { display: block; height: 100%; background: #2f8f6f; }
.bar.run i { background: #2563eb; }

.up-list { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.up-row {
  display: grid;
  grid-template-columns: 22px 44px minmax(0, 1fr) 64px 180px 150px;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  font-size: 0.85rem;
}
.up-row + .up-row, .up-more + .up-row, .up-row + .up-more { border-top: 1px solid #edf1f6; }
.up-mark { text-align: center; font-weight: 700; }
.up-path { min-width: 0; overflow-wrap: anywhere; }
.up-path span { color: var(--muted); }
.up-size { text-align: right; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.up-state { font-size: 0.8rem; color: var(--muted); }
.up-row.done .up-mark, .up-row.done .up-state { color: #15803d; }
.up-row.run { background: #eff6ff; }
.up-row.run .up-mark, .up-row.run .up-state { color: #1d4ed8; font-weight: 700; }
.up-row.bad { background: #fef2f2; color: #991b1b; }
.up-row.bad .up-path span, .up-row.bad .up-size { color: #b91c1c; }
.up-row.bad .up-mark { color: #dc2626; }
.up-row.bad .up-state { grid-column: 5 / 7; color: #b91c1c; font-weight: 700; }
.up-more { padding: 4px 10px 4px 86px; color: var(--muted); font-size: 0.8rem; background: #fafbfd; }

.limit-note {
  margin: 12px 0 0;
  padding: 9px 12px;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ---- 包商：最新版提示 ---- */
.latest-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--latest-line);
  border-left: 5px solid #16a34a;
  border-radius: 8px;
  background: #f0fdf4;
  color: var(--latest-ink);
}
.latest-hint strong { font-size: 1.1rem; }
.latest-hint span { font-size: 0.88rem; color: #3f6b50; }

/* ---- 提送版次卡片 ---- */
.iss-list { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 18px; background: #fbfcfe; }
.iss-card { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.iss-card.latest { border: 2px solid #22c55e; box-shadow: 0 1px 6px rgba(22, 101, 52, 0.14); }
.iss-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  align-items: start;
  padding: 12px 16px;
}
.iss-card.latest .iss-head { background: #f3fcf6; border-bottom: 1px solid #bbf7d0; }
.iss-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.iss-name { margin: 0; font-size: 1.15rem; font-weight: 700; color: #0f2744; }
.iss-date { font-size: 0.86rem; color: var(--muted); }
.iss-desc { margin: 6px 0 0; font-size: 0.89rem; line-height: 1.5; }
.iss-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 7px; font-size: 0.85rem; }
.fact { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.iss-total { font-weight: 700; color: #0f2744; }
.iss-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.iss-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
}
.type-tabs, .view-toggle { display: flex; align-items: center; gap: 6px; }
.view-toggle { gap: 0; }
.view-toggle button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  padding: 3px 12px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.view-toggle button:first-child { border-radius: 7px 0 0 7px; }
.view-toggle button:last-child { border-radius: 0 7px 7px 0; border-left: 0; }
.view-toggle button.active { background: #0f2744; border-color: #0f2744; color: #fff; font-weight: 600; }

/* ---- 依類型表格 ---- */
.iss-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.iss-table th, .iss-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  font-size: 0.87rem;
  overflow-wrap: anywhere;
}
.iss-table th { background: #f7fafc; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.iss-table td.path { color: var(--muted); font-size: 0.82rem; }
.iss-table td.num, .iss-table th.num { text-align: right; }
.iss-table td a { color: #1d4ed8; cursor: pointer; text-decoration: none; }
.iss-table td a:hover { text-decoration: underline; }
.iss-table td a.btn-dl:hover { text-decoration: none; }
.iss-table tr.more td { padding: 5px 12px; color: var(--muted); font-size: 0.82rem; background: #fafbfd; border-bottom: 0; }

/* ---- 已被取代：單行收合 ---- */
.iss-old > summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #f6f7f9;
  color: #475569;
  cursor: pointer;
  list-style: none;
}
.iss-old > summary::-webkit-details-marker { display: none; }
.iss-old .arrow { display: inline-block; color: #0f2744; transition: transform 0.15s; }
.iss-old[open] .arrow { transform: rotate(90deg); }
.iss-old[open] > summary { border-bottom: 1px solid var(--line); }
.iss-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.87rem; }
.iss-line .iss-name { font-size: 0.98rem; color: #475569; }
.iss-old .iss-desc { margin: 0; padding: 8px 16px; color: var(--muted); }

/* ---- 下載紀錄 ---- */
.log-panel { margin-top: 16px; }
.log-panel .panel-meta h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 1.02rem; }

/* ---- 實作補充：草稿、上傳佇列、下載紀錄篩選 ---- */
.iss-badge.draft { background: #fef3c7; color: #92400e; }
.iss-card.draft { border: 2px dashed #f59e0b; }
.iss-card.draft .iss-head { background: #fffbeb; border-bottom: 1px solid #fde68a; }
.btn-dl.remove { color: #b91c1c; }
.btn-dl.remove:hover { border-color: #b91c1c; }
.iss-table tr.more button { border: 0; background: none; padding: 0; color: #1d4ed8; font: inherit; cursor: pointer; text-decoration: underline; }
.drop-zone.drop-target { background: var(--accent-soft); border-color: var(--accent); }
.drop-title button { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.new-hint { min-height: 1.2em; margin: 8px 0 0; font-size: 0.84rem; }
.new-hint.err { color: #b91c1c; }
.up-row.bad .up-state { display: flex; align-items: center; gap: 8px; }
.up-note { color: #92400e; }
.limit-note .btn-dl { margin-left: 6px; }
.log-tools { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.log-tools .search-input { min-width: 22rem; }
.log-panel .iss-table td small { color: var(--muted); }
.iss-list .empty { margin: 0; }

/* ---- 圖說提送：提送項目與版次控管 ---- */
.upload-slot .new-panel { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fffdf5; }
.upload-slot .new-hint:empty { display: none; }
.upload-slot .up-sum, .upload-slot .up-list { margin-top: 10px; }
.item-card { position: relative; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.item-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; background: #f7f9fc; }
.item-head .iss-name { font-size: 1.2rem; }
.item-head .iss-desc { grid-column: 1 / -1; margin: 0; }
.ver-count { font-size: 0.85rem; color: var(--muted); }
.item-vers { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.ver-tag { display: inline-block; min-width: 3.6em; padding: 2px 8px; border-radius: 6px; background: #0f2744; color: #fff; font-size: 0.86rem; font-weight: 700; text-align: center; }
.iss-old .ver-tag { background: #64748b; }
.iss-card.latest .iss-head, .iss-card.draft .iss-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ver-actions { margin-left: auto; }
.ver-date-input { padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--ink); }
.chg-note { display: block; margin: 8px 0 0; padding: 8px 12px; border: 1px solid #bbf7d0; border-left-width: 4px; border-left-color: #16a34a; border-radius: 6px; background: #fff; font-size: 0.88rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.chg-note b { margin-right: 6px; color: #166534; }
.chg-edit { white-space: normal; }
.chg-edit textarea { display: block; width: 100%; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; resize: vertical; box-sizing: border-box; }
.ver-body > .chg-note { margin: 8px 16px; }
.diffsum { display: inline-flex; flex-wrap: wrap; row-gap: 5px; align-items: center; font-size: 0.84rem; white-space: nowrap; }
.diffsum span { margin-right: 4px; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.diffsum .stat-label { margin: 0; padding-left: 0; color: var(--muted); font-weight: 400; }
.d-mod { background: #fef3c7; color: #92400e; }
.d-new { background: #dcfce7; color: #166534; }
.d-del { background: #fee2e2; color: #b91c1c; }
.diffsum .d-same { background: #f1f5f9; color: #64748b; font-weight: 400; }
.diffsum .d-first { font-weight: 600; }
.st { display: inline-block; flex: none; width: 34px; padding: 1px 0; border-radius: 4px; font-size: 0.7rem; font-weight: 700; line-height: 1.45; text-align: center; }
.st-new { border: 1px solid #86efac; background: #dcfce7; color: #166534; }
.st-mod { border: 1px solid #fcd34d; background: #fef3c7; color: #92400e; }
.st-del { border: 1px solid #fca5a5; background: #fee2e2; color: #b91c1c; }
.st-same { border: 1px solid #e2e8f0; background: #f1f5f9; color: #64748b; }
.tag-kept { flex: none; padding: 0 6px; border: 1px solid #cbd5e1; border-radius: 4px; background: #f8fafc; color: #475569; font-size: 0.68rem; font-weight: 600; line-height: 1.5; }
.dl-big { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dl-big a { padding: 7px 14px; line-height: 1.25; text-align: center; }
.dl-big .sub { display: block; margin-top: 3px; font-size: 0.72rem; font-weight: 400; opacity: 0.85; }
.vendor-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: #f8fafc; font-size: 0.84rem; }
.vendor-strip .lbl { color: #0f2744; font-weight: 700; }
.vendor-strip .lbl small { margin-left: 4px; color: var(--muted); font-weight: 400; }
.vs { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.vs.ok { border-color: #86efac; color: #166534; }
.vs.part { border-color: #fcd34d; color: #92400e; }
.vs.no { border-color: #fca5a5; color: #b91c1c; }
.vs .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vs-log { margin-left: auto; }
.old-line { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; font-size: 0.86rem; }
.old-desc { max-width: 30em; overflow: hidden; color: var(--muted); font-size: 0.83rem; text-overflow: ellipsis; white-space: nowrap; }
.list-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 12px; }
.list-heading h3 { margin: 0 0 4px; color: #0f2744; font-size: 1.05rem; }
.list-heading p { margin: 0; color: var(--muted); font-size: 0.8rem; }
.vbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fafbfd; }
.vbar .left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-caption { margin-left: 4px; color: var(--muted); font-size: 0.75rem; }
.searchbar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.searchbar .search-input { min-width: 0; width: 380px; font-size: 0.84rem; }
.result-count { margin-left: auto; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.shared-note, .hidden-note { margin: 0 16px 12px; padding: 8px 11px; border-radius: 6px; font-size: 0.78rem; }
.shared-note { border: 1px solid #dbeafe; background: #f4f8ff; color: #47617d; }
.shared-note b { color: #1d4ed8; }
.hidden-note { border: 1px solid #fde68a; background: #fffbeb; color: #92400e; }
.hidden-note button { padding: 0; border: 0; background: none; color: #1d4ed8; font: inherit; text-decoration: underline; cursor: pointer; }
.sheet-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sheet-table th { padding: 9px 12px; border-block: 1px solid #e2e8f0; background: #f2f5f9; color: #64748b; font-size: 0.74rem; font-weight: 600; text-align: left; }
.sheet-table td { padding: 12px; border-bottom: 1px solid #e8edf3; font-size: 0.82rem; vertical-align: middle; }
.sheet-table tr:hover td { background: #fafcfe; }
.sheet-table th:nth-child(1) { width: 7%; }
.sheet-table th:nth-child(2) { width: 24%; }
.sheet-table th:nth-child(3), .sheet-table th:nth-child(4) { width: 31%; }
.sheet-table th:nth-child(5) { width: 7%; text-align: right; }
.sheet-id { display: block; color: #0f2744; font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sheet-title { display: block; margin-top: 4px; color: #596a7c; font-size: 0.78rem; line-height: 1.5; }
.file-block + .file-block { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }
.file-name { color: #334155; font-size: 0.76rem; line-height: 1.45; overflow-wrap: anywhere; }
.file-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; color: #7a8797; font-size: 0.7rem; }
.file-meta .btn-dl { font-size: 0.72rem; padding: 2px 7px; }
.file-meta > span + .btn-dl { margin-left: auto; }
.file-meta .ft { min-width: 29px; font-size: 0.62rem; }
.file-meta .st { width: 30px; font-size: 0.63rem; }
.dwg-range { display: block; margin-top: 4px; color: #506b8d; font-size: 0.7rem; }
.cell-none { color: #94a3b8; }
.row-del .sheet-id { color: #9f4750; text-decoration: line-through; }
.row-del td, .other-row.row-del { background: #fffafa; }
.row-del .file-name { color: #94646b; }
.sheet-history { text-align: right; }
.sheet-history button { padding: 3px 6px; font-size: 0.72rem; }
.other-heading { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 15px 16px 10px; background: #fbfcfe; color: #0f2744; font-size: 0.92rem; }
.other-heading span { color: #7a8797; font-size: 0.75rem; font-weight: 400; }
.other-row { display: grid; grid-template-columns: 58px 1fr 90px auto; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #edf1f6; font-size: 0.8rem; }
.other-row .file-name { display: flex; align-items: center; gap: 8px; }
.other-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.other-actions .btn-dl { font-size: 0.72rem; }
.empty-message { padding: 22px 16px; margin: 0; color: #64748b; font-size: 0.83rem; text-align: center; }
.list-foot { margin: 0; padding: 11px 16px; border-top: 1px solid var(--line); background: #fafbfd; color: #64748b; font-size: 0.73rem; }
#pop { width: 720px; max-width: calc(100vw - 32px); padding: 0; border: 1px solid #93c5fd; border-radius: 12px; box-shadow: 0 20px 70px #0f274444; color: var(--ink); }
#pop::backdrop { background: #0f274433; }
#pop table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
#pop th, #pop td { padding: 12px; border-bottom: 1px solid #edf1f6; text-align: left; }
#pop th { background: #f8fafc; color: #64748b; font-size: 0.75rem; }
#pop .num { text-align: right; white-space: nowrap; }
#pop .cur { background: #f0fdf4; }
.hp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; background: #f5f9ff; }
.hp-head h4 { margin: 0; color: #0f2744; font-size: 0.98rem; overflow-wrap: anywhere; }
.hp-head p { margin: 3px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.6; overflow-wrap: anywhere; }
.hp-close { padding: 4px 8px; border: 0; background: none; color: #64748b; font-size: 1.1rem; cursor: pointer; }
.hp-foot { padding: 8px 12px; color: var(--muted); font-size: 0.78rem; }
.history-related { padding: 12px; background: #f5f9ff; color: #49617e; font-size: 0.8rem; line-height: 1.7; overflow-wrap: anywhere; }
.dup-dialog { width: min(720px, 94vw); }
.dup-list { max-height: 55vh; margin-top: 12px; overflow-y: auto; }
.dup-group { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.dup-group legend { padding: 0 6px; color: #0f2744; font-size: 0.86rem; font-weight: 700; overflow-wrap: anywhere; }
.dup-option { display: grid; grid-template-columns: auto minmax(0, 1fr) 72px 150px; align-items: center; gap: 10px; padding: 5px 0; font-size: 0.8rem; cursor: pointer; }
.dup-where { overflow-wrap: anywhere; }
.dup-size { text-align: right; white-space: nowrap; }
.dup-time { color: var(--muted); white-space: nowrap; }
#toast { position: fixed; bottom: 24px; left: 50%; z-index: 10; padding: 12px 20px; border-radius: 8px; background: #0f2744; box-shadow: var(--shadow); color: #fff; font-size: 0.85rem; transform: translateX(-50%); }
@media (max-width: 850px) {
  .item-vers { padding: 8px; }
  .list-heading, .searchbar { flex-wrap: wrap; }
  .result-count { margin-left: 0; }
  .ver-results { overflow-x: auto; }
  .sheet-table { min-width: 940px; }
  .other-row { grid-template-columns: 48px 1fr auto; }
  .other-row .other-size { display: none; }
}

/* ==== MOBILE-BASE ==== */
/* 平板＋手機：觸控目標至少 40px */
@media (max-width: 1024px) {
  /* Only shared navigation and the pages owned by MOBILE-BASE. Other pages size their own editors. */
  body:is([data-page="items"], [data-page="users"], [data-page="none"], .login-page) button,
  .nav-user button, .nav-pw-dialog button { min-width: 40px; min-height: 40px; }
  body:is([data-page="items"], [data-page="users"], .login-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select),
  .nav-pw-dialog input { min-height: 40px; max-width: 100%; }
  body:is([data-page="items"], [data-page="users"]) :is(input[type="checkbox"], input[type="radio"]) { width: 22px; height: 22px; flex: none; }
  body:is([data-page="items"], [data-page="users"]) .check { min-height: 40px; }
  .main-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }
  body[data-page="items"] .filter-chip { padding-inline: 14px; }
  body[data-page="items"] :is(.owner-hint, .status-hint)[hidden] { display: none; }
  /* Touch editors retain a full-size button and room for wrapping text. */
  body[data-page="items"] :is(.btn-edit-what, .btn-edit-progress, .btn-edit-note) {
    opacity: 1;
    pointer-events: auto;
    flex: 0 0 40px;
  }
  body[data-page="items"] :is(.what-text, .progress-text, .note-text) { min-width: 0; overflow-wrap: anywhere; }

}

/* 手機 */
@media (max-width: 768px) {
  html:has(dialog[open]) { overflow: hidden; }
  /* Shared form requirement, including nested editor font shorthands; no size/layout overrides. */
  input, select, textarea { font-size: 16px !important; }
  .header-inner, .container, .site-footer { padding-left: 12px; padding-right: 12px; }
  .container { padding-top: 14px; padding-bottom: 32px; }
  .toolbar, .toolbar-left, .filters, .subfilters, .panel-meta, .form-actions { flex-wrap: wrap; min-width: 0; }
  .toolbar { align-items: stretch; }
  .toolbar-left, .filters { width: 100%; }
  .tab { flex: 1 1 auto; }
  body[data-page] .search-input, .search-input.iss-search, .log-tools .search-input { width: 100%; min-width: 0; }

  /* ---- 導覽列：分頁與使用者列收進漢堡選單，展開時排在標題下方 ---- */
  .site-header { position: relative; display: flex; flex-direction: column; padding: 10px 0; }
  .site-header > .header-inner { gap: 8px; }
  .site-header .header-inner > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .site-header h1 { margin-bottom: 2px; padding-right: 48px; font-size: 1.05rem; line-height: 1.5; }
  .subtitle { padding-right: 48px; font-size: 0.78rem; line-height: 1.45; }
  .header-stats { gap: 6px; }
  .stat-pill { padding: 3px 10px; font-size: 0.78rem; }
  .nav-row { order: 2; margin-bottom: 0; }
  .nav-toggle {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
  }
  .nav-menu { display: none; }
  .nav-toggle:focus-visible { outline: 2px solid #9fe6c7; outline-offset: 2px; }
  .nav-row.nav-open .nav-menu {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.18);
  }
  .main-nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .main-nav a { display: flex; justify-content: space-between; min-height: 44px; }
  .nav-user { flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.18); }
  .nav-user-name { flex: 1 1 100%; overflow-wrap: anywhere; }
  .nav-user button { flex: 1 1 0; min-height: 44px; }

  /* ---- 對話框：全螢幕、內部捲動、標題與操作鈕固定 ---- */
  dialog, .create-dialog, .dup-dialog, .nav-pw-dialog, #pop {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  dialog, .create-dialog, .dup-dialog, .nav-pw-dialog {
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }
  #pop { padding: 0 0 env(safe-area-inset-bottom); }
  dialog > form { display: flex; flex-direction: column; min-height: 100%; }
  dialog > form > .form-grid, dialog > form > .dup-list { flex: none; }
  .create-dialog h3 {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 calc(-1 * max(16px, env(safe-area-inset-right))) 14px calc(-1 * max(16px, env(safe-area-inset-left)));
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
  dialog .form-row { min-width: 0; }
  dialog .cats-add input { flex: 1; min-width: 0; }
  dialog .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: auto calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left)));
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: #fff;
  }
  dialog .form-actions > span { flex: 1 1 100%; margin: 0; }
  dialog .form-actions > span:empty { display: none; }
  dialog .form-actions button { flex: 1 1 auto; min-height: 44px; }
  dialog form > .form-grid + .form-actions { margin-top: auto; }
  .once-password { overflow-wrap: anywhere; }
  .hp-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: calc(10px + env(safe-area-inset-top));
    border-radius: 0;
  }
  .hp-close { flex: none; width: 44px; height: 44px; }

  /* ---- 代辦事項：每列一張卡片（rfi 的 .tracker 不受影響） ---- */
  body[data-page="items"] .table-wrap { overflow-x: visible; }
  body[data-page="items"] .tracker { display: block; min-width: 0; }
  body[data-page="items"] .tracker thead { display: none; }
  body[data-page="items"] .tracker tbody { display: block; padding: 10px; }
  body[data-page="items"] .tracker tbody:empty { display: none; }
  body[data-page="items"] .tracker tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
  }
  body[data-page="items"] .tracker tbody tr + tr { margin-top: 10px; }
  body[data-page="items"] .tracker tr.pinned:not(.done) { border-left: 4px solid #f59e0b; }
  body[data-page="items"] .tracker tr.pinned:not(.done) td:first-child { box-shadow: none; }
  body[data-page="items"] .tracker td {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }
  body[data-page="items"] .tracker td.drag-cell,
  body[data-page="items"] .tracker td.tag-cell,
  body[data-page="items"] .tracker td.cat-cell { flex: 0 1 auto; width: auto; padding: 0; }
  body[data-page="items"] .tracker td.drag-cell { order: 1; }
  body[data-page="items"] .tracker td.drag-cell:empty { display: none; }
  body[data-page="items"] .tracker td.tag-cell { order: 2; }
  body[data-page="items"] .tracker td.cat-cell { order: 3; }
  body[data-page="items"] .tracker td.what-cell { order: 4; }
  body[data-page="items"] .tracker td.status-cell { order: 5; }
  body[data-page="items"] .tracker td.due-cell { order: 6; }
  body[data-page="items"] .tracker td.owner-cell { order: 7; }
  body[data-page="items"] .tracker td.progress-cell { order: 8; }
  body[data-page="items"] .tracker td.note-cell { order: 9; }
  body[data-page="items"] .drag-handle { display: none; } /* HTML5 拖曳在觸控裝置不會觸發 */
  body[data-page="items"] .tag-label { max-width: 100%; white-space: normal; }
  body[data-page="items"] .what-text { font-size: 1.02rem; font-weight: 600; }
  body[data-page="items"] .btn-edit-note { border: none; background: transparent; }
  body[data-page="items"] .tracker :is(.what-cell, .progress-cell, .note-cell, .owner-cell, .status-cell) { max-width: 100%; }
  body[data-page="items"] .tracker td:is(.status-cell, .due-cell, .owner-cell) {
    display: grid;
    grid-template-columns: 5em minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
  }
  body[data-page="items"] .tracker td:is(.status-cell, .due-cell, .owner-cell) > * { grid-column: 2; min-width: 0; }
  body[data-page="items"] .tracker td:is(.status-cell, .due-cell, .owner-cell)::before { grid-column: 1; grid-row: 1; }
  body[data-page="items"] .tracker td:is(.status-cell, .due-cell, .owner-cell, .progress-cell, .note-cell)::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
  }
  body[data-page="items"] .tracker td:is(.progress-cell, .note-cell)::before { display: block; margin-bottom: 2px; }
  body[data-page="items"] .tracker td.status-cell > .status:not(select) { justify-self: start; }
  body[data-page="items"] .tracker td.due-cell:empty,
  body[data-page="items"] .tracker td.owner-cell:empty,
  body[data-page="items"] .tracker td:has(> .progress-text:empty),
  body[data-page="items"] .tracker td:has(> .note-text:empty) { display: none; }
  body[data-page="items"] :is(.what-actions, .progress-actions, .note-actions) button { flex: 1 1 auto; }

  /* ---- 帳號管理：每個帳號一張卡片 ---- */
  .users-table, .users-table tbody, .users-table tr, .users-table td { display: block; }
  .users-table thead { display: none; }
  .users-table tbody { padding: 10px; }
  .users-table tbody:empty { display: none; }
  .users-table tr { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .users-table tr + tr { margin-top: 10px; }
  .users-table td {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    column-gap: 8px;
    padding: 4px 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }
  .users-table td > * { min-width: 0; }
  .users-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.8rem; font-weight: 600; }
  .users-table td:first-child { display: block; font-size: 1.05rem; font-weight: 700; }
  .users-table td:first-child::before { content: none; }
  .users-table td[colspan] { display: block; }
  .users-table td[colspan]::before { content: none; }
  .users-table td:last-child { display: block; padding-top: 8px; }
  .users-table td:last-child::before { content: none; }
  .users-actions button { flex: 1 1 auto; font-size: 0.9rem; }
  .users-password-form label, .users-password-form input, .users-password-form button { width: 100%; }

  /* ---- 登入／無權限頁 ---- */
  .login-page { min-height: 100dvh; padding: 16px; }
  .login-card { padding: 22px 18px; }
  .login-card .btn-primary { min-height: 44px; }
  body[data-page="none"] .container { display: flex; align-items: center; min-height: 60dvh; }
  body[data-page="none"] .panel { width: 100%; }
}
/* ==== /MOBILE-BASE ==== */

/* ==== MOBILE-CARDS ==== */
@media (max-width: 1024px) {
  /* Page content only: the shared tracker on index.html is intentionally excluded. */
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) :is(main, dialog) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) :is(main, dialog) :is(button, .btn-upload, .rev-add, .check, .btn-dl, a.btn-primary, a.btn-secondary, summary) {
    min-width: 40px;
    min-height: 40px;
    white-space: normal;
  }
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) :is(main, dialog) :is(.btn-upload, .rev-add, .btn-dl, a.btn-primary, a.btn-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    max-width: 100%;
  }
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) :is(main, dialog) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    font-size: 16px;
  }
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) :is(.toolbar-left, .filters, .subfilters, .cat-chips, .view-bar, .view-toggle, .legend-item, .log-tools, .searchbar) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) .search-input {
    min-width: 0;
    max-width: 100%;
  }
  body:is([data-page="rfi"], [data-page="shop"]) :is(.pill-pick, .date-pick) {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    max-width: 100%;
  }
  body:is([data-page="rfi"], [data-page="shop"]) .ic-view:not(.hidden) {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    min-height: 40px;
  }
  body:is([data-page="rfi"], [data-page="shop"]) .ic-view .ic-text { min-width: 0; }
  body:is([data-page="rfi"], [data-page="shop"]) .ic-btn-edit {
    position: static;
    flex: 0 0 40px;
    opacity: 1;
    pointer-events: auto;
  }
  body:is([data-page="rfi"], [data-page="shop"]) .att-body a { min-height: 40px; padding-block: 8px; }
  body:is([data-page="rfi"], [data-page="shop"]) .att-del { flex-shrink: 0; }
  body:is([data-page="rfi"], [data-page="shop"]) :is(.status, .result, .admin-tag) { white-space: normal; }
  body[data-page="rfi"] .table-wrap { max-width: 100%; overflow-x: auto; }
  body[data-page="rfi"] .grid-table.rfi-grid { min-width: 1280px; }
  body[data-page="rfi"] .rfi-summary-wrap { min-width: 0; overscroll-behavior-x: contain; }
  body[data-page="shop"] .proj-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-page="shop"] .proj-head > *,
  body[data-page="shop"] .ver > * { min-width: 0; }
  body[data-page="shop"] .proj-head :is(.proj-name, .proj-name-input) { grid-column: span 2; }
  body[data-page="shop"] .ver { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="shop"] .ver-info { grid-column: 1 / -1; }
  body[data-page="shop"] .slot { border-top: 1px solid var(--line); }
  body[data-page="shop"] .slot-title { flex-wrap: wrap; }
  body[data-page="shop"] .rev-line { flex-wrap: wrap; }
  body[data-page="shop"] .rev-line .rev-input { flex: 1 1 160px; }
  body[data-page="issue"] :is(.ver-results, #history-content) { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  body[data-page="issue"] .sheet-table { min-width: 940px; }
  body[data-page="issue"] :is(.item-head, .iss-head) { grid-template-columns: minmax(0, 1fr); }
  body[data-page="issue"] :is(.item-head, .iss-head, .vbar, .searchbar, .other-row) > * { min-width: 0; }
  body[data-page="issue"] :is(.iss-actions, .other-actions) { justify-content: flex-start; }
  body[data-page="issue"] .up-row { grid-template-columns: 22px 44px minmax(0, 1fr) 80px; }
  body[data-page="issue"] .up-row > :is(.bar, .up-state) { grid-column: 3 / -1; }
  body[data-page="issue"] .btn-dl { overflow-wrap: anywhere; }
  body[data-page="issue"] .dl-big a { display: block; }
  body[data-page="issue"] #history-content table { min-width: 580px; }
  body[data-page="issue"] .dup-option { min-height: 40px; }
}

@media (max-width: 768px) {
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) :is(.toolbar-left, .search-input) { width: 100%; }
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) :is(.form-grid, .new-form .form-grid) { grid-template-columns: minmax(0, 1fr); }
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) :is(.form-row, .form-actions) { min-width: 0; }
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) .form-actions { flex-direction: column; align-items: stretch; }
  body:is([data-page="rfi"], [data-page="shop"], [data-page="issue"]) .form-actions button { width: 100%; }
  body:is([data-page="rfi"], [data-page="shop"]) .upload-desktop-label { display: none; }
  body:is([data-page="rfi"], [data-page="shop"]) .upload-mobile-label[hidden] { display: inline; }
  body:is([data-page="rfi"], [data-page="shop"]) .drop-hint { display: none; }
  body:is([data-page="rfi"], [data-page="shop"]) :is(.upload-row, .att, .rev-line) { min-width: 0; }

  /* Each existing row becomes a card; the original editors and event targets stay in place. */
  body[data-page="rfi"] :is(.grid-table.rfi-grid, .rfi-list),
  body[data-page="issue"] :is(.iss-table, .sheet-table) {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: auto;
  }
  body[data-page="rfi"] :is(.rfi-grid, .rfi-list) colgroup,
  body[data-page="rfi"] .rfi-grid thead,
  body[data-page="issue"] :is(.iss-table, .sheet-table) :is(colgroup, thead) { display: none; }
  body[data-page="rfi"] :is(.rfi-grid, .rfi-list) tbody,
  body[data-page="issue"] :is(.iss-table, .sheet-table) tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }
  body[data-page="rfi"] :is(.rfi-grid, .rfi-list) tbody > tr,
  body[data-page="issue"] :is(.iss-table, .sheet-table) tbody > tr {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
  }
  body[data-page="rfi"] :is(.rfi-grid, .rfi-list) td,
  body[data-page="issue"] :is(.iss-table, .sheet-table) td {
    display: block;
    position: static;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 10px 12px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
  }
  body[data-page="rfi"] :is(.rfi-grid, .rfi-list) td[data-label]::before,
  body[data-page="issue"] :is(.iss-table, .sheet-table) td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
  }
  body[data-page="rfi"] .rfi-grid td[data-card-key="form_no"] { display: contents; }
  body[data-page="rfi"] .rfi-grid td[data-card-key="form_no"]::before { display: none; }
  body[data-page="rfi"] .rfi-grid td[data-card-key="form_no"] > .sub-field {
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  body[data-page="rfi"] .rfi-grid .rfi-row-download { margin: 10px 12px; }
  body[data-page="rfi"] .rfi-grid [data-field="form_no"] { order: -30; font-weight: 700; }
  body[data-page="rfi"] .rfi-grid [data-field="form_no"]::before {
    content: "釋疑單編號";
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
  }
  body[data-page="rfi"] .rfi-grid [data-field="form_no"] > .sub-cap { display: none; }
  body[data-page="rfi"] .rfi-grid td[data-card-key="subject"] { order: -20; font-weight: 700; }
  body[data-page="rfi"] .rfi-grid td[data-card-key="status"] { order: -10; }
  body[data-page="rfi"] .rfi-grid :is(.actions-cell, .ops-cell) { order: 20; }
  body[data-page="rfi"] .rfi-grid .actions-cell:empty { display: none; }
  body[data-page="rfi"] .rfi-grid :is(.sub-field, .inline-cell, .ic-edit) { min-width: 0; }
  body[data-page="rfi"] .rfi-grid .sub-cap { font-size: 0.78rem; }
  body[data-page="rfi"] .rfi-grid :is(.cell-input, .cell-select) { padding: 6px; }
  body[data-page="rfi"] .rfi-grid .pill-pick .cell-select { padding: 0; }
  body[data-page="rfi"] .rfi-grid .badges { flex-wrap: wrap; }
  body[data-page="rfi"] .rfi-list td:first-child { font-weight: 700; }
  body[data-page="rfi"] .rfi-list td a { display: flex; align-items: center; min-height: 40px; }
  /* Keep the existing summary sorting controls available above the cards. */
  body[data-page="rfi"] .rfi-list thead { display: block; }
  body[data-page="rfi"] .rfi-list thead tr { display: flex; flex-wrap: wrap; }
  body[data-page="rfi"] .rfi-list th { display: block; position: static; flex: 1 1 auto; }
  body[data-page="rfi"] .rfi-list .sort-btn { width: 100%; }

  /* Shop already uses a project/version grid rather than a table. */
  body[data-page="shop"] .proj { margin: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  body[data-page="shop"] .proj-head { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
  body[data-page="shop"] .proj-head::before { content: "送審項目"; order: -40; color: var(--muted); font-size: 0.78rem; }
  body[data-page="shop"] .proj-head :is(.proj-name, .proj-name-input) { order: -39; }
  body[data-page="shop"] .proj-meta[data-label="目前版次"] { order: -30; }
  body[data-page="shop"] .proj-meta[data-label="狀態"] { order: -20; }
  body[data-page="shop"] .proj-ctrl { order: -10; }
  body[data-page="shop"] .proj-note { padding: 10px 12px; flex-wrap: wrap; }
  body[data-page="shop"] .ver-list { padding: 10px; }
  body[data-page="shop"] .ver-item { padding: 0 0 12px; }
  body[data-page="shop"] .ver-item::before,
  body[data-page="shop"] .ver-item::after { display: none; }
  body[data-page="shop"] .ver { display: flex; flex-direction: column; }
  body[data-page="shop"] .ver-info { order: -20; }
  body[data-page="shop"] .slot-result { order: -10; }
  body[data-page="shop"] .slot { border-left: 0; }
  body[data-page="shop"] .ver-label { flex-wrap: wrap; }
  body[data-page="shop"] .btn-next-ver { width: 100%; }

  body[data-page="issue"] :is(.iss-list, .item-vers) { padding: 8px; }
  body[data-page="issue"] :is(.item-head, .iss-head, .list-heading, .vbar, .searchbar, .vendor-strip) { padding: 10px; }
  body[data-page="issue"] :is(.iss-bar, .iss-title, .file-meta, .other-heading, .log-tools, .searchbar) { flex-wrap: wrap; }
  body[data-page="issue"] .ver-actions { margin-left: 0; width: 100%; }
  body[data-page="issue"] .sheet-table td[data-card-key="drawing"] { order: -40; }
  body[data-page="issue"] .sheet-table td[data-card-key="status"] { order: -30; }
  body[data-page="issue"] .sheet-table td[data-card-key="pdf"] { order: -20; }
  body[data-page="issue"] .sheet-table td[data-card-key="dwg"] { order: -10; }
  body[data-page="issue"] .sheet-id { font-size: 1.05rem; }
  body[data-page="issue"] .sheet-title { font-size: 0.95rem; }
  body[data-page="issue"] .file-block { display: flex; flex-direction: column; gap: 6px; }
  body[data-page="issue"] .file-meta { order: -1; margin-top: 0; }
  body[data-page="issue"] .file-meta a.btn-dl { order: -1; flex: 1 0 100%; margin: 0; font-size: 1rem; }
  body[data-page="issue"] .file-name { font-size: 0.85rem; }
  body[data-page="issue"] .file-meta > span + .btn-dl { margin-left: 0; }
  body[data-page="issue"] .other-row { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  body[data-page="issue"] .other-row .file-name { flex-wrap: wrap; }
  body[data-page="issue"] .other-row .other-size { display: block; }
  body[data-page="issue"] .other-actions a[download] { order: -1; }
  body[data-page="issue"] .result-count { white-space: normal; margin-left: 0; }
  body[data-page="issue"] .old-desc { max-width: 100%; white-space: normal; }
  body[data-page="issue"] .iss-old > summary { grid-template-columns: 18px minmax(0, 1fr); }
  body[data-page="issue"] .iss-old > summary > .iss-actions { grid-column: 2; min-width: 0; }
  body[data-page="issue"] main .dl-big a { display: block; }
  body[data-page="issue"] :is(.diffsum, .fact) { white-space: normal; }
  body[data-page="issue"] .drop-zone { padding: 12px; }
  body[data-page="issue"] #pick-files { display: block; width: 100%; margin-top: 8px; border: 1px solid var(--accent); border-radius: 8px; background: #fff; text-decoration: none; }
  body[data-page="issue"] .drop-title { font-size: 1rem; }
  body[data-page="issue"] .upload-slot .new-panel { padding: 10px; }
  body[data-page="issue"] .up-sum { grid-template-columns: minmax(0, 1fr); }
  body[data-page="issue"] .up-row { grid-template-columns: 22px 44px minmax(0, 1fr); }
  body[data-page="issue"] .up-row > :is(.up-size, .bar, .up-state) { grid-column: 1 / -1; text-align: left; }
  body[data-page="issue"] .up-more { padding: 8px 10px; }
  body[data-page="issue"] #pop .hp-head { position: sticky; top: 0; z-index: 1; }
  body[data-page="issue"] #pop .hp-head > div { min-width: 0; }
  body[data-page="issue"] #pop .hp-close { flex-shrink: 0; }
  body[data-page="issue"] #history-content { width: 100%; }
  /* 歷程：每版一張卡片，版次／狀態／日期在上，檔名、大小、下載依序往下 */
  body[data-page="issue"] #history-content { overflow-x: visible; }
  body[data-page="issue"] #pop table { display: block; min-width: 0; font-size: 0.95rem; }
  body[data-page="issue"] #pop thead { display: none; }
  body[data-page="issue"] #pop tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  body[data-page="issue"] #pop tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
  body[data-page="issue"] #pop td { display: block; min-width: 0; padding: 0; border: 0; }
  body[data-page="issue"] #pop td:nth-child(3) { margin-left: auto; color: var(--muted); }
  body[data-page="issue"] #pop td:nth-child(4) { flex: 1 0 100%; order: 2; color: var(--muted); font-size: 0.85rem; text-align: left; }
  body[data-page="issue"] #pop td:nth-child(4):empty { display: none; }
  body[data-page="issue"] #pop td:nth-child(4)::before { content: attr(data-label) "　"; }
  body[data-page="issue"] #pop td:nth-child(5) { display: contents; }
  body[data-page="issue"] #pop td[data-file]::before { content: attr(data-file); flex: 1 0 100%; order: 1; min-width: 0; font-weight: 600; }
  body[data-page="issue"] #pop td:nth-child(5) > * { flex: 1 0 100%; order: 3; }
  body[data-page="issue"] #pop .history-related { margin: 0 12px 12px; border-radius: 10px; }
  body[data-page="issue"] #pop .history-related .btn-dl { display: flex; margin-top: 8px; }
  body[data-page="issue"] #dup-dialog :is(.dup-group, .dup-group legend) { min-width: 0; max-width: 100%; }
  body[data-page="issue"] #dup-dialog .dup-list { max-height: none; overflow: visible; }
  body[data-page="issue"] #dup-dialog .dup-option { grid-template-columns: 24px minmax(0, 1fr); gap: 6px 10px; padding-block: 10px; }
  body[data-page="issue"] #dup-dialog :is(.dup-size, .dup-time) { grid-column: 2; text-align: left; white-space: normal; }
  body[data-page="issue"] #toast { max-width: calc(100vw - 24px); width: max-content; overflow-wrap: anywhere; }
  body:is([data-page="rfi"], [data-page="shop"]) .date-pick { width: 100%; min-width: 0; }

  /* 手機只顯示重點：卡片不列承辦人、連絡電話、負責人（新增對話框仍保留） */
  body[data-page="items"] .tracker td.owner-cell,
  body[data-page="items"] .owner-legend,
  body[data-page="rfi"] .rfi-grid :is([data-field="contact"], [data-field="phone"], [data-field="answer_owner"]),
  body[data-page="shop"] .proj-meta[data-label="負責人"] { display: none; }
  body[data-page="rfi"] .rfi-grid td[data-label="負責人／期限"]::before { content: "期限"; }
  body[data-page="rfi"] .rfi-grid [data-field="answer_owner"] + .sub-field { margin-top: 0; }
}
/* ==== /MOBILE-CARDS ==== */