/* ── 全域 ── */
:root {
    --header-height: 56px;
    --footer-height: 32px;
    --nav-width: 272px;
    /* 配色與 Logo 照 2026貴燈AI 版：品牌金 #DEBE98（skin.css --primary、logo.svg）、深灰 #212529。
       金色當底色時字用深色（--accent-on）；白底上的字／連結／勾選用加深的金（--accent-text，對比 ≥ 4.5）。 */
    --accent: #DEBE98;
    --accent-dark: #C9A271;
    --accent-active: #B8915F;
    --accent-text: #8C6A3A;
    --accent-text-dark: #6E522B;
    --accent-on: #2C2416;
    --accent-soft: rgba(222, 190, 152, 0.18);
    --accent-soft-strong: rgba(222, 190, 152, 0.36);
    /* 表格目前列／目前格／格線對比（SR-000023：照舊系統要能一眼看出停在哪一列、哪一格） */
    --row-focus-bg: rgba(222, 190, 152, 0.58);
    --row-hover-bg: rgba(222, 190, 152, 0.26);
    --cell-focus-bg: rgba(200, 162, 113, 0.32);
    --grid-line: #c7c1b6;
    --header-bg: #ffffff;
    --header-fg: #212529;
    --nav-bg: #f7f7f7;
    --nav-fg: #444444;
    --border: #e6e5e5;
    --text: #212529;
    --muted: #777777;
    --danger: #dc3545;
    --logo-path: url('../images/logo.svg');
    --logo-small-path: url('../images/logo-small.svg');
}

html, body {
    height: 100%;
    margin: 0;
    background: #fff;
    color: var(--text);
    font-family: Poppins, "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-text-dark); text-decoration: underline; }

/* ── DevExtreme 主題色覆寫（把預設藍色換成品牌金） ── */
.dx-widget {
    font-family: inherit;
    color: var(--text);
}

.dx-button-mode-contained.dx-button-default {
    background-color: var(--accent);
    border-color: var(--accent);
}
.dx-button-mode-contained.dx-button-default .dx-button-text,
.dx-button-mode-contained.dx-button-default .dx-icon {
    color: var(--accent-on);
}
.dx-button-mode-contained.dx-button-default.dx-state-hover,
.dx-button-mode-contained.dx-button-default.dx-state-focused {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}
.dx-button-mode-contained.dx-button-default.dx-state-active {
    background-color: var(--accent-active);
}

.dx-button-mode-outlined.dx-state-hover {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}
.dx-button-mode-outlined.dx-state-hover .dx-icon,
.dx-button-mode-outlined.dx-state-hover .dx-button-text {
    color: var(--accent-text);
}

.dx-checkbox-checked .dx-checkbox-icon,
.dx-checkbox-indeterminate .dx-checkbox-icon {
    color: var(--accent-text);
}
.dx-checkbox.dx-state-focused .dx-checkbox-icon,
.dx-checkbox.dx-state-hover .dx-checkbox-icon {
    border-color: var(--accent);
}

.dx-texteditor.dx-editor-outlined.dx-state-focused,
.dx-texteditor.dx-editor-outlined.dx-state-active {
    border-color: var(--accent);
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > tr > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row.dx-row-lines > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row.dx-row-lines > tr > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines) > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines) > tr > td {
    background-color: var(--row-focus-bg);
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--accent-active);
    border-top-color: var(--accent-active);
}
/* 已修正（SR-000023）：目前列左緣加一條金色標記，取代舊系統 DBGrid 的 ▶ 指標，一眼看出停在哪一列 */
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--accent-active);
}
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-select .dx-checkbox-icon,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-checkbox-checked .dx-checkbox-icon {
    color: var(--accent-text);
    border-color: var(--accent);
}
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-checkbox-icon {
    background-color: #fff;
}
/* 已修正（SR-000023）：目前格（編輯／鍵盤移動時）用加深金色外框＋底色，明顯標出游標所在欄 */
.dx-datagrid .dx-row > td.dx-focused,
.dx-datagrid .dx-row-focused > td.dx-focused,
.dx-datagrid-focus-overlay {
    border-color: var(--accent-active);
    box-shadow: inset 0 0 0 2px var(--accent-active);
}
.dx-datagrid .dx-data-row > td.dx-focused:not(.dx-editor-cell) {
    background-color: var(--cell-focus-bg);
}
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td {
    background-color: var(--accent-soft);
    color: var(--text);
}
.dx-datagrid-headers {
    color: var(--muted);
    font-weight: 600;
}
.dx-datagrid-headers .dx-header-filter:not(.dx-header-filter-empty),
.dx-datagrid .dx-sort {
    color: var(--accent-text);
}
.dx-datagrid-rowsview .dx-row-alt > td {
    background-color: #fafafa;
}
/* 已修正（SR-000023）：滑鼠移過的列也明顯反白，和目前列一起幫助定位 */
.dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-row-focused):not(.dx-selection) > td:not(.dx-focused) {
    background-color: var(--row-hover-bg);
}
/* 已修正（SR-000023）：加深表格格線，密集明細表（外貿接單、成本核算等）更好讀、好對齊 */
.dx-datagrid-rowsview .dx-datagrid-table .dx-row > td,
.dx-datagrid-rowsview .dx-datagrid-table .dx-row > tr > td {
    border-color: var(--grid-line);
}
.dx-datagrid-headers,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-color: var(--grid-line);
}

