/* ============================================================
 * contract-form.css — 契約表單（代管／包租／轉租）新版樣式
 * 來源：契約新增樣式稿 artifact 6b88efe8，規格原樣移植。
 *
 * ⚠ 套用方式：#contractFormContainer 加 .cform。
 * ⚠ 不可移除 .input-group / .input-group-static：三支契約表單 JS 共 25 處用
 *   closest() 找欄位容器掛錯誤訊息、siblings() 掛 date-hint / deposit-hint，
 *   故每個 .fld 同時掛 input-group-static，本檔把兩者視為同一種容器。
 * ⚠ .rental-manager-new-block / .rental-manager-legacy-block 由 JS 切換新舊制，
 *   結構與 class 一律保留。
 * ⚠ 不掛 .taud：taud-form.css 有大量針對物件／房客頁的規則，會有連鎖影響。
 *   需要的規格搬一份過來，數值與 taud 保持一致，改那邊要同步。
 * ============================================================ */

/* （樣板 demo 曾在此用 !important 把 .cf-layout 壓成單欄，因為樣板沒做左側導覽；
   正式頁已有 contractSectionNav.js 產生的錨點選單，這條已移除。） */

/* 委託形式卡片選擇器：規格比照房東頁 LandlordData 的 .idtype-picker */
.cform .ctype-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.cform .ctype-picker{grid-template-columns:1fr}}
.cform .ctype-opt{display:flex;align-items:center;gap:11px;min-height:66px;margin:0;padding:10px 14px;cursor:pointer;
  border:1px solid var(--field-line);border-radius:11px;background:#fff;
  transition:border-color .16s,background .16s,box-shadow .16s}
