.text-grey {
    color: #b5b5b5;
}

/* ========================================
   維修記錄表 樣式（table 版面，相容網頁與 mPDF）
   ======================================== */

/* 外框容器 */
.repair-form {
    font-size: 14px;
}

/* 主表格：全寬、固定版面、雙邊框避免破版 */
.rf-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 2px solid #333;
}
.rf-table > tbody > tr > td,
.rf-table > tr > td {
    border: 1px solid #333;
    padding: 6px 10px;
    vertical-align: middle;
    word-break: break-word;
}

/* colgroup 寬度：label 固定、value 平分 */
.rf-col-label {
    width: 120px;
}
.rf-col-value {
    width: auto;
}

/* 標籤欄（灰底、置中、粗體） */
.rf-label {
    background-color: #f8f9fa;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

/* 表頭列（維修記錄表標題 + 編號/日期） */
.rf-header-td {
    padding: 0 !important;
    border-bottom: 1px solid #333 !important;
}
/* 以內層 table 排出左標題、右資訊的兩欄版面 */
.rf-header-inner {
    width: 100%;
    border-collapse: collapse;
}
.rf-header-inner td {
    border: none;
    vertical-align: middle;
}
.rf-header-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 12px;
    padding: 14px 0;
}
.rf-header-info {
    width: 180px;
    padding: 10px 14px;
    text-align: right;
    white-space: nowrap;
    font-size: 14px;
}
.rf-header-info .rf-no {
    font-weight: 600;
}

/* 內嵌子表格的容器 td 去掉左右 padding，讓子表格緊貼邊框 */
.rf-nested-wrap {
    padding: 0 !important;
}

/* 文字區域（問題描述、處理狀況） */
/* td 的 min-height 在多數瀏覽器不生效，改以 height 作為最小高度撐開 */
.rf-text-area {
    height: 140px;
    vertical-align: top !important;
    white-space: normal;
    word-break: break-word;
}

/* 維修時間子表格 */
.rf-time-table {
    width: 100%;
    border-collapse: collapse;
}
.rf-time-table th,
.rf-time-table td {
    border: 1px solid #333;
    padding: 4px 8px;
    text-align: center;
}
.rf-time-table th {
    background-color: #f0f0f0;
    font-weight: 600;
    font-size: 13px;
}
/* 移除子表格最外層重複邊框 */
.rf-time-table tr:first-child th,
.rf-time-table tr:first-child td {
    border-top: none;
}
.rf-time-table tr:last-child th,
.rf-time-table tr:last-child td {
    border-bottom: none;
}
.rf-time-table tr th:first-child,
.rf-time-table tr td:first-child {
    border-left: none;
}
.rf-time-table tr th:last-child,
.rf-time-table tr td:last-child {
    border-right: none;
}

/* 費用明細子表格 */
.rf-cost-table {
    width: 100%;
    border-collapse: collapse;
}
.rf-cost-table th,
.rf-cost-table td {
    border: 1px solid #333;
    padding: 4px 8px;
}
.rf-cost-table th {
    background-color: #f0f0f0;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
}
.rf-col-qty { width: 100px; }
.rf-col-price { width: 120px; }
.rf-col-amount { width: 120px; }
/* 移除子表格最外層重複邊框 */
.rf-cost-table tr:first-child th,
.rf-cost-table tr:first-child td {
    border-top: none;
}
.rf-cost-table tr:last-child th,
.rf-cost-table tr:last-child td {
    border-bottom: none;
}
.rf-cost-table tr th:first-child,
.rf-cost-table tr td:first-child {
    border-left: none;
}
.rf-cost-table tr th:last-child,
.rf-cost-table tr td:last-child {
    border-right: none;
}
/* tfoot 上邊線需保留，避免被 last-child 規則移除 */
.rf-cost-table tfoot tr:last-child td {
    border-top: 1px solid #333;
    border-bottom: none;
}

/* text-start / text-end：td 內對齊（避免被 Bootstrap 覆蓋） */
.rf-table .text-start,
.rf-time-table .text-start,
.rf-cost-table .text-start { text-align: left; }
.rf-table .text-end,
.rf-time-table .text-end,
.rf-cost-table .text-end { text-align: right; }