.dx-pager .dx-pages .dx-page.dx-selection,
.dx-pager .dx-page-sizes .dx-page-size.dx-selection {
    background-color: var(--accent);
    color: var(--accent-on);
}
.dx-pager .dx-pages .dx-page:not(.dx-selection):hover,
.dx-pager .dx-page-sizes .dx-page-size:not(.dx-selection):hover {
    background-color: var(--accent-soft);
}

.dx-treeview-node.dx-state-selected > .dx-treeview-item,
.dx-treeview-item.dx-state-selected {
    background-color: var(--accent-soft-strong);
    color: var(--accent-text-dark);
    font-weight: 600;
}
.dx-treeview-item.dx-state-hover {
    background-color: var(--accent-soft);
}
.dx-treeview-toggle-item-visibility {
    color: var(--muted);
}

.dx-popup-title {
    border-bottom: 2px solid var(--accent);
}

/* DataGrid 彈出編輯表單的「儲存」按鈕改為主色（金底深字） */
.dx-datagrid-edit-popup .dx-popup-bottom .dx-toolbar-after .dx-toolbar-item:first-child .dx-button {
    background-color: var(--accent);
    border-color: var(--accent);
}
.dx-datagrid-edit-popup .dx-popup-bottom .dx-toolbar-after .dx-toolbar-item:first-child .dx-button .dx-button-text {
    color: var(--accent-on);
}
.dx-datagrid-edit-popup .dx-popup-bottom .dx-toolbar-after .dx-toolbar-item:first-child .dx-button.dx-state-hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

.dx-tag-content {
    background-color: var(--accent-soft-strong);
    color: var(--accent-text-dark);
}

.dx-list-item.dx-state-focused,
.dx-list-item.dx-state-active,
.dx-list-item.dx-list-item-selected {
    background-color: var(--accent-soft);
    color: var(--text);
}
.dx-dropdownbutton-popup-wrapper .dx-list-item.dx-state-hover {
    background-color: var(--accent-soft);
}

.dx-invalid.dx-texteditor.dx-editor-outlined {
    border-color: var(--danger);
}

.hidden-form { display: none; }

