.text-grey {
    color: #b5b5b5;
}

/* ========================================
   客戶名稱「帶入上一份資料」按鈕
   樣式比照 skills laravel-crud 數字欄位的 input-group-btn 樣式
   （.btn-number 樣式定義於 base.css：灰底 + 淡灰外框）
   ======================================== */

/* input-group 外層維持 input-max 寬度上限；autocomplete 懸浮清單定位父層需為 flex 子項 */
.form-group .input-group.input-max .autocomplete-wrapper {
    /* flex-grow-1 已於 blade class 設定，這裡保險再指定 min-width:0 避免長內容把按鈕擠出群組 */
    min-width: 0;
}

/* 客戶名稱輸入框與右側按鈕的邊角：input-group 內 text input 右側取消圓角、按鈕左側取消圓角，避免雙圓角造成斷裂視覺 */
#customer_name {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#btn-fill-last-customer {
    /* 高度固定 38px 與 .form-control 對齊；icon-history 為單一圖示按鈕，給予左右 padding 讓觸擊區可辨識 */
    height: 38px;
    padding: 0.375rem 0.75rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* 與左側 input 共用邊線，避免雙重框線導致 2px 粗邊 */
    border-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* 與 .btn-number 灰底一致的 focus 外觀，維持與其他欄位統一質感 */
#btn-fill-last-customer:focus {
    box-shadow: none;
    outline: 0;
}

/* ========================================
   維修案件表單 radio 樣式
   將 Bootstrap 預設的 .form-check-input 圓圈邊線與 .form-control
   的 border-color 對齊（base.css 中 .form-control: #d2d6de），
   讓 radio 與一般輸入框視覺一致
   ======================================== */
#form .form-check-input[type="radio"] {
    border-color: #d2d6de;
}
/* 勾選後仍維持 Bootstrap 主色填色，但外框色統一 */
#form .form-check-input[type="radio"]:checked {
    border-color: #d2d6de;
}
/* focus 陰影僅保留 box-shadow，避免外框色在 focus 時被 Bootstrap 改成藍色 */
#form .form-check-input[type="radio"]:focus {
    border-color: #d2d6de;
}

/* ========================================
   維修時間、機型零件等列式區塊底色與間距
   以淺灰底與卡片背景做出層次，便於快速辨識每一列
   額外拉大下方間距，避免與下一列黏在一起（Bootstrap mb-2 過窄）
   ======================================== */
.item-row,
.time-row {
    background-color: #f3f3f3;
    margin-bottom: 1rem !important;
}

/* ========================================
   維修記錄表 樣式（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;
}
/* 左側 Logo 欄：固定寬度避免被中間文字壓縮，靠右貼齊中間公司資訊 */
.rf-header-logo {
    width: 120px;
    text-align: right;
    padding: 10px;
}
.rf-logo-img {
    max-width: 100px;
    max-height: 80px;
    display: inline-block;
}
/* 中間公司資訊欄：依紙本維修單的中央對齊版型呈現 */
.rf-header-company {
    text-align: center;
    padding: 10px 6px 6px;
    line-height: 1.5;
}
.rf-company-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
}
.rf-company-addr {
    font-size: 13px;
    margin-top: 2px;
}
.rf-company-tel {
    font-size: 13px;
}
/* 「維修記錄表」副標題：保留原本寬字距樣式以維持紙本識別度 */
.rf-header-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 12px;
    padding: 6px 0 4px;
}
.rf-header-info {
    width: 180px;
    padding: 10px 14px;
    text-align: right;
    white-space: nowrap;
    font-size: 14px;
    vertical-align: top !important;
}
.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;
}
/* 可點擊的縮圖連結，提供 hover 微亮與游標提示，顯示點擊後有 Modal 可放大預覽 */
.rf-photo-link {
    display: inline-block;
    cursor: zoom-in;
    transition: opacity .15s ease;
}
.rf-photo-link:hover {
    opacity: .8;
}
/* 預覽 Modal 內的大圖：限制高度避免超過視窗造成捲軸 */
#photoPreviewModal .card-body img {
    max-height: 75vh;
}