/* 簽核列：外層 td 去 padding，內層另開子表格確保四欄等寬 */
.rf-sign-wrap {
    padding: 0 !important;
}
.rf-sign-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.rf-sign-table > tbody > tr > .rf-sign-cell {
    border: 1px solid #333;
    text-align: center;
    padding: 10px 8px;
    height: 70px;
    vertical-align: top;
}
.rf-sign-label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}
.rf-sign-content {
    min-height: 40px;
    padding-top: 4px;
}
.rf-sign-date {
    color: #6c757d;
}

/* 照片區域 */
.rf-photos {
    padding: 6px 0;
}
.rf-photo-img {
    max-height: 120px;
    margin: 2px 4px;
}

/* 客戶簽收 */
/* td 的 min-height 在多數瀏覽器不生效，改以 height 作為最小高度撐開 */
.rf-signature-cell {
    padding: 10px !important;
    height: 140px;
    vertical-align: top !important;
}
.rf-signature-img {
    max-width: 300px;
    max-height: 120px;
}
.rf-signature-time {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}
/* 未簽名時的空白區塊（PDF 留給紙本手寫） */
.rf-signature-blank {
    min-height: 60px;
}

/* ========================================
   RWD：小於 768px 手機版
   將 rf-table 的 row / cell 改為區塊堆疊
   ======================================== */
@media (max-width: 767.98px) {

    /* 表頭改為垂直排列 */
    .rf-header-inner,
    .rf-header-inner tbody,
    .rf-header-inner tr,
    .rf-header-inner td {
        display: block;
        width: 100%;
    }
    .rf-header-title {
        font-size: 18px;
        letter-spacing: 8px;
        padding: 10px 0 4px;
    }
    .rf-header-info {
        text-align: center;
        padding: 4px 10px 10px;
        width: 100%;
    }

    /* 主表格改為區塊堆疊；子表格（維修時間 / 費用明細 / 簽核 / 表頭）除外 */
    .rf-table,
    .rf-table > tbody,
    .rf-table > tbody > tr,
    .rf-table > tbody > tr > td,
    .rf-table > tr,
    .rf-table > tr > td {
        display: block;
        width: 100%;
    }
    /* 子表格保留原本 table 呈現 */
    .rf-table .rf-time-table,
    .rf-table .rf-cost-table,
    .rf-table .rf-header-inner {
        display: table;
    }
    .rf-table .rf-time-table tbody,
    .rf-table .rf-cost-table tbody,
    .rf-table .rf-cost-table thead,
    .rf-table .rf-cost-table tfoot,
    .rf-table .rf-time-table thead,
    .rf-table .rf-sign-table tbody {
        display: table-row-group;
    }
    .rf-table .rf-time-table tr,
    .rf-table .rf-cost-table tr,
    .rf-table .rf-sign-table tr {
        display: table-row;
    }
    .rf-table .rf-time-table th,
    .rf-table .rf-time-table td,
    .rf-table .rf-cost-table th,
    .rf-table .rf-cost-table td,
    .rf-table .rf-sign-table td {
        display: table-cell;
        width: auto;
    }

    /* 標籤列全寬置左，與內容列上下堆疊 */
    .rf-table > tbody > tr > td.rf-label {
        text-align: left;
        padding: 6px 10px 2px;
        border-right: 1px solid #333;
        border-bottom: none;
        background-color: #f8f9fa;
    }
    .rf-table > tbody > tr > td.rf-value {
        padding: 2px 10px 6px;
        border-top: none;
    }
    .rf-table > tbody > tr > td.rf-nested-wrap {
        padding: 6px !important;
    }

    /* 簽核列包在子表格裡，維持原本 table 呈現但改成兩欄：以兩欄 colspan 的手法
       不易實作，這裡改為保留四等分並允許字級縮小。若需兩欄堆疊再另行調整 */
    .rf-table > tbody > tr.rf-sign-tr > td.rf-sign-wrap {
        padding: 0 !important;
    }
    .rf-sign-table > tbody > tr > .rf-sign-cell {
        padding: 6px 4px;
        font-size: 12px;
    }

    /* 照片縮小 */
    .rf-photo-img {
        max-height: 80px;
    }

    /* 簽名圖片自適應 */
    .rf-signature-img {
        max-width: 100%;
    }
}