/* 機構維修記錄頁(2026-09-13,單B前端)。
 *
 * **點解自己一個 css 檔、唔改 style.css**:同 attendance.css 一樣嘅理由 ——
 * style.css 係首頁嘅版面骨架,呢版係獨立一版,兩邊唔應該互相影響。
 *
 * 🔴 **色板／字體／圓角一律行 style.css 嘅 token,唔跟 prototype。**
 * 老闆 2026-09-13 親裁:prototype 嗰套(綠主色 #16a34a、Noto Sans TC、16px 圓角)
 * 係設計辦自己嗰身衫,搬入嚟就會同內聯網其餘幾版唔同款。所以:
 *   · 底色／卡／線／字色  → var(--page) / var(--card) / var(--line) / var(--ink) / var(--muted)
 *   · 圓角                → var(--radius)(12px),細件 8px
 *   · 字體                → 唔另外指定,直接食 style.css 個 body(PingFang HK 嗰套)
 *   · 主掣底色            → var(--prog-fill) #2F7D57 —— 同 itops 個 .itops-btn.primary
 *                            (#2F6F4F)同一路數嘅暗綠,唔係 prototype 嗰隻鮮綠。
 *
 * ── 狀態色點樣揀(2026-09-13 統籌親批)──────────────────────────
 * 首頁 v2 設計稿(`docs/設計/首頁v2細節修飾/README.md` 第 4 節)寫明
 * 「所有狀態 chip 一律灰」,而 prototype 用橙／藍／紫／綠四色 —— 兩者有張力。
 *
 * 統籌 2026-09-13 裁:**維修狀態係流程資訊,可以保留四色,但要用低飽和款
 * (照 prototype 嗰啲柔和色),唔准鮮豔。** 同一份 v2 稿本身都留返象限四色點,
 * 理由一樣 ——「呢四隻係全個介面唯一有色嘅資訊,所以要留」。
 * 收費狀態同屬流程資訊,同一個道理照用(呢半係我讀出嚟嘅,統籌一句可以推翻)。
 *
 * 色值直接抄 HANDOFF §4 張表,唔自己另調:
 *   待送 MAX   #FEF3E2 / #B06A08(橙黃)
 *   MAX 維修中 #E8F1FE / #1D5FBF(藍)
 *   待交還機構 #F2EAFC / #7B3FC4(紫)
 *   已完成     #EAFCF0 / #177A3F(綠)
 *   不收費     var(--tag-bg) / var(--tag-ink)(灰 —— 佢係「冇嘢要跟」,唔係一個階段)
 * 四隻都係細面積標籤,唔違反 D64-4(大面積色只准四處)。
 */

.rep-body { margin: 0; background: var(--page); color: var(--ink); }

.rep-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── 攔路牌(未登入 / 攞唔到嘢)—— 抄 attendance.css,唔准淨係白版(D150) ── */
.rep-gate {
  max-width: 460px;
  margin: 80px auto;
  background: var(--card);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.rep-gate p { margin: 0 0 14px; font-size: 14px; color: var(--muted); }

/* ── 頁頭 ─────────────────────────────────────────────────── */
.rep-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.rep-head h1 { margin: 0; font-size: 20px; font-weight: 700; }
.rep-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.rep-head-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.rep-btn {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .12s ease, background-color .12s ease;
}
.rep-btn:hover { border-color: var(--grip); }
.rep-btn:disabled { color: var(--grip); cursor: default; }

.rep-btn-primary {
  background: var(--prog-fill);
  border-color: var(--prog-fill);
  color: #fff;
  font-weight: 500;
}
/* 綠 hover #276848 —— 首頁 v2 稿張 token 表新增嗰隻,唔用 --prog-ink(太深) */
.rep-btn-primary:hover { background: #276848; border-color: #276848; }

.rep-btn-danger { color: #B4453A; }
.rep-btn-danger:hover { border-color: #B4453A; }

/* ── 四張統計卡 ───────────────────────────────────────────── */
.rep-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rep-stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .12s ease;
}
.rep-stat:hover { border-color: var(--grip); }
.rep-stat.on { border-color: var(--sw, var(--grip)); }
.rep-stat-top {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
}
.rep-stat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sw); flex: none; margin-left: auto;
}
.rep-stat-n {
  margin-top: 8px;
  font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ── 篩選列 ───────────────────────────────────────────────── */
.rep-filters {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.rep-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.rep-search input {
  width: 100%; height: 34px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--page); font: inherit; font-size: 13px; color: var(--ink);
}
.rep-search-ic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px; pointer-events: none;
}
.rep-filters select,
.rep-filters input[type="date"] {
  height: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); font: inherit; font-size: 13px; color: var(--ink);
}
.rep-daterange { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }

