@charset "UTF-8";
/* ==================================================================
   發票模組共用版面樣式(2026-07-08)
   ------------------------------------------------------------------
   所有選擇器都以 .inv-wrap 開頭,不會影響 ERP 其他模組。
   文字色一律 inherit、不強制卡片底色 -> 自動跟著站上的深色/淺色主題走。
   要調整發票所有頁面的外觀,改這一支就好。
   由 Views\Shared\_LayoutRWD2.cshtml 的 <link> 載入。
   ================================================================== */

.inv-wrap { max-width: 1080px; margin: 0 auto; }

/* ---- 頁面標題 ---- */
.inv-wrap .inv-page-title,
h2.inv-page-title { font-size: 26px; font-weight: 700; color: #23527c; margin: 6px 0 14px; }

/* ---- 分區卡片 ---- */
.inv-wrap .inv-section { border: 1px solid #d5dbe3; border-radius: 8px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.inv-wrap .inv-section-head { font-size: 19px; font-weight: 700; color: #fff; background: #2c6da3; padding: 9px 16px; border-radius: 8px 8px 0 0; }
.inv-wrap .inv-body { padding: 14px 18px 6px; }

/* 次要色調的區塊(退審、刪除等需要警示感的頁面) */
.inv-wrap .inv-section.danger .inv-section-head { background: #a93226; }
.inv-wrap .inv-section.warn   .inv-section-head { background: #b9770e; }

/* ---- 欄位格線 ---- */
.inv-wrap .inv-grid { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.inv-wrap .inv-field { flex: 1 1 300px; min-width: 260px; margin-bottom: 14px; }
.inv-wrap .inv-field.wide { flex: 1 1 100%; }
.inv-wrap .inv-field > label { display: block; font-size: 16px; font-weight: 600; color: inherit; margin-bottom: 5px; }
.inv-wrap .inv-field > input,
.inv-wrap .inv-field > select,
.inv-wrap .inv-field > textarea { width: 100%; font-size: 16px; padding: 7px 10px; border: 1px solid #b8c0cc; border-radius: 5px; box-sizing: border-box; }

/* 唯讀顯示值(簽核頁常用:不給改的欄位) */
.inv-wrap .inv-value { font-size: 16px; padding: 7px 2px; min-height: 34px; word-break: break-all; }
.inv-wrap .inv-value.strong { font-weight: 700; font-size: 18px; }

/* ---- 併排的小元件(幣別+金額+格式化框) ---- */
.inv-wrap .inv-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inv-wrap .inv-inline input,
.inv-wrap .inv-inline select { font-size: 16px; padding: 7px 10px; border: 1px solid #b8c0cc; border-radius: 5px; }

/* ---- 篩選用小輸入框 ---- */
.inv-wrap .inv-search { margin-top: 6px; width: 100%; font-size: 15px; padding: 6px 9px; border: 1px dashed #9aa6b5; border-radius: 5px; box-sizing: border-box; }

/* ---- 開關 / 勾選列 ---- */
.inv-wrap .inv-toggle-row { display: flex; align-items: center; gap: 12px; }
.inv-wrap .inv-toggle-row > label:first-child { font-size: 16px; font-weight: 600; color: inherit; }
.inv-wrap .inv-removefile { display: flex; align-items: center; gap: 12px; font-size: 16px; color: inherit; }

/* ---- 提醒與註解 ---- */
.inv-wrap .inv-notice { color: #c0392b; font-weight: 700; font-size: 18px; line-height: 1.5; text-align: center; margin: 8px 0; }
.inv-wrap .inv-confirm { display: block; text-align: center; font-size: 14px; color: inherit; opacity: .85; margin: 4px 0 12px; }
.inv-wrap .inv-hint { font-size: 15px; opacity: .8; margin-top: 4px; }

/* ---- 按鈕列 ---- */
.inv-wrap .inv-actions { text-align: center; padding: 6px 0 14px; }
.inv-wrap .inv-actions .btn,
.inv-wrap .inv-actions > button,
.inv-wrap .inv-actions > input[type="submit"] { font-size: 17px; padding: 8px 26px; margin: 0 8px; }

/* ---- 驗證訊息 ---- */
.inv-wrap .field-validation-error { display: block; margin-top: 4px; font-size: 14px; }

/* ---- 頁面下方的清單(紀錄 / 附檔) ---- */
.inv-lists { max-width: 1080px; margin: 0 auto; font-size: 15px; }
.inv-lists .inv-lists-title { font-size: 18px; font-weight: 700; color: inherit; margin: 16px 0 6px; }

/* ---- 寬版頁面(欄位很多的預覽表格,不要被 1080px 夾住) ---- */
.inv-wrap.wide { max-width: 100%; }

/* ---- 預覽表格(批次匯入等,欄位多 -> 橫向捲動) ---- */
.inv-wrap .inv-table-scroll { overflow-x: auto; padding-bottom: 4px; }
.inv-wrap table.inv-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.inv-wrap table.inv-table td,
.inv-wrap table.inv-table th { border: 1px solid #c4ced8; padding: 7px 9px; white-space: nowrap; vertical-align: middle; }
.inv-wrap table.inv-table tr:first-child td { background: #2c6da3; color: #fff; font-weight: 700; white-space: nowrap; }
.inv-wrap table.inv-table input[type="file"] { font-size: 14px; }

/* ==================================================================
   清單頁:WebGrid 表格
   用法:grid.GetHtml(tableStyle: "table table-bordered inv-webgrid", ...)
        並把整個 grid 包在 .inv-table-scroll 裡(欄位多時可橫向捲動)。
   保留原本的 Bootstrap table/table-bordered,只在上面疊表頭配色與 hover。
   ================================================================== */
.inv-wrap .inv-webgrid { width: 100%; border-collapse: collapse; font-size: 15px; }
/* ★ 版面的深色主題有 `body.dark-mode .table thead th { background-color:#2c313a !important }`(特異性 0,2,3)。
   兩邊都 !important 時,特異性打平就會「後出現的贏」,而主題的 <style> 在我們的 <link> 之後。
   所以這裡前面補一個 `body`(特異性 0,2,4)贏過它,不必依賴 <link> 的擺放順序。 */
body .inv-wrap table.inv-webgrid th,
body .inv-wrap table.inv-webgrid thead th { background-color: #2c6da3 !important; color: #fff !important; font-weight: 700; padding: 9px 10px; white-space: nowrap; }
body .inv-wrap table.inv-webgrid thead th a { color: #fff !important; text-decoration: none; }
body .inv-wrap table.inv-webgrid thead th a:hover { text-decoration: underline; }
.inv-wrap .inv-webgrid td { padding: 8px 10px; border: 1px solid #c4ced8; vertical-align: middle; }
.inv-wrap .inv-webgrid tbody tr:hover { background: rgba(44,109,163,.10); }
.inv-wrap .inv-webgrid tfoot td { text-align: center; padding: 11px; font-size: 15px; }
.inv-wrap .inv-webgrid tfoot a { margin: 0 7px; }

/* 清單上方的查詢條件卡片 */
.inv-wrap .inv-filter .inv-body { padding-bottom: 2px; }
.inv-wrap .inv-filter .inv-field { margin-bottom: 12px; }

/* 清單筆數 / 說明列 */
.inv-wrap .inv-listinfo { font-size: 15px; opacity: .85; margin: 2px 0 8px 2px; }

/* 清單下方的合計列(取代原本又大又突兀的 <h1>) */
.inv-wrap .inv-total { text-align: center; font-size: 20px; font-weight: 700; line-height: 1.6;
                       padding: 12px 16px; margin: 4px 0 16px; border: 2px solid #1e8449; border-radius: 8px; }
.inv-wrap .inv-total .num { color: #1e8449; font-size: 24px; }

/* ---- 金額欄靠右(WebGrid 用) ---- */
.MyTxtRigh { text-align: right !important; }