/* 影片上傳區塊：對齊 base.css 中 image_box / file_box 規則，讓「選擇影片」按鈕與右側說明文字維持同一行
   未針對 video_box 套上 base.css 的 flex-wrap:nowrap 時，按鈕會被 .form-group.row 撐成滿版 */
/* base.css 第 1073 行的 .uploadImageAry / .uploadImage / .uploadFileAry / .uploadFilePath 統一給了 width:auto + inline-block，
   沒涵蓋 .uploadVideoAry，導致影片按鈕在 flex 容器內被撐滿，於此補上對應規則 */
.uploadVideoAry {
    width: auto;
    display: inline-block !important;
}
/* base.css 第 437 行的 .image-box:hover .img-del-btn { display:block } 只涵蓋 .image-box，
   影片區塊 wrapper 為 .video-box，需自行補上對應 hover 規則，讓滑鼠移過時右上角紅色刪除按鈕浮出 */
.video-box:hover .img-del-btn {
    display: block;
}
/* base.css 第 448 行的 .img-border img { max-width:100%; width:auto } 只規範圖片，沒有涵蓋 <video>，
   原生 <video> 預設會以影片解析度寬度渲染，於高解析度影片時會超出 col-md-4 容器並破壞版面；
   此處將 .thumb-video 限制為不超過容器寬度，並以 height:auto 等比例縮放保持比例 */
.video-box .thumb-video {
    max-width: 100%;
    width: auto;
    height: auto;
}
.video_box .form-group.row {
    flex-wrap: nowrap;
    align-items: center;
}
.video_box .form-group.row .text-secondary {
    width: auto;
    white-space: nowrap;
}
/* 手機版允許換行，避免說明文字超出容器寬度，與 base.css 對 image_box 的 RWD 處理一致 */
@media only screen and (max-width: 767px) {
    .video_box .form-group.row {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .video_box .form-group.row .text-secondary {
        white-space: normal;
        word-break: break-word;
    }
}

/* 影片區域：使用 inline-block 與固定最大寬度，多支影片時可橫向並列；網頁版直接以原生 <video> 播放 */
.rf-videos {
    padding: 6px 0;
}
.rf-video-player {
    display: inline-block;
    max-width: 320px;
    max-height: 240px;
    margin: 4px 6px 4px 0;
    background-color: #000;
    vertical-align: top;
}

/* 客戶簽收 */
/* 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) {

    /* 表頭改為垂直排列：Logo、公司資訊、No./日期 三段堆疊 */
    .rf-header-inner,
    .rf-header-inner tbody,
    .rf-header-inner tr,
    .rf-header-inner td {
        display: block;
        width: 100%;
    }
    .rf-header-logo {
        width: 100%;
        padding: 8px 0 0;
        text-align: center; /* 手機版改置中：橫向空間有限，靠右會貼邊不易閱讀 */
    }
    .rf-logo-img {
        max-height: 60px;
    }
    .rf-header-company {
        padding: 6px 6px 4px;
    }
    .rf-company-name {
        font-size: 17px;
    }
    .rf-company-addr,
    .rf-company-tel {
        font-size: 12px;
    }
    .rf-header-title {
        font-size: 18px;
        letter-spacing: 8px;
        padding: 6px 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-video-player {
        display: block;
        max-width: 100%;
        margin: 4px 0;
    }

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

    /* 手機版 td 改為 display:block，固定 height 會讓內容溢出壓到下一列，改為自動並保留最小高度 */
    .rf-signature-cell {
        height: auto;
        min-height: 140px;
    }
}

/* 手機版 navbar 右上角使用者下拉選單，離右邊留一點間距 */
@media (max-width: 767px) {
    .topbar .navbar-right .dropdown-menu-end {
        margin-right: 8px;
    }
}

@media (min-width: 767px) {
    .personnel-value {
        width: 25%;
    }
}