/* ── 版面 ── */
.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.app-header {
    height: var(--header-height);
    background: var(--header-bg);
    color: var(--header-fg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 3px solid var(--accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 10;
    flex: none;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-header .dx-button.dx-button-mode-text .dx-icon,
.app-header .dx-button.dx-button-mode-text .dx-button-text {
    color: var(--header-fg);
}

.app-header .dx-button.dx-button-mode-text.dx-state-hover,
.app-header .dx-button.dx-button-mode-text.dx-state-focused {
    background: var(--accent-soft-strong);
}

.app-nav .dx-treeview-item {
    color: var(--nav-fg);
}

.app-footer a {
    color: var(--accent-text);
}

/* Logo 照 2026貴燈AI 版：金色「貴燈首飾」150×26；很窄的螢幕只留圖形 */
.header-logo {
    display: inline-block;
    width: 150px;
    height: 26px;
    margin: 0 8px 0 4px;
    background: var(--logo-path) no-repeat center / contain;
}
@media (max-width: 480px) {
    .header-logo {
        width: 24px;
        background-image: var(--logo-small-path);
    }
}

.header-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
}

.app-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.app-nav {
    width: var(--nav-width);
    background: var(--nav-bg);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex: none;
    transition: margin-left 0.2s ease;
}

.app-nav.collapsed {
    margin-left: calc(-1 * var(--nav-width));
}

.app-nav .dx-treeview-item {
    padding: 10px 12px;
}

.app-nav .dx-treeview-node[aria-level="1"] > .dx-treeview-item {
    font-weight: 600;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-main.anonymous {
    height: 100%;
}

.page-toolbar-wrapper {
    flex: none;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}

.page-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 16px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.grid-container {
    flex: 1 1 auto;
    min-height: 0;
}

.app-footer {
    height: var(--footer-height);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    background: #fafafa;
}

/* 手機：選單改為覆蓋 */
@media (max-width: 960px) {
    .app-nav {
        position: absolute;
        top: var(--header-height);
        bottom: var(--footer-height);
        left: 0;
        z-index: 9;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
    }
}

/* ── 首頁 ── */
.home-container {
    padding: 24px;
}

/* ── 登入 / 密碼變更表單 ── */
.formLayout-verticalAlign {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.formLayout-container {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.formLayout-header {
    padding: 14px 16px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid var(--accent);
}

.formLayout-form {
    padding: 16px;
}

.formLayout-item {
    margin-bottom: 14px;
}

.formLayout-caption {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--muted);
}

.formLayout-fieldError {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #d9534f;
}

.formLayout-fieldError:empty {
    display: none;
}

.formLayout-generalErrorText {
    margin: 4px 0 12px;
    padding: 8px 10px;
    font-size: 13px;
    color: #a94442;
    background: #f2dede;
    border: 1px solid #ebccd1;
    border-radius: 4px;
}

.formLayout-buttons {
    padding-top: 12px;
    border-top: 1px solid var(--border);
    text-align: center;
}

/* ── 彈窗 ── */
.popup-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.popup-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

/* ── Grid 內的圖片 ── */
.grid-avatar {
    max-width: 120px;
    max-height: 60px;
    display: block;
    margin: 0 auto;
}

/* ── 分配訂單（照舊 FrmStrongEditT 版面）── */
.allot {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 12px;
}
.allot-tree {
    width: 240px;
    flex: none;
    border: 1px solid var(--border);
    overflow: auto;
}
.allot-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.allot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}
.allot-find { width: 36px; flex: none; }
.allot-spacer { width: 36px; flex: none; }
.allot-dept { min-width: 90px; font-weight: 600; color: var(--danger); }
.allot-casting { min-width: 70px; font-weight: 600; }
.allot-lbl { white-space: nowrap; color: var(--muted); }
.allot-ed-date { width: 140px; }
.allot-ed-short { width: 80px; }
.allot-ed-orderno { width: 200px; }
.allot-orderno-lbl {
    margin-left: 16px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--nav-bg);
    font-weight: 600;
    white-space: nowrap;
}
.allot-flex { flex: 1 1 auto; }
.allot-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1.3fr 1.2fr 1fr;
    column-gap: 6px;
    row-gap: 2px;
}
.allot-fields > span { font-size: 13px; color: var(--muted); text-align: center; }
.allot-grid { flex: 1 1 auto; min-height: 220px; }
.allot-grid > div { height: 100%; }
.allot-foot { display: flex; flex-direction: column; gap: 6px; }
.allot-totals { display: flex; gap: 10px; align-items: baseline; justify-content: flex-end; }
.allot-totals b { min-width: 80px; text-align: right; }
.allot-memo { display: flex; gap: 8px; align-items: stretch; }
.allot-memo-lbl {
    writing-mode: horizontal-tb;
    padding: 4px 8px;
    border: 1px solid var(--border);
    background: var(--nav-bg);
    text-align: center;
    line-height: 1.4;
}
/* 已修正（SR-000008）：樣品制造單的備注框 id 是 #edExplain，原本沒撐寬只剩約 170px */
.allot-memo > #edMemo, .allot-memo > #edExplain { flex: 1 1 auto; min-width: 0; }
.allot-edmemo { width: 34%; display: flex; flex-direction: column; gap: 2px; }
.allot-edmemo > span { font-size: 13px; color: var(--muted); }
.allot-status {
    flex: none;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.4fr 120px;
    border-top: 1px solid var(--border);
    margin: 6px -16px -12px;
    font-size: 12px;
    color: var(--muted);
}
.allot-status > span { padding: 4px 10px; border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.allot-status > span:last-child { border-right: none; text-align: right; }

/* 顏色規則（舊 ColorBlueRed）：已分配＝紅字、未分配＝藍字、已報關＝紅底白字；編輯中恢復一般色 */
.allot.is-allocated .allot-head .dx-texteditor-input,
.allot.is-allocated .allot-grid .dx-data-row td { color: #c00000; }
.allot.is-unallocated .allot-head .dx-texteditor-input,
.allot.is-unallocated .allot-grid .dx-data-row td { color: #0000c0; }
.allot.is-declared .allot-grid .dx-data-row td { background: #c00000 !important; color: #fff !important; }
.allot.is-editing .allot-head .dx-texteditor-input,
.allot.is-editing .allot-grid .dx-data-row td { color: var(--text); }
/* 外貿在線訂單（Views/TradePo/Index.cshtml）：備註撐滿；多單檢視時以說明列蓋住表頭欄位（舊 Text2） */
.allot-memo > #edEdMemo { flex: 1 1 auto; min-width: 0; }
.tpo-many { padding: 6px 10px; background: var(--surface-2, #f4f6f8); border: 1px solid var(--border); font-weight: 600; }

/* ── 通用部門看板（Views/Board/DeptBoard.cshtml）── */
.board-head { gap: 16px; flex-wrap: wrap; }
.board-label2 { color: #c00000; font-weight: 700; font-size: 1.15em; white-space: nowrap; }
.board-side { width: 300px; }
.board-side .dx-tabpanel { height: 100%; }
#boardTree, #boardSplit { height: calc(100vh - 230px); }
.board-memo { white-space: pre-wrap; font-family: inherit; margin: 0; }
#boardGrid .board-normal td { color: #0000c0; }
#boardGrid .board-removed td { color: #d00000; }
#boardGrid .board-late td { color: #808080; }
#boardGrid .board-green td { color: #008000; }
#boardGrid .board-hurry td { background: #ffd0d0; }
#boardGrid .board-out td { background: #ffffc0; }
.board-editing #boardGrid td.board-editable { background: #fffbe6; color: #000; }
@media print {
    .app-header, .app-nav, #boardToolbar, .allot-tree, .board-head .allot-find, .allot-status { display: none !important; }
}

/* ── 生產課訂單（Views/Produce/Order.cshtml）── */
.pro-qa { color: #c00000; font-weight: 700; }
.pro-important { color: #c00000; font-weight: 700; padding: 2px 8px; border: 1px solid #f0a0a0; background: #fff4f4; white-space: pre-wrap; animation: pro-blink 1.2s step-start 3; }
@keyframes pro-blink { 50% { opacity: .3; } }
#proGrid .board-normal td { color: #0000c0; }
#proGrid .pro-other td { color: #999; }
#proGrid .pro-removed td { background: #d00000; color: #fff; }
.board-editing #proGrid .board-normal td:nth-child(4), .board-editing #proGrid .board-normal td:nth-child(6) { background: #fffbe6; color: #000; }
.pro-gloss { color: #0050c0; text-decoration: underline; }

/* ── 報表（Views/Report/*）── */
.rpt-wrap { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.rpt-fill { height: calc(100vh - 130px); }
.rpt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rpt-frame { border: 1px solid #ccc; padding: 4px 10px 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rpt-frame legend { font-size: .9em; color: #555; padding: 0 4px; }
.rpt-table { border-collapse: collapse; }
.rpt-table th, .rpt-table td { border: 1px solid #bbb; padding: 4px 14px; text-align: right; min-width: 90px; }
.rpt-table th { background: #f3f3f3; text-align: center; }
.rpt-total { text-align: right; font-size: 1.05em; }
.rpt-note { color: #a05000; }
.rpt-grid { flex: 1; min-height: 200px; }
.rpt-cols { display: flex; gap: 12px; flex: 1; min-height: 0; }
.rpt-side { width: 330px; display: flex; flex-direction: column; gap: 8px; }
.rpt-pick { display: flex; gap: 8px; }
.rpt-pick > div { flex: 1; border: 1px solid #ddd; }
.rpt-cap { font-size: .85em; color: #555; padding: 2px 4px; background: #f6f6f6; }
.rpt-printhead { font-weight: 700; display: none; }
#grid .rpt-important td:nth-child(2) { background: #000; color: #fff; }
@media print { .rpt-printhead { display: block; } .rpt-bar { display: none !important; } }

/* ── 公用程式（Views/Public/*）── */
.qa-main { padding: 6px 10px; overflow: auto; }
.qa-hint { text-align: right; color: #555; }
.qa-title { font-weight: 700; margin: 4px 0 8px; }
.qa-frame { border: 1px solid #bbb; margin: 0 0 8px; padding: 4px 10px 8px; }
.qa-frame legend { font-weight: 700; padding: 0 4px; }
.qa-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 10px; }
.qa-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.imp-more { margin-left: 6px; text-decoration: none; font-weight: 700; }
.imp-pop { display: flex; flex-direction: column; gap: 8px; }

/* ── 業務訂單（Views/Trade/*）── */
.tr-fields { grid-template-columns: repeat(10, 1fr) !important; }
.tr-big { color: #c00000; font-weight: 700; }
.tr-legend { display: inline-flex; align-items: center; gap: 4px; font-size: .9em; }
.tr-legend i { display: inline-block; width: 14px; height: 10px; margin-left: 8px; border: 1px solid #999; }
.tr-legend .tr-print { background: #ffff80; } .tr-legend .tr-pro { background: #90ee90; } .tr-legend .tr-pack { background: #d00000; }
#trGrid .tr-row-print td { background: #ffff80; }
#trGrid .tr-row-pro td { background: #90ee90; }
#trGrid .tr-row-pack td { background: #d00000; color: #fff; }
#trGrid .board-normal td, #chGrid .board-normal td { color: #0000c0; }

/* ── 開發欠版（Views/Ban/*）── */
.ban-info { font-size: .92em; color: #c00000; }
.ban-info b { color: #c00000; font-weight: 600; margin-right: 4px; }
.ban-edit { display: flex; flex-direction: column; gap: 8px; }
.ban-line { display: flex; align-items: center; gap: 10px; }
.ban-line .dx-checkbox { width: 110px; }

/* ── 通用轉交單（Views/Transfer/Transfer.cshtml）── */
#tfGrid .board-normal td { color: #0000c0; }
#tfGrid .tf-confirmed td { color: #555; background: #f2f7f2; }
#tfGrid .tf-new td { color: #000; background: #fffbe6; }
.tf-confirm { color: #0050c0; font-weight: 700; text-decoration: underline; }

/* ── 訂單進度（Views/Progress/*）── */
.pg-wrap { overflow: auto; }
.pg-orderno { color: #c00000; font-weight: 700; font-style: italic; font-size: 1.4em; margin-left: 20px; }
.pg-red { color: #c00000; font-weight: 700; }
.pg-basic #basic { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 12px; width: 100%; }
.pg-kv i { font-style: normal; color: #555; } .pg-kv b { color: #0000c0; font-weight: 600; }
.pg-mid { display: flex; gap: 12px; }
.pg-progress { flex: 0 0 600px; }
.pg-side { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pg-memo { display: flex; gap: 6px; } .pg-memo > div { flex: 1; }
#gridProgress .pg-done td { background: #ffb0b0; }
#gridProgress .pg-yellow td { background: #ffff80; }

/* ── 退貨處理（Views/Return/*）── */
.ret-wrap { display: flex; gap: 10px; padding: 8px 12px; height: calc(100vh - 130px); }
.ret-list { width: 180px; border: 1px solid #ccc; display: flex; flex-direction: column; }
.ret-list > div:last-child { flex: 1; }
.ret-main { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ret-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ret-blue { color: #0000c0; } .ret-red { color: #c00000; font-weight: 700; }
.ret-head { display: flex; gap: 12px; }
.ret-grid3 { flex: 1; display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 100px; gap: 6px 8px; align-items: center; }
.ret-fee { display: grid !important; grid-template-columns: auto 100px auto 100px; gap: 6px; }
.ret-gridbox { flex: 1; min-height: 200px; }
.ret-foot { display: flex; align-items: center; gap: 8px; }
.ret-total { background: #000; color: #fff; padding: 4px 12px; } .ret-total b { margin-left: 16px; }
.ret-pick { font-weight: 700; text-decoration: none; }
.ret-popbtn { margin-top: 8px; text-align: right; }
.ret-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px; }
.ret-info i { font-style: normal; color: #555; margin-right: 6px; } .ret-info b { color: #0000c0; }
.ret-confirm { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── 飾品成本核算（cost-item.js）── */
/* 已修正（SR-000014）：原本 height: calc(100vh - 120px) 比內容區高約 50px，內容區可被捲動，工具列（含「外購」）捲到標題底下看不到；改成跟 .allot 一樣吃內容區剩餘高度 */
.ci-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 4px 8px; gap: 4px; }
.ci-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ci-sep { width: 1px; height: 24px; background: #ccc; margin: 0 4px; }
.ci-body { flex: 1; display: flex; gap: 6px; min-height: 0; }
.ci-left { width: 190px; border: 1px solid #ddd; overflow: auto; }
.ci-right { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: auto; }
.ci-page { padding: 6px 2px; display: flex; flex-direction: column; gap: 6px; }
.ci-head { display: grid; grid-template-columns: 200px 205px 195px minmax(230px, 1fr); gap: 8px; }
.ci-col { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 3px 4px; align-content: start; align-items: center; min-width: 0; }
.ci-col label { font-size: 12px; white-space: nowrap; overflow: hidden; }
.ci-col1 .ci-photo { grid-column: 1 / span 2; height: 120px; border: 1px solid #ccc; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; }
.ci-span2 { grid-column: 1 / span 2; }
.ci-unit { display: flex; align-items: center; gap: 4px; }
.ci-unit > .dx-widget { flex: 1 1 0; min-width: 0; }
.ci-unit > span { font-size: 12px; white-space: nowrap; }
.ci-ref { font-size: 11px; color: #888; white-space: nowrap; }
.ci-col4 { display: flex; flex-direction: column; gap: 4px; position: relative; }
.ci-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ci-memo { display: flex; gap: 6px; align-items: flex-start; }
.ci-memo > .dx-widget { flex: 1; }
.ci-pop { border: 1px solid #99b; background: #f7f8ff; padding: 4px 6px; }
.ci-labor { display: flex; flex-wrap: wrap; gap: 4px; }
.ci-lab { display: flex; flex-direction: column; font-size: 12px; }
.ci-frame { border: 1px solid #ccc; padding: 2px 6px 6px; }
.ci-frame legend { font-size: .9em; color: #555; padding: 0 4px; }
#gridStone { height: 170px; }
.ci-low { display: flex; gap: 6px; min-height: 0; }
.ci-low .ci-g { flex: 1; min-width: 0; height: 160px; }
.ci-vlabel { writing-mode: vertical-rl; font-size: 13px; color: #555; }
.ci-sup { display: grid; grid-template-columns: repeat(6, auto); gap: 6px 10px; align-items: center; max-width: 900px; }
.ci-feat { display: grid; grid-template-columns: repeat(4, 180px); gap: 6px 16px; padding: 20px; }
.ci-status { display: flex; gap: 16px; border-top: 1px solid #ddd; padding: 2px 6px; font-size: 12px; color: #444; }
.ci-hide { visibility: hidden; }
.ci-disabled { pointer-events: none; opacity: .6; }
.ci-editing .ci-col .dx-texteditor:not(.dx-state-readonly) { background: #fffde8; }
.cia-wrap { padding: 16px; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.cia-grid { display: grid; grid-template-columns: 80px 230px 110px; gap: 8px; align-items: center; }

/* ── 倉庫進銷存（inventory.js）── */
.inv-wrap { display: flex; flex-direction: column; height: calc(100vh - 120px); padding: 4px 8px; gap: 6px; }
.inv-head { display: grid; grid-template-columns: repeat(2, minmax(260px, 420px)); gap: 4px 40px; }
.inv-f { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 6px; }
.inv-f label { font-size: 13px; white-space: nowrap; }
.inv-grid { flex: 1; min-height: 0; }
.inv-foot { display: flex; gap: 10px; align-items: center; border-top: 1px solid #ddd; padding: 4px 6px; }
.inv-foot b { min-width: 60px; }

/* ── 樣品制造單（Views/Sample/*，照舊 FrmGDOrder／frmProduct0）── */
.smp-fields { display: grid; column-gap: 6px; row-gap: 2px; }
.smp-fields > span { font-size: 13px; color: var(--muted); text-align: center; }
.smp-fields-a { grid-template-columns: 0.9fr 1fr 1.1fr 1.1fr 1fr 0.6fr 0.9fr 0.9fr 0.8fr; }
.smp-fields-b { grid-template-columns: 0.6fr 0.6fr 1.3fr 2.2fr 1fr 1fr 1.1fr 0.8fr; }
.smp-fields-p { grid-template-columns: 1fr 1fr 1.1fr 1.1fr 1fr 1fr 0.6fr 0.8fr 1.1fr 0.8fr; }
.smp-copy, .smp-lock { display: flex; align-items: center; gap: 6px; }
.smp-copy > div:last-child { flex: 1 1 auto; }
.smp-lock .dx-radiobutton { margin-right: 8px; }
.smp-state { font-weight: 700; color: #0000c0; white-space: nowrap; }
.smp-state-red { color: #c00000; }
.smp-body { flex: 1 1 auto; min-height: 240px; display: flex; gap: 8px; }
.smp-body > .allot-grid { flex: 1 1 auto; min-width: 0; }
.smp-photo { width: 240px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.smp-photo-img { height: 180px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: zoom-in; overflow: hidden; color: var(--muted); font-size: 13px; }
.smp-photo-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.smp-photo-nav, .smp-photo-ops { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--muted); }
.smp-bigimg { height: 100%; display: flex; align-items: center; justify-content: center; }
.smp-bigimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.smp-opts { display: flex; flex-direction: column; gap: 2px; }
.smp-plan-memo { display: flex; gap: 8px; height: 150px; }
.smp-plan-memo .smp-photo-img { width: 200px; height: 100%; flex: none; }
.smp-plan-memo > div:not(.smp-photo-img) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.smp-plan-memo span { font-size: 13px; color: var(--muted); }
.smp-due-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.smp-due-filter fieldset { border: 1px solid var(--border); padding: 4px 10px 8px; display: flex; gap: 8px; align-items: center; }
.smp-due-filter legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
.smp-due-grids { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.smp-due-grids > div:first-child { flex: 3 1 0; min-height: 0; }
.smp-due-bottom { flex: 2 1 0; min-height: 0; display: flex; gap: 8px; }
.smp-due-bottom > div:first-child { flex: 1 1 auto; min-width: 0; }

/* ── 部門補台（Views/Refill/Refill.cshtml，照舊 Fill.exe）── */
.rf-form { border: 1px solid var(--border); padding: 6px 12px 10px; }
.rf-form legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
.rf-grid3 { display: grid; grid-template-columns: 80px 1fr 80px 1fr 70px 1fr; gap: 6px 8px; align-items: center; max-width: 980px; }
.rf-grid3 > span { color: var(--muted); white-space: nowrap; text-align: right; }
.rf-span3 { grid-column: span 3; }
.rf-info { grid-column: span 4; text-align: left !important; color: #0000c0 !important; }
.rf-cap { font-size: 13px; color: var(--muted); }
#rfGrid .rf-urgent td { background: #fff0f0; }

/* ── GZIntra 生產訂單（Views/Intra/*）── */
.po-q { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); padding: 8px 10px; }
.po-q-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.po-q-sep { width: 12px; }
.po-quick { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; white-space: nowrap; }
.po-quick b { color: #c00000; font-weight: 600; }
.po-tab { padding: 4px 10px; border: 1px solid #f0a000; background: #fff7e0; cursor: pointer; font-weight: 600; }
.po-form { border-collapse: collapse; width: 100%; max-width: 1100px; }
.po-form th { text-align: right; white-space: nowrap; color: var(--muted); font-weight: normal; padding: 3px 8px; width: 120px; vertical-align: top; }
.po-form td { padding: 3px 4px; vertical-align: top; }
.po-form small { display: block; color: var(--muted); }
.po-no { font-size: 1.25em; color: #0000c0; }
.po-red { color: #c00000; }
.po-legend { display: flex; gap: 8px; font-size: 12px; }
.po-legend span { padding: 2px 8px; border: 1px solid #ccc; }
.po-totals { display: flex; gap: 10px; justify-content: flex-end; align-items: baseline; }
.po-totals b { min-width: 90px; text-align: right; }
.po-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .po-sub { grid-template-columns: 1fr; } }

.fac-box { display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.fac-box .memo { white-space: pre-wrap; }
.fac-act { display: flex; flex-direction: column; gap: 6px; border: 1px solid #f0c040; background: #fffbea; padding: 8px; }
.fac-change { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px dashed #ccc; padding-top: 6px; }
.ce-h { margin: 10px 0 4px; font-size: 14px; color: var(--muted); }
.cc-blk { border: 1px solid var(--border); margin: 8px 0; padding: 4px 10px 8px; max-width: 1100px; }
.cc-blk legend { font-weight: bold; padding: 0 6px; }
/* 重量分析（稱重訂單，weigh.js） */
.wt-head { border-collapse: collapse; }
.wt-head th, .wt-head td { border: 1px solid #bbb; padding: 3px 10px; min-width: 90px; text-align: center; }
.wt-head th { background: #f3f3f3; font-weight: normal; }
.wt-total td { text-align: right; }
.wt-mode { color: #a05000; }
.wt-memo { display: flex; gap: 8px; border: 1px solid #ccc; padding: 4px 8px; min-height: 40px; }
@media print { .wt-tools { display: none !important; } }
/* 珠子分析（stone-demand.js） */
.sd-side { width: 220px; }
.sd-tree { flex: 1; min-height: 0; border: 1px solid #ddd; }
.sd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sd-main.sd-editing #grid { color: #c00000; }
.sd-memo { color: #555; }
.sd-print-title { display: none; font-size: 1.3em; font-weight: 700; text-align: center; }
@media print { .sd-tools, .sd-side { display: none !important; } .sd-print-title { display: block; } }

/* 站內通知（15 補建 #1） */
.notify-bell { position: relative; cursor: pointer; padding: 6px 10px; display: inline-flex; align-items: center; }
.notify-bell .dx-icon { font-size: 20px; }
.notify-badge { position: absolute; top: 0; right: 2px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px; background: #d9534f; color: #fff; font-size: 11px; text-align: center; }
.notify-list { max-height: 420px; overflow: auto; }
.notify-item { padding: 6px 4px; border-bottom: 1px solid #eee; cursor: pointer; }
.notify-item:hover { background: #f3f7fb; }
.notify-cat { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 3px; background: #e8eef7; color: #335; font-size: 12px; }
.notify-body { color: #555; font-size: 12px; white-space: pre-wrap; }
.notify-time { color: #999; font-size: 11px; }
/* 問題回報（標頭「？」、回報視窗、明細對話串） */
.support-help { position: relative; cursor: pointer; padding: 6px 8px; display: inline-flex; align-items: center; }
.support-help .dx-icon { font-size: 20px; }
.support-badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px; background: #d9534f; color: #fff; font-size: 11px; text-align: center; }
.support-menu-item { padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.support-menu-item:hover { background: #f3f7fb; }
.sp-form .sp-row { display: flex; align-items: flex-start; margin-bottom: 8px; gap: 8px; }
.sp-form .sp-label { width: 90px; flex: none; padding-top: 6px; color: #555; text-align: right; }
.sp-form .sp-label.req::after { content: " *"; color: #d9534f; }
.sp-form .sp-field { flex: 1; min-width: 0; }
.sp-form .sp-text { padding-top: 6px; word-break: break-all; }
.sp-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sp-file { border: 1px solid #ddd; border-radius: 4px; padding: 4px; font-size: 12px; max-width: 160px; position: relative; background: #fafafa; }
.sp-file img { display: block; max-width: 150px; max-height: 90px; margin-bottom: 2px; }
.sp-file .sp-x { position: absolute; top: 0; right: 4px; cursor: pointer; color: #d9534f; font-weight: bold; }
.sp-hint { color: #888; font-size: 12px; }
.sp-recent { border: 1px solid #f0d58c; background: #fffbea; border-radius: 4px; padding: 6px 8px; }
.sp-recent-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.sp-recent-item .sp-recent-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-status { display: inline-block; padding: 0 6px; border-radius: 3px; background: #e8eef7; color: #335; font-size: 12px; }
.sp-status.st-New { background: #fde2e1; color: #a33; }
.sp-status.st-Fixed, .sp-status.st-Deployed { background: #e3f4e3; color: #276; }
.sp-status.st-Closed, .sp-status.st-Rejected, .sp-status.st-Duplicate { background: #eee; color: #666; }
.sp-urgent { color: #d9534f; font-weight: 600; }
.sp-detail { display: flex; gap: 16px; align-items: flex-start; }
.sp-detail .sp-main { flex: 1; min-width: 0; }
.sp-detail .sp-side { width: 340px; flex: none; }
.sp-card { border: 1px solid #e3e3e3; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; background: #fff; }
.sp-card h3 { margin: 0 0 8px; font-size: 15px; }
.sp-kv { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; font-size: 13px; }
.sp-kv > div:nth-child(odd) { color: #777; text-align: right; }
.sp-msg { border-left: 3px solid #c9d6ea; padding: 6px 10px; margin-bottom: 10px; background: #f8fafc; }
.sp-msg.k-Staff, .sp-msg.k-AI { border-left-color: #5b9bd5; background: #f1f7fd; }
.sp-msg.k-Status, .sp-msg.k-System { border-left-color: #bbb; background: #fafafa; color: #666; }
.sp-msg.internal { border-left-color: #e0a800; background: #fff8e1; }
.sp-msg .sp-msg-head { font-size: 12px; color: #777; margin-bottom: 4px; }
.sp-msg .sp-msg-body { white-space: pre-wrap; word-break: break-word; }
.sp-timeline { font-size: 12px; }
.sp-timeline div { padding: 2px 0; }
/* 問題回報第二期：客服管理統計卡、滿意度星等 */
.sp-admin { display: flex; flex-direction: column; height: calc(100vh - 150px); }
.sp-admin .sp-admin-grid { flex: 1; min-height: 240px; }
.sp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sp-stat { border: 1px solid #e3e3e3; border-radius: 6px; padding: 6px 10px; background: #fff; min-width: 110px; height: 86px; box-sizing: border-box; overflow: hidden; }
.sp-stat .sp-stat-label { font-size: 12px; color: #777; }
.sp-stat .sp-stat-num { font-size: 22px; font-weight: 600; color: #335; line-height: 1.4; }
.sp-stat .sp-stat-sub { font-size: 11px; color: #999; }
.sp-stat-status { display: grid; grid-template-columns: repeat(4, auto); gap: 1px 10px; font-size: 12px; margin-top: 2px; }
.sp-stat-status a { cursor: pointer; white-space: nowrap; }
.sp-stat-pages { width: 340px; overflow: auto; }
.sp-stat-pages ol { margin: 2px 0 0; padding-left: 20px; font-size: 12px; columns: 2; column-gap: 18px; }
.sp-stat-pages li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-stars { display: inline-flex; gap: 2px; }
.sp-stars span { cursor: pointer; font-size: 26px; line-height: 1; color: #ccc; user-select: none; }
.sp-stars span.on { color: #f0ad00; }
.sp-star-text { color: #f0ad00; letter-spacing: 1px; }
.sp-clientinfo { max-height: 300px; overflow: auto; font-size: 11px; background: #f6f6f6; padding: 6px; white-space: pre-wrap; word-break: break-all; }
.notify-empty { padding: 12px; color: #888; text-align: center; }
.notify-bar { display: flex; justify-content: space-between; padding: 6px 4px 0; }

/* 款式圖庫（15 補建 #2） */
.ph-viewer { display: flex; flex-direction: column; height: 100%; }
.ph-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #fafafa; border: 1px solid #eee; }
.ph-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ph-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; gap: 6px; flex-wrap: wrap; }
.ph-info i { color: #888; font-style: normal; }
.ph-btns .dx-button { margin-left: 4px; }
.ci-photo img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }

/* 舊功能未使用（SystemFunction.IsLegacyUnused，2026-10-16）：左側選單淡色、仍可點 */
.app-nav .dx-treeview-item.nav-legacy-unused,
.app-nav .nav-legacy-unused > .dx-treeview-item { color: #b0b0b0; }
.app-nav .dx-treeview-item.nav-legacy-unused .dx-icon,
.app-nav .nav-legacy-unused > .dx-treeview-item .dx-icon { opacity: .45; }

/* 角色權限設定（Views/System/RolePermission.cshtml、role-permission.js） */
.rp-wrap { display: flex; gap: 10px; padding: 0 8px 8px; }
.rp-left { width: 320px; flex: none; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 4px; }
.rp-left #rpSearch { margin: 6px; }
.rp-tree { flex: 1 1 auto; min-height: 0; overflow: auto; }
.rp-tree .dx-treeview-item { padding: 5px 8px; }
.rp-tc { color: var(--muted); font-size: 12px; white-space: nowrap; }
.rp-legacy-text { color: #b0b0b0; }
.rp-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.rp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 0 6px; }
.rp-group-name { font-weight: 600; }
.rp-count { color: var(--muted); font-size: 12px; margin-left: 6px; }
.rp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rp-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.rp-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 4px; }
.rp-table { width: 100%; border-collapse: collapse; }
.rp-table th { position: sticky; top: 0; z-index: 1; background: #f7f7f7; font-weight: 600; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.rp-table td { padding: 4px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.rp-table .rp-c-chk, .rp-table .rp-c-more { width: 64px; text-align: center; }
.rp-table .rp-c-scope { width: 120px; }
.rp-table input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-text); }
.rp-path { color: var(--muted); font-size: 11px; }
.rp-row:hover td { background: var(--accent-soft); }
.rp-dirty td { background: #fff8e1; }
.rp-field .rp-title { font-size: 13px; }
.rp-tag { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 5px; margin-right: 5px; border-radius: 3px; background: #eef3f8; color: #4a6785; vertical-align: 1px; }
.rp-tag-legacy { margin: 0 0 0 6px; background: #f0f0f0; color: #999; cursor: help; }
.rp-legacy .rp-title, .rp-legacy .rp-path, .rp-legacy .rp-op { color: #b0b0b0; }
.rp-detail td { background: #fafafa; }
.rp-op { display: inline-flex; align-items: center; gap: 3px; margin-right: 16px; }
.rp-op-na { color: #c8c8c8; }
.rp-empty { padding: 24px; text-align: center; color: var(--muted); }