.rep-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); cursor: pointer;
  padding: 0 4px; white-space: nowrap;
}
.rep-toggle input { accent-color: var(--prog-fill); cursor: pointer; margin: 0; }
.rep-toggle:hover { color: var(--ink); }

/* 「收埋咗 N 筆」嗰條線。用灰底唔用警告色 —— 佢係講緊一件正常嘢,唔係出事。 */
.rep-hidden-note {
  margin: 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: 13px; color: var(--muted);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.rep-hidden-note button {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--page); font: inherit; font-size: 12px; color: var(--ink);
  padding: 4px 10px; cursor: pointer;
}
.rep-hidden-note button:hover { border-color: var(--grip); }

/* ── 列表 ─────────────────────────────────────────────────── */
.rep-table-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  overflow: hidden;
}
/* 橫向捲動係明買明賣(走位偵測 ①),唔當出界 */
.rep-table-scroll { overflow-x: auto; }
.rep-table { width: 100%; min-width: 940px; border-collapse: collapse; }
.rep-table th {
  text-align: left; font-size: 12px; font-weight: 400; color: var(--muted);
  padding: 10px 14px; background: var(--page);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.rep-table td {
  padding: 12px 14px; font-size: 13px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.rep-table tbody tr { cursor: pointer; transition: background-color .12s ease; }
.rep-table tbody tr:hover { background: var(--page); }
.rep-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-wcno {
  display: inline-block;
  padding: 2px 8px; border-radius: 6px;
  background: var(--tag-bg); color: var(--ink);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.rep-model { margin-top: 3px; font-size: 11px; color: var(--muted); }
.rep-issue {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 260px; line-height: 1.45;
}
.rep-table th:last-child,
.rep-table td:last-child { text-align: right; }
.rep-actions { display: flex; gap: 4px; justify-content: flex-end; }
.rep-icon-btn {
  border: 1px solid transparent; background: none; font: inherit;
  color: var(--muted); cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px; line-height: 1;
}
.rep-icon-btn:hover { background: var(--page); color: var(--ink); }

.rep-menu-anchor { position: relative; }
.rep-menu {
  position: absolute; right: 0; top: 30px; z-index: 20;
  min-width: 150px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
}
.rep-menu button {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink);
  padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.rep-menu button:hover { background: var(--page); }
.rep-menu button.danger { color: #B4453A; }

.rep-empty { padding: 40px 16px; text-align: center; color: var(--muted); }
.rep-empty b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; font-weight: 500; }
.rep-empty span { font-size: 13px; }

.rep-table-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.rep-pager { margin-left: auto; display: flex; gap: 4px; }
.rep-page-btn {
  min-width: 28px; height: 28px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); font: inherit; font-size: 12px; color: var(--ink);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.rep-page-btn:hover:not(:disabled) { border-color: var(--grip); }
.rep-page-btn.on { background: var(--prog-bg); border-color: var(--prog-track); color: var(--prog-ink); font-weight: 700; }
.rep-page-btn:disabled { color: var(--grip); cursor: default; }
.rep-page-gap { min-width: 20px; text-align: center; color: var(--muted); align-self: center; }

/* ── 狀態／收費標籤 ───────────────────────────────────────── */
.rep-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--pill-bg); color: var(--pill-ink);
}
.rep-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.rep-pill-amber  { --pill-bg: #FEF3E2; --pill-ink: #B06A08; }
.rep-pill-blue   { --pill-bg: #E8F1FE; --pill-ink: #1D5FBF; }
.rep-pill-purple { --pill-bg: #F2EAFC; --pill-ink: #7B3FC4; }
.rep-pill-green  { --pill-bg: #EAFCF0; --pill-ink: #177A3F; }
.rep-pill-grey   { --pill-bg: var(--tag-bg); --pill-ink: var(--tag-ink); }

/* ── 抽屜 ─────────────────────────────────────────────────── */
.rep-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(31, 33, 36, .32);
}
/* 🔴 `top` 要讓返影子帶個位,唔准寫死 0。條橙帶係 `position: fixed` 貼頂,
   而抽屜都係對住視窗度位 —— 唔讓位嘅話行影子模式嗰陣個抽屜標題同粒 ✕
   會俾條帶冚住(2026-09-09 老闆親自報過同一件事,嗰次係到店抽屜)。
   後備 `0px`:生產環境冇條帶,一個 pixel 都唔會郁。
   (`.rep-overlay` 係 `inset: 0` 嘅全版遮罩,唔使讓 —— 佢本來就冚成版。) */
.rep-drawer {
  position: fixed; top: var(--影子帶高, 0px); right: 0; bottom: 0; z-index: 50;
  width: min(560px, 100vw);
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 28px rgba(16, 24, 40, .10);
  display: flex; flex-direction: column;
}
.rep-drawer-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.rep-drawer-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.rep-drawer-head p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.rep-drawer-close {
  margin-left: auto; flex: none;
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--card);
  font: inherit; color: var(--muted); cursor: pointer; line-height: 1;
}
.rep-drawer-close:hover { background: var(--page); color: var(--ink); }
.rep-drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.rep-drawer-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--page);
}

/* ── 表單 ─────────────────────────────────────────────────── */
.rep-section { margin-bottom: 20px; }
.rep-section:last-child { margin-bottom: 0; }
.rep-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rep-section-badge {
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--tag-bg); color: var(--tag-ink);
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center; flex: none;
}
.rep-section-title { font-size: 13px; font-weight: 700; }