.cform .ctype-opt:hover{border-color:#c2ccdb}
.cform .ctype-opt.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(30,90,200,.08)}
.cform .ctype-radio{position:relative;flex:0 0 auto;width:20px;height:20px;border:2px solid #bdc8d9;border-radius:50%;background:#fff;transition:border-color .16s}
.cform .ctype-opt.on .ctype-radio{border-color:var(--brand)}
.cform .ctype-opt.on .ctype-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--brand)}
.cform .ctype-opt strong{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.cform .ctype-opt small{display:block;margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--muted)}

    .cform {
        --bg: #f0f2f5; --card: #fff; --ink: #1f2733; --ink-soft: #5b6472;
        --line: #e7ebf1; --line-soft: #eef1f6; --label: #333b47; --muted: #8a93a2; --field-line: #dfe4ec;
        --brand: #1E5AC8; --brand-hover: #17408B; --brand-soft: #eaf0fb;
        --amber: #c77700; --amber-bg: #fff4e2;
        --teal: #0f8ca0; --teal-bg: #e2f3f6;
        --green: #1f9254; --green-bg: #e6f4ec;
        --red: #d24141; --red-bg: #fdeaea; --red-line: #f4cccc;
        --req: #e0455e;
        --shadow: 0 1px 3px rgba(20,30,50,.06), 0 8px 24px rgba(20,30,50,.05);
        color: var(--ink); font-size: 15px; line-height: 1.6;
    }
    .cform *, .cform *::before, .cform *::after { box-sizing: border-box; }

    /* ── 頁首：規格同 taud-form.css 的 .taud .pagehead ─────── */
    .cf-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
        margin: 0 0 14px; padding: 10px 20px; background: #fff; border: 1px solid #e9ecf2;
        border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); flex-wrap: wrap; }
    .cf-pagehead h1 { font-size: 20px; font-weight: 800; margin: 0; color: #1E5AC8; }
    .cf-pagehead .sub { color: #5b6472; font-size: 13px; margin-top: 3px; }
    .cf-pagehead-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    /* 頁首的相關資料連結（房東／物件／安全檢核表／房客／共住人）*/
    .cf-headlinks { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .cf-headlinks-co { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    /* 頁首的連結與動作鈕：同一條規則，長相完全一致（淡藍底＋描邊膠囊）。
       ⚠ 選擇器要帶 .cf-pagehead-actions 前綴並加 !important ——
         Material Dashboard 對 a / .btn 有自己的 background 與 padding，
         單靠 .cf-link 一個 class（特異性 0,0,1,0）會被蓋掉，
         結果就是連結變白底、按鈕維持實心藍，兩者看起來像兩套元件。 */
    .cf-pagehead-actions .cf-link,
    .cf-pagehead-actions .cf-headbtn {
        display: inline-flex !important; align-items: center; gap: 6px; margin: 0;
        font-size: 12.5px !important; font-weight: 700 !important; line-height: 1;
        letter-spacing: 0 !important; text-transform: none !important;
        color: #1E5AC8 !important; background: #eaf0fb !important;
        border: 1px solid #cfe0fb !important; border-radius: 9px !important;
        padding: 7px 12px !important; min-width: 0 !important;
        text-decoration: none !important; white-space: nowrap; cursor: pointer;
        box-shadow: none !important; transform: none !important;
        transition: background .15s, color .15s, border-color .15s;
    }
    .cf-pagehead-actions .cf-link:hover,
    .cf-pagehead-actions .cf-headbtn:hover {
        background: #dfeafc !important; border-color: #b9d2f7 !important;
        color: #17408B !important; text-decoration: none !important;
    }
    .cf-pagehead-actions .cf-link .material-symbols-rounded,
    .cf-pagehead-actions .cf-headbtn .material-symbols-rounded {
        font-size: 16px !important; line-height: 1; color: inherit !important;
    }
    /* .btn-icon.btn-3 自帶較大的 padding 與 min-width，會把按鈕撐出頁首卡片 */
    .cf-pagehead-actions .btn-icon { padding: 0 18px !important; min-width: 0 !important; }
    /* 「上傳租金水準表」等頁首 chip：.btn-icon 那條會把上下 padding 壓成 0、按鈕只剩 16px 高（2026-09-14 客訴太小），這裡用更高權重定死尺寸 */
    .cf-pagehead-actions .btn.cf-headbtn, .cf-pagehead-actions .btn-icon.cf-headbtn { height: 36px !important; padding: 0 18px !important; font-size: 13.5px !important; border-radius: 10px !important; }
    .cf-pagehead-actions .btn.cf-headbtn .material-symbols-rounded { font-size: 18px !important; }
    .cf-pagehead-actions .btn .btn-inner--icon { line-height: 1; display: inline-flex; }
    .cf-pagehead-actions .btn .material-symbols-rounded { font-size: 18px; }
    /* 斷點與下方 .cform 的一致（640），避免同一頁出現兩套折行時機 */
    @media (max-width: 640px) {
        .cf-pagehead { flex-direction: column; align-items: stretch; }
        .cf-pagehead-actions .btn { width: 100%; }
    }

    /* ── 摘要條 ───────────────────────────────────────────── */
    .cform .cf-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
        background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 18px; }
    .cform .cf-summary .s { border-left: 3px solid var(--line); padding-left: 12px; }
    .cform .cf-summary .s:first-child { border-left-color: var(--brand); }
    .cform .cf-summary .k { font-size: 12px; font-weight: 700; color: var(--muted); }
    .cform .cf-summary .v { font-size: 17px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums;
        line-height: 1.3; display: flex; align-items: baseline; gap: 3px; }
    /* ⚠ NT$ 是放在數字「前面」，margin 要加右邊；先前寫成 margin-left 會把它往右推、和數字擠在一起 */
    .cform .cf-summary .v small { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 0; }
    /* 摘要條最後一列：相關資料連結（由 EditContract.js mountRelatedLinksIntoSummary 搬進來） */
    .cform .cf-summary > .cf-summary-links { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
        padding: 12px 0 0 !important; margin: 2px 0 0; border-top: 1px solid var(--line); }

    /* ── 版面：左導覽＋右內容 ─────────────────────────────── */
    /* 包裹層由 contractSectionNav.js 動態建立並自帶 .cform（編輯／審核頁沒有 .cform 祖先），
       所以選擇器要同時涵蓋「.cform 底下的」與「自己就是 .cform 的」兩種情況 */
    .cform .cf-layout, .cf-layout.cform { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
    .cform .cf-nav { position: sticky; top: 16px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
        padding: 10px; display: flex; flex-direction: column; gap: 2px; }
    .cform .cf-nav a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px;
        text-decoration: none; color: var(--ink-soft); font-size: 13.5px; font-weight: 700; transition: background .15s, color .15s; }
    .cform .cf-nav a:hover { background: var(--line-soft); color: var(--ink); }
    .cform .cf-nav a.on { background: var(--brand-soft); color: var(--brand); }
    .cform .cf-nav a .n { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 800; width: 19px; height: 19px;
        border-radius: 6px; display: grid; place-items: center; background: var(--line-soft); color: var(--muted); flex: 0 0 auto; }
    .cform .cf-nav a.on .n { background: var(--brand); color: #fff; }
    /* 選單由 js/common/contractSectionNav.js 動態建立（規格同房客頁 _TaudSectionNav）。
       ≥1200px 才顯示兩欄；以下維持單欄、選單不顯示。 */
    .cform .cf-nav { max-height: calc(100vh - 32px); overflow-y: auto; }
    .cform .cf-layout > #contractFormContainer, .cf-layout.cform > #contractFormContainer { min-width: 0; }
    /* 不論有沒有包在 .cf-layout 裡（轉租表單沒有左側錨點選單時就沒有），容器的 .card-body 內距一律歸零，
       否則委託形式卡到第一張表單卡會多出 16px（2026-09-14）。 */
    #contractFormContainer.card-body, .cform #contractFormContainer { padding: 0 !important; }
    /* ↑ 左右也歸零（2026-09-14）：編輯／審核頁的容器是 .card-body（左右各 16px），第一張卡片就比頁首卡窄 16px、右邊對不齊。 */
    /* ↑ padding-top:0（2026-09-14）：三頁的 #contractFormContainer 都掛著 bootstrap 的 .card-body.pt-3（16px），
       左側錨點選單沒有這段內距，第一張卡片就比選單頂端低 16px。 */
    .cform .cf-card { scroll-margin-top: 16px; }
    .cform .cf-card.cf-flash { animation: cfFlash 1.2s ease-out; }
    @keyframes cfFlash { 0% { box-shadow: 0 0 0 3px var(--brand); } 100% { box-shadow: var(--shadow); } }
    @media (max-width: 1199px) {
        .cform .cf-layout, .cf-layout.cform { display: block; }
        .cform .cf-nav { display: none; }
    }
    @media (prefers-reduced-motion: reduce) { .cform .cf-card.cf-flash { animation: none; } }

    /* ── 卡片 ─────────────────────────────────────────────── */
    /* 卡片與標題規格對齊 taud-form.css 的 .taud .card / .taud .card>h3 */
    .cform .cf-card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow);
        padding: 22px 24px; margin-bottom: 18px; scroll-margin-top: 16px; }
    .cform .cf-card > h2,
    .cform .cf-card > h3 { font-size: 16px; font-weight: 800; margin: 0 0 20px; padding-bottom: 12px;
        border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        cursor: pointer; user-select: none; color: var(--ink); }
    /* 收合箭頭：與 .taud .card>h3::after 同一套（▾ 字符、32×32、radius 9、brand-soft 底） */
    .cform .cf-card > h2 .chev,
    .cform .cf-card > h3 .chev { margin-left: auto; color: var(--brand); font-size: 20px; font-weight: 700; line-height: 1;
        width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
        border-radius: 9px; background: var(--brand-soft); transition: transform .18s ease, background .15s; }
    .cform .cf-card > h2 .chev::before,
    .cform .cf-card > h3 .chev::before { content: "\25BE"; }
    .cform .cf-card.collapsed > h2,
    .cform .cf-card.collapsed > h3 { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
    .cform .cf-card.collapsed > h2 .chev,
    .cform .cf-card.collapsed > h3 .chev { transform: rotate(-90deg); }
    /* 契約書表單文件那張卡片走 Bootstrap collapse（見 contractFormCard.js 的註解），
       收合狀態看 aria-expanded，不是 .collapsed */
    .cform .cf-card > h3.cf-card--bs[aria-expanded="false"] { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
    .cform .cf-card > h3.cf-card--bs[aria-expanded="false"] .chev { transform: rotate(-90deg); }
    /* Bootstrap collapse 的 trigger 收合時會自帶 .collapsed —— 標題本身沒有底線變化，
       只轉箭頭；內容區由 .collapse 控制顯隱，不走 .cf-body。 */
    .cform .cf-card > h3.collapsible.collapsed .chev { transform: rotate(-90deg); }
    /* Bootstrap collapse 的 trigger 收合時會加 .collapsed，箭頭同樣朝右 */
    .cform h2.collapsible.collapsed .collapse-chevron,
    .cform h3.collapsible.collapsed .collapse-chevron { transform: rotate(-90deg); }
    .cform .cf-card.collapsed > .cf-body { display: none; }
    .cform .cf-card .hint { font-size: 12.5px; color: var(--muted); font-weight: 600; }

    /* ── 表單欄位 ─────────────────────────────────────────── */
    /* 欄位列：與 .taud .frow 同一套 —— 預設單欄，靠 .c2/.c3/.c4 指定欄數（不用 auto-fit，
       否則同一份設定在不同頁會排出不同欄數，看起來就不像同一個系統）。 */
    .cform .frow { display: grid; gap: 14px; }
    .cform .frow.c2 { grid-template-columns: 1fr 1fr; }
    .cform .frow.c3 { grid-template-columns: repeat(3, 1fr); }
    .cform .frow.c4 { grid-template-columns: repeat(4, 1fr); }
    .cform .rows { display: flex; flex-direction: column; gap: 14px; }
    .cform .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .cform .fld > label { font-size: 13px; font-weight: 700; color: var(--label);
        display: flex; align-items: center; gap: 5px; margin: 0; }
    /* 必填標記：全站統一規格，同 taud-form.css 的 .taud span.req（透明底＋同色細框） */
    .cform .req { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 0 5px;
        border: 1px solid currentColor; border-radius: 4px; background: transparent;
        color: #C0392B; font-size: .72rem; font-weight: 700; line-height: 1.7; white-space: nowrap; }
    .cform .fld .form-text, .cform .fld .sub { font-size: 11.5px; color: var(--muted); margin: 0; }
    .cform .fld .form-text.text-success { color: var(--muted) !important; }
    .cform .fld .form-text.text-danger { color: var(--red) !important; }

    /* 輸入元件：保留 .form-control 類別，只改外觀 */
    /* 欄位規格對齊 taud-form.css 的 .taud .ctl（高 42、圓角 9、padding 0 12、14px） */
    .cform .form-control,
    .cform input[type="text"], .cform input[type="number"], .cform input[type="date"],
    .cform input[type="email"], .cform input[type="tel"], .cform input[type="search"], .cform select {
        height: 42px; border: 1px solid var(--field-line); background: #fff; border-radius: 9px;
        padding: 0 12px; font-size: 14px; color: var(--ink); font-family: inherit; width: 100%;
        transition: border-color .15s, box-shadow .15s; box-shadow: none;
    }
    .cform .form-control::placeholder, .cform input::placeholder { color: #a2abb9; }
    /* material-dashboard 用 ::before/::after 與 background-image 漸層畫 Material 的底線，
       房東／房客頁（taud-form.css）就是這樣壓制的，這裡照抄同一組防護。
       ⚠ select 不能一起清 background-image —— 下拉箭頭是用 background-image 畫的。 */
    .cform .form-control::after, .cform .form-control::before { display: none !important; content: none !important; }
    .cform input.form-control, .cform textarea.form-control,
    .cform input[type="text"], .cform input[type="number"], .cform input[type="date"],
    .cform input[type="email"], .cform input[type="tel"], .cform input[type="search"] {
        background-image: none !important;
    }
    .cform .form-control[readonly], .cform .form-control:disabled,
    .cform input[readonly], .cform input:disabled, .cform select:disabled {
        background-color: #eef1f5 !important; color: #8a93a2 !important;
    }
    .cform select, .cform select.form-control {
        -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7482' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
        background-repeat: no-repeat; background-position: right 10px center;
    }
    .cform .form-control:hover, .cform select:hover { border-color: #c2ccdb; }
    .cform .form-control:focus, .cform select:focus, .cform input:focus {
        outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
    }
    .cform textarea, .cform textarea.form-control { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; line-height: 1.6; width: 100% !important; }
    .cform .form-control[readonly], .cform .form-control:disabled,
    .cform input[readonly], .cform input:disabled, .cform select:disabled {
        background: #eef1f5; color: #8a93a2; cursor: not-allowed;
    }
    /* 人員三欄的唯讀顯示塊（salesIdDisplay 等），沿用 id 但換外觀 */
    .cform .form-control-plaintext { height: 42px !important; min-height: 42px !important; display: flex; align-items: center;
        border: 1px solid var(--field-line) !important; border-radius: 9px !important; background: #eef1f5 !important;
        padding: 0 12px !important; font-size: 14px; color: #8a93a2; width: 100% !important; }
    /* Bootstrap 的 w-auto / d-inline-block 會讓欄位縮成一小格，這裡一律撐滿。
       ⚠ 但要排除 .cf-inline-num / .cf-inline-date —— 那兩個是「句子中夾帶的小框」
         （例：住宅現況的「租期至 [日期] 日屆滿」），被撐滿會讓整句斷行。 */
    .cform .fld .w-auto:not(.cf-inline-num):not(.cf-inline-date),
    .cform .fld .d-inline-block:not(.cf-inline-num):not(.cf-inline-date) { width: 100% !important; display: block !important; }
    .cform .group-select { width: 100%; }

    /* 行內敘述句型：「委託人攜回 [3] 日審閱」 */
    .cform .inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--label); }
    /* ⚠ 不可用 width:auto —— 數字/文字 input 的 auto 會退回瀏覽器預設的 size（約 20 字元），
       min-width 反而完全沒作用，一個只填「3」的天數欄會被撐成 200px 以上。這裡給明確寬度。 */
    /* 對齊一律靠左（原本是置中，跟其他欄位不一致） */
    .cform .inline input[type="number"] { width: 84px !important; flex: 0 0 auto; text-align: left; display: inline-block !important; }
    .cform .inline input[type="text"] { width: 160px !important; min-width: 0; flex: 0 0 auto; text-align: left; display: inline-block !important; }
    .cform .inline .grow { flex: 1 1 200px; }
    .cform .inline .grow input { width: 100% !important; text-align: left; }


    /* 數量／金額欄位（月租費、押金、期間…）：輸入框撐滿欄寬、單位貼右。
       ⚠ 不要沿用 .inline 的 84px —— 那個寬度是給「委託人攜回 [3] 日審閱」這種
         句子中夾帶的小框用的，套到獨立欄位會變成寬格子裡卡一個小方塊、右邊全空，
         而且 17,000 這種 5 位數在 84px 內也顯示不完。 */
    .cform .inline.num { flex-wrap: nowrap; gap: 8px; }
    .cform .inline.num input[type="number"] { width: auto !important; flex: 1 1 auto; min-width: 0; text-align: right; }
    .cform .inline.num .unit { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }

    /* ── 勾選框／單選鈕：全站統一 ────────────────────────────
       ⚠ 一定要 !important：正式頁的標記裡有 18 個 checkbox、16 個 radio
         掛著 inline style="width:18px;height:18px"，另外 13 個 checkbox、
         10 個 radio 什麼都沒掛（吃瀏覽器預設約 13px）。不統一的話同一頁會
         同時出現 13 / 16 / 18px 三種大小。
       ⚠ 這條刻意寫在下面各區塊規則「之前」—— .seg2 / .cf-radiolist / .cf-tbl .chk
         的選擇器特異性更高，仍可覆寫這裡的對齊與邊距。 */
    /* radio：原生外觀＋品牌色（房東頁的 radio 也是這樣） */
    .cform input[type="radio"] {
        width: 16px !important; height: 16px !important; min-width: 16px;
        accent-color: var(--brand); vertical-align: middle; cursor: pointer; flex: 0 0 auto;
        appearance: auto !important; -webkit-appearance: auto !important;
        background-image: none !important; background-color: initial !important;
        border: revert !important; border-radius: revert !important;
        float: none !important; margin-left: 0 !important;
    }
    /* checkbox：與房東新增頁完全相同的「精緻方框勾選」——
       規格原樣搬自 taud-form.css 的 Option A（20×20、2px #c7cfdb 框、圓角 6、
       勾選時品牌色底＋白色勾勾），改那邊時記得同步。
       ⚠ 全部帶 !important：material-dashboard 對 .form-check-input 設了
         appearance:none + border:none，而且正式頁標記裡曾有 inline width:18px；
         不用 !important 壓不住，同一頁會出現好幾種勾選框。 */
    .cform input[type="checkbox"] {
        -webkit-appearance: none !important; appearance: none !important;
        width: 20px !important; height: 20px !important; min-width: 20px !important;
        margin: 0 !important; padding: 0 !important;
        border: 2px solid #c7cfdb !important; border-radius: 6px !important;
        background: #fff !important; background-image: none !important;
        cursor: pointer; position: relative !important; flex: 0 0 auto; vertical-align: middle;
        box-shadow: none !important; float: none !important;
        transition: background .15s, border-color .15s;
    }
    .cform input[type="checkbox"]:hover { border-color: var(--brand) !important; }
    .cform input[type="checkbox"]:checked { background: var(--brand) !important; border-color: var(--brand) !important; }
    .cform input[type="checkbox"]:checked::after {
        content: "" !important; display: block !important; position: absolute;
        left: 5.5px; top: 1.5px; width: 5px; height: 10px;
        border: solid #fff !important; border-width: 0 2.5px 2.5px 0 !important;
        transform: rotate(45deg); background: none !important;
    }
    .cform input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft) !important; }
    .cform input[type="checkbox"]:disabled { opacity: .55; cursor: not-allowed; }
    /* 「勾選框＋一句話」的通用排法（表格內與表格外共用同一套外觀） */
    .cform .chk { display: inline-flex; align-items: center; gap: 7px; margin: 0;
        font-size: 13px; font-weight: 400; color: var(--ink); cursor: pointer; }

    /* 單選／複選：卡片式選項 */
    .cform .seg2 { display: flex; gap: 8px; flex-wrap: wrap; }
    /* 所有勾選／單選卡片統一 56px 高（邊框 1+1 + padding 9+9 + 36px 行內輸入框），
       三種契約、有沒有夾輸入框、單行還是清單型，高度都一樣；句子長到折行的例外 */
    .cform .seg2 > label { flex: 1 1 150px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--field-line);
        border-radius: 10px; padding: 9px 12px; font-size: 13.5px; cursor: pointer; background: #fbfcfe; margin: 0;
        min-height: 56px; box-sizing: border-box;
        transition: border-color .15s, background .15s; color: var(--ink); font-weight: 400; }
    .cform .seg2 > label:hover { border-color: #c2ccdb; }
    .cform .seg2 input[type="radio"] {
        accent-color: var(--brand); width: 16px !important; height: 16px !important; margin: 0; flex: 0 0 auto; }
    /* checkbox 的外觀由上方全域規則決定（與房東頁一致），這裡不再另設尺寸 */
    .cform .seg2 > label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-hover); font-weight: 700; }
    /* 長句型選項（住宅現況、委託管理新增項目…）：每項獨佔一列，
       句中還可以夾輸入框。外觀與一般 .seg2 卡片完全相同。 */
    .cform .seg2.stack { flex-direction: column; }
    /* min-height 56 = 邊框 1+1 + 上下 padding 9+9 + 36px 輸入框：有沒有夾輸入框的列高度都一樣
       （句子長到折行的列會更高，那是內容決定的，不強制） */
    .cform .seg2.stack > label { flex: 1 1 auto; width: 100%; flex-wrap: wrap; row-gap: 6px; }
    .cform .seg2.stack > label input[type="text"],
    .cform .seg2.stack > label input[type="date"] { height: 36px; }
    .cform .legal { font-size: 12.5px; color: var(--ink-soft); background: var(--line-soft); border-radius: 9px; padding: 9px 12px; line-height: 1.65; }

    /* 單選清單：選項是長敘述句時用這個，不要用 .seg2 的卡片式方框 */
    .cform .cf-radiolist { display: flex; flex-direction: column; gap: 8px; }
    .cform .cf-radiolist > label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0;
        font-size: 13.5px; font-weight: 400; color: var(--ink); line-height: 1.9; cursor: pointer; }
    /* 純文字選項（沒夾輸入框）讓勾選框對齊第一行而不是垂直置中 */
    .cform .cf-radiolist > label > input:first-child { align-self: flex-start; margin-top: 5px; }
    .cform .cf-radiolist input[type="radio"] { accent-color: var(--brand); width: 16px !important; height: 16px !important;
        margin: 4px 0 0; flex: 0 0 auto; }
    .cform .cf-radiolist > label:has(input:checked) { color: var(--brand-hover); font-weight: 700; }
    /* 句中夾帶的小輸入框（例：「每期每度 [__] 元」） */
    /* 高度 36：與表格內輸入框同一級（獨立欄位是 42），原本 32 太矮 */
    .cform .cf-inline-num { width: 90px !important; height: 36px !important; display: inline-block !important;
        margin: 0 6px; padding: 0 8px !important; text-align: left; font-variant-numeric: tabular-nums; vertical-align: middle; }

    /* ── 費用分攤表 ───────────────────────────────────────── */
    .cform .cf-tblwrap { border: 1px solid var(--line); border-radius: 12px; overflow: auto; background: #fff; }
    .cform .cf-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px; margin: 0; }
    .cform .cf-tbl thead th { background: #f6f8fb; color: var(--ink-soft); font-weight: 700; text-align: left;
        padding: 11px 13px; white-space: nowrap; border-bottom: 1px solid var(--line); font-size: 12.5px; }
    .cform .cf-tbl tbody td { padding: 9px 13px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; background: #fff; }
    .cform .cf-tbl tbody tr:last-child td { border-bottom: 0; }
    .cform .cf-tbl td.item { font-weight: 700; color: var(--label); white-space: nowrap; }
    .cform .cf-tbl td input[type="number"], .cform .cf-tbl td input[type="text"], .cform .cf-tbl td select {
        height: 36px; font-size: 13px; padding: 0 10px; width: 100% !important; display: block !important; }
    .cform .cf-tbl td select { padding-right: 28px; background-position: right 8px center; }
    /* 費率／金額欄：輸入框與單位同一行，各列高度才會一致、左右對齊 */
    .cform .cf-tbl .rate-cell { display: flex; align-items: center; gap: 8px; }
    .cform .cf-tbl .rate-cell input { flex: 1 1 auto; min-width: 0; }
    .cform .cf-tbl .unit { font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
    .cform .cf-tbl .chk { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; margin: 0; white-space: nowrap; color: var(--ink-soft); }
    /* .cf-tbl .chk 的 checkbox 外觀由全域規則決定（與房東頁一致） */
    .cform .cf-tbl .na { color: #c3cad6; }
    .cform .cf-tbl tr.sub-row td { background: #fafbfd; padding-top: 0; }
    /* 附屬列裡「勾選＋小輸入框＋單位」排成一行（例：停車管理費底下的「車位租金每月 [__] 元」）。
       ⚠ 不能直接讓 tr.sub-row > td 變 flex —— 代管／轉租的附屬列裝的是電費的兩個
         容器（#electricity-by-degree-container / -by-other-container），
         那兩個是靠顯示／隱藏切換的區塊，變成 flex 會並排。所以另外包一層 .cf-subline。
       ⚠ 之所以需要這層：.cform .cf-tbl td input[type="number"] 帶 display:block + width:100%，
         特異性比 .cf-inline-num 高，元素平鋪在 td 裡就會各自斷行。
         包進 flex 後子元素會被 blockify 成 flex item，不再各占一行。 */
    .cform .cf-tbl .cf-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    /* 三個元件都撐成與輸入框同高（36）的盒子再置中，勾選、文字、單位才會跟輸入框在同一條中線上（2026-09-14 客訴：車位租金沒垂直置中） */
    .cform .cf-tbl .cf-subline > .chk { margin: 0; flex: 0 0 auto; height: 36px; line-height: 36px; }
    .cform .cf-tbl .cf-subline > .chk input[type="checkbox"] { margin: 0; align-self: center; }
    .cform .cf-tbl .cf-subline > input[type="number"] { flex: 0 0 auto; text-align: right; height: 36px; align-self: center; }
    .cform .cf-tbl .cf-subline > .unit { flex: 0 0 auto; line-height: 36px; }
    /* 停車管理費列的金額欄：停車管理費金額＋（分隔線）車位租金勾選＋金額，同一列、同 36 高中線（方案 A，2026-09-14） */
    .cform .cf-tbl .rate-cell--parking { flex-wrap: nowrap; gap: 8px 10px; }
    .cform .cf-tbl .rate-cell--parking > input#parkingFeeRate { flex: 0 1 200px !important; min-width: 120px; }   /* 管理費金額不必占滿整欄 */
    .cform .cf-tbl .rate-cell--parking > .chk { margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--line); height: 36px; line-height: 36px; white-space: nowrap; }
    .cform .cf-tbl .rate-cell--parking > .chk input[type="checkbox"] { margin: 0; }
    .cform .cf-tbl td .rate-cell--parking > input.parking-rent { flex: 1 1 160px !important; width: auto !important; min-width: 120px; display: inline-block !important; text-align: right; }   /* 車位租金吃剩下的寬度，單位留在同一列 */
    /* 沒勾「車位租金」時金額框淡化提示（僅視覺，值照存） */
    .cform .cf-tbl .rate-cell--parking:has(#hasParkingOther:not(:checked)) > input.parking-rent { opacity: .45; }
    @media (max-width: 900px) { .cform .cf-tbl .rate-cell--parking { flex-wrap: wrap; } .cform .cf-tbl .rate-cell--parking > .chk { border-left: 0; padding-left: 0; margin-left: 0; } }
    .cform .fee-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.7; }
    .cform .fee-note b { color: var(--ink-soft); }

    /* ── 檢附文件 ─────────────────────────────────────────── */
    .cform .doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
    /* 只有一張卡時：改用 auto-fill 保留空軌道，卡片才會維持單格寬度而不被拉滿 */
    .cform .doc-grid.one { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .cform .doc { border: 1px solid var(--field-line); border-radius: 12px; overflow: hidden; background: #fbfcfe; display: flex; flex-direction: column; }
    .cform .doc > .h { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; font-weight: 700; font-size: 12.5px;
        color: var(--label); background: #f4f6f9; border-bottom: 1px solid var(--field-line); line-height: 1.5; }
    .cform .doc > .b { padding: 10px; flex: 1; }
    /* ── 檔案上傳：改用物件頁那一套 ────────────────────────────
       物件／房客編輯頁用的是「虛線大框（.file-upload-wrapper）＋ 相簿縮圖牆（.taud-files）」，
       規格定義在 taud-form.css，但選擇器全是 .taud 開頭，而合約頁沒有 .taud 容器（是 .cform），
       所以這裡把需要的規則原樣搬過來一份。數值與 taud-form.css 保持一致，改那邊時記得同步。
       ⚠ 不要改成掛 .taud —— taud 有大量針對 .taud 版面的規則，套到合約頁的
         Bootstrap 標記上會有一堆非預期的連鎖影響。 */
    .cform .file-upload-container { position: relative; }
    .cform .file-upload-wrapper {
        position: relative; min-height: 120px; border: 2px dashed #cdd4de; border-radius: 8px;
        display: flex; align-items: center; justify-content: center; background: #fff; padding: 12px;
        cursor: pointer; transition: border-color .15s, background .15s;
    }
    .cform .file-upload-wrapper:hover { border-color: var(--brand); background: var(--brand-soft); }
    .cform .file-upload-wrapper .custom-file-input,
    .cform .file-upload-wrapper .ocr-file-picker-input {
        position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2;
    }
    .cform .file-upload-content {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 6px; text-align: center; color: var(--muted); pointer-events: none;
    }
    .cform .file-upload-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .cform .file-upload-text i { font-size: 34px; color: #c3cad6; }
    .cform .file-upload-wrapper:hover .file-upload-text i { color: var(--brand); }
    .cform .file-upload-title { font-weight: 700; font-size: 12.5px; color: var(--label); }
    .cform .file-upload-hint { font-size: 11px; color: var(--muted); }

    /* 相簿縮圖牆：數值取自 taud-form.css 的 .taud .taud-files */
    .cform .taud-files { margin-top: 8px; }
    .cform .taud-files .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
    .cform .taud-files .gthumb { position: relative; height: 112px; border-radius: 8px; overflow: hidden;
        border: 1px solid var(--field-line); background: #eef2f8; display: flex; align-items: flex-end; justify-content: center; }
    .cform .taud-files .gthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
    .cform .taud-files .gthumb .face { position: absolute; inset: 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 5px; color: #5f7290; cursor: pointer; }
    .cform .taud-files .gthumb .face .ext { font-weight: 800; font-size: 12px; background: #fff;
        border: 1px solid var(--field-line); border-radius: 6px; padding: 3px 8px; color: var(--brand); }
    .cform .taud-files .gthumb .pg { position: absolute; top: 5px; left: 5px; font-size: 10px; color: #41506b;
        background: rgba(255,255,255,.85); border-radius: 5px; padding: 1px 6px; font-weight: 800; z-index: 2; }
    .cform .taud-files .gthumb .srv { position: absolute; top: 27px; left: 5px; z-index: 2; font-size: 9px; font-weight: 800;
        color: #15683c; background: rgba(230,244,236,.94); border: 1px solid #cbe6d5; border-radius: 5px; padding: 1px 5px; line-height: 1.3; }
    .cform .taud-files .gthumb .del { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%;
        background: rgba(20,30,50,.6); color: #fff; font-size: 13px; line-height: 1; display: flex; align-items: center;
        justify-content: center; cursor: pointer; border: 0; z-index: 2; transition: background .12s; padding: 0; }
    .cform .taud-files .gthumb .del:hover { background: var(--red); }
    .cform .taud-files .gthumb .fn { position: relative; z-index: 1; width: 100%; text-align: center; word-break: break-all;
        background: rgba(255,255,255,.86); border-top: 1px solid rgba(0,0,0,.04); padding: 3px 5px;
        font-size: 10.5px; line-height: 1.25; color: #3a4a63; max-height: 64%; overflow: hidden; }
    .cform .taud-files .gadd { height: 112px; border: 2px dashed #cdd4de; border-radius: 8px; display: flex;
        flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #9aa3b1;
        font-size: 11.5px; font-weight: 700; cursor: pointer; background: #fff; position: relative;
        margin: 0; transition: border-color .15s, color .15s; }
    .cform .taud-files .gadd:hover { border-color: var(--brand); color: var(--brand); }
    .cform .taud-files .gadd .plus { font-size: 24px; line-height: 1; }

    /* ── 上傳框：對齊房客頁的 .drop（160 高、upload_file 圖示、「點擊或拖曳上傳」）── */
    .cform .file-upload-wrapper { min-height: 160px; height: auto; flex-direction: column; gap: 6px; }
    /* ↑ height:auto 是必要的（2026-09-14）：material-dashboard 有一條全域 `.file-upload-wrapper{height:100%}`，
       在 .doc 卡片裡（.doc > .b 是 flex:1 撐滿的區塊）會讓虛線框吃掉整個 .b 的高度，
       上面的「滅火器認證字號」列與下面的「最多可上傳 N 個檔案」被擠出 .doc（overflow:hidden）之外，
       看起來就是上傳框被卡片邊框遮住。改回依內容（min 160）高度，框就跟卡片外框對齊。 */
    .cform .file-upload-icon { font-size: 34px; color: #c3cad6; line-height: 1; }
    .cform .file-upload-wrapper:hover .file-upload-icon { color: var(--brand); }

    /* ── 已選／已上傳檔案：把三支 JS 產出的 .file-item 對映成房客頁 .gthumb 磁磚 ────
       渲染器（updateFileUploadWithLink / handleFileList）產出的結構是
         .file-item > div > (img | a>i+text) + span(檔名) + button.btn(刪除)
       全是 inline style，所以這裡一律 !important 覆寫。數值同 .taud .taud-files .gthumb。 */
    .cform .file-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px;
        margin-top: 8px !important; padding: 0 !important; background: transparent !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
    .cform .file-list:empty { display: none !important; }
    .cform .file-list .file-item { position: relative; height: 112px; border-radius: 8px !important; overflow: hidden;
        border: 1px solid var(--field-line) !important; background: #eef2f8 !important;
        display: block !important; margin: 0 !important; padding: 0 !important; }
    .cform .file-list .file-item > div { position: static !important; display: block !important; overflow: visible !important; white-space: normal !important; }
    .cform .file-list .file-item img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover;
        border: 0 !important; border-radius: 0 !important; margin: 0 !important; cursor: zoom-in; display: block; }
    /* 檔名：壓在磁磚底部（同 .gthumb .fn） */
    .cform .file-list .file-item span, .cform .file-list .file-item a {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: block !important;
        text-align: center; word-break: break-all; white-space: normal !important; overflow: hidden;
        background: rgba(255,255,255,.86); border-top: 1px solid rgba(0,0,0,.04); padding: 3px 5px !important; margin: 0 !important;
        font-size: 10.5px !important; line-height: 1.25; color: #3a4a63 !important; max-height: 64%; text-decoration: none !important; cursor: pointer; }
    .cform .file-list .file-item a i { display: none !important; }
    /* ContractCommon / AuditContract 的渲染器把 PDF／文件圖示放成直接子元素，藏掉改由 ::before 統一顯示 */
    .cform .file-list .file-item > i { display: none !important; }
    /* 非圖片檔：中間顯示副檔名徽章（同 .gthumb .face .ext） */
    .cform .file-list .file-item:not(:has(img))::before {
        content: "description"; font-family: 'Material Symbols Rounded'; font-size: 30px; color: #5f7290;
        position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); line-height: 1; }
    /* 刪除鈕：右上角小圓鈕（同 .gthumb .del） */
    .cform .file-list .file-item .btn, .cform .file-list .file-item button {
        position: absolute; top: 5px; right: 5px; width: 20px !important; height: 20px !important; min-width: 0 !important;
        border-radius: 50% !important; background: rgba(20,30,50,.6) !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
        z-index: 2; display: flex !important; align-items: center; justify-content: center; box-shadow: none !important; transition: background .12s; }
    .cform .file-list .file-item .btn:hover, .cform .file-list .file-item button:hover { background: var(--red) !important; }
    .cform .file-list .file-item .btn i, .cform .file-list .file-item button i { font-size: 13px !important; color: #fff !important; line-height: 1; }
    /* 「＋新增」磁磚：有檔案時取代上傳框，排在縮圖牆最後一格（同 .taud .taud-files .gadd）。
       由 js/common/contractUploadBox.js 動態加入，label[for] 指向原本的 file input。 */
    .cform .file-list .gadd { height: 112px; border: 2px dashed #cdd4de; border-radius: 8px; display: flex;
        flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #9aa3b1;
        font-size: 11.5px; font-weight: 700; cursor: pointer; background: #fff; margin: 0; position: relative;
        transition: border-color .15s, color .15s; }
    .cform .file-list .gadd:hover { border-color: var(--brand); color: var(--brand); }
    .cform .file-list .gadd .plus { font-size: 24px; line-height: 1; }
    /* 卡片標題右側的上傳狀態（同房客頁 .ub-st） */
    .cform .doc > .h .ub-st { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; margin-left: auto; }
    .cform .doc.filled > .h .ub-st { color: var(--green); }
    /* 已上傳（來自伺服器）的標記（同 .gthumb .srv） */
    .cform .file-list .file-item .srv { position: absolute; top: 5px; left: 5px; z-index: 2; font-size: 9px; font-weight: 800;
        color: #15683c; background: rgba(230,244,236,.94); border: 1px solid #cbe6d5; border-radius: 5px; padding: 1px 5px; line-height: 1.3; }
    .cform .upload-max { color: var(--muted); font-size: 11.5px; margin-top: 6px; }
    .cform .file-list { margin-top: 8px !important; background: transparent !important; padding: 0 !important; }
    .cform .ext-no { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--label);
        padding: 8px 12px; background: var(--teal-bg); border-bottom: 1px solid #c9e0ea; }

    /* ── 共住人：表格 ─────────────────────────────────────────
       規格照抄房客詳細頁的「實際入住成員」表（_MemberTable.cshtml 的 .bank-account-table，
       視覺定義在 taud-form.css「表格內嵌輸入：選項B」那段）。數值一律對齊那邊，改那裡要同步改這裡。
       ⚠ 不要改掛 .taud —— taud 有大量針對該版面的規則，套到合約頁會有連鎖影響，
         所以這裡把需要的規則原樣搬一份過來，選擇器改成 .cform。
       ⚠ 大量 !important 是必要的：JS 動態產生的共住人列（EditContract.js / ContractCommon.js /
         AuditContract.js）用的是舊標記——inline width:180px、inline #dc3545、24px 圖示——
         房客頁本身也是靠 taud 的 !important 把同一套舊標記蓋成統一外觀。 */
    .cform .table-responsive { border: 1px solid var(--line) !important; border-radius: 12px; overflow-x: auto; }
    .cform .bank-account-table { width: 100% !important; border-collapse: collapse !important; font-size: 13.5px; background: #fff !important; margin: 0 !important; }   /* margin 要 !important：bootstrap .table 的 margin-bottom:1rem 會在圓角框底下留一條空白（2026-09-14） */
    .cform .bank-account-table thead th { font-size: 12px !important; font-weight: 800 !important; color: var(--ink-soft) !important;
        background: #f7f9fc !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
        padding: 10px 12px !important; text-align: left; white-space: nowrap; }
    .cform .bank-account-table tbody td { border: 0 !important; border-bottom: 1px solid var(--line) !important;
        padding: 5px 10px !important; vertical-align: middle !important; background: transparent !important; }
    .cform .bank-account-table tbody tr { background: transparent !important; }
    .cform .bank-account-table tbody tr:last-child td { border-bottom: 0 !important; }
    .cform .bank-account-table tbody td > * { vertical-align: middle !important; }
    /* 資料欄最小寬度（房客頁 _MemberTable 的 <style>）；序號與刪除欄維持窄欄 */
    .cform .bank-account-table th:not(:first-child):not(.act),
    .cform .bank-account-table td:not(:first-child):not(.act) { min-width: 150px; }
    /* 表格內的欄位比表單本體小一號（36 高、圓角 8）——與房客頁「選項B」一致。
       width:100% 要 !important：靜態列與 JS 動態列都帶 inline width:180px / 50%。 */
    .cform .bank-account-table .form-control, .cform .bank-account-table .form-select,
    .cform .bank-account-table input[type="number"], .cform .bank-account-table input[type="text"],
    .cform .bank-account-table select {
        height: 36px !important; width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important;
        border: 1px solid var(--field-line) !important; background-color: #fff !important; border-radius: 9px !important;
        padding: 0 8px !important; box-shadow: none !important; color: var(--ink) !important; font-size: 14px !important;
        margin: 0 !important; transition: background-color .12s, border-color .12s, box-shadow .12s !important; }
    .cform .bank-account-table input.form-control { background-image: none !important; }
    .cform .bank-account-table .form-control:hover, .cform .bank-account-table select:hover { border-color: #c2ccdb !important; }
    .cform .bank-account-table .form-control:focus, .cform .bank-account-table select:focus {
        background-color: #fff !important; border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; }
    .cform .bank-account-table .form-control:disabled, .cform .bank-account-table select:disabled {
        background-color: #eef1f5 !important; color: #8a93a2 !important; }
    .cform .bank-account-table select, .cform .bank-account-table select.form-control, .cform .bank-account-table select.form-select {
        padding-right: 26px !important; background-position: right 8px center !important; }
    /* 表格內的 select2（房客欄）：對齊 36 高、圓角 8 */
    .cform .bank-account-table .select2-container { width: 100% !important; }
    .cform .bank-account-table .select2-container--bootstrap-5 .select2-selection--single,
    .cform .bank-account-table .select2-container--default .select2-selection--single {
        height: 36px !important; min-height: 36px !important; border-radius: 9px !important; padding: 0 28px 0 8px !important; font-size: 13.5px !important; }
    .cform .bank-account-table td.na { color: #c3cad6; text-align: center; }
    /* 序號欄：窄、置中、等寬數字 */
    .cform .bank-account-table td.seq, .cform .bank-account-table th.seq { width: 46px; text-align: left;
        font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 400; }
    .cform .bank-account-table td.act, .cform .bank-account-table th.act { width: 64px; text-align: left; }
    /* 主要承租人那一列：淡藍底，與可刪除的共住人一眼分開 */
    /* 主房客列不另外上色 —— 房客頁的表格全白；由 JS 在名稱後綴「（主房客）」區分 */
    .cform .bank-account-table tbody tr#mainTenantRentShareRow td { background: transparent !important; }
    .cform .cr-main-tag { display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: 6px;
        background: var(--green-bg); color: var(--green); font-size: 11.5px; font-weight: 800; }
    /* 刪除鈕：與房客頁「實際入住成員」的實際渲染一致（淡紅底、紅框、紅圖示；不是實心紅）。
       ⚠ 數值是用 Playwright 量房客頁得到的，taud-form.css 檔案裡那段實心紅已被後面的規則蓋掉，
         不要照檔案抄。選擇器同時涵蓋靜態列與 JS 動態列的舊標記（inline #dc3545 + 24px icon），
         用 !important 蓋過 inline —— 房客頁就是這樣做的。 */
    .cform .bank-account-table .btn-icon, .cform .bank-account-table button.btn-icon.btn-2, .cform .btn-del {
        width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; margin: 0 !important;
        border: 1px solid #f3cccc !important; border-radius: 8px !important; background: var(--red-bg) !important;   /* #f3cccc：量房客頁得到的實際邊框色 */
        box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer;
        transition: background .15s, border-color .15s, transform .12s !important; }
    .cform .bank-account-table .btn-icon:hover, .cform .btn-del:hover { background: #fbdcdc !important; border-color: var(--red) !important; transform: translateY(-1px); }
    .cform .bank-account-table .btn-icon .material-symbols-rounded, .cform .bank-account-table .btn-icon i,
    .cform .btn-del .material-symbols-rounded { color: var(--red) !important; font-size: 19px !important; line-height: 1; }
    .cform .bank-account-table .btn-icon .btn-inner--icon { display: inline-flex; align-items: center; }
    /* 「增加一筆」：與房客頁「實際入住成員」的實際渲染一致（淡藍底、藍字、32 高、圓角 8）。
       ⚠ 同上，數值是量房客頁得到的，不是 taud-form.css 檔案裡的實心藍 38 高。 */
    .cform .cr-addbar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
    .cform .cr-addbar .btn, .cform .btn-add, .cform .btn-brand {
        height: 32px !important; margin: 0; border: 0 !important; border-radius: 8px !important; padding: 0 24px !important;
        font-size: 12.5px !important; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none;
        background: var(--brand-soft) !important; background-image: none !important; color: var(--brand) !important;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-family: inherit;
        box-shadow: none !important; transition: background .15s, color .15s; }
    .cform .cr-addbar .btn:hover, .cform .btn-add:hover, .cform .btn-brand:hover {
        background: #dfeafc !important; color: var(--brand-hover) !important; transform: none; box-shadow: none !important; }
    .cform .cr-addbar .btn .material-symbols-rounded, .cform .btn-brand .material-symbols-rounded { font-size: 16px !important; line-height: 1; color: inherit !important; }
    /* 總計列（契約特有，房客頁沒有）：淡藍底、深藍字，與表格同語言；不要用深藍實心底 */
    .cform .bank-account-table tfoot td { background: #f7f9fc !important; color: var(--ink) !important;
        border: 0 !important; border-top: 1px solid var(--line) !important; padding: 10px 12px !important;
        font-weight: 700; font-variant-numeric: tabular-nums; }
    .cform .cr-total { display: flex; justify-content: flex-end; gap: 22px; flex-wrap: wrap;
        padding: 12px 14px; margin-top: 14px; background: var(--brand-soft); border-radius: 10px;
        font-size: 13.5px; font-weight: 700; color: var(--brand-hover); }
    .cform .cr-total b { font-size: 16px; font-variant-numeric: tabular-nums; }

    /* ── 共住人：依樣板頁改版（2026-09-14，artifact f89237a8）────────────────
       字級／尺寸一律照樣板：表格 13.5、表頭 12/800、輸入框 36 高 13px、合計 14、對帳 11.5、
       徽章 11.5、說明 12.5。DOM 由 js/common/contractCoResident.js 事後裝飾（人數、對照、單位、對帳、空狀態）。
       寫在上面「照抄房客頁」那段之後，同權重時後者勝，不必再堆 !important 之外的權重。 */
    .cform .cf-card > h3 .cnt { font-size: 11.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 2px 9px; }
    .cform .cr-addbar { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
    .cform .cr-lead { font-size: 12.5px; color: var(--ink-soft); }
    .cform .cr-lead b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
    .cform .cr-lead .cr-lead-note::before { content: "／"; margin: 0 4px; color: var(--muted); }
    .cform .cr-lead .cr-lead-note { color: var(--muted); }
    .cform .cr-addbar .btn, .cform .btn-brand { height: 34px !important; padding: 0 14px !important; font-size: 13px !important; border-radius: 9px !important;
        background: var(--brand) !important; color: #fff !important; }
    .cform .cr-addbar .btn:hover, .cform .btn-brand:hover { background: var(--brand-hover) !important; color: #fff !important; }
    .cform .bank-account-table thead th { background: #f6f8fb !important; padding: 11px 13px !important; letter-spacing: .02em; }
    .cform .bank-account-table tbody td { padding: 9px 13px !important; border-bottom: 1px solid var(--line-soft) !important; font-size: 13.5px !important; }
    .cform .bank-account-table th:not(:first-child):not(.act), .cform .bank-account-table td:not(:first-child):not(.act) { min-width: 0; }
    .cform .bank-account-table th.seq, .cform .bank-account-table td.seq { color: var(--muted); }
    /* 主房客列：淺藍底＋「主房客」標籤（樣板），JS 會把「王小明（主房客）」重排成 標籤＋姓名 */
    .cform .bank-account-table tbody tr#mainTenantRentShareRow td { background: var(--brand-soft) !important; }
    .cform .cr-main-tag { margin-right: 8px; background: transparent; color: var(--brand); border: 1px solid var(--brand); font-size: 11px; letter-spacing: .04em; padding: 1px 6px; }
    .cform .cr-main-name { font-weight: 800; color: var(--ink); }
    .cform .cr-main-none { font-weight: 500; font-size: 12.5px; color: var(--muted); }
    /* 金額欄：36 高、13px、靠右等寬數字、右側「元」 */
    .cform .bank-account-table .amt { display: flex; align-items: center; gap: 8px; }
    .cform .bank-account-table .amt input { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px !important; padding: 0 10px !important; border-radius: 8px !important; }
    .cform .bank-account-table .amt .unit { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }
    .cform .bank-account-table input::placeholder { color: #a2abb9; }
    /* 房客欄：select2 改搜尋型外觀（左側放大鏡、右側箭頭、36 高、圓角 8） */
    .cform .bank-account-table .select2-container--bootstrap-5 .select2-selection--single,
    .cform .bank-account-table .select2-container--default .select2-selection--single {
        border-radius: 8px !important; padding: 0 30px 0 32px !important; font-size: 13px !important; border-color: var(--field-line) !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a93a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") !important;
        background-repeat: no-repeat !important; background-position: 9px center !important; }
    .cform .bank-account-table .select2-selection--single .select2-selection__rendered { line-height: 34px !important; padding: 0 !important; color: var(--ink) !important; font-weight: 600; }
    .cform .bank-account-table .select2-selection--single .select2-selection__placeholder { color: #a2abb9 !important; font-weight: 400; }
    .cform .bank-account-table .select2-selection--single .select2-selection__arrow { height: 34px !important; right: 6px !important; }
    /* 刪除鈕：圖示 18px、hover 反白成紅 */
    .cform .bank-account-table .btn-icon .material-symbols-rounded, .cform .bank-account-table .btn-icon i { font-size: 18px !important; }
    .cform .bank-account-table .btn-icon:hover, .cform .btn-del:hover { background: var(--red) !important; border-color: var(--red) !important; transform: none; }
    .cform .bank-account-table .btn-icon:hover .material-symbols-rounded, .cform .bank-account-table .btn-icon:hover i { color: #fff !important; }
    /* 合計列：每欄各自對帳 */
    .cform .bank-account-table tfoot td { background: #f9fafc !important; padding: 10px 13px !important; font-weight: 800; text-align: left !important; }
    .cform .bank-account-table tfoot .sum { font-size: 14px; font-variant-numeric: tabular-nums; }
    .cform .bank-account-table tfoot .vs { display: block; font-weight: 600; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
    .cform .bank-account-table tfoot .vs:empty { display: none; }
    .cform .bank-account-table tfoot .vs.ok { color: var(--green); }
    .cform .bank-account-table tfoot .vs.warn { color: var(--amber); }
    /* 空狀態（獨立 tbody，不影響 JS 的列數計算） */
    .cform .bank-account-table td.cr-empty { padding: 26px 13px !important; text-align: center; color: var(--muted); font-size: 13px; }
    .cform .bank-account-table td.cr-empty .material-symbols-rounded { display: block; font-size: 28px; color: #c3cad6; margin: 0 auto 6px; }
    /* 檢視模式：欄位轉純文字、主房客列維持淺藍底 */
    .cform.is-readonly .bank-account-table .amt input:disabled, .cform.is-readonly .bank-account-table input[readonly] {
        border-color: transparent !important; background: transparent !important; color: var(--ink) !important; font-weight: 600; padding: 0 !important; }
    .cform.is-readonly .bank-account-table th.act, .cform.is-readonly .bank-account-table td.act { display: none; }


    /* ── 合約套印（取自「合約套印文件庫」方案 D·套印清單）──────────────
       套印本來就是一次印一疊，所以用可勾選的清單＋底部合計，而不是一份一份點開。
       色票／圓角／按鈕全部改吃 .cform 的 tokens，與本頁其他區塊同一套。 */
    .cform .pk-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 16px; }
    .cform .pk-tools .fld { flex: 0 0 auto; }
    .cform .pk-tools > .fld > label { font-size: 12.5px; }
    .cform .pk-search { position: relative; }
    .cform .pk-search .material-symbols-rounded { position: absolute; left: 10px; top: 11px; font-size: 20px; color: #9aa3b1; pointer-events: none; }
    .cform .pk-search input { width: 240px; padding-left: 36px !important; }
    .cform .pk-fixed { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px;
        border-radius: 9px; background: #f4f6f9; border: 1px solid var(--field-line);
        color: var(--ink-soft); font-size: 13.5px; font-weight: 700; }
    .cform .pk-fixed .material-symbols-rounded { font-size: 17px; color: #9aa3b1; }
    .cform .pk-seg { display: inline-flex; background: #f4f6f9; border: 1px solid var(--field-line); border-radius: 9px; padding: 3px; gap: 2px; }
    .cform .pk-seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent;
        color: var(--ink-soft); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
    .cform .pk-seg button:hover { color: var(--brand); }
    .cform .pk-seg button.on { background: #fff; color: var(--brand); box-shadow: 0 1px 2px rgba(20,30,50,.1); }

    /* ── jsGrid 外觀壓掉：清單由 contractPrintList.js 的 rowRenderer 畫成 .pk，
       jsGrid 只負責資料與刷新。這裡把它的表格框線、斑馬紋、hover、cell padding 全部歸零。 */
    .cform #printFormGrid.jsgrid, .cform #printFormGrid .jsgrid-grid-body, .cform #printFormGrid .jsgrid-grid-header {
        border: 0 !important; background: transparent !important; overflow: visible !important; height: auto !important; }
    .cform #printFormGrid .jsgrid-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; }
    .cform #printFormGrid .jsgrid-row, .cform #printFormGrid .jsgrid-alt-row,
    .cform #printFormGrid .jsgrid-row:hover, .cform #printFormGrid .jsgrid-alt-row:hover { background: transparent !important; }
    .cform #printFormGrid td, .cform #printFormGrid .jsgrid-cell { padding: 0 !important; border: 0 !important; background: transparent !important; }
    .cform #printFormGrid tr.pk-grouphead-row td { padding-top: 6px !important; }
    /* 一張表格裡要畫出「每組各一個有框清單」：組內第一列補上邊、最後一列補下邊與圓角 */
    .cform #printFormGrid tr.pk-row .pk { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
    .cform #printFormGrid tr.pk-grouphead-row + tr.pk-row .pk { border-top: 1px solid var(--line); border-radius: 12px 12px 0 0; }
    .cform #printFormGrid tr.pk-row:last-child .pk,
    .cform #printFormGrid tr.pk-row:has(+ tr.pk-grouphead-row) .pk { border-bottom: 1px solid var(--line) !important; border-radius: 0 0 12px 12px; }
    .cform #printFormGrid tr.pk-grouphead-row + tr.pk-row:last-child .pk,
    .cform #printFormGrid tr.pk-grouphead-row + tr.pk-row:has(+ tr.pk-grouphead-row) .pk { border-radius: 12px; }
    .cform .pk-fixed .t { margin-left: 2px; }

    /* 分組標題：組名＋筆數＋一條分隔線 */
    .cform .pk-grouphead { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
    .cform .pk-grouphead h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
    .cform .pk-grouphead h4 .material-symbols-rounded { font-size: 19px; color: var(--brand); }
    .cform .pk-grouphead .cnt { font-size: 11.5px; font-weight: 700; color: var(--muted); background: #f4f6f9;
        border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
    .cform .pk-grouphead .rule { flex: 1; height: 1px; background: var(--line); }

    .cform .pk-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
    .cform .pk { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
        padding: 9px 14px; border-bottom: 1px solid var(--line-soft); margin: 0; transition: background .12s; }
    .cform .pk:last-child { border-bottom: 0; }
    .cform .pk:hover { background: #fafbfd; }
    .cform .pk > .material-symbols-rounded { font-size: 19px; color: var(--brand); }
    /* 每列右側的開啟鈕：正式頁就是一份一份點開，不做批次 */
    .cform .pk-open { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px;
        border: 0; border-radius: 8px; background: var(--brand); color: #fff;
        font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
        white-space: nowrap; transition: background .15s; }
    .cform .pk-open:hover { background: var(--brand-hover); }
    .cform .pk-open[disabled] { background: #eef1f5; color: #b8c0cc; cursor: not-allowed; }
    .cform .pk-open .material-symbols-rounded { font-size: 15px; }
    .cform .pk-main { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cform .pk-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
    /* 未開放的表單：留在原位、說明原因，不要直接消失 */
    .cform .pk.locked { background: #fbfcfd; }
    .cform .pk.locked .pk-name { color: var(--ink-soft); }
    .cform .pk.locked > .material-symbols-rounded { color: #b8c0cc; }

    /* 份數：舊版是黏在名稱字串裡的 x1／x2／x4，拆成獨立標記才看得出來 */
    .cform .pk-copies { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
        background: #f4f6f9; border: 1px solid var(--line); border-radius: 6px; padding: 1.5px 7px;
        font-variant-numeric: tabular-nums; white-space: nowrap; }
    .cform .pk-copies.multi { color: var(--brand); background: var(--brand-soft); border-color: #d4e2f8; }
    .cform .pk-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700;
        border-radius: 6px; padding: 1.5px 7px; white-space: nowrap; }
    .cform .pk-flag .material-symbols-rounded { font-size: 13px; }
    .cform .pk-flag.cond { color: var(--amber); background: var(--amber-bg); }
    .cform .pk-flag.lock { color: var(--ink-soft); background: #eef1f5; }

    .cform .pk-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
    /* 份數小計：只是提示這一組要印幾張，沒有勾選也就沒有批次動作 */
    .cform .pk-note { margin-top: 14px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
    .cform .pk-note b { color: var(--ink-soft); font-weight: 800; }
    @media (max-width: 640px) {
        .cform .pk-search input { width: 100%; }
        .cform .pk { grid-template-columns: auto 1fr; }
        .cform .pk-open { grid-column: 2; justify-self: start; }
    }



    /* 狀態徽章（頁首副標旁）*/
    .cf-pagehead .st { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 10px;
        border-radius: 999px; font-size: 11.5px; font-weight: 800; }
    .cf-pagehead .st.draft { background: #eef1f5; color: #5b6472; }
    .cf-pagehead .st.review { background: #fff4e2; color: #c77700; }
    .cf-pagehead .st.done { background: #e6f4ec; color: #1f9254; }

    /* 相關資料連結（僅明細檢視出現）*/
    .cf-relbar { max-width: 1180px; margin: 0 auto 14px; padding: 10px 14px; background: #fff;
        border: 1px solid #e9ecf2; border-radius: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .cf-relbar .k { font-size: 12.5px; font-weight: 700; color: #6b7482; margin-right: 4px; }
    .cf-relbar a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px;
        background: #eaf0fb; border: 1px solid #cfe0fb; color: #1E5AC8;
        font-size: 12.5px; font-weight: 700; text-decoration: none; }
    .cf-relbar a:hover { background: #dfeafc; border-color: #b9d2f7; color: #17408B; }
    .cf-relbar a .material-symbols-rounded { font-size: 16px; }

    /* 唯讀模式：整張表單灰掉、按鈕列只留返回 */
    .cform.is-readonly .form-control,
    .cform.is-readonly input, .cform.is-readonly select, .cform.is-readonly textarea {
        background: #eef1f5 !important; color: #8a93a2 !important; cursor: not-allowed; }
    .cform.is-readonly .btn-add, .cform.is-readonly .btn-del,
    .cform.is-readonly .cr-addbar { display: none !important; }
    .cform.is-readonly .file-upload-wrapper { pointer-events: none; opacity: .5; }
    .cform.is-readonly .seg2 > label, .cform.is-readonly .cf-radiolist > label { cursor: not-allowed; }
    /* 編輯模式：委託形式不可改（正式頁把 #contratType/#caseType 設 disabled）*/
    .cform.is-locked-type .ctype-picker { opacity: .55; pointer-events: none; }
    .ctype-lockmsg { display: none; margin-top: 10px; padding: 9px 13px; border-radius: 9px; font-size: 12.5px;
        font-weight: 700; color: #5b6472; background: #eef1f5; border: 1px solid #e0e5ec; }
    .cform.is-locked-type .ctype-lockmsg { display: block; }

    /* ── 頁尾按鈕列 ───────────────────────────────────────── */
    .cform .cf-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
        background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 18px; margin-top: 4px; }
    /* 按鈕規格對齊 .taud .btn（高 38、圓角 10、padding 0 18、13.5px）；
       原本吃 Material Dashboard 預設（大寫、陰影、圓角不同），與其他頁明顯不一樣。
       ⚠ .cf-pagehead 在 .cform **之外**（它在 card-header，.cform 在 form 內），
         選擇器加 .cform 前綴會完全匹配不到，按鈕就會維持 Material Dashboard 的尺寸而撐出卡片。 */
    .cform .cf-actions .btn {
        height: 38px; margin: 0; border: 0; border-radius: 10px; padding: 0 18px;
        font-size: 13.5px !important; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none;
        display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        box-shadow: none; transition: background .15s;
    }

    /* ── 手機版：斷點沿用 taud-form.css 的節奏 ─────────────── */
    @media (max-width: 900px) {
        .cform .cf-layout, .cf-layout.cform { grid-template-columns: 1fr; }
        .cform .cf-nav { position: static; flex-direction: row; overflow-x: auto; }
        .cform .cf-nav a { white-space: nowrap; }
        /* 平板：4 欄／3 欄先收成 2 欄（原本只收 .c2，c3/c4 會一路擠到 640 才收）*/
        .cform .frow.c4, .cform .frow.c3 { grid-template-columns: 1fr 1fr; }
        .cform .frow.c2 { grid-template-columns: 1fr; }
    }
    @media (max-width: 720px) {
        .cform .cf-card { padding: 16px 14px; border-radius: 14px; }
        .cform .cf-card > h2 { font-size: 15px; }
        /* 表格 → 一列一張卡：thead 收起，td 用 data-label 當欄位名 */
        .cform .cf-tblwrap { border: 0; border-radius: 0; overflow: visible; background: transparent; }
        .cform .cf-tbl, .cform .bank-account-table { min-width: 0; }
        .cform .cf-tbl thead, .cform .bank-account-table thead { display: none; }
        /* 共住人表格在窄螢幕同樣收成一列一卡（規則與 .cf-tbl 同一套） */
        .cform .table-responsive { border: 0; border-radius: 0; }
        .cform .bank-account-table tbody, .cform .bank-account-table tbody tr,
        .cform .bank-account-table tbody td { display: block; width: 100%; }
        .cform .bank-account-table tbody tr { border: 1px solid var(--line); border-radius: 12px;
            background: #fff; margin-bottom: 10px; padding: 4px 0; }
        .cform .bank-account-table tbody td { border: 0; display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
        .cform .bank-account-table tbody td::before { content: attr(data-label); flex: 0 0 88px;
            font-size: 12px; font-weight: 700; color: var(--muted); }
        .cform .bank-account-table tbody td:not([data-label])::before { content: none; }
        .cform .cf-tbl tbody, .cform .cf-tbl tbody tr, .cform .cf-tbl tbody td { display: block; width: 100%; }
        .cform .cf-tbl tbody tr {
            border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 10px; padding: 4px 0; }
        .cform .cf-tbl tbody td {
            border: 0; display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
        .cform .cf-tbl tbody td::before {
            content: attr(data-label); flex: 0 0 88px; font-size: 12px; font-weight: 700; color: var(--muted); }
        .cform .cf-tbl tbody td:not([data-label])::before { content: none; }
        .cform .cf-tbl tbody td.item { font-size: 14.5px; color: var(--brand-hover); background: var(--brand-soft);
            border-radius: 9px; margin: 2px 8px 4px; padding: 7px 10px; }
        .cform .cf-tbl tbody td.item::before { content: none; }
        .cform .cf-tbl tr.sub-row { border: 0; background: transparent; margin: -8px 0 10px; padding: 0 12px; }
        .cform .cf-tbl tr.sub-row td { padding: 0; }
        .cform .cf-tbl tr.sub-row td:empty { display: none; }
        .cform .doc-grid { grid-template-columns: 1fr; }
        .cform .seg2 > label { flex: 1 1 100%; }
    }
    /* 640 全部收單欄 —— 與 taud-form.css 的
       @media(max-width:640px){.taud .frow.c2,.c3,.c4{grid-template-columns:1fr}} 同一個斷點 */
    @media (max-width: 640px) {
        .cform .frow, .cform .frow.c2, .cform .frow.c3, .cform .frow.c4 { grid-template-columns: 1fr; }
        .cform .cf-summary { grid-template-columns: repeat(2, 1fr); }
        .cform .cf-actions { flex-direction: column-reverse; }
        .cform .cf-actions .btn { width: 100%; }
        /* 共住人已改為表格（RWD 規則在 720 斷點那段），這裡不再需要卡片版的調整 */
        .cform .cr-total { justify-content: flex-start; flex-direction: column; gap: 6px; }
        /* 句中夾帶的小輸入框在窄螢幕獨立成一行，才不會把句子撐爆 */
        .cform .cf-inline-num { margin: 4px 6px; }
    }
    @media (max-width: 400px) {
        .cform .cf-summary { grid-template-columns: 1fr; }
        .cform .cf-tbl tbody td { flex-direction: column; align-items: stretch; gap: 5px; }
        .cform .cf-tbl tbody td::before { flex: none; }
    }
    @media (prefers-reduced-motion: reduce) { .cform * { transition: none !important; } }

    /* ── 三份表單切換（比照正式頁：同一頁、選了委託形式才顯示對應表單）───────
       ⚠ .cf-layout 是 display:grid，grid 會蓋掉 hidden 屬性的預設 display:none，
         所以要明確用 [hidden]{display:none!important}，否則三份表單會同時出現。 */
    .cform .form-body[hidden] { display: none !important; }

    /* 轉租：未選包租合約前的鎖定狀態 */
    .cform .s-lockmsg { margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
        color: var(--amber); background: var(--amber-bg); border: 1px solid #f2ddb0; line-height: 1.6; }
    .cform .s-locked { position: relative; opacity: .45; pointer-events: none; filter: grayscale(.35); transition: opacity .2s, filter .2s; }
    .cform .s-locked::after { content: "請先選擇包租合約"; position: absolute; inset: 0; display: grid; place-items: start center;
        padding-top: 40px; font-size: 15px; font-weight: 800; color: var(--brand); pointer-events: none; }
    /* 「依包租帶入」的欄位標記：與 .req 同一套外框膠囊，換成品牌藍 */
    .cform .s-from { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px;
        background: transparent; color: var(--brand); font-size: .72rem; font-weight: 700; line-height: 1.7; white-space: nowrap; }
    /* 住宅現況那句「租期至 [日期] 日屆滿」的行內日期框 */
    .cform .cf-inline-date { width: 170px !important; height: 36px !important; display: inline-block !important;
        margin: 0 6px; padding: 0 8px !important; vertical-align: middle; }

/* ── 與正式頁既有標記的相容規則 ──────────────────────────────
   正式表單的欄位容器是 .input-group-static（JS 依賴），視同樣式稿的 .fld。 */
.cform .input-group.input-group-static,
.cform .input-group-static {
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
    margin-top: 0 !important; margin-bottom: 0 !important;
}
.cform .input-group-static > label {
    font-size: 13px; font-weight: 700; color: var(--label);
    display: flex; align-items: center; gap: 5px; margin: 0;
    position: static !important; transform: none !important;   /* Material Dashboard 會絕對定位 label */
}
/* 必填標記沿用正式頁的 .text-danger，外觀與樣式稿的 .req 一致 */
.cform label .text-danger,
.cform td > .text-danger {
    display: inline-block; vertical-align: middle; margin-left: 6px; padding: 0 5px;
    border: 1px solid currentColor; border-radius: 4px; background: transparent;
    color: #C0392B !important; font-size: .72rem; font-weight: 700; line-height: 1.7; white-space: nowrap;
}
.cform small.form-text { font-size: 11.5px; color: var(--muted) !important; margin: 0; line-height: 1.55; }
.cform small.form-text.text-danger { color: var(--red) !important; }
.cform small.form-text.text-success { color: var(--muted) !important; }

/* ── select2（房東／房客／物件／包租合約／業務…都是 select2）────────────────
   ⚠ 合約頁的 select2 全部用 theme: 'bootstrap-5'，class 是
     .select2-container--bootstrap-5，不是 --default。先前只寫 --default
     完全沒命中，欄位才會維持 select2 舊外觀。
   規格與數值直接沿用房東頁 LandlordData.cshtml 已驗證的那一份（選擇器換成 .cform）：
   高 42／圓角 9／邊框 var(--field-line)／padding 0 12／字級 14／
   focus 為 brand 邊框 + 3px brand-soft 光環，箭頭用背景 SVG。
   兩個主題都留著，之後若有人改 theme 也不會破版。 */
.cform .select2-container { width: 100% !important; }

.cform .select2-container--bootstrap-5 .select2-selection--single,
.cform .select2-container--default .select2-selection--single {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 32px 0 12px !important;
    border: 1px solid var(--field-line, #dfe4ec) !important;
    border-radius: 9px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a93a2' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    box-shadow: none !important;
    color: var(--ink, #1f2733) !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.cform .select2-container--bootstrap-5 .select2-selection--single:hover,
.cform .select2-container--default .select2-selection--single:hover { border-color: #c2ccdb !important; }
/* focus 與展開中都要跟原生輸入框一致 */
.cform .select2-container--bootstrap-5.select2-container--focus .select2-selection--single,
.cform .select2-container--bootstrap-5.select2-container--open .select2-selection--single,
.cform .select2-container--default.select2-container--focus .select2-selection--single,
.cform .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand, #1E5AC8) !important;
    box-shadow: 0 0 0 3px var(--brand-soft, #eaf0fb) !important;
}
.cform .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.cform .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important; line-height: 1.4 !important;
    color: var(--ink, #1f2733) !important; font-size: 14px !important;
}
.cform .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
.cform .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9aa3b1 !important;
}
/* select2 自帶的箭頭元素隱藏，統一用上面的背景 SVG */
.cform .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow,
.cform .select2-container--default .select2-selection--single .select2-selection__arrow { display: none !important; }
/* 清除鈕移到箭頭左側，避免疊在一起 */
.cform .select2-container--bootstrap-5 .select2-selection__clear,
.cform .select2-container--default .select2-selection__clear {
    position: absolute !important; top: 50% !important; right: 30px !important;
    transform: translateY(-50%) !important; margin: 0 !important;
    color: #8a93a2 !important; font-size: 15px !important; line-height: 1 !important; cursor: pointer !important;
}
.cform .select2-container--bootstrap-5 .select2-selection__clear:hover,
.cform .select2-container--default .select2-selection__clear:hover { color: var(--red, #d24141) !important; }
/* 複選（目前合約頁沒用到，先備著，免得日後有人開了又破版） */
.cform .select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: 42px !important; padding: 4px 8px !important;
    border: 1px solid var(--field-line, #dfe4ec) !important; border-radius: 9px !important;
    background-color: #fff !important; box-shadow: none !important; font-size: 14px !important;
}

/* 下拉面板：select2 會把它掛在 <body> 底下，不在 .cform 之內，所以不能加 .cform 前綴。
   這份 CSS 只有契約頁會載入，不會影響其他頁。 */
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--default .select2-dropdown {
    border: 1px solid var(--field-line, #dfe4ec) !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 30px rgba(20, 30, 50, .12) !important;
    font-size: 14px !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #1E5AC8 !important; color: #fff !important;
}

/* 檔案清單（handleFileList 寫進 #XxxFileList，正式頁用 inline style，這裡覆蓋外觀） */
.cform .file-list {
    margin-top: 8px !important; background: transparent !important; padding: 0 !important;
    border-radius: 8px; min-height: 0 !important;
}

/* 頁尾按鈕列：正式頁是 .d-flex.justify-content-end，套上卡片外觀 */
.cform .d-flex.justify-content-end {
    background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
    padding: 14px 18px; margin-top: 4px; gap: 10px; flex-wrap: wrap;
}
.cform .d-flex.justify-content-end .btn {
    height: 38px; margin: 0 !important; border: 0; border-radius: 10px; padding: 0 18px;
    font-size: 13.5px !important; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-shadow: none !important;
}

/* 契約書表單文件：正式頁用 Bootstrap collapse（.section-title.collapsible），保留行為只換皮 */
.cform .card-body > .section-title.collapsible {
    background: transparent !important; color: var(--ink) !important; border-radius: 0;
    font-size: 16px; font-weight: 800; margin: 0; padding: 0 0 12px;
    border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px;
}
.cform .card-body > .section-title.collapsible .collapse-chevron {
    margin-left: auto; color: var(--brand); width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--brand-soft); transition: transform .18s ease;
}
.cform .card-body > .section-title.collapsible.collapsed .collapse-chevron { transform: rotate(-90deg); }


/* 編輯／審核頁的外層 Bootstrap .card 底下還掛著「審核記錄」等其他區塊，不方便整個拆掉，
   所以改成透明外殼 —— 視覺上就只剩各自獨立的 .cf-card，與樣板頁一致，不會有卡中卡。 */
/* ── 區塊間距統一（2026-09-14）：表單卡片、相關資料連結、審核／變更／AI 辨識紀錄之間一律 18px ── */
.cform.cf-records { padding: 0; margin-top: 18px; }   /* 與上方「儲存／返回」動作列之間也留 18px */
.cform.cf-records .cf-card { margin-bottom: 18px; }
.cform.cf-records .cf-card:last-child { margin-bottom: 0; }
.cform.cf-records .cf-card > h3 { cursor: default; }
/* 相關資料連結（明細檢視）：由 bootstrap card 改成 .cf-card 外觀，按鈕改頁首同款淡藍 chip */
.cform #relatedDataLinksSection { margin: 0 0 18px !important; }
.cform #relatedDataLinksSection .card { background: var(--card) !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--shadow) !important; }
.cform #relatedDataLinksSection .card-body { padding: 14px 24px !important; gap: 8px; }
.cform #relatedDataLinks .btn, .cform #coResidentLinksContainer .btn {
    display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important;
    font-size: 12.5px !important; font-weight: 700 !important; line-height: 1; letter-spacing: 0 !important; text-transform: none !important;
    color: var(--brand) !important; background: var(--brand-soft) !important; border: 1px solid #cfe0fb !important; border-radius: 9px !important;
    padding: 7px 12px !important; min-width: 0 !important; height: auto !important; box-shadow: none !important; transform: none !important; }
.cform #relatedDataLinks .btn:hover, .cform #coResidentLinksContainer .btn:hover { background: #dfeafc !important; border-color: #b9d2f7 !important; color: var(--brand-hover) !important; }
.cform #relatedDataLinks .btn .btn-inner--icon { display: inline-flex; line-height: 1; }
.cform #relatedDataLinks .btn .material-symbols-rounded { font-size: 16px !important; color: inherit !important; }
.cform #coResidentLinksContainer { gap: 8px; }
/* jsGrid（審核／變更／AI 辨識紀錄）：與房客頁 taud 的 jsGrid 規格相同——12px 圓角外框、#f7f9fc 表頭、只有底線 */
.cform.cf-records .jsgrid { font-size: 13.5px !important; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; height: auto !important; }
.cform.cf-records .jsgrid-grid-header, .cform.cf-records .jsgrid-grid-body { overflow: visible !important; border: 0 !important; background: transparent !important; height: auto !important; }
.cform.cf-records .jsgrid-header-row > .jsgrid-header-cell { background: #f7f9fc !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
    color: var(--ink-soft) !important; font-size: 12px !important; font-weight: 800 !important; padding: 10px 12px !important; text-align: left !important; white-space: nowrap; }
.cform.cf-records .jsgrid-cell { border: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 10px 12px !important; vertical-align: middle; font-size: 13.5px !important; }
.cform.cf-records .jsgrid-row > .jsgrid-cell, .cform.cf-records .jsgrid-alt-row > .jsgrid-cell { background: #fff !important; }
.cform.cf-records .jsgrid-grid-body .jsgrid-row:last-child > .jsgrid-cell, .cform.cf-records .jsgrid-grid-body .jsgrid-alt-row:last-child > .jsgrid-cell { border-bottom: 0 !important; }
.cform.cf-records .jsgrid-nodata-row .jsgrid-cell { color: var(--muted) !important; padding: 16px 0 !important; text-align: center; }
.cform.cf-records .jsgrid-header-sortable:hover { background: #eef2f8 !important; }
.cform.cf-records .jsgrid-header-row .jsgrid-header-sort { background: var(--brand-soft) !important; }
/* 排序箭頭：同 taud-form.css —— 拿掉 jsgrid-theme 左邊的綠色三角形，改欄名右邊的品牌色箭頭（2026-10-06） */
.cform.cf-records .jsgrid-header-sort:before { content: none !important; display: none !important; }
.cform.cf-records .jsgrid-header-sort:after { font-family: 'Material Symbols Rounded'; font-size: 15px; font-weight: 600; line-height: 1;
    color: var(--brand); margin-left: 4px; vertical-align: -3px; }
.cform.cf-records .jsgrid-header-sort-asc:after { content: "arrow_upward"; }
.cform.cf-records .jsgrid-header-sort-desc:after { content: "arrow_downward"; }
.cform.cf-records .jsgrid-pager { padding: 12px 4px 2px !important; text-align: right; color: var(--ink-soft); font-size: 13px; }
.cform.cf-records .jsgrid-pager * { font-size: 13px; }

.card.cf-shell { background: transparent !important; box-shadow: none !important; border: 0 !important;
    /* 與頂部 navbar 對齊（2026-09-14）：房客頁內容是 navbar 下方 10px、左右與 navbar 同寬（256～1584）。
       .cf-shell 原本 padding 24 讓頁首卡比 navbar 各縮 20px、且離 navbar 32px；改成上 2 左右 4 下 24 剛好對齊。 */
    padding: 2px 4px 24px !important; }
/* 媒合新增頁沒有 .cf-shell（外層是 .row > .col-12），用同樣的內距對齊 navbar */
.col-12.cf-shell-col { padding: 2px 16px 0 !important; }
.card.cf-shell > .card-body { padding-left: 0 !important; padding-right: 0 !important; }