/* ============================================
   Grid 共用設定：唯讀 / lookup 欄位底色
   只要套用資料辭典渲染的 Grid（cell-view / cell-edit /
   readonly-cell / lookup-cell 等共用 class），都會自動套用
   這份規則，維持全站一致視覺，不用每個範本各自重複定義。
   來源：由 _MultiTabDetail.cshtml 內嵌樣式抽出統一管理。

   注意：_TableSingleGrid / masterMultiDetailTemplate / masterDetailTemplate /
   _MasterDetailTemplate 這幾套引擎，欄位顏色實際是畫在 <td> 本身（input 故意設
   transparent，讓 td 底色透出來），不是畫在這裡的 .cell-edit/.cell-view 上，
   所以沒辦法直接刪掉它們各自的規則改吃這份檔案的 class 選擇器。
   但顏色「數值」已經抽成下面這兩個 CSS 變數，那些檔案的規則都改成引用
   var(--grid-readonly-edit-bg) / var(--grid-lookup-bg)，以後要調色只要改這裡
   這兩個變數的值，全部範本會一起變，不用每支各自改 hex 值。 */
:root {
    /* 唯讀欄位：灰底（辭典勾選唯讀時一律灰底） */
    --grid-readonly-edit-bg: #D3D3D3;
    /* 可下拉/lookup 欄位：皮膚色（原淺黃 #f8f885 會與辭典必要欄位黃底相近，改膚色以區隔） */
    --grid-lookup-bg: #FCE3C6;
    /* 游標選取列高亮：亮青（全站統一，取代各檔散落的 #d1e7ff / #cfe8ff / #d0e4ff 淺藍） */
    --grid-row-selected-bg: #98f0f8;
    /* 標準黃：全站唯一的黃色（異動格/新增列/警示/active 按鈕/可編輯欄提示等共用）；
       下拉欄位不走這個（下拉用上面的皮膚色 --grid-lookup-bg） */
    --grid-yellow-bg: #FFF3CD;

    /* ── Grid 儲存格勾選框：全站統一，基準＝Paper 系列（paper-checkbox.css）的畫法 ──
       格子 16px、自繪（appearance:none）、勾勾固定 10x10，刻意與單頭
       （_DetailHeaderSection 的 .erp-header-form）同尺寸；disabled 不灰化，
       因為原生 disabled 會被畫成灰色，accent-color 對 disabled 無效。

       跟上面的顏色變數同一個道理：各範本的勾選框規則散在
       paper-checkbox.css / _MasterDetailTemplate / masterMultiDetailTemplate.css /
       MultiGrid.cshtml / singleGrid.css / _Paper3LSubDetail1 六處，且全都用 !important，
       宣告順序又都在這支之後，全域規則蓋不過它們。所以規則本身留在原處，
       只把「數值」改成引用這裡的變數 —— 以後要調勾選框外觀只改這一段。 */
    --grid-chk-size: 16px;
    --grid-chk-bg: var(--ui-surface);
    --grid-chk-border: #6c7a90;
    --grid-chk-radius: 2px;
    --grid-chk-checked-bg: #0d6efc;
    --grid-chk-mark-size: 10px;
    /* 勾勾路徑起點刻意是 6.5 不是 6.3：stroke-width 2 + round cap 會讓實際墨跡
       上下各外擴 1 單位，原本 6.3 起筆時墨跡 y 範圍是 2.1~9.5（中心 5.8），
       在 12 單位的 viewBox 裡偏上 0.2 → 渲染成 10px 時整個勾往上偏約 0.13px。
       下移 0.2 後墨跡 y 為 2.3~9.7，中心正好 6.0。水平本來就置中（墨跡 1.2~10.8）。 */
    --grid-chk-mark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.2 6.5l2.2 2.2 5.4-5.4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* .checkbox-dark：masterDetailTemplate.js / masterMultiDetailTemplate.js / MultiGrid /
   fieldDictModal 產生的勾選框共用這個 class，標準畫法統一定義在這裡，各頁不再各自寫一份。 */
.checkbox-dark {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-sizing: border-box;
    width: var(--grid-chk-size) !important;
    height: var(--grid-chk-size) !important;
    background-color: var(--grid-chk-bg) !important;
    border: 1px solid var(--grid-chk-border) !important;
    border-radius: var(--grid-chk-radius) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.checkbox-dark:checked,
.checkbox-dark:disabled:checked {
    background-color: var(--grid-chk-color, var(--grid-chk-checked-bg)) !important;
    border-color: var(--grid-chk-color, var(--grid-chk-checked-bg)) !important;
    background-image: var(--grid-chk-mark) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: var(--grid-chk-mark-size) var(--grid-chk-mark-size) !important;
}
/* 瀏覽模式：原生 disabled 會被畫成灰色，這裡一律不灰化（與 Paper 一致） */
.checkbox-dark:disabled {
    opacity: 1 !important;
    filter: none !important;
    cursor: default;
}

.erp-table th,
.erp-table td {
    border-color: #aeb8c5 !important;
}

/* lookup 欄位：皮膚色
   注意：各範本的 .cell-edit 常有自己的基礎樣式（例如 _MultiTabDetail.cshtml
   的 .erp-table .cell-edit{background:transparent!important}，特異度 (0,3,0)），
   這裡選擇器特異度刻意補到 (0,3,1)，確保一定贏過那類基礎樣式，
   不然顏色會被蓋掉、卻看起來像是「全域 CSS 沒生效」。
   要宣告在唯讀規則之前，兩者特異度刻意對齊，平手時靠宣告順序決勝，
   讓「唯讀+lookup」組合格優先呈現唯讀灰底。 */
.erp-table td.lookup-cell .cell-view,
.erp-table td.lookup-cell .cell-edit {
    background: var(--grid-lookup-bg) !important;
}
/* 純展示用清單（如 _TableListPartial）：td 本身就是內容容器，沒有 .cell-view/.cell-edit
   子元素，直接對 td 上色 */
.erp-table td.lookup-cell {
    background: var(--grid-lookup-bg) !important;
}

/* 唯讀格：灰底，不分瀏覽/編輯模式恆常顯示（特異度跟上面黃底規則對齊，皆為 (0,3,1)） */
.erp-table td .cell-view.readonly-cell,
.erp-table td .cell-edit.readonly-cell,
.erp-table .readonly-cell {
    background: var(--grid-readonly-edit-bg) !important;
    color: #6c757d !important;
    cursor: default;
}
.erp-table td .cell-edit.readonly-cell:focus {
    outline: none;
    background: var(--grid-readonly-edit-bg) !important;
}

/* 選取列高亮要壓過所有底色（lookup 皮膚色 / 唯讀灰底 / 一般白底）：
   那些底色是畫在 td 內層的 .cell-view / .cell-edit 上、蓋在 td 之上，
   所以選取列若只上色在 td，內層仍會露出膚色/灰色。這裡連內層一起蓋，
   但 checkbox 本體保留自己的 checked/unchecked 樣式，避免勾選狀態被亮青背景蓋掉。
   特異度刻意做到 (0,3,3)+ 以贏過 lookup / readonly 的 (0,3,1)。
   涵蓋三種選取列 class 命名：row-selected / selected / selected-row。
   例外：cell-shortage-y 等語意警示色有自己更高特異度規則會保留（缺料紅不被壓）。 */
.erp-table tbody tr.row-selected td,
.erp-table tbody tr.row-selected td .cell-view,
.erp-table tbody tr.row-selected td .cell-edit:not(.form-check-input):not([type="checkbox"]),
.erp-table tbody tr.selected td,
.erp-table tbody tr.selected td .cell-view,
.erp-table tbody tr.selected td .cell-edit:not(.form-check-input):not([type="checkbox"]),
.erp-table tbody tr.selected-row td,
.erp-table tbody tr.selected-row td .cell-view,
.erp-table tbody tr.selected-row td .cell-edit:not(.form-check-input):not([type="checkbox"]) {
    background: var(--grid-row-selected-bg, #86E3E0) !important;
}