.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rep-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rep-field.full { grid-column: 1 / -1; }
.rep-field label { font-size: 12px; color: var(--muted); }
.rep-req { color: #B4453A; }
.rep-field input,
.rep-field select,
.rep-field textarea {
  width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); font: inherit; font-size: 13px; color: var(--ink);
  padding: 7px 9px;
}
.rep-field textarea { min-height: 72px; resize: vertical; }
.rep-field input:focus,
.rep-field select:focus,
.rep-field textarea:focus { outline: 2px solid var(--prog-track); outline-offset: -1px; }

.rep-date-today { display: flex; gap: 6px; align-items: center; }
.rep-date-today input { flex: 1; min-width: 0; }
.rep-today-btn {
  flex: none; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); font: inherit; font-size: 12px; color: var(--muted);
  padding: 7px 9px; cursor: pointer; white-space: nowrap;
}
.rep-today-btn:hover { border-color: var(--grip); color: var(--ink); }

.rep-hint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--prog-bg); border: 1px solid var(--prog-track);
  border-radius: 8px; padding: 9px 11px; font-size: 12px; color: var(--prog-ink);
}
.rep-hint button {
  margin-left: auto; flex: none;
  border: 1px solid var(--prog-track); border-radius: 6px;
  background: var(--card); font: inherit; font-size: 12px; color: var(--prog-ink);
  padding: 4px 9px; cursor: pointer;
}
.rep-hint button:hover { background: var(--prog-bg); }

.rep-form-error {
  margin: 0 0 14px; padding: 9px 11px;
  border: 1px solid #E7C9C4; border-radius: 8px;
  background: #FBF0EE; color: #8E3A30; font-size: 12px;
}

/* ── 詳情 ─────────────────────────────────────────────────── */
.rep-detail-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-detail-no { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rep-detail-tools { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.rep-block { margin-bottom: 20px; }
.rep-block:last-child { margin-bottom: 0; }
.rep-block h3 {
  margin: 0 0 9px; font-size: 12px; font-weight: 400; color: var(--muted);
  letter-spacing: .04em;
}
.rep-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; }

.rep-timeline { display: flex; flex-direction: column; gap: 0; }
.rep-tl { display: flex; gap: 10px; }
.rep-tl-mark { display: flex; flex-direction: column; align-items: center; flex: none; }
.rep-tl-dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; line-height: 1;
  background: var(--tag-bg); color: var(--tag-ink);
}
.rep-tl.done .rep-tl-dot { background: var(--prog-bg); color: var(--prog-fill); }
.rep-tl-line { width: 2px; flex: 1; min-height: 14px; background: var(--line); }
.rep-tl.done .rep-tl-line { background: var(--prog-track); }
.rep-tl-text { padding-bottom: 14px; }
.rep-tl:last-child .rep-tl-text { padding-bottom: 0; }
.rep-tl-t1 { font-size: 13px; }
.rep-tl-t2 { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; }

.rep-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rep-kv-item { min-width: 0; }
.rep-kv-k { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.rep-kv-v { font-size: 13px; }
.rep-kv-wide { grid-column: 1 / -1; }

.rep-hist { display: flex; flex-direction: column; gap: 8px; }
.rep-hist-card {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); padding: 10px 12px;
  text-align: left; font: inherit; cursor: pointer; width: 100%;
}
.rep-hist-card:hover { border-color: var(--grip); background: var(--page); }
.rep-hist-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.rep-hist-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rep-hist-issue {
  font-size: 13px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rep-none { font-size: 13px; color: var(--muted); }

/* ── 提示條 ───────────────────────────────────────────────── */
.rep-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 60;
  background: var(--ink); color: #fff;
  border-radius: 999px; padding: 9px 18px; font-size: 13px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .22);
}

/* ── 窄版 ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rep-stats { grid-template-columns: repeat(2, 1fr); }
  .rep-grid { grid-template-columns: 1fr; }
  .rep-kv { grid-template-columns: 1fr; }
}