:root {
      --font-mono: 'JetBrains Mono', monospace, monospace;
      --font-tc: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      
      /* 側欄自適應流體寬度：在 1280px ~ 2560px 視窗自適應 420px ~ 480px，寬螢幕下自然延伸，資訊滿版不空洞 */
      --sidebar-width: clamp(420px, 360px + 4.688vw, 480px);
      --sidebar-collapsed-width: 48px;
      --header-height: clamp(44px, 36px + 0.625vw, 50px);
      --subbar-height: clamp(28px, 24px + 0.312vw, 32px);

      /* 基礎流體字階：視窗在 1280px ~ 2560px 之間平滑等比連續放大，字體永不縮得過小！ */
      --font-size-xs: clamp(12px, 9px + 0.234vw, 15px);        /* 輔助標籤、次要提示 (12px ~ 15px) */
      --font-size-sm: clamp(13.5px, 10px + 0.273vw, 17px);      /* 欄位標籤 Field Label (13.5px ~ 17px) */
      --font-size-base: clamp(14.5px, 10.5px + 0.312vw, 18.5px);/* 輸入框內容、表格內容、下拉項目 (14.5px ~ 18.5px) */
      --font-size-md: clamp(16px, 10px + 0.468vw, 22px);        /* 小標題、單價數字、操作按鈕 (16px ~ 22px) */
      --font-size-lg: clamp(18px, 11px + 0.547vw, 25px);        /* 區塊主標題 (18px ~ 25px) */
      --font-size-xl: clamp(26px, 12px + 1.093vw, 40px);        /* 側欄雙軌焦點巨額 (26px ~ 40px) */

      /* 控制項自適應流體尺寸：高度與內距隨視窗舒適伸展 (L62 契約保證下限 >= 38px) */
      --ctrl-height: clamp(38px, 32px + 0.8vh, 44px);
      --ctrl-padding: clamp(4px, 0.4vh, 8px) clamp(8px, 0.6vw, 12px);
      
      /* 表格單元格自適應內距 */
      --cell-padding-y: clamp(3px, 0.35vh, 6px);
      --cell-padding-x: clamp(6px, 0.5vw, 10px);

      /* 暗黑工程儀表板色彩系統 (Dark Engineering Dashboard) */
      --bg-canvas: #0A0E17;
      --bg-panel: #121824;
      --bg-panel-sub: #172033;
      --bg-input: #1A2438;
      --border-color: #26334D;
      --border-light: #1E293B;
      --border-strong: #334466;

      --text-main: #F8FAFC;
      --text-sub: #94A3B8;
      --text-muted: #64748B;

      /* 核心雙軌識別雙色 (冰藍 vs 亮翠綠) */
      --color-cost-ice: #38BDF8;      /* 工廠內部直接底價 (冰藍) */
      --color-cost-bg: rgba(56, 189, 248, 0.12);
      --color-cost-border: rgba(56, 189, 248, 0.35);

      --color-quote-green: #34D399;   /* 客戶含稅報價 (亮翠綠) */
      --color-quote-bg: rgba(52, 211, 153, 0.12);
      --color-quote-border: rgba(52, 211, 153, 0.35);

      --color-accent-amber: #FBBF24;  /* 警告 / 毛利 (黃金橘) */
      --color-danger: #F87171;        /* 急件 (亮紅) */
    }

    /* 淺色主題覆寫 (支援一鍵切換) */
    body.theme-light,
    .erp-workorder-workbench.theme-light,
    [data-theme="light"],
    .theme-light {
      --bg-canvas: #F1F5F9;
      --bg-panel: #FFFFFF;
      --bg-panel-sub: #F8FAFC;
      --bg-input: #FFFFFF;
      --border-color: #CBD5E1;
      --border-light: #E2E8F0;
      --border-strong: #94A3B8;
      --text-main: #0F172A;
      --text-sub: #475569;
      --text-muted: #94A3B8;
      --color-cost-ice: #0284C7;
      --color-cost-bg: #E0F2FE;
      --color-cost-border: #BAE6FD;
      --color-quote-green: #059669;
      --color-quote-bg: #D1FAE5;
      --color-quote-border: #A7F3D0;
    }

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--bg-canvas);
      color: var(--text-main);
      font-family: var(--font-tc);
      font-size: var(--font-size-base);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* ==========================================================================
       L62 標準化保證：工作台主要輸入控制項與按鈕 min-height >= 38px (零削邊 Zero-Clipping)
       ========================================================================== */
    .erp-workorder-workbench input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .erp-workorder-workbench select,
    .erp-workorder-workbench textarea,
    [data-wb-root] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    [data-wb-root] select,
    [data-wb-root] textarea {
      min-height: 38px;
      line-height: 1.35;
      box-sizing: border-box;
    }

    .erp-workorder-workbench button:not(.proc-floating-btn),
    [data-wb-root] button:not(.proc-floating-btn) {
      min-height: 38px;
      line-height: 1.35;
      box-sizing: border-box;
    }

    /* ==========================================================================
       1. 頂部高對比導航列 (52px)
       ========================================================================== */
    .top-navbar {
      height: var(--header-height);
      background: var(--bg-panel);
      border-bottom: 2px solid var(--border-color);
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      z-index: 60;
      box-sizing: border-box;
    }

    .nav-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .brand-logo-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 800;
      color: var(--color-cost-ice);
      background: var(--color-cost-bg);
      padding: 2px 7px;
      border-radius: 4px;
      border: 1px solid var(--color-cost-border);
      letter-spacing: 0.5px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .doc-identifier {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .doc-no {
      font-family: var(--font-mono);
      font-size: clamp(15px, 0.95rem + 0.3vw, 18px);
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: -0.3px;
    }

    body.theme-light .doc-no {
      color: #0F172A;
    }

    .badge-compact {
      font-size: var(--font-size-xs);
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .badge-order {
      background: rgba(56, 189, 248, 0.18);
      color: var(--color-cost-ice);
      border: 1px solid var(--color-cost-border);
    }

    .badge-workorder {
      background: rgba(52, 211, 153, 0.18);
      color: var(--color-quote-green);
      border: 1px solid var(--color-quote-border);
    }

    .badge-status {
      font-size: var(--font-size-xs);
      color: var(--text-sub);
      background: var(--bg-panel-sub);
      border: 1px solid var(--border-color);
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
      white-space: nowrap;
    }

    .client-chip {
      font-size: var(--font-size-sm);
      color: var(--text-sub);
      padding-left: 10px;
      border-left: 2px solid var(--border-color);
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .client-chip strong {
      color: var(--text-main);
      font-weight: 700;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    /* 方案 A / 方案 B 切換鈕 */
    .scheme-switch-box {
      display: inline-flex;
      align-items: center;
      background: var(--bg-panel-sub);
      padding: 2px;
      border-radius: 5px;
      border: 1px solid var(--border-color);
      gap: 2px;
      white-space: nowrap;
    }

    .scheme-btn {
      text-decoration: none;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 3px;
      color: var(--text-sub);
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .scheme-btn:hover {
      color: var(--text-main);
    }

    .scheme-btn.active {
      background: var(--bg-panel);
      color: var(--color-cost-ice);
      font-weight: 800;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      border: 1px solid var(--color-cost-border);
    }

    /* 模式切換 */
    .mode-toggle-group {
      display: inline-flex;
      background: var(--bg-panel-sub);
      padding: 2px;
      border-radius: 5px;
      border: 1px solid var(--border-color);
      white-space: nowrap;
    }

    .mode-tab-btn {
      border: none;
      background: transparent;
      padding: 3px 9px;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-sub);
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.12s ease;
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .mode-tab-btn.active {
      background: #1E293B;
      color: #FFFFFF;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    /* 📄 訂單模式 (F2) 翠綠高亮 active 樣式突出 (固化規範) */
    .mode-tab-btn#btnModeOrder.active,
    .mode-tab-btn[data-wb-dual-mode="order"].active {
      background: var(--color-quote-green, #059669) !important;
      color: #FFFFFF !important;
      box-shadow: 0 1px 6px rgba(5, 150, 105, 0.4) !important;
    }

    /* 🏭 工單模式 (F2) 冰藍高亮 active 樣式突出 (固化規範) */
    .mode-tab-btn#btnModeWorkOrder.active,
    .mode-tab-btn[data-wb-dual-mode="workorder"].active {
      background: var(--color-cost-ice, #0284C7) !important;
      color: #FFFFFF !important;
      box-shadow: 0 1px 6px rgba(2, 132, 199, 0.4) !important;
    }

    body.theme-light .mode-tab-btn:not(.active),
    .theme-light .mode-tab-btn:not(.active) {
      color: var(--text-sub, #475569);
    }

    /* 主題切換 (暗黑/淺色) */
    .theme-toggle-btn {
      min-height: 38px;
      height: 38px;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid var(--border-strong);
      background: var(--bg-panel-sub);
      color: var(--text-main);
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      transition: all 0.15s ease;
      white-space: nowrap;
      box-sizing: border-box;
    }

    .theme-toggle-btn:hover {
      background: var(--border-color);
      border-color: var(--color-cost-ice);
    }

    .nav-btn-icon {
      min-height: 38px;
      height: 38px;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid var(--border-color);
      background: var(--bg-panel-sub);
      color: var(--text-sub);
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all 0.15s ease;
      white-space: nowrap;
      box-sizing: border-box;
    }

    .nav-btn-icon:hover {
      background: var(--border-color);
      color: var(--text-main);
    }

    /* ==========================================================================
       2. 快捷鍵與狀態指示條 (28px 緊湊化)
       ========================================================================== */
    .sub-statusbar {
      height: var(--subbar-height);
      background: var(--bg-panel-sub);
      border-bottom: 1px solid var(--border-color);
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11.5px;
      color: var(--text-sub);
      flex-shrink: 0;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
    }

    .subbar-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .feature-tag {
      font-weight: 800;
      color: var(--color-cost-ice);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .kbd-tag {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 800;
      background: var(--bg-panel);
      border: 1px solid var(--border-strong);
      border-radius: 3px;
      padding: 1px 4px;
      color: var(--text-main);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    }

    .subbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      flex-shrink: 0;
    }

    .status-pulse {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-quote-green);
      box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
    }

    /* ==========================================================================
       3. 主工作區：100% 分割面板 (Split-Pane Wrapper)
       ========================================================================== */
    .split-pane-wrapper {
      flex: 1 1 0%;
      display: flex;
      height: calc(100vh - var(--header-height) - var(--subbar-height));
      overflow: hidden;
      position: relative;
      box-sizing: border-box;
    }

    /* 👈 左側主表單滾動區 (極致緊湊高密度，垂直 padding 與卡片間距大幅壓縮) */
    .workbench-form-pane {
      flex: 1 1 0%;
      min-width: 0; /* 重要：防止內容撐爆導致邊緣截斷 */
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 10px 14px 40px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px; /* 卡片間距壓縮為 8px，消除大面積空隙 */
      background: var(--bg-canvas);
      box-sizing: border-box;
    }

    /* 實心深色區塊卡片 (超緊湊版) */
    .compact-box {
      background: var(--bg-panel);
      border: 1.5px solid var(--border-color);
      border-top: 3px solid var(--border-color); /* 頂部邊框品牌飾條 */
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
      position: relative;
      margin-bottom: 0;
      box-sizing: border-box;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .compact-box:hover {
      border-color: var(--border-strong);
    }

    .compact-box.theme-sec-blue {
      border-top-color: var(--color-cost-ice);
    }

    .compact-box.theme-sec-green {
      border-top-color: var(--color-quote-green);
    }

    .compact-box.theme-sec-amber {
      border-top-color: var(--color-accent-amber);
    }

    .compact-box-header {
      padding: 6px 12px;
      background: var(--bg-panel-sub);
      border-bottom: 1.5px solid var(--border-color);
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    .compact-box-title {
      font-size: var(--font-size-md);
      font-weight: 700;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 6px;
      letter-spacing: -0.2px;
    }

    .compact-box-title .icon {
      font-size: var(--font-size-md);
    }

    .compact-box-subtitle {
      font-size: var(--font-size-xs);
      color: var(--text-sub);
      font-weight: normal;
      margin-left: 4px;
    }

    .compact-box-body {
      padding: 8px 12px;
      box-sizing: border-box;
    }

    /* 表單 Grid 佈局 (極致緊湊，垂直間距由 14px 壓到 4px) */
    .form-row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 8px;
      margin-bottom: 4px;
      min-width: 0;
      box-sizing: border-box;
    }

    .form-row:last-child {
      margin-bottom: 0;
    }

    .col-12 { grid-column: span 12; min-width: 0; }
    .col-9 { grid-column: span 9; min-width: 0; }
    .col-8 { grid-column: span 8; min-width: 0; }
    .col-6 { grid-column: span 6; min-width: 0; }
    .col-4 { grid-column: span 4; min-width: 0; }
    .col-3 { grid-column: span 3; min-width: 0; }
    .col-2 { grid-column: span 2; min-width: 0; }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      box-sizing: border-box;
    }

    /* 標籤清晰大方，var(--font-size-sm) 醒目高對比 */
    .field-label {
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--text-sub);
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      margin-bottom: 1px;
    }

    .field-label .req {
      color: var(--color-danger);
      margin-left: 2px;
    }

    /* 輸入框自適應高度 min-height: var(--ctrl-height) 與流體內距，字體 var(--font-size-base) 大器清晰，line-height: 1.35 徹底防上下筆畫削邊 */
    .field-input, .field-select {
      min-height: var(--ctrl-height);
      height: auto;
      width: 100%;
      min-width: 0;
      padding: 4px 10px;
      line-height: 1.35;
      border: 1.5px solid var(--border-color);
      border-radius: 4px;
      font-size: var(--font-size-base);
      font-family: inherit;
      color: var(--text-main);
      background: var(--bg-input);
      outline: none;
      box-sizing: border-box;
      transition: all 0.15s ease;
    }

    .field-input:focus, .field-select:focus {
      border-color: var(--color-cost-ice);
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
      background: #1E2B45;
    }

    body.theme-light .field-input:focus, body.theme-light .field-select:focus {
      background: #FFFFFF;
    }

    /* 數字輸入框等寬 var(--font-size-base) 加粗醒目 */
    .field-input.mono {
      font-family: var(--font-mono);
      font-size: var(--font-size-base);
      text-align: right;
      font-weight: 700;
      color: var(--color-cost-ice);
    }

    .field-input.field-input--code {
      text-align: left;
    }

    .input-addon-group {
      display: flex;
      align-items: stretch;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .input-addon-group .field-input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      flex: 1 1 0%;
      min-width: 0;
    }

    .addon-text {
      min-height: var(--ctrl-height);
      height: auto;
      padding: 4px clamp(8px, 0.6vw, 12px);
      line-height: 1.35;
      background: var(--bg-panel-sub);
      border: 1.5px solid var(--border-color);
      border-left: none;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      font-size: var(--font-size-sm);
      color: var(--text-sub);
      display: flex;
      align-items: center;
      white-space: nowrap;
      font-weight: 600;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .addon-select {
      min-height: var(--ctrl-height);
      height: auto;
      padding: 4px clamp(6px, 0.5vw, 10px);
      line-height: 1.35;
      background: var(--bg-panel-sub);
      border: 1.5px solid var(--border-color);
      border-left: none;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      font-size: var(--font-size-sm);
      color: var(--text-main);
      font-weight: 600;
      flex-shrink: 0;
      box-sizing: border-box;
      cursor: pointer;
      outline: none;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .addon-select:focus {
      border-color: var(--color-primary);
      background: var(--bg-panel);
    }

    /* ==========================================================================
       Slice A7 金額稅務與商業定價列 (TAXKIND, UnitPrice, PreTax, Tax, Total)
       ========================================================================== */
    .pricing-tax-row {
      margin-top: 6px;
      padding: 8px 10px;
      border-radius: 6px;
      border: 1.5px solid var(--border-color);
      background: var(--bg-panel-sub);
      align-items: flex-end;
      box-sizing: border-box;
      gap: 10px;
    }

    body.theme-light .pricing-tax-row,
    .theme-light .pricing-tax-row {
      background: #F8FAFC;
      border: 1.5px solid #CBD5E1;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .pricing-tax-row .field-label {
      font-size: var(--font-size-xs, 12px);
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 3px;
      display: flex;
      align-items: center;
    }

    body.theme-light .pricing-tax-row .field-label,
    .theme-light .pricing-tax-row .field-label {
      color: #0F172A !important;
    }

    .pricing-tax-row .field-input,
    .pricing-tax-row .field-select {
      min-height: 38px !important;
      line-height: 1.35;
      font-size: var(--font-size-base, 13px);
      box-sizing: border-box;
    }

    body.theme-light .pricing-tax-row .field-input,
    body.theme-light .pricing-tax-row .field-select,
    .theme-light .pricing-tax-row .field-input,
    .theme-light .pricing-tax-row .field-select {
      background: #FFFFFF;
      border: 1.5px solid #CBD5E1;
      color: #0F172A;
    }

    body.theme-light .pricing-tax-row .addon-text,
    .theme-light .pricing-tax-row .addon-text {
      background: #F1F5F9;
      border: 1.5px solid #CBD5E1;
      border-left: none;
      color: #475569;
    }

    .pricing-tax-row .pre-tax-input[readonly] {
      background: var(--bg-panel-sub);
      font-weight: 700;
      cursor: default;
    }

    body.theme-light .pricing-tax-row .pre-tax-input[readonly],
    .theme-light .pricing-tax-row .pre-tax-input[readonly] {
      background: #F1F5F9;
      color: #0F172A;
      border: 1.5px solid #CBD5E1;
    }

    .pricing-tax-row .tax-amount-input[readonly] {
      background: var(--bg-panel-sub);
      font-weight: 700;
      color: var(--color-quote-green, #059669);
      cursor: default;
    }

    body.theme-light .pricing-tax-row .tax-amount-input[readonly],
    .theme-light .pricing-tax-row .tax-amount-input[readonly] {
      background: #F1F5F9;
      color: #047857 !important;
      font-weight: 800;
      border: 1.5px solid #CBD5E1;
    }

    .total-amount-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 38px !important;
      height: 38px;
      line-height: 1.35;
      border-radius: 4px;
      padding: 0 12px;
      box-sizing: border-box;
      font-weight: 800;
      background: rgba(5, 150, 105, 0.12);
      border: 1.5px solid var(--color-quote-green, #059669);
      color: var(--color-quote-green, #059669);
    }

    body.theme-light .total-amount-box,
    .theme-light .total-amount-box {
      background: #ECFDF5;
      border: 1.5px solid #059669;
      color: #047857;
      box-shadow: 0 1px 2px rgba(5, 150, 105, 0.1);
    }

    .total-amount-box .total-amount-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-sub);
    }

    body.theme-light .total-amount-box .total-amount-label,
    .theme-light .total-amount-box .total-amount-label {
      color: #065F46;
    }

    .total-amount-box .total-amount-val {
      font-size: 16px;
      font-weight: 800;
      color: inherit;
    }

    /* ==========================================================================
       表頭人員設定區 (負責業務員與工務人員雙下拉控制項)
       ========================================================================== */
    .staff-picker-col .staff-input-group {
      display: flex;
      gap: 6px;
      width: 100%;
    }

    #salesPersonSelect,
    #plannerSelect {
      min-height: 38px !important;
      height: 38px;
      line-height: 1.35;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      font-size: var(--font-size-base, 13px);
      font-weight: 600;
    }

    body.theme-light #salesPersonSelect,
    body.theme-light #plannerSelect,
    .theme-light #salesPersonSelect,
    .theme-light #plannerSelect {
      background: #FFFFFF;
      border: 1.5px solid #CBD5E1;
      color: #0F172A;
    }

    body.theme-light #salesPersonSelect:focus,
    body.theme-light #plannerSelect:focus,
    .theme-light #salesPersonSelect:focus,
    .theme-light #plannerSelect:focus {
      border-color: #0284C7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }

    /* 急件開關 (緊湊小徽章版) */
    .switch-compact {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      user-select: none;
      padding: 2px 6px;
      background: var(--bg-panel);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      white-space: nowrap;
    }

    .switch-compact input {
      display: none;
    }

    .switch-rail {
      width: 30px;
      height: 16px;
      background: var(--border-strong);
      border-radius: 8px;
      position: relative;
      transition: background 0.15s ease;
      flex-shrink: 0;
    }

    .switch-rail::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 12px;
      height: 12px;
      background: #FFFFFF;
      border-radius: 50%;
      transition: transform 0.15s ease;
    }

    .switch-compact input:checked + .switch-rail {
      background: var(--color-danger);
    }

    .switch-compact input:checked + .switch-rail::after {
      transform: translateX(14px);
    }

    /* 通用自適應響應表格容器 */
    .table-container-responsive {
      width: 100%;
      overflow-x: auto;
      box-sizing: border-box;
    }

    /* 5 大工序手風琴節點 (移除 overflow:hidden，給予右邊充裕留白) */
    .station-node {
      border: 1.5px solid var(--border-color);
      border-radius: 6px;
      background: var(--bg-panel);
      margin-bottom: 12px;
      box-sizing: border-box;
      transition: all 0.2s ease;
    }

    .station-node:last-child {
      margin-bottom: 0;
    }

    .station-node:hover {
      border-color: var(--color-cost-ice);
    }

    /* 錨點跳轉發光高亮動畫 */
    .station-node.station-highlight {
      border-color: var(--color-cost-ice) !important;
      box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.4), 0 6px 20px rgba(56, 189, 248, 0.25) !important;
      transform: scale(1.008);
      background: #16243A !important;
    }

    .station-node-header {
      padding: 12px 18px;
      background: var(--bg-panel-sub);
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      box-sizing: border-box;
    }

    .station-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .station-no-pill {
      width: 26px;
      height: 26px;
      border-radius: 5px;
      background: var(--color-cost-bg);
      color: var(--color-cost-ice);
      border: 1px solid var(--color-cost-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      font-family: var(--font-mono);
      flex-shrink: 0;
    }

    .station-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-main);
      white-space: nowrap;
    }

    .station-type {
      font-size: 11.5px;
      padding: 2px 7px;
      background: var(--bg-panel);
      color: var(--text-sub);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-weight: 600;
      white-space: nowrap;
    }

    .station-header-right {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    .station-cost-preview {
      font-size: 14px;
      font-family: var(--font-mono);
      font-weight: 800;
      color: var(--text-sub);
      white-space: nowrap;
    }

    .station-cost-preview span {
      color: var(--color-cost-ice);
      font-size: 16px;
    }

    .station-chevron {
      color: var(--text-muted);
      font-size: 12px;
      transition: transform 0.15s ease;
      flex-shrink: 0;
    }

    .station-node.open .station-chevron {
      transform: rotate(180deg);
    }

    .station-node-body {
      padding: 16px 18px;
      border-top: 1.5px solid var(--border-color);
      display: none;
      background: var(--bg-panel);
      box-sizing: border-box;
    }

    .station-node.open .station-node-body {
      display: block;
    }

        /* ==========================================================================
       3.5 核心製程流水線與多列明細工作台 (極致緊湊高密度版)
       ========================================================================== */
    .proc-route-stream-wrapper {
      position: relative;
      margin-bottom: 4px;
    }

    .proc-route-stream {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      padding: 2px 2px 6px 2px;
      scrollbar-gutter: stable;
      position: relative;
    }

    .proc-route-node {
      flex: 0 0 clamp(120px, 8vw, 150px);
      background: var(--bg-panel-sub);
      border: 1.5px solid var(--border-color);
      border-radius: 5px;
      padding: 3px 6px;
      cursor: pointer;
      position: relative;
      transition: all .15s ease;
      user-select: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: clamp(38px, 2.2rem + 0.2vh, 46px);
      box-sizing: border-box;
    }

    .proc-route-node:hover {
      border-color: var(--color-cost-ice);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .proc-route-node.is-selected {
      border-color: var(--color-cost-ice);
      background: rgba(56, 189, 248, 0.08);
      box-shadow: 0 0 0 1px var(--color-cost-ice), 0 2px 10px rgba(56, 189, 248, 0.2);
    }

    .proc-route-node.is-selected::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: var(--node-arrow-color, var(--color-cost-ice)) transparent transparent transparent;
    }

    /* 拖曳中狀態 (半透明、微縮放、藍光外框) */
    .proc-route-node.is-dragging {
      opacity: 0.42;
      transform: scale(0.96);
      border: 1.5px dashed var(--color-cost-ice) !important;
      box-shadow: 0 0 14px rgba(56, 189, 248, 0.45) !important;
      cursor: grabbing !important;
    }

    /* 放置目標視覺指示線 (亮藍色發光垂直線) */
    .proc-route-node.drag-target-left::before {
      content: '';
      position: absolute;
      top: -4px;
      bottom: -4px;
      left: -5px;
      width: 4px;
      background: var(--color-cost-ice);
      border-radius: 2px;
      box-shadow: 0 0 10px var(--color-cost-ice);
      z-index: 25;
      pointer-events: none;
      animation: pulseIndicator .7s infinite alternate;
    }

    .proc-route-node.drag-target-right::before {
      content: '';
      position: absolute;
      top: -4px;
      bottom: -4px;
      right: -5px;
      width: 4px;
      background: var(--color-cost-ice);
      border-radius: 2px;
      box-shadow: 0 0 10px var(--color-cost-ice);
      z-index: 25;
      pointer-events: none;
      animation: pulseIndicator .7s infinite alternate;
    }

    @keyframes pulseIndicator {
      from { opacity: 0.65; transform: scaleY(0.92); }
      to { opacity: 1; transform: scaleY(1.08); }
    }

    /* 拖曳手柄圖示 */
    .proc-drag-handle {
      cursor: grab;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1;
      padding: 0 2px;
      margin-right: 2px;
      user-select: none;
      transition: color .15s, background .15s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .proc-drag-handle:hover {
      color: var(--color-cost-ice);
      background: rgba(56, 189, 248, 0.15);
    }

    .proc-drag-handle:active {
      cursor: grabbing;
    }

    .proc-node-title {
      font-size: var(--font-size-sm);
      font-weight: 700;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .proc-node-title .proc-color-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .proc-node-meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 2px;
    }

    .proc-node-count-badge {
      font-size: var(--font-size-xs);
      font-weight: 700;
      padding: 0 4px;
      border-radius: 3px;
      background: var(--bg-panel);
      color: var(--text-sub);
      border: 1px solid var(--border-color);
    }

    .proc-route-node.is-selected .proc-node-count-badge {
      color: var(--color-cost-ice);
      border-color: var(--color-cost-border);
      background: var(--color-cost-bg);
    }

    .proc-node-status-tag {
      font-size: var(--font-size-xs);
      font-weight: 700;
    }

    .proc-node-status-tag.done { color: #34D399; }
    .proc-node-status-tag.active { color: #38BDF8; }
    .proc-node-status-tag.pending { color: var(--text-muted); }
    .proc-node-status-tag.blocked { color: #F87171; }

    /* 浮動操作按鈕 (◀, ▶, 🗑️) 常態微露出 0.4，hover 完全顯現 */
    .proc-floating-actions {
      position: absolute;
      top: -7px;
      right: 2px;
      display: flex;
      gap: 2px;
      z-index: 10;
    }

    .proc-floating-btn {
      width: 17px;
      height: 17px;
      border-radius: 3px;
      background: #0F172A;
      color: var(--text-sub);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      cursor: pointer;
      line-height: 1;
      padding: 0;
      transition: all .15s;
      opacity: 0.4;
    }

    .proc-floating-btn.btn-del-proc {
      opacity: 0.25;
    }

    .proc-route-node:hover .proc-floating-btn,
    .proc-floating-btn:hover {
      opacity: 1;
    }

    .proc-floating-btn:hover {
      background: var(--color-cost-ice);
      color: #0A0E17;
      border-color: var(--color-cost-ice);
    }

    .proc-floating-btn.btn-del-proc:hover {
      background: #EF4444;
      color: #fff;
      border-color: #EF4444;
    }

    /* 工作台標題列「站序快速指定」下拉選單 */
    .station-seq-jump-wrap {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: 6px;
      background: rgba(255, 255, 255, 0.03);
      padding: 1px 6px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
    }

    .station-seq-jump-select {
      min-height: 38px;
      height: 38px;
      padding: 4px 8px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
      box-sizing: border-box;
      background: var(--bg-panel);
      color: var(--color-cost-ice);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      cursor: pointer;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }

    .station-seq-jump-select:hover,
    .station-seq-jump-select:focus {
      border-color: var(--color-cost-ice);
      box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25);
    }

    /* 快速新增客戶按鈕與未建檔晶片 */
    .btn-quick-add-cust {
      background: rgba(56, 189, 248, 0.12);
      color: var(--color-cost-ice);
      border: 1px solid rgba(56, 189, 248, 0.35);
      border-radius: 4px;
      padding: 1px 7px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      line-height: 1.4;
      transition: all .15s ease;
      white-space: nowrap;
    }
    .btn-quick-add-cust:hover {
      background: var(--color-cost-ice);
      color: #0A0E17;
      box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
    }

    .cust-not-exists-chip {
      margin-top: 3px;
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #FBBF24;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      animation: fadeInSlide .15s ease-out;
      line-height: 1.4;
    }
    .cust-not-exists-chip:hover {
      background: rgba(245, 158, 11, 0.22);
      border-color: #F59E0B;
    }

    /* 快速新增廠商按鈕與未建檔晶片 */
    .btn-quick-add-vendor {
      background: rgba(56, 189, 248, 0.12);
      color: var(--color-cost-ice);
      border: 1px solid rgba(56, 189, 248, 0.35);
      border-radius: 4px;
      padding: 1px 7px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      line-height: 1.4;
      transition: all .15s ease;
      white-space: nowrap;
    }
    .btn-quick-add-vendor:hover {
      background: var(--color-cost-ice);
      color: #0A0E17;
      box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
    }

    .vendor-not-exists-chip,
    .ewm-quick-vendor-chip {
      margin-top: 3px;
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #FBBF24;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      animation: fadeInSlide .15s ease-out;
      line-height: 1.4;
    }
    .vendor-not-exists-chip:hover,
    .ewm-quick-vendor-chip:hover {
      background: rgba(245, 158, 11, 0.22);
      border-color: #F59E0B;
    }

    /* 快速新增廠商彈窗 (Quick Add Vendor Modal) */
    .ewm-quick-vendor-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(5px);
      z-index: 3200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      animation: fadeInModal .15s ease-out;
    }
    .ewm-quick-vendor-dialog {
      width: 100%;
      max-width: 580px;
      background: #0D131F;
      border: 1.5px solid rgba(56, 189, 248, 0.35);
      border-radius: 8px;
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 24px rgba(56, 189, 248, 0.2);
      color: var(--text-main, #F8FAFC);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: scaleUpModal .15s ease-out;
    }
    .ewm-quick-vendor-head {
      padding: 12px 18px;
      border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.02);
    }
    .ewm-quick-vendor-title {
      font-size: 14.5px;
      font-weight: 800;
      color: var(--text-main, #F8FAFC);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ewm-quick-vendor-close {
      border: 0;
      background: transparent;
      color: var(--text-sub, #94A3B8);
      font-size: 16px;
      line-height: 1;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .ewm-quick-vendor-close:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #FFFFFF;
    }
    .ewm-quick-vendor-body {
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: calc(85vh - 120px);
      overflow-y: auto;
    }
    .ewm-quick-vendor-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 520px) {
      .ewm-quick-vendor-row { grid-template-columns: 1fr; }
    }
    .ewm-quick-vendor-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .ewm-quick-vendor-label {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-sub, #94A3B8);
      line-height: 1.3;
    }
    .ewm-quick-vendor-label .req {
      color: #F87171;
      margin-left: 2px;
    }
    .ewm-quick-vendor-input,
    .ewm-quick-vendor-select {
      width: 100%;
      height: 32px;
      background: #141E33;
      border: 1px solid rgba(56, 189, 248, 0.25);
      border-radius: 4px;
      padding: 4px 10px;
      color: #F8FAFC;
      font-size: 12.5px;
      outline: none;
      box-sizing: border-box;
      transition: all 0.15s ease;
    }
    .ewm-quick-vendor-input:focus,
    .ewm-quick-vendor-select:focus {
      border-color: var(--color-cost-ice, #38BDF8);
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
    }
    .ewm-quick-vendor-input.mono {
      font-family: var(--font-mono, ui-monospace, monospace);
    }
    .ewm-quick-vendor-error {
      padding: 6px 12px;
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.35);
      border-radius: 4px;
      color: #F87171;
      font-size: 11.5px;
      font-weight: 600;
    }
    .ewm-quick-vendor-foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 18px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(0, 0, 0, 0.25);
    }
    .ewm-quick-vendor-btn-cancel {
      padding: 6px 14px;
      background: transparent;
      border: 1px solid rgba(148, 163, 184, 0.3);
      border-radius: 4px;
      color: #94A3B8;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      height: 30px;
    }
    .ewm-quick-vendor-btn-cancel:hover {
      background: rgba(255, 255, 255, 0.06);
      color: #FFFFFF;
    }
    .ewm-quick-vendor-btn-save {
      padding: 6px 16px;
      background: var(--color-cost-ice, #38BDF8);
      border: 1px solid var(--color-cost-ice, #38BDF8);
      border-radius: 4px;
      color: #0A0E17;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s ease;
      height: 30px;
    }
    .ewm-quick-vendor-btn-save:hover {
      filter: brightness(1.1);
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
    }


    /* 快速新增客戶彈窗 (Quick Add Customer Modal) */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(5px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      animation: fadeInModal .15s ease-out;
    }
    @keyframes fadeInModal {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .quick-add-modal {
      width: 100%;
      max-width: 580px;
      background: #0D131F;
      border: 1.5px solid rgba(56, 189, 248, 0.35);
      border-radius: 8px;
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 24px rgba(56, 189, 248, 0.2);
      color: var(--text-main);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: scaleUpModal .15s ease-out;
    }
    @keyframes scaleUpModal {
      from { transform: scale(0.95); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .modal-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.02);
    }
    .modal-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--text-main);
    }
    .modal-badge {
      font-size: 10.5px;
      padding: 1px 6px;
      border-radius: 3px;
      background: rgba(56, 189, 248, 0.15);
      color: var(--color-cost-ice);
      font-weight: 700;
    }

    .modal-body {
      padding: 16px;
      max-height: 75vh;
      overflow-y: auto;
    }
    .modal-form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    .modal-form-grid .full-width {
      grid-column: span 2;
    }
    .modal-label {
      display: block;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-sub);
      margin-bottom: 4px;
      line-height: 1.3;
    }
    .modal-input, .modal-select {
      width: 100%;
      min-height: 38px;
      height: 38px;
      background: var(--bg-panel);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 4px 10px;
      color: var(--text-main);
      font-size: 13px;
      line-height: 1.35;
      outline: none;
      box-sizing: border-box;
      transition: all .15s;
    }
    .modal-input:focus, .modal-select:focus {
      border-color: var(--color-cost-ice);
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
    }
    .modal-error-msg {
      margin-top: 10px;
      padding: 6px 10px;
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.35);
      border-radius: 4px;
      color: #F87171;
      font-size: 11.5px;
      font-weight: 600;
    }

    .modal-footer {
      padding: 12px 16px;
      border-top: 1px solid var(--border-color);
      background: rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }
    .btn-modal-cancel {
      padding: 6px 14px;
      background: transparent;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-sub);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
    }
    .btn-modal-cancel:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-main);
    }
    .btn-modal-submit {
      padding: 6px 16px;
      background: var(--color-cost-ice);
      border: 1px solid var(--color-cost-ice);
      border-radius: 4px;
      color: #0A0E17;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all .15s;
    }
    .btn-modal-submit:hover {
      background: #7dd3fc;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
    }

    /* ════════════════════════════════════════════════════════════════
       快速新增客戶至主檔彈窗 (Quick Add Customer Modal)
       對齊全系統標準 Modal 設計規範 (docs/ux/system-ux-standard.md §4)
       ════════════════════════════════════════════════════════════════ */
    .modal-overlay,
    .ewm-quick-cust-backdrop,
    .ewm-quick-cust-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 3200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;
    }

    .modal-overlay.show,
    .ewm-quick-cust-backdrop.show,
    .ewm-quick-cust-modal.show {
      display: flex;
    }

    .quick-cust-modal-dialog,
    .ewm-quick-cust-dialog {
      background: var(--bg-panel, #0F172A);
      border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
      border-radius: 8px;
      width: 620px;
      max-width: min(640px, 90vw);
      max-height: min(85vh, calc(100vh - 48px));
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: quickCustModalFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes quickCustModalFadeIn {
      from { opacity: 0; transform: scale(0.97) translateY(-6px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* 標題列 (Header) */
    .quick-cust-modal-header,
    .ewm-quick-cust-head {
      padding: 12px 18px;
      background: var(--bg-panel, #0F172A);
      border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 48px;
      box-sizing: border-box;
    }

    .quick-cust-modal-title,
    .ewm-quick-cust-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-main, #F1F5F9);
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1.3;
    }

    .quick-cust-modal-close,
    .ewm-quick-cust-close {
      background: transparent;
      border: none;
      color: var(--text-muted, #94A3B8);
      font-size: 16px;
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      transition: background-color 0.15s, color 0.15s;
    }

    .quick-cust-modal-close:hover,
    .ewm-quick-cust-close:hover {
      color: var(--text-main, #F8FAFC);
      background: rgba(255, 255, 255, 0.08);
    }

    /* 彈窗內容區 (Body) */
    .quick-cust-modal-body,
    .ewm-quick-cust-body {
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      max-height: calc(85vh - 110px);
    }

    .ewm-quick-cust-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .ewm-quick-cust-label {
      font-size: 12.5px;
      color: var(--text-sub, #94A3B8);
      font-weight: 600;
      line-height: 1.3;
    }

    .ewm-quick-cust-label .req {
      color: var(--danger-500, #DC2626);
      font-weight: 700;
      margin-left: 4px;
    }

    /* 輸入框與下拉選單：全系統 38px 控制項規範 */
    .ewm-quick-cust-input,
    .ewm-quick-cust-select {
      min-height: 38px !important;
      height: 38px !important;
      background: var(--bg-input, #1E293B);
      border: 1px solid var(--border-color, #334155);
      border-radius: 6px;
      color: var(--text-main, #F8FAFC);
      padding: 0 12px;
      font-size: 13px;
      line-height: 1.35;
      box-sizing: border-box;
      width: 100%;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .ewm-quick-cust-input:focus,
    .ewm-quick-cust-select:focus {
      outline: none;
      border-color: var(--primary, #0284C7);
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }

    .ewm-quick-cust-error {
      color: var(--danger-700, #B91C1C);
      font-size: 12.5px;
      margin-top: 4px;
      background: var(--danger-50, #FEF2F2);
      padding: 8px 12px;
      border-radius: 6px;
      border: 1px solid var(--danger-500, #DC2626);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* 底部操作列 (Footer) */
    .quick-cust-modal-footer,
    .ewm-quick-cust-foot {
      padding: 12px 18px;
      background: var(--bg-panel, #0F172A);
      border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      min-height: 52px;
      box-sizing: border-box;
    }

    .ewm-quick-cust-btn-cancel {
      min-height: 38px !important;
      height: 38px !important;
      padding: 0 16px !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      border-radius: 6px !important;
      border: 1px solid var(--border-color, #475569) !important;
      background: transparent !important;
      color: var(--text-main, #E2E8F0) !important;
      cursor: pointer !important;
      transition: background-color 0.15s, border-color 0.15s !important;
    }

    .ewm-quick-cust-btn-cancel:hover {
      background: rgba(255, 255, 255, 0.06) !important;
      border-color: #64748B !important;
    }

    .ewm-quick-cust-btn-save {
      min-height: 38px !important;
      height: 38px !important;
      padding: 0 18px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      border-radius: 6px !important;
      border: 1px solid var(--primary, #0284C7) !important;
      background: var(--primary, #0284C7) !important;
      color: #FFFFFF !important;
      cursor: pointer !important;
      transition: background-color 0.15s, box-shadow 0.15s !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    .ewm-quick-cust-btn-save:hover {
      background: #0369A1 !important;
      border-color: #0369A1 !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35) !important;
    }

    /* ════════════════════════════════════════════════════════════════
       淺色主題對齊 (Light Theme Parity)
       ════════════════════════════════════════════════════════════════ */
    body.theme-light .quick-cust-modal-dialog,
    body.theme-light .ewm-quick-cust-dialog,
    .theme-light .quick-cust-modal-dialog,
    .theme-light .ewm-quick-cust-dialog {
      background: #FFFFFF !important;
      border: 1px solid #CBD5E1 !important;
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15), 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    }

    body.theme-light .quick-cust-modal-header,
    body.theme-light .ewm-quick-cust-head,
    .theme-light .quick-cust-modal-header,
    .theme-light .ewm-quick-cust-head {
      background: #FFFFFF !important;
      border-bottom: 1px solid #E2E8F0 !important;
    }

    body.theme-light .quick-cust-modal-title,
    body.theme-light .ewm-quick-cust-title,
    .theme-light .quick-cust-modal-title,
    .theme-light .ewm-quick-cust-title {
      color: #0F172A !important;
    }

    body.theme-light .quick-cust-modal-close,
    body.theme-light .ewm-quick-cust-close,
    .theme-light .quick-cust-modal-close,
    .theme-light .ewm-quick-cust-close {
      color: #64748B !important;
    }

    body.theme-light .quick-cust-modal-close:hover,
    body.theme-light .ewm-quick-cust-close:hover,
    .theme-light .quick-cust-modal-close:hover,
    .theme-light .ewm-quick-cust-close:hover {
      color: #0F172A !important;
      background: #F1F5F9 !important;
    }

    body.theme-light .quick-cust-modal-body,
    body.theme-light .ewm-quick-cust-body,
    .theme-light .quick-cust-modal-body,
    .theme-light .ewm-quick-cust-body {
      background: #FFFFFF !important;
    }

    body.theme-light .ewm-quick-cust-label,
    .theme-light .ewm-quick-cust-label {
      color: #475569 !important;
    }

    body.theme-light .ewm-quick-cust-input,
    body.theme-light .ewm-quick-cust-select,
    .theme-light .ewm-quick-cust-input,
    .theme-light .ewm-quick-cust-select {
      background: #FFFFFF !important;
      border: 1px solid #CBD5E1 !important;
      color: #0F172A !important;
    }

    body.theme-light .ewm-quick-cust-input:focus,
    body.theme-light .ewm-quick-cust-select:focus,
    .theme-light .ewm-quick-cust-input:focus,
    .theme-light .ewm-quick-cust-select:focus {
      border-color: #0284C7 !important;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2) !important;
    }

    body.theme-light .quick-cust-modal-footer,
    body.theme-light .ewm-quick-cust-foot,
    .theme-light .quick-cust-modal-footer,
    .theme-light .ewm-quick-cust-foot {
      background: #F8FAFC !important;
      border-top: 1px solid #E2E8F0 !important;
    }

    body.theme-light .ewm-quick-cust-btn-cancel,
    .theme-light .ewm-quick-cust-btn-cancel {
      border-color: #CBD5E1 !important;
      background: #FFFFFF !important;
      color: #334155 !important;
    }

    body.theme-light .ewm-quick-cust-btn-cancel:hover,
    .theme-light .ewm-quick-cust-btn-cancel:hover {
      background: #F1F5F9 !important;
      border-color: #94A3B8 !important;
      color: #0F172A !important;
    }

    .btn-quick-add-cust {
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.15s ease;
      user-select: none;
    }

    .btn-quick-add-cust:hover {
      background: rgba(56, 189, 248, 0.15) !important;
      border-color: var(--color-cost-ice) !important;
      color: #fff !important;
      box-shadow: 0 0 6px rgba(56, 189, 248, 0.3);
    }

    .proc-route-arrow {
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 800;
      flex-shrink: 0;
    }

    .proc-add-node-btn {
      flex: 0 0 clamp(85px, 6vw, 110px);
      height: clamp(42px, 2.4rem + 0.3vh, 50px);
      border: 1.5px dashed var(--border-strong);
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.02);
      color: var(--text-sub);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 4px;
      cursor: pointer;
      transition: all .15s;
      flex-shrink: 0;
      padding: 0 6px;
      font-size: var(--font-size-sm);
    }

    .proc-add-node-btn:hover:not(:disabled) {
      border-color: var(--color-cost-ice);
      background: var(--color-cost-bg);
      color: var(--color-cost-ice);
      transform: translateY(-1px);
    }

    .proc-add-node-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      border-style: solid;
    }

    /* ＋ 加入製程站別晶片選擇區 (quick-proc-presets) */
    .quick-proc-presets {
      background: var(--bg-panel-sub);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 8px 10px;
      margin-bottom: 8px;
      animation: fadeInSlide .15s ease-out;
    }

    @keyframes fadeInSlide {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .quick-proc-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--text-sub);
      font-size: var(--font-size-sm);
      font-weight: 700;
      margin-bottom: 6px;
    }

    .btn-picker-close {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
      padding: 1px 5px;
      border-radius: 3px;
    }

    .btn-picker-close:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-main);
    }

    .quick-proc-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .quick-proc-chip {
      background: var(--bg-panel);
      color: var(--text-main);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 4px 8px;
      font-size: var(--font-size-sm);
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all .12s ease;
    }

    .quick-proc-chip:hover {
      border-color: var(--color-cost-ice);
      background: var(--color-cost-bg);
      color: var(--color-cost-ice);
      transform: translateY(-1px);
    }

    .quick-proc-chip .chip-icon {
      width: 16px;
      height: 16px;
      border-radius: 3px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
    }

    /* 當前站別工作台 (proc-detail-workbench，極致緊湊版) */
    .proc-detail-workbench {
      background: var(--bg-panel);
      border: 1.5px solid var(--border-color);
      border-radius: 6px;
      padding: 6px 10px;
      margin-top: 2px;
    }

    .proc-workbench-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--border-color);
      gap: 8px;
      flex-wrap: wrap;
    }

    .workbench-title-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .workbench-icon {
      width: 24px;
      height: 24px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
    }

    .workbench-title {
      font-size: var(--font-size-md);
      font-weight: 700;
      color: var(--text-main);
    }

    .workbench-tag {
      font-size: var(--font-size-xs);
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 3px;
      letter-spacing: 0.3px;
    }

    .workbench-toolbar {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .wb-status-wrapper {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .wb-progress-badge {
      font-size: var(--font-size-xs);
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .wb-progress-badge.done { background: rgba(52, 211, 153, 0.15); color: #34D399; border: 1px solid rgba(52, 211, 153, 0.35); }
    .wb-progress-badge.active { background: rgba(56, 189, 248, 0.15); color: #38BDF8; border: 1px solid rgba(56, 189, 248, 0.35); }
    .wb-progress-badge.pending { background: rgba(148, 163, 184, 0.12); color: #94A3B8; border: 1px solid var(--border-color); }
    .wb-progress-badge.blocked { background: rgba(248, 113, 113, 0.15); color: #F87171; border: 1px solid rgba(248, 113, 113, 0.35); }

    .status-badge-select {
      background: var(--bg-input);
      color: var(--text-main);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 4px 10px;
      font-size: var(--font-size-sm);
      font-weight: 600;
      line-height: 1.38;
      box-sizing: border-box;
      outline: none;
      cursor: pointer;
      min-height: 38px;
      height: 38px;
    }

    .status-badge-select:focus {
      border-color: var(--color-cost-ice);
    }

    .btn-action-sm {
      min-height: 38px;
      height: clamp(38px, 2.2rem + 0.2vh, 42px);
      padding: 4px 10px;
      font-size: var(--font-size-sm);
      font-weight: 700;
      border-radius: 4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      transition: all .12s;
      border: 1px solid var(--border-color);
      background: var(--bg-panel-sub);
      color: var(--text-main);
      white-space: nowrap;
    }

    .btn-action-sm:hover {
      border-color: var(--color-cost-ice);
      background: var(--color-cost-bg);
      color: var(--color-cost-ice);
    }

    .btn-action-sm.btn-danger-ghost {
      color: #F87171;
      border-color: rgba(248, 113, 113, 0.35);
      background: rgba(248, 113, 113, 0.08);
    }

    .btn-action-sm.btn-danger-ghost:hover {
      background: rgba(248, 113, 113, 0.2);
      border-color: #F87171;
    }

    /* 技術備註列 (高度自適應 var(--ctrl-height)) */
    .wb-station-notes-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }

    .wb-station-notes-row label {
      font-size: var(--font-size-sm);
      font-weight: 700;
      color: var(--text-sub);
      white-space: nowrap;
    }

    .wb-station-notes-row input {
      flex: 1;
      height: var(--ctrl-height);
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 2px 8px;
      color: var(--text-main);
      font-size: var(--font-size-base);
      outline: none;
    }

    .wb-station-notes-row input:focus {
      border-color: var(--color-cost-ice);
    }

    /* 放數/損耗快選條 (autocalc-strip，流體自適應) */
    .autocalc-strip {
      background: var(--bg-panel-sub);
      border: 1px solid var(--border-color);
      border-radius: 5px;
      padding: 3px 8px;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--font-size-sm);
      color: var(--text-sub);
      gap: 6px;
      flex-wrap: wrap;
    }

    .autocalc-strip strong {
      color: var(--color-cost-ice);
      font-family: var(--font-mono);
    }

    .autocalc-btn-group {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    .autocalc-btn {
      background: var(--bg-panel);
      border: 1px solid var(--border-color);
      border-radius: 3px;
      padding: 1px 6px;
      font-size: var(--font-size-xs);
      font-weight: 700;
      color: var(--text-sub);
      cursor: pointer;
      height: clamp(24px, 1.4rem + 0.2vh, 28px);
      line-height: 18px;
      transition: all .12s;
    }

    .autocalc-btn:hover {
      border-color: var(--color-cost-ice);
      color: var(--color-cost-ice);
      background: var(--color-cost-bg);
    }

    .autocalc-btn.active {
      border-color: var(--color-cost-ice);
      background: var(--color-cost-ice);
      color: #0A0E17;
    }

    /* 多列表格 (real-lines-table，流體比例放大，數字加粗清晰) */
    .real-lines-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--font-size-base);
    }

    .real-lines-table th {
      padding: var(--cell-padding-y) var(--cell-padding-x);
      background: var(--bg-panel-sub);
      color: var(--text-sub);
      border: 1px solid var(--border-color);
      border-bottom: 2px solid var(--border-strong);
      font-size: var(--font-size-sm);
      font-weight: 700;
      text-align: left;
      white-space: nowrap;
    }

    .real-lines-table td {
      padding: var(--cell-padding-y) var(--cell-padding-x);
      border: 1px solid var(--border-color);
      vertical-align: middle;
      white-space: nowrap;
      background: var(--bg-panel);
      color: var(--text-main);
      font-size: var(--font-size-base);
    }

    .real-lines-table tr:hover td {
      background: rgba(255, 255, 255, 0.02);
    }

    .real-lines-table .row-seq {
      text-align: center;
      font-weight: 700;
      color: var(--text-muted);
      font-family: var(--font-mono);
      width: 28px;
      font-size: var(--font-size-xs);
    }

    /* 表格內部輸入框防削邊強制規則 (Zero-Clipping Invariant) */
    .table-cell-input,
    table input,
    table select,
    table textarea,
    .real-lines-table input,
    .real-lines-table select {
      min-height: 38px !important;
      padding-top: 4px !important;
      padding-bottom: 4px !important;
      line-height: 1.35 !important;
      box-sizing: border-box !important;
    }

    .table-cell-input {
      width: 100%;
      min-height: 38px;
      height: auto;
      background: var(--bg-input);
      border: 1.5px solid var(--border-color);
      border-radius: 4px;
      padding: 4px clamp(6px, 0.5vw, 8px);
      font-size: var(--font-size-base);
      line-height: 1.38;
      color: var(--text-main);
      box-sizing: border-box;
      outline: none;
    }

    .table-cell-input:focus {
      border-color: var(--color-cost-ice);
      box-shadow: 0 0 0 1px var(--color-cost-ice);
    }

    .table-cell-input.num {
      font-family: var(--font-mono);
      font-size: var(--font-size-base);
      font-weight: 700;
      text-align: right;
    }

    .subtotal-cell {
      color: var(--color-cost-ice);
      font-family: var(--font-mono);
      font-weight: 800;
      font-size: var(--font-size-base);
      text-align: right;
      padding-right: 5px !important;
    }

    .btn-row-del {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 11px;
      padding: 1px 3px;
      border-radius: 3px;
      transition: all .12s;
    }

    .btn-row-del:hover {
      background: rgba(248, 113, 113, 0.15);
      color: #F87171;
    }

/* ==========================================================================
       4. 👉 右側固定分割面板 (Compact Split Sidebar) — 寬度擴大至 420px，徹底防截斷
       ========================================================================== */
    .workbench-split-sidebar {
      width: var(--sidebar-width); /* 420px */
      min-width: var(--sidebar-width); /* 展開時鎖定 420px，徹底杜絕截斷 */
      height: 100%;
      background: var(--bg-panel);
      border-left: 2px solid var(--border-color);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      z-index: 40;
      box-sizing: border-box;
      overflow: hidden; /* 外層僅限制收合狀態寬度，內部滾動交給 sidebar-body-scroll */
    }

    /* 收合狀態：硬性鎖死 48px，徹底防撐開 */
    .workbench-split-sidebar.collapsed,
    .workbench-split-sidebar[data-wb-sidebar="collapsed"] {
      width: var(--sidebar-collapsed-width) !important;
      min-width: var(--sidebar-collapsed-width) !important;
      max-width: var(--sidebar-collapsed-width) !important;
      flex: 0 0 var(--sidebar-collapsed-width) !important;
      flex-shrink: 0 !important;
      overflow: hidden !important;
    }

    /* 收合長條 Ribbon */
    .sidebar-collapsed-ribbon {
      display: none;
      flex-direction: column;
      align-items: center;
      padding: 14px 6px;
      gap: 16px;
      height: 100%;
      background: var(--bg-panel-sub);
      cursor: pointer;
      box-sizing: border-box;
      width: 100%;
      max-width: var(--sidebar-collapsed-width);
      overflow: hidden;
    }

    .sidebar-collapsed-ribbon:hover {
      background: #1C273E;
    }

    .workbench-split-sidebar.collapsed .sidebar-collapsed-ribbon {
      display: flex;
    }

    .workbench-split-sidebar.collapsed .sidebar-full-container {
      display: none;
    }

    .ribbon-icon-btn {
      width: 38px;
      min-height: 38px;
      height: 38px;
      border-radius: 6px;
      background: var(--color-cost-ice);
      color: #0A0E17;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      box-shadow: 0 2px 6px rgba(56, 189, 248, 0.4);
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .ribbon-title-vertical {
      writing-mode: vertical-rl;
      letter-spacing: 3px;
      font-size: 13.5px;
      font-weight: 800;
      color: var(--text-main);
      white-space: nowrap;
    }

    .ribbon-total-badge {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 800;
      color: var(--color-quote-green);
      background: var(--color-quote-bg);
      border: 1px solid var(--color-quote-border);
      padding: 6px 3px;
      border-radius: 4px;
      writing-mode: vertical-rl;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    /* 展開完整內容容器 (高度 100%，使用 flex: 1 滾動，徹底防止被底部裁切) */
    .sidebar-full-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0; /* 重要：防止 flex 子項被截斷 */
      overflow: hidden;
      box-sizing: border-box;
    }

    .sidebar-header-bar {
      min-height: 42px;
      height: 42px;
      background: var(--bg-panel-sub);
      border-bottom: 1.5px solid var(--border-color);
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .sidebar-header-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .sidebar-toggle-btn {
      border: 1px solid var(--border-strong);
      background: var(--bg-panel);
      color: var(--text-sub);
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      min-height: 38px;
      height: 38px;
      box-sizing: border-box;
    }

    .sidebar-toggle-btn:hover {
      background: var(--border-color);
      color: var(--text-main);
    }

    /* 側欄主體滾動 (超緊湊版，垂直 padding 壓縮，間距 8px) */
    .sidebar-body-scroll {
      flex: 1 1 0%;
      min-height: 0; /* 重要：保證能完整滾動到底，不截斷最後一項 */
      overflow-y: auto;
      overflow-x: hidden;
      padding: 8px 12px 18px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-sizing: border-box;
    }

    /* --------------------------------------------------------------------------
       🔥 雙軌巨型焦點卡片 (超緊湊高密度版)
       -------------------------------------------------------------------------- */
    .dual-hero-grid {
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-sizing: border-box;
    }

    /* 1. 內部直接成本 (冰藍主題) */
    .hero-card-track {
      background: var(--bg-panel-sub);
      border-radius: 6px;
      padding: 8px 12px;
      border: 1.5px solid var(--border-color);
      position: relative;
      box-sizing: border-box;
    }

    .hero-card-track.track-cost {
      border-color: var(--color-cost-border);
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.09) 0%, rgba(18, 24, 36, 0.98) 100%);
    }

    .hero-card-track.track-quote {
      border-color: var(--color-quote-border);
      background: linear-gradient(135deg, rgba(52, 211, 153, 0.11) 0%, rgba(18, 24, 36, 0.98) 100%);
    }

    body.theme-light .hero-card-track.track-cost,
    .theme-light .hero-card-track.track-cost {
      background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%) !important;
      border-color: #BAE6FD !important;
    }

    body.theme-light .hero-card-track.track-quote,
    .theme-light .hero-card-track.track-quote {
      background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%) !important;
      border-color: #BBF7D0 !important;
    }

    .hero-track-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2px;
      gap: 6px;
    }

    .hero-track-label {
      font-size: var(--font-size-sm);
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .hero-track-label.label-cost {
      color: var(--color-cost-ice);
    }

    .hero-track-label.label-quote {
      color: var(--color-quote-green);
    }

    .hero-track-badge {
      font-size: var(--font-size-xs);
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 3px;
      font-family: var(--font-mono);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .badge-cost-tag {
      background: var(--color-cost-bg);
      color: var(--color-cost-ice);
      border: 1px solid var(--color-cost-border);
    }

    .badge-quote-tag {
      background: var(--color-quote-bg);
      color: var(--color-quote-green);
      border: 1px solid var(--color-quote-border);
    }

    /* 🔥 雙軌總金額 var(--font-size-xl)，等寬粗體大器醒目，flex-shrink: 0 絕不折行擠壓 */
    .hero-main-amount {
      font-family: var(--font-mono);
      font-size: var(--font-size-xl);
      font-weight: 800;
      letter-spacing: -0.3px;
      line-height: 1.15;
      display: flex;
      align-items: baseline;
      gap: 5px;
      white-space: nowrap;
      word-break: keep-all;
      overflow: visible;
      flex-shrink: 0;
    }

    .hero-main-amount .currency {
      font-size: var(--font-size-md);
      font-weight: 700;
      opacity: 0.9;
    }

    .hero-main-amount.amount-cost {
      color: var(--color-cost-ice);
    }

    .hero-main-amount.amount-quote {
      color: var(--color-quote-green);
    }

    /* 🔥 單價換算 var(--font-size-md) */
    .hero-unit-pricing {
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px dashed var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--font-size-xs);
      color: var(--text-sub);
      gap: 6px;
    }

    .hero-unit-pricing .unit-val {
      font-family: var(--font-mono);
      font-size: var(--font-size-md);
      font-weight: 800;
      white-space: nowrap;
    }

    .hero-unit-pricing .unit-val.val-cost {
      color: var(--color-cost-ice);
    }

    .hero-unit-pricing .unit-val.val-quote {
      color: var(--color-quote-green);
    }

    /* 側欄區塊面板 (Side Section Box，超緊湊版) */
    .side-sec-box {
      border: 1.5px solid var(--border-color);
      border-radius: 5px;
      background: var(--bg-panel-sub);
      box-sizing: border-box;
    }

    .side-sec-header {
      padding: 6px 10px;
      background: #172134;
      border-bottom: 1.5px solid var(--border-color);
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--font-size-sm);
      font-weight: 700;
      color: var(--text-main);
      box-sizing: border-box;
    }

    body.theme-light .side-sec-header {
      background: #F1F5F9;
    }

    .side-sec-header .badge-mini {
      font-size: var(--font-size-xs);
      font-weight: normal;
      color: var(--text-sub);
      white-space: nowrap;
    }

    /* 緊湊網格數據表 */
    .compact-grid-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--font-size-base);
      box-sizing: border-box;
    }

    .compact-grid-table th {
      background: var(--bg-panel);
      color: var(--text-sub);
      padding: 5px 8px;
      font-weight: 700;
      font-size: var(--font-size-sm);
      border-bottom: 1px solid var(--border-color);
      text-align: left;
      white-space: nowrap;
    }

    .compact-grid-table th.num, .compact-grid-table td.num {
      text-align: right;
      font-family: var(--font-mono);
      font-size: var(--font-size-base);
      white-space: nowrap;
    }

    .compact-grid-table td {
      padding: 4px 8px;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-main);
      vertical-align: middle;
      box-sizing: border-box;
      font-size: var(--font-size-base);
    }

    .compact-grid-table tr:hover td {
      background: rgba(56, 189, 248, 0.08);
    }

    .compact-grid-table tr.clickable {
      cursor: pointer;
    }

    .station-code-pill {
      font-family: var(--font-mono);
      font-size: var(--font-size-xs);
      font-weight: 800;
      background: var(--color-cost-bg);
      color: var(--color-cost-ice);
      border: 1px solid var(--color-cost-border);
      padding: 1px 4px;
      border-radius: 3px;
      margin-right: 4px;
      display: inline-block;
    }

    .mini-progress-track {
      width: 32px;
      height: 4px;
      background: var(--border-color);
      border-radius: 2px;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
      margin-right: 4px;
    }

    .mini-progress-fill {
      height: 100%;
      background: var(--color-cost-ice);
      border-radius: 2px;
    }

    /* 整併後「各站底價與產線即時鏈」單一卡片樣式 (流體自適應) */
    .merged-station-pipeline {
      display: flex;
      flex-direction: column;
      padding: 4px 6px;
      gap: 3px;
      box-sizing: border-box;
    }

    .side-pipeline-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.12s ease;
      font-size: var(--font-size-sm);
      background: var(--bg-panel);
      border: 1.5px solid var(--border-color);
      gap: 8px;
      box-sizing: border-box;
      min-height: clamp(38px, 2.2rem + 0.3vh, 44px);
    }

    .side-pipeline-item:hover {
      background: #17243B;
      border-color: #38BDF8;
    }

    body.theme-light .side-pipeline-item:hover {
      background: #F1F5F9;
      border-color: #0284C7;
    }

    .side-pipeline-item.active {
      background: rgba(56, 189, 248, 0.12);
      border-color: #38BDF8;
      box-shadow: 0 0 6px rgba(56, 189, 248, 0.25);
    }

    body.theme-light .side-pipeline-item.active {
      background: #E0F2FE;
      border-color: #0284C7;
      box-shadow: 0 0 6px rgba(2, 132, 199, 0.2);
    }

    .item-left {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
    }

    .pipe-status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--color-quote-green);
      box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.3);
      flex-shrink: 0;
    }

    .item-name {
      font-weight: 700;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: var(--font-size-sm);
    }

    .item-right {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      flex-shrink: 0;
      white-space: nowrap;
    }

    .item-cost {
      font-weight: 800;
      color: var(--color-cost-ice);
      font-size: var(--font-size-base);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .item-pct-wrap {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .item-pct {
      font-size: var(--font-size-xs);
      color: var(--text-muted);
      width: 34px;
      text-align: right;
      white-space: nowrap;
    }

    .pipe-arrow {
      color: var(--text-muted);
      font-size: 11px;
      font-weight: bold;
      transition: transform 0.12s ease, color 0.12s ease;
    }

    .side-pipeline-item:hover .pipe-arrow {
      color: var(--color-cost-ice);
      transform: translate(1px, -1px);
    }

    /* 商業毛利設定 */
    .margin-adjust-box {
      padding: 6px 10px;
      background: var(--bg-panel);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--font-size-sm);
      box-sizing: border-box;
    }

    .margin-input-compact,
    #sideMarginRate {
      width: 60px;
      min-height: 38px !important;
      height: 38px !important;
      border: 1.5px solid var(--border-strong);
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: var(--font-size-base);
      font-weight: 800;
      text-align: right;
      padding: 4px 6px !important;
      line-height: 1.35 !important;
      background: var(--bg-input);
      color: var(--color-quote-green);
      box-sizing: border-box !important;
    }

    /* 結算明細列表 (流體比例版) */
    .totals-list {
      display: flex;
      flex-direction: column;
      font-size: var(--font-size-base);
      box-sizing: border-box;
    }

    .totals-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 10px;
      border-bottom: 1px solid var(--border-color);
      gap: 8px;
      box-sizing: border-box;
    }

    .totals-row:last-child {
      border-bottom: none;
    }

    .totals-row .label {
      color: var(--text-sub);
      font-size: var(--font-size-sm);
      white-space: nowrap;
    }

    .totals-row .val {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: var(--font-size-base);
      color: var(--text-main);
      white-space: nowrap;
      text-align: right;
    }

    .totals-row.grand-total {
      background: var(--color-quote-bg);
      border-top: 1.5px solid var(--color-quote-border);
      border-bottom: 1.5px solid var(--color-quote-border);
      padding: 6px 10px;
    }

    .totals-row.grand-total .label {
      font-weight: 800;
      color: var(--color-quote-green);
      font-size: var(--font-size-md);
    }

    .totals-row.grand-total .val {
      font-size: var(--font-size-lg);
      color: var(--color-quote-green);
      font-weight: 800;
    }

    /* 商業定價與稅額即時試算 (A7 Parity) */
    .pricing-tax-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: flex-end;
      box-sizing: border-box;
      transition: border-color 0.2s, background-color 0.2s;
    }

    .pricing-tax-row .field-input,
    .pricing-tax-row .field-select {
      min-height: 38px !important;
      font-size: var(--font-size-base, 14px);
    }

    .totals-row.highlight-calc-row {
      background: rgba(56, 189, 248, 0.08);
      border-radius: 4px;
      padding: 5px 10px;
      margin: 4px 0;
      border: 1px solid rgba(56, 189, 248, 0.2);
    }

    .totals-row.margin-analysis-row {
      border-top: 1px dashed var(--border-color);
      padding-top: 6px;
      margin-top: 4px;
    }

    /* 側欄底部動作條 (緊湊化固定高度，徹底防遮蔽) */
    .sidebar-footer-bar {
      padding: 8px 12px;
      background: var(--bg-panel-sub);
      border-top: 2px solid var(--border-color);
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      z-index: 50;
    }

    .btn-submit-compact {
      height: clamp(38px, 2.3rem + 0.4vh, 46px);
      background: var(--color-quote-green);
      color: #0A0E17;
      border: none;
      border-radius: 5px;
      font-size: var(--font-size-md);
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(52, 211, 153, 0.35);
      transition: all 0.12s ease;
      box-sizing: border-box;
    }

    .btn-submit-compact:hover {
      background: #4ADE80;
      box-shadow: 0 3px 12px rgba(52, 211, 153, 0.5);
      transform: translateY(-1px);
    }

    .btn-submit-compact .key-hint {
      font-family: var(--font-mono);
      font-size: var(--font-size-xs);
      background: rgba(0, 0, 0, 0.25);
      color: #0A0E17;
      padding: 1px 4px;
      border-radius: 3px;
      font-weight: 800;
    }

    .btn-row-dual {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      box-sizing: border-box;
    }

    .btn-sub-compact {
      min-height: 38px;
      height: clamp(38px, 2.2rem + 0.3vh, 44px);
      background: var(--bg-panel);
      border: 1.5px solid var(--border-strong);
      border-radius: 4px;
      font-size: var(--font-size-sm);
      font-weight: 700;
      color: var(--text-main);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.12s ease;
      box-sizing: border-box;
      white-space: nowrap;
    }

    .btn-sub-compact:hover {
      background: var(--border-color);
      border-color: var(--color-cost-ice);
    }

    .sidebar-hotkey-legend {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 11px;
      color: var(--text-muted);
      padding-top: 4px;
      font-family: var(--font-mono);
    }

    /* Toast 通知 */
    .toast-container {
      position: fixed;
      bottom: 24px;
      left: 24px;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }

    .toast-msg {
      background: rgba(18, 24, 36, 0.95);
      border: 1px solid var(--border-strong);
      color: #FFFFFF;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 13.5px;
      font-weight: 600;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .toast-msg.show {
      transform: translateY(0);
      opacity: 1;
    }

    @keyframes btnShake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-3px); }
      40%, 80% { transform: translateX(3px); }
    }

    .shake {
      animation: btnShake 0.4s ease;
    }
/* ==========================================================================
   承石 ERP — 工單工作台樣式（erp-workorder-workbench.css）
   Issue #540：製程流水線工作台（4 步驟導覽 + 流水線 + 明細表 + 對話框／浮層）

   來源：public_html/demo-workorder-ui.html 內嵌 <style>（行 9～2172）移植並精煉。
   精煉重點：
     1. 命名空間：頁面內元件與對話框層一律掛在 .erp-workorder-workbench 之下，
        不覆蓋 erp-styles.css 已存在的全域選擇器（.field、.wo-process-modal*、.empty、.num）。
     2. 深色主題：所有顏色走 --wb-* 變數，深色只覆寫變數（html[data-theme="dark"]）。
     3. Tabular-nums 零截斷：所有數值一律「系統無襯線體 + tabular-nums」，不使用 monospace 粗體。
     4. 明細表數值欄寬固定（單價 130／放數 105／數量 110／小計 115），右對齊、隱藏原生微調箭頭。

   載入順序：tokens.css → erp-styles.css → 本檔。
   本檔只依賴 tokens.css 的語意變數（--surface／--border／--fg／--primary…），缺少時各有 fallback。

   命名空間與使用約定（整合時必讀）：
     - 工作台根節點需帶 class="erp-workorder-workbench"。
       改成「專注引導／展開全覽」以 .mode-all-view 切換（可加在根節點，或沿用 demo 加在 body）。
     - 對話框（.wo-process-modal-backdrop／.wo-process-modal）必須位於根節點之內；
       若用 Portal 掛到 body，Portal 容器也要帶同一個 class。
       顯示狀態沿用 demo 的 .show（另接受 .is-open）；未帶 .show 時預設隱藏。
       ⚠ 正式站已有多處對話框使用同名 class（erp-desktop.jsx、erp-formal-deliveries.jsx；
         不帶 .show、永遠顯示），所以「預設隱藏」規則絕不能放到命名空間之外。
     - combobox 輸入元件（.erp-combobox-wrap／-input／-arrow）在工作台之內，掛命名空間；
       下拉清單（#erp-global-combobox-portal／.erp-portal-dropdown）、完工浮層 .wo-completion-popover、
       歷史報價 .row-history-popover／.rh-popover、放數 .custom-waste-popover 由 JS 直接掛到 body，
       名稱本身即專屬，不需根節點。
     - 對話框與浮層內的顏色請用 class（.wo-process-modal-info、.modal-pill、.btn-capsule-blue…）。
       inline style 寫死的顏色不會跟著深色主題換，是整合時最容易漏掉的地方。
     - 所有 @keyframes 以 wowb 為前綴，所有自訂變數以 --wb- 為前綴。

   狀態 class 約定：
     .show／.is-open        顯示對話框、浮層
     .is-active-focus       當前焦點步驟卡片（專注引導模式下唯一顯示的卡片）
     .is-collapsed          專注引導模式下收合為精簡摘要的卡片（只顯示標題列）
     .active／.completed    步驟導覽項目的目前／已完成狀態
   ========================================================================== */


/* ==========================================================================
   0. 設計變數（淺色）
   ========================================================================== */
:root {
  /* 數字專用字體：系統無襯線體 ＋ tabular-nums，
     根除 Linux Chromium／WebKit 在 monospace 粗體下數字疊加粘連（300 雙零、1650 擠壓）。 */
  --wb-font-num: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans TC', Helvetica, Arial, sans-serif;

  /* 圖層 */
  --wb-z-stepper: 90;
  --wb-z-modal: 9999;
  --wb-z-toast: 10000;
  --wb-z-popover: 999999;
  /* 導覽軌 sticky 貼齊位置：工作台嵌在有固定頂欄的頁面時，覆寫成頂欄高度 */
  --wb-stepper-top: 0px;

  /* 中性色：沿用 tokens.css 語意變數，深色主題由 tokens.css 自動切換 */
  --wb-surface: var(--surface, #FFFFFF);
  --wb-surface-2: var(--surface-2, #F8FAFC);
  --wb-surface-hover: var(--surface-hover, #F1F5F9);
  --wb-surface-3: var(--surface-hover, #F1F5F9);
  --wb-border: var(--border, #E2E8F0);
  --wb-border-strong: var(--border-strong, #CBD5E1);
  --wb-border-hover: #94A3B8;
  --wb-divider: var(--divider, #E6EBF2);
  --wb-text-strong: var(--fg-strong, #0F172A);
  --wb-text: var(--fg, #1E293B);
  --wb-text-2: #334155;
  --wb-text-3: #475569;
  --wb-text-muted: var(--fg-muted, #64748B);
  --wb-text-subtle: var(--fg-subtle, #94A3B8);
  --wb-on-solid: #FFFFFF;
  --wb-overlay: rgba(8, 15, 26, 0.48);
  --wb-float-bg: #0F172A;
  --wb-float-text: #CBD5E1;
  --wb-toast-bg: #1E293B;

  /* 品牌青（primary） */
  --wb-primary-soft: var(--primary-soft, #ECFAFD);
  --wb-primary-text: var(--primary-press, #1C6F8B);
  --wb-primary-strong: #1A5B72;
  --wb-primary-deep: #174B5F;
  --wb-primary-edge: #6FD0E2;
  --wb-primary-glow: rgba(48, 160, 192, 0.18);

  /* 藍 */
  --wb-blue: #2563EB;
  --wb-blue-strong: #1D4ED8;
  --wb-blue-deep: #1E40AF;
  --wb-blue-mid: #3B82F6;
  --wb-blue-solid: #2563EB;
  --wb-blue-solid-hover: #1D4ED8;
  --wb-blue-soft: #EFF6FF;
  --wb-blue-soft-2: #DBEAFE;
  --wb-blue-border: #BFDBFE;
  --wb-blue-border-2: #93C5FD;
  --wb-blue-ring: rgba(37, 99, 235, 0.2);

  /* 綠 */
  --wb-green: #16A34A;
  --wb-green-strong: #15803D;
  --wb-green-deep: #166534;
  --wb-green-solid: #15803D;
  --wb-green-solid-hover: #166534;
  --wb-green-soft: #F0FDF4;
  --wb-green-soft-2: #DCFCE7;
  --wb-green-border: #BBF7D0;
  --wb-green-border-2: #86EFAC;
  --wb-green-ring: rgba(22, 163, 74, 0.2);

  /* 紅 */
  --wb-red: #DC2626;
  --wb-red-strong: #991B1B;
  --wb-red-bright: #EF4444;
  --wb-red-rose: #E11D48;
  --wb-red-solid: #EF4444;
  --wb-red-soft: #FEF2F2;
  --wb-red-soft-2: #FEE2E2;
  --wb-red-border: #FCA5A5;
  --wb-red-ring: rgba(220, 38, 38, 0.15);

  /* 琥珀（內部機台標籤） */
  --wb-amber-soft: #FEF3C7;
  --wb-amber-text: #92400E;
  --wb-amber-border: #FDE68A;

  /* 天藍（委外標籤、備註對話框） */
  --wb-sky: #0284C7;
  --wb-sky-strong: #0369A1;
  --wb-sky-solid: #0369A1;
  --wb-sky-solid-hover: #075985;
  --wb-sky-soft: #E0F2FE;
  --wb-sky-faint: #F0F9FF;
  --wb-sky-border: #BAE6FD;

  /* 靛（片語標籤） */
  --wb-indigo-soft: #EEF2FF;
  --wb-indigo-text: #4338CA;
  --wb-indigo-border: #C7D2FE;

  /* 陰影 */
  --wb-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
  --wb-shadow-card-active: 0 8px 30px rgba(48, 160, 192, 0.16);
  --wb-shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
  --wb-shadow-pop-lg: 0 16px 36px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.12);
  --wb-shadow-modal: 0 20px 48px rgba(0, 0, 0, 0.24);

  /* 冰藍（拖曳發光／聚焦） */
  --color-cost-ice: #0284C7;
}


/* ==========================================================================
   1. 深色主題（與 index.html applyTheme 一致：html[data-theme="dark"]）
      中性色（--surface／--border／--fg…）由 tokens.css 的深色區塊切換，
      這裡只覆寫本檔自有的強調色與陰影。
   ========================================================================== */
html[data-theme="dark"] {
  --wb-border-hover: #64748B;
  --wb-text-2: #CBD5E1;
  --wb-text-3: #94A3B8;
  --wb-overlay: rgba(0, 0, 0, 0.62);
  --wb-float-bg: #334155;
  --wb-float-text: #E2E8F0;
  --wb-toast-bg: #334155;

  --wb-primary-soft: rgba(48, 160, 192, 0.16);
  --wb-primary-text: #6FD0E2;
  --wb-primary-strong: #6FD0E2;
  --color-cost-ice: #38BDF8;
  --wb-primary-deep: #A6E4EF;
  --wb-primary-edge: #228AAA;
  --wb-primary-glow: rgba(48, 160, 192, 0.32);

  --wb-blue: #60A5FA;
  --wb-blue-strong: #93C5FD;
  --wb-blue-deep: #BFDBFE;
  --wb-blue-mid: #60A5FA;
  --wb-blue-solid: #2563EB;
  --wb-blue-solid-hover: #3B82F6;
  --wb-blue-soft: rgba(59, 130, 246, 0.14);
  --wb-blue-soft-2: rgba(59, 130, 246, 0.26);
  --wb-blue-border: rgba(96, 165, 250, 0.38);
  --wb-blue-border-2: rgba(96, 165, 250, 0.55);
  --wb-blue-ring: rgba(96, 165, 250, 0.35);

  --wb-green: #4ADE80;
  --wb-green-strong: #86EFAC;
  --wb-green-deep: #BBF7D0;
  --wb-green-solid: #15803D;
  --wb-green-solid-hover: #166534;
  --wb-green-soft: rgba(34, 197, 94, 0.13);
  --wb-green-soft-2: rgba(34, 197, 94, 0.24);
  --wb-green-border: rgba(74, 222, 128, 0.36);
  --wb-green-border-2: rgba(74, 222, 128, 0.5);
  --wb-green-ring: rgba(74, 222, 128, 0.32);

  --wb-red: #F87171;
  --wb-red-strong: #FCA5A5;
  --wb-red-bright: #F87171;
  --wb-red-rose: #FB7185;
  --wb-red-solid: #DC2626;
  --wb-red-soft: rgba(239, 68, 68, 0.14);
  --wb-red-soft-2: rgba(239, 68, 68, 0.26);
  --wb-red-border: rgba(248, 113, 113, 0.45);
  --wb-red-ring: rgba(248, 113, 113, 0.3);

  --wb-amber-soft: rgba(245, 158, 11, 0.2);
  --wb-amber-text: #FCD34D;
  --wb-amber-border: rgba(245, 158, 11, 0.4);

  --wb-sky: #38BDF8;
  --wb-sky-strong: #7DD3FC;
  --wb-sky-solid: #0369A1;
  --wb-sky-solid-hover: #075985;
  --wb-sky-soft: rgba(14, 165, 233, 0.18);
  --wb-sky-faint: rgba(14, 165, 233, 0.1);
  --wb-sky-border: rgba(56, 189, 248, 0.4);

  --wb-indigo-soft: rgba(99, 102, 241, 0.2);
  --wb-indigo-text: #A5B4FC;
  --wb-indigo-border: rgba(129, 140, 248, 0.4);

  --wb-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
  --wb-shadow-card-active: 0 8px 30px rgba(48, 160, 192, 0.28);
  --wb-shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  --wb-shadow-pop-lg: 0 16px 36px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  --wb-shadow-modal: 0 20px 48px rgba(0, 0, 0, 0.6);
}

/* 原生控制項（日期挑選器、下拉、捲軸）跟著切成深色；只限本檔的元件，不動全站 */
html[data-theme="dark"] .erp-workorder-workbench,
html[data-theme="dark"] .erp-portal-dropdown,
html[data-theme="dark"] .row-history-popover,
html[data-theme="dark"] .rh-popover,
html[data-theme="dark"] .wo-completion-popover,
html[data-theme="dark"] .custom-waste-popover {
  color-scheme: dark;
}


/* ==========================================================================
   2. 命名空間根節點與 Tabular-nums 基礎
   ========================================================================== */
.erp-workorder-workbench {
  color: var(--wb-text);
  line-height: 1.55;
  box-sizing: border-box;
  padding: 20px 24px;
}

/* Slice 2：工單核心摘要列，讓單號、客戶、交期與金額在每個步驟都可見。 */
.erp-workorder-workbench .wb-header-summary {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.35fr) minmax(170px, 1fr) minmax(220px, 1.15fr);
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px;
  background: var(--wb-surface-2);
  border: 1px solid var(--wb-border);
  border-radius: 12px;
  box-shadow: var(--wb-shadow-card);
}
.erp-workorder-workbench .wb-summary-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: 10px;
}
.erp-workorder-workbench .wb-summary-label {
  color: var(--wb-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.erp-workorder-workbench .wb-summary-value {
  min-width: 0;
  overflow: hidden;
  color: var(--wb-text-strong);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.erp-workorder-workbench .wb-summary-doc-no .wb-summary-value {
  font-size: 15px;
  font-weight: 700;
}
.erp-workorder-workbench .wb-summary-total-card {
  align-items: flex-end;
  text-align: right;
}
.erp-workorder-workbench .wb-summary-total {
  color: var(--wb-primary-text);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.erp-workorder-workbench .wb-summary-urgent {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--wb-red-soft);
  color: var(--wb-red-strong);
  border: 1px solid var(--wb-red-border);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* Slice 2：固定在工作台底部的主要操作區；不取代既有卡片 footer，避免破壞既有流程。 */
.erp-workorder-workbench .wb-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--wb-surface) 92%, transparent);
  border: 1px solid var(--wb-border);
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(8px);
}
.erp-workorder-workbench .wb-sticky-actions-left,
.erp-workorder-workbench .wb-sticky-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.erp-workorder-workbench .wb-sticky-save {
  min-width: 128px;
}

/* Slice 2：站別摘要列是 accordion header；明細只顯示目前展開的站別。 */
.erp-workorder-workbench [data-wb-station-accordion] {
  position: relative;
}
.erp-workorder-workbench .wb-accordion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-left: auto;
  color: var(--wb-text-muted);
  border: 1px solid var(--wb-border);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 800;
}
.erp-workorder-workbench .wb-accordion-panel {
  animation: wowbAccordionOpen 0.16s ease-out;
}
@keyframes wowbAccordionOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 專注引導模式：讓工作台、步驟容器與目前卡片形成完整的滿高 flex 鏈。 */
.erp-workorder-workbench:not(.mode-all-view) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
  box-sizing: border-box;
}

.erp-workorder-workbench:not(.mode-all-view) .stage-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1780px;
  margin: 8px auto 16px;
  padding: 0 8px;
  box-sizing: border-box;
}

/* 數字等寬：整個工作台與所有浮層預設 tabular-nums。
   font-variant-numeric 會繼承，但 button／input／select／textarea 的瀏覽器預設 font 簡寫
   會把它重設為 normal，所以表單控制項要另外指定。 */
.erp-workorder-workbench,
.erp-portal-dropdown,
.row-history-popover,
.rh-popover,
.wo-completion-popover,
.custom-waste-popover {
  font-variant-numeric: tabular-nums;
}
.erp-workorder-workbench :is(button, input, select, textarea),
.erp-portal-dropdown :is(button, input, select, textarea),
.row-history-popover :is(button, input, select, textarea),
.rh-popover :is(button, input, select, textarea),
.wo-completion-popover :is(button, input, select, textarea),
.custom-waste-popover :is(button, input, select, textarea) {
  font-variant-numeric: tabular-nums;
}

/* 數值顯示面：系統無襯線體 ＋ 等寬數字。金額、數量、放數、字數、價格一律走這一組。 */
.erp-workorder-workbench .wb-num,
.erp-workorder-workbench .table-input.num,
.erp-workorder-workbench .input-lg.num,
.erp-workorder-workbench input[type=number],
.erp-workorder-workbench .subtotal-cell,
.erp-workorder-workbench .row-seq-num,
.erp-workorder-workbench .cost-summary-pill strong,
.erp-workorder-workbench .autocalc-strip strong,
.erp-workorder-workbench .char-counter,
.erp-workorder-workbench .proc-node-count,
.erp-workorder-workbench .row-history-pill,
.rh-popover-price,
.cwp-input {
  font-family: var(--wb-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  /* 關閉字距調整：Arial／Liberation Sans 對「11」有字距調整，會讓 1111 比 8888 窄，直欄數字就對不齊 */
  font-kerning: none;
}

/* 數值輸入框：靠右、不顯示原生微調箭頭（箭頭會吃掉右側約 15px，造成數字被截）。
   只限工作台之內（不是全站的 input），避免動到其他畫面既有的微調箭頭。
   Chromium／WebKit 與 Firefox 的寫法不同，兩組規則刻意分開（同組會因不認得的偽元素整條被丟棄）。 */
.erp-workorder-workbench input::-webkit-outer-spin-button,
.erp-workorder-workbench input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.erp-workorder-workbench input[type=number],
.erp-workorder-workbench .table-input.num {
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: right;
}

/* 鍵盤操作可見焦點（demo 的 step-item 是 div，改用 button 時同樣適用） */
.erp-workorder-workbench button:focus-visible,
.erp-workorder-workbench .step-item:focus-visible,
.erp-workorder-workbench .flow-card .card-header:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* ==========================================================================
   3. Focus Stepper 4 步驟導覽軌
   ========================================================================== */
.erp-workorder-workbench .focus-stepper {
  position: sticky;
  top: var(--wb-stepper-top);
  z-index: var(--wb-z-stepper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 18px;
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.erp-workorder-workbench .stepper-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}
.erp-workorder-workbench .stepper-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.erp-workorder-workbench .step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--wb-text);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.erp-workorder-workbench .step-item:hover {
  background: var(--wb-surface-3);
}
.erp-workorder-workbench .step-item.active {
  background: var(--wb-primary-soft);
  border-color: var(--primary);
  box-shadow: 0 2px 6px var(--wb-primary-glow);
}
.erp-workorder-workbench .step-item.completed {
  color: var(--wb-green-strong);
}
.erp-workorder-workbench .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--wb-surface-3);
  color: var(--wb-text-muted);
  font-size: 11px;
  font-weight: 700;
}
.erp-workorder-workbench .step-item.active .step-num {
  background: var(--primary);
  color: var(--wb-on-solid);
}
.erp-workorder-workbench .step-item.completed .step-num {
  background: var(--wb-green-solid);
  color: var(--wb-on-solid);
}
.erp-workorder-workbench .step-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--wb-text);
}
.erp-workorder-workbench .step-item.active .step-name {
  color: var(--wb-primary-text);
  font-weight: 700;
}
.erp-workorder-workbench .step-arrow {
  color: var(--wb-text-subtle);
  font-size: 11px;
}


/* ==========================================================================
   4. Flow Cards 步驟卡片、徽章、標題列
   ========================================================================== */
/* 非焦點步驟 100% 隱藏（零空間浪費）。display 用 !important：
   顯示與否是行為契約，不能被殘留的 inline style 悄悄破壞。 */
.erp-workorder-workbench .flow-card {
  display: none !important;
  margin-bottom: 0;
  overflow: visible;
  background: var(--surface-card, var(--wb-surface));
  border: 1px solid var(--wb-border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.erp-workorder-workbench .flow-card.is-active-focus {
  display: block !important;
  overflow: visible !important;
  border: 2px solid var(--primary);
  box-shadow: var(--wb-shadow-card-active);
  animation: wowbCardFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.erp-workorder-workbench:not(.mode-all-view) .flow-card.is-active-focus {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  margin-bottom: 0;
}
/* 專注引導模式下收合成精簡摘要：只留標題列 */
.erp-workorder-workbench .flow-card.is-collapsed {
  display: block !important;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: none;
}
.erp-workorder-workbench:not(.mode-all-view) .flow-card.is-collapsed {
  flex-shrink: 0;
}
.erp-workorder-workbench .flow-card.is-collapsed .card-body,
.erp-workorder-workbench .flow-card.is-collapsed .card-footer {
  display: none;
}
.erp-workorder-workbench .flow-card.is-collapsed .card-header {
  padding: 10px 22px;
  border-bottom: 0;
  cursor: pointer;
}
/* 展開全覽模式（All-Expanded View）：class 可加在根節點，或沿用 demo 加在 body */
.erp-workorder-workbench.mode-all-view .flow-card,
body.mode-all-view .erp-workorder-workbench .flow-card {
  display: block !important;
  overflow: visible !important;
  margin-bottom: 24px;
  border: 1.5px solid var(--wb-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.erp-workorder-workbench.mode-all-view .flow-card.is-active-focus,
body.mode-all-view .erp-workorder-workbench .flow-card.is-active-focus {
  border: 2px solid var(--primary);
  box-shadow: var(--wb-shadow-card-active);
}
.erp-workorder-workbench.mode-all-view .flow-card .card-header,
body.mode-all-view .erp-workorder-workbench .flow-card .card-header {
  cursor: pointer;
}
.erp-workorder-workbench.mode-all-view .flow-card .card-header:hover,
body.mode-all-view .erp-workorder-workbench .flow-card .card-header:hover {
  background: linear-gradient(90deg, var(--wb-sky-soft) 0%, var(--wb-surface) 75%);
}
@keyframes wowbCardFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.erp-workorder-workbench .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1.5px solid var(--wb-divider);
  background: linear-gradient(90deg, var(--wb-primary-soft) 0%, var(--wb-surface) 65%);
}
.erp-workorder-workbench .card-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.erp-workorder-workbench .card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--wb-primary-text);
}
.erp-workorder-workbench .card-subtitle {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--wb-text-muted);
}
.erp-workorder-workbench .card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
}
.erp-workorder-workbench:not(.mode-all-view) .flow-card.is-active-focus .card-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 24px;
}
.erp-workorder-workbench .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--wb-divider);
  background: var(--wb-surface-2);
}
.erp-workorder-workbench:not(.mode-all-view) .flow-card.is-active-focus .card-footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* 步驟狀態徽章（demo 內文有用到，但原 <style> 沒有定義，這裡補齊） */
.erp-workorder-workbench .focus-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.erp-workorder-workbench .badge-done {
  background: var(--wb-green-soft-2);
  color: var(--wb-green-strong);
  border-color: var(--wb-green-border-2);
}
.erp-workorder-workbench .badge-active {
  background: var(--wb-primary-soft);
  color: var(--wb-primary-text);
  border-color: var(--primary);
}
.erp-workorder-workbench .badge-pending {
  background: var(--wb-surface-3);
  color: var(--wb-text-3);
  border-color: var(--wb-border-strong);
}


/* ==========================================================================
   5. 欄位版面與輸入框、模式切換、預算膠囊
   ========================================================================== */
/* 寬螢幕多欄排版。子元素 min-width:0，避免 nowrap 輸入框把欄位撐爆。 */
.erp-workorder-workbench .wide-grid-4 {
  display: grid;
  grid-template-columns: 2fr 2.5fr 1.8fr 1.3fr;
  gap: 16px;
  align-items: start;
}
.erp-workorder-workbench .wide-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.erp-workorder-workbench .wide-grid-4 > *,
.erp-workorder-workbench .wide-grid-2 > * {
  min-width: 0;
}

/* ⚠ erp-styles.css 也有 .field（gap 4px、label 12px 灰字）。
   這裡用命名空間蓋過，且把 label 的字級／字重／顏色全部明講，避免混入既有規則。 */
.erp-workorder-workbench .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.erp-workorder-workbench .field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wb-text-strong);
}
.erp-workorder-workbench .field label .req {
  margin-left: 2px;
  color: var(--wb-red);
}

.erp-workorder-workbench .input-lg {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  background: var(--wb-surface);
  color: var(--wb-text-strong);
  border: 1.5px solid var(--wb-border-strong);
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.erp-workorder-workbench .input-lg:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(48, 160, 192, 0.35));
}
/* 只加強一般輸入框；combobox 版本的高度與字級由 .erp-combobox-input.size-lg 決定（與 demo 實際呈現一致） */
.erp-workorder-workbench .input-lg.input-title {
  height: 50px;
  font-size: 16.5px;
  font-weight: 700;
  border: 2px solid var(--wb-border-strong);
}
.erp-workorder-workbench .input-md {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1px solid var(--wb-border);
  border-radius: 6px;
  font-size: 13.5px;
}
.erp-workorder-workbench .input-md:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(48, 160, 192, 0.35));
}
.erp-workorder-workbench .input-lg:disabled,
.erp-workorder-workbench .input-md:disabled {
  background: var(--wb-surface-2);
  color: var(--wb-text-muted);
  cursor: not-allowed;
}

/* 引導模式切換 */
.erp-workorder-workbench .mode-toggle-group {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--wb-surface-2);
  border: 1px solid var(--wb-border);
  border-radius: 8px;
}
.erp-workorder-workbench .mode-btn {
  padding: 6px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wb-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .mode-btn.active {
  background: var(--wb-surface);
  color: var(--wb-primary-text);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* 全案預算／成本累計膠囊 */
.erp-workorder-workbench .cost-summary-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--wb-primary-soft);
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  color: var(--wb-primary-deep);
  font-size: 13px;
  font-weight: 600;
}
.erp-workorder-workbench .cost-summary-pill strong {
  color: var(--wb-primary-text);
  font-size: 15px;
}


/* ==========================================================================
   6. 快選標籤雲、急件按鈕
   ========================================================================== */
.erp-workorder-workbench .phrase-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.erp-workorder-workbench .phrase-tag {
  padding: 2px 7px;
  background: var(--wb-surface-2);
  color: var(--wb-text);
  border: 1px solid var(--wb-border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}
.erp-workorder-workbench .phrase-tag:hover {
  background: var(--wb-primary-soft);
  color: var(--wb-primary-text);
  border-color: var(--primary);
}
.erp-workorder-workbench .phrase-tag.active {
  background: var(--primary);
  color: var(--wb-on-solid);
  border-color: var(--primary);
}

.erp-workorder-workbench .rush-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  background: var(--wb-surface-2);
  color: var(--wb-text-muted);
  border: 1.5px solid var(--wb-border);
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.erp-workorder-workbench .rush-btn.is-active {
  background: var(--wb-red-soft);
  color: var(--wb-red-strong);
  border-color: var(--wb-red-bright);
  box-shadow: 0 2px 8px var(--wb-red-ring);
}
.erp-workorder-workbench .rush-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--wb-text-subtle);
}
.erp-workorder-workbench .rush-btn.is-active .rush-dot {
  background: var(--wb-red-bright);
  animation: wowbPulseDot 1.5s infinite;
}
@keyframes wowbPulseDot {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}


/* ==========================================================================
   7. 多行編輯 Modal 層（四大對話框＋新增／編輯製程對話框）
      ⚠ 只在 .erp-workorder-workbench 之內生效。erp-styles.css 已有同名的
        .wo-process-modal-backdrop／.wo-process-modal／-head／-body／-actions，
        正式站現有對話框依賴它們「永遠顯示」的行為。
   ========================================================================== */
.erp-workorder-workbench .wo-process-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--wb-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: var(--wb-overlay);
  backdrop-filter: blur(3px);
}
.erp-workorder-workbench .wo-process-modal-backdrop.show,
.erp-workorder-workbench .wo-process-modal-backdrop.is-open {
  display: flex;
}
.erp-workorder-workbench .wo-process-modal {
  /* 每個對話框可用 .accent-blue／.accent-green／.accent-sky 換強調色，預設藍 */
  --wb-accent: var(--wb-blue);
  --wb-accent-strong: var(--wb-blue-strong);
  --wb-accent-solid: var(--wb-blue-solid);
  --wb-accent-solid-hover: var(--wb-blue-solid-hover);
  --wb-accent-soft: var(--wb-blue-soft);
  --wb-accent-soft-2: var(--wb-blue-soft-2);
  --wb-accent-border: var(--wb-blue-border);
  --wb-accent-ring: var(--wb-blue-ring);

  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: 12px;
  box-shadow: var(--wb-shadow-modal);
  animation: wowbModalSlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.erp-workorder-workbench .wo-process-modal.accent-green {
  --wb-accent: var(--wb-green);
  --wb-accent-strong: var(--wb-green-strong);
  --wb-accent-solid: var(--wb-green-solid);
  --wb-accent-solid-hover: var(--wb-green-solid-hover);
  --wb-accent-soft: var(--wb-green-soft);
  --wb-accent-soft-2: var(--wb-green-soft-2);
  --wb-accent-border: var(--wb-green-border);
  --wb-accent-ring: var(--wb-green-ring);
}
.erp-workorder-workbench .wo-process-modal.accent-sky {
  --wb-accent: var(--wb-sky);
  --wb-accent-strong: var(--wb-sky-strong);
  --wb-accent-solid: var(--wb-sky-solid);
  --wb-accent-solid-hover: var(--wb-sky-solid-hover);
  --wb-accent-soft: var(--wb-sky-faint);
  --wb-accent-soft-2: var(--wb-sky-soft);
  --wb-accent-border: var(--wb-sky-border);
  --wb-accent-ring: var(--wb-blue-ring);
}
@keyframes wowbModalSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.erp-workorder-workbench .wo-process-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--wb-surface-2);
  border-bottom: 1px solid var(--wb-divider);
}
.erp-workorder-workbench .wo-process-modal-head .title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--wb-text-strong);
}
.erp-workorder-workbench .wo-process-modal.accent-blue .wo-process-modal-head,
.erp-workorder-workbench .wo-process-modal.accent-green .wo-process-modal-head,
.erp-workorder-workbench .wo-process-modal.accent-sky .wo-process-modal-head {
  background: var(--wb-accent-soft);
  border-bottom-color: var(--wb-accent-border);
}
.erp-workorder-workbench .wo-process-modal.accent-blue .wo-process-modal-head .title,
.erp-workorder-workbench .wo-process-modal.accent-green .wo-process-modal-head .title,
.erp-workorder-workbench .wo-process-modal.accent-sky .wo-process-modal-head .title {
  color: var(--wb-accent-strong);
}
/* 標題旁的小徽章（erp-styles.css 只有 .snav .badge，沒有全域 .badge） */
.erp-workorder-workbench .wo-process-modal-head .title .badge {
  padding: 2px 8px;
  background: var(--wb-accent-soft-2);
  color: var(--wb-accent-strong);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
}
.erp-workorder-workbench .wo-process-modal-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 0;
  padding: 18px 22px;
  overflow-y: auto;
}
.erp-workorder-workbench .wo-process-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 13px 22px;
  background: var(--wb-surface-2);
  border-top: 1px solid var(--wb-divider);
}

/* 對話框內的資訊列、快捷標籤區、輸入區（demo 原為 inline style，改成 class 才能跟著主題換色） */
.erp-workorder-workbench .wo-process-modal-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--wb-surface-2);
  color: var(--wb-text-2);
  border: 1px solid var(--wb-border);
  border-radius: 8px;
  font-size: 13px;
}
.erp-workorder-workbench .modal-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.erp-workorder-workbench .modal-tags-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--wb-text-3);
  font-size: 12px;
  font-weight: 700;
}
.erp-workorder-workbench .modal-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.erp-workorder-workbench .modal-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.erp-workorder-workbench .modal-field-row label {
  color: var(--wb-text);
  font-size: 12.5px;
  font-weight: 700;
}
.erp-workorder-workbench .modal-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1.5px solid var(--wb-border-strong);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
}
/* demo 的 textarea 有 inline border，所以聚焦樣式要 !important 才蓋得過 */
.erp-workorder-workbench .wo-process-modal textarea:focus {
  border-color: var(--wb-accent) !important;
  box-shadow: 0 0 0 2.5px var(--wb-accent-ring) !important;
}
.erp-workorder-workbench .modal-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--wb-text-muted);
  font-size: 11.5px;
}
.erp-workorder-workbench .wo-process-modal kbd {
  padding: 1px 5px;
  background: var(--wb-surface-3);
  color: var(--wb-text-2);
  border: 1px solid var(--wb-border-strong);
  border-radius: 3px;
}
.erp-workorder-workbench .modal-clear-btn {
  padding: 2px 4px;
  background: transparent;
  color: var(--wb-red);
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.erp-workorder-workbench .modal-clear-btn:hover {
  text-decoration: underline;
}
.erp-workorder-workbench .btn-modal-cancel {
  padding: 7px 18px;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1px solid var(--wb-border);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.erp-workorder-workbench .btn-modal-cancel:hover {
  background: var(--wb-surface-3);
}
.erp-workorder-workbench .btn-modal-primary {
  padding: 7px 22px;
  background: var(--wb-accent-solid);
  color: var(--wb-on-solid);
  border: 1px solid var(--wb-accent-solid);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.erp-workorder-workbench .btn-modal-primary:hover {
  background: var(--wb-accent-solid-hover);
  border-color: var(--wb-accent-solid-hover);
}

/* 對話框快捷標籤膠囊（點一下追加到文字框）。
   .modal-pill 為通用名稱，.step-tag-btn／.rn-tag-btn／.rc-tag-btn 是 demo 沿用的舊名，行為相同。 */
.erp-workorder-workbench .modal-pill,
.erp-workorder-workbench .step-tag-btn,
.erp-workorder-workbench .rn-tag-btn,
.erp-workorder-workbench .rc-tag-btn {
  padding: 4px 9px;
  background: var(--wb-surface-3);
  color: var(--wb-text-2);
  border: 1px solid var(--wb-border-strong);
  border-radius: 4px;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .modal-pill:hover,
.erp-workorder-workbench .step-tag-btn:hover,
.erp-workorder-workbench .rn-tag-btn:hover {
  background: var(--wb-sky-soft);
  color: var(--wb-sky-strong);
  border-color: var(--wb-sky);
  transform: translateY(-1px);
}
.erp-workorder-workbench .modal-pill.is-green:hover,
.erp-workorder-workbench .rc-tag-btn:hover {
  background: var(--wb-green-soft-2);
  color: var(--wb-green-strong);
  border-color: var(--wb-green);
  transform: translateY(-1px);
}

/* 字數計數器：字數即時跳動，一定要等寬數字才不會左右抖動 */
.erp-workorder-workbench .char-counter {
  color: var(--wb-text-muted);
  font-size: 11.5px;
  white-space: nowrap;
}
.erp-workorder-workbench .char-counter.is-warn {
  color: var(--wb-amber-text);
}
.erp-workorder-workbench .char-counter.is-over {
  color: var(--wb-red);
  font-weight: 700;
}

/* 新增製程對話框：快速常用製程膠囊 */
.erp-workorder-workbench .quick-proc-presets {
  padding: 12px 14px;
  background: var(--wb-surface-2);
  border: 1.5px solid var(--wb-border);
  border-radius: 9px;
}
.erp-workorder-workbench .quick-proc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  color: var(--wb-text-muted);
  font-size: 12px;
  font-weight: 700;
}
.erp-workorder-workbench .quick-proc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.erp-workorder-workbench .quick-proc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--wb-surface);
  color: var(--wb-text-strong);
  border: 1px solid var(--wb-border);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .quick-proc-chip:hover {
  background: var(--wb-primary-soft);
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.erp-workorder-workbench .quick-proc-chip.active {
  background: var(--primary);
  color: var(--wb-on-solid);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(48, 160, 192, 0.3);
}
.erp-workorder-workbench .quick-proc-chip .badge {
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--wb-text-muted);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
}
.erp-workorder-workbench .quick-proc-chip.active .badge {
  background: rgba(255, 255, 255, 0.25);
  color: var(--wb-on-solid);
}

/* 對話框表單欄位排版 */
.erp-workorder-workbench .modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.erp-workorder-workbench .modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.erp-workorder-workbench .modal-field.full {
  grid-column: span 2;
}
.erp-workorder-workbench .modal-field label {
  color: var(--wb-text-muted);
  font-size: 12px;
  font-weight: 700;
}
.erp-workorder-workbench .modal-field input,
.erp-workorder-workbench .modal-field select,
.erp-workorder-workbench .modal-field textarea {
  padding: 8px 11px;
  background: var(--wb-surface);
  color: var(--wb-text-strong);
  border: 1.5px solid var(--wb-border);
  border-radius: 7px;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s;
}
.erp-workorder-workbench .modal-field input:focus,
.erp-workorder-workbench .modal-field select:focus,
.erp-workorder-workbench .modal-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--wb-primary-glow);
}


/* ==========================================================================
   8. 製程流水線（Process Route Stream）
   ========================================================================== */
/* 浮動操作按鈕 (◀, ▶, 🗑️) 常態微露出 0.4，hover 完全顯現 */
.erp-workorder-workbench .proc-floating-actions {
  position: absolute;
  top: -7px;
  right: 2px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: auto;
}
.erp-workorder-workbench .proc-floating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  background: var(--wb-surface-3, #0F172A);
  color: var(--wb-text-subtle, #94A3B8);
  border: 1px solid var(--wb-border, #334155);
  border-radius: 3px;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .proc-floating-btn.btn-del-proc {
  opacity: 0.25;
}
.erp-workorder-workbench .proc-route-node:hover .proc-floating-btn,
.erp-workorder-workbench .proc-floating-btn:hover {
  opacity: 1;
}
.erp-workorder-workbench .proc-floating-btn:hover {
  background: var(--color-cost-ice, #38BDF8);
  color: #0A0E17;
  border-color: var(--color-cost-ice, #38BDF8);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}
.erp-workorder-workbench .proc-floating-btn.btn-del-proc:hover {
  background: var(--wb-red-solid, #EF4444) !important;
  color: #FFFFFF !important;
  border-color: var(--wb-red-solid, #EF4444) !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}
.erp-workorder-workbench .proc-floating-btn.btn-clone-proc:hover {
  background: var(--wb-sky-solid, #38BDF8) !important;
  color: #FFFFFF !important;
}

/* 開區塊大標籤的快速移除鈕 */
.erp-workorder-workbench .wb-header-quick-del {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 3px 8px;
  background: var(--wb-red-soft);
  color: var(--wb-red-strong);
  border: 1px solid var(--wb-red-border);
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0.85;
  cursor: pointer;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .wb-header-quick-del:hover {
  background: var(--wb-red-soft-2);
  border-color: var(--wb-red-rose);
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.15);
  opacity: 1;
  transform: translateY(-1px);
}

.erp-workorder-workbench .status-badge-select {
  min-height: 38px;
  height: 38px;
  padding: 4px 10px;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1.5px solid var(--wb-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
}
.erp-workorder-workbench .status-badge-select:focus {
  border-color: var(--primary);
}
/* 危險操作的淡紅按鈕：疊在 .btn-back 之上，所以用 !important 蓋過它的 hover */
.erp-workorder-workbench .btn-danger-ghost {
  background: var(--wb-red-soft) !important;
  color: var(--wb-red-strong) !important;
  border-color: var(--wb-red-border) !important;
}
.erp-workorder-workbench .btn-danger-ghost:hover {
  background: var(--wb-red-soft-2) !important;
  border-color: var(--wb-red) !important;
}

/* 橫向可滑動製程導覽管線 */
.erp-workorder-workbench .proc-route-stream {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 26px 6px 14px;
  overflow-x: auto;
  border-bottom: 1.5px solid var(--wb-divider);
  scrollbar-gutter: stable;
}
.erp-workorder-workbench .proc-route-node,
.erp-workorder-workbench .station-card {
  position: relative;
  flex: 0 0 126px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 7px 11px;
  background: var(--wb-surface);
  border: 1.5px solid var(--wb-border);
  border-radius: 8px;
  cursor: grab;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.erp-workorder-workbench .proc-route-node.is-selected .proc-node-title {
  color: var(--wb-blue-strong);
}
.erp-workorder-workbench .proc-node-count {
  color: var(--wb-text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.erp-workorder-workbench .proc-route-node.is-selected .proc-node-count {
  color: var(--wb-blue);
  font-weight: 700;
}
.erp-workorder-workbench .proc-route-node:active {
  cursor: grabbing;
}
.erp-workorder-workbench .proc-route-node:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.erp-workorder-workbench .proc-route-node.is-selected {
  background: var(--wb-sky-faint);
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(48, 160, 192, 0.22);
}
/* 選中節點下方的小箭頭；顏色可由 --node-arrow-color 依站別覆寫 */
.erp-workorder-workbench .proc-route-node.is-selected::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--node-arrow-color, var(--primary)) transparent transparent transparent;
}
/* 拖曳狀態視覺反饋 (半透明、微縮放、藍光外框) */
.erp-workorder-workbench .proc-route-node.is-dragging {
  opacity: 0.42 !important;
  transform: scale(0.96);
  border: 1.5px dashed var(--color-cost-ice, #38BDF8) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45) !important;
  cursor: grabbing !important;
}

/* 放置目標視覺指示線 (亮藍色發光垂直線) */
.erp-workorder-workbench .proc-route-node.drag-target-left::before,
.erp-workorder-workbench .proc-route-node.drag-over-left::before {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -5px;
  width: 4px;
  background: var(--color-cost-ice, #38BDF8);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--color-cost-ice, #38BDF8);
  z-index: 25;
  pointer-events: none;
  animation: wowbPulseIndicator .7s infinite alternate;
}

.erp-workorder-workbench .proc-route-node.drag-target-right::before,
.erp-workorder-workbench .proc-route-node.drag-over-right::before {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  right: -5px;
  width: 4px;
  background: var(--color-cost-ice, #38BDF8);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--color-cost-ice, #38BDF8);
  z-index: 25;
  pointer-events: none;
  animation: wowbPulseIndicator .7s infinite alternate;
}

@keyframes wowbPulseIndicator {
  from { opacity: 0.65; transform: scaleY(0.92); }
  to { opacity: 1; transform: scaleY(1.08); }
}

/* 拖曳手柄圖示 */
.erp-workorder-workbench .proc-drag-handle {
  cursor: grab;
  color: var(--wb-text-subtle, #94A3B8);
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  margin-right: 2px;
  user-select: none;
  transition: color .15s, background .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  flex-shrink: 0;
}

.erp-workorder-workbench .proc-drag-handle:hover {
  color: var(--color-cost-ice, #38BDF8);
  background: rgba(56, 189, 248, 0.15);
}

.erp-workorder-workbench .proc-drag-handle:active {
  cursor: grabbing;
}

/* 工作台標題列「站序快速指定」下拉選單 */
.erp-workorder-workbench .station-seq-jump-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--wb-border, #CBD5E1);
}

.erp-workorder-workbench .station-seq-jump-select {
  min-height: 38px;
  height: 38px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  box-sizing: border-box;
  background: var(--wb-surface, #FFFFFF);
  color: var(--color-cost-ice, #0284C7);
  border: 1px solid var(--wb-border, #CBD5E1);
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

html[data-theme="dark"] .erp-workorder-workbench .station-seq-jump-select {
  background: var(--wb-surface-2, #1E293B);
  color: var(--color-cost-ice, #38BDF8);
  border-color: var(--wb-border, #334155);
}

.erp-workorder-workbench .station-seq-jump-select:hover,
.erp-workorder-workbench .station-seq-jump-select:focus {
  border-color: var(--color-cost-ice, #38BDF8);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25);
}
.erp-workorder-workbench .proc-node-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.erp-workorder-workbench .proc-node-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 800;
}
.erp-workorder-workbench .proc-route-node.done .proc-node-badge {
  background: var(--wb-green-soft-2);
  color: var(--wb-green-strong);
}
.erp-workorder-workbench .proc-route-node.active .proc-node-badge {
  background: var(--primary);
  color: var(--wb-on-solid);
}
.erp-workorder-workbench .proc-route-node.pending .proc-node-badge {
  background: var(--wb-surface-3);
  color: var(--wb-text-3);
}
.erp-workorder-workbench .proc-node-status {
  font-size: 10.5px;
  font-weight: 700;
}
.erp-workorder-workbench .proc-route-node.done .proc-node-status {
  color: var(--wb-green-strong);
}
.erp-workorder-workbench .proc-route-node.active .proc-node-status {
  color: var(--primary);
}
.erp-workorder-workbench .proc-route-node.pending .proc-node-status {
  color: var(--wb-text-subtle);
}
.erp-workorder-workbench .proc-node-drag-handle {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.03);
  color: var(--wb-text-subtle);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: grab;
}
.erp-workorder-workbench .proc-node-drag-handle:hover {
  background: rgba(48, 160, 192, 0.15);
  color: var(--primary);
}
.erp-workorder-workbench .proc-node-title {
  margin: 2px 0;
  color: var(--wb-text-strong);
  font-size: 13.5px;
  font-weight: 700;
}
.erp-workorder-workbench .proc-node-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: var(--wb-text-muted);
  font-size: 11px;
}
.erp-workorder-workbench .proc-node-order-actions {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: none;
  gap: 3px;
}
.erp-workorder-workbench .proc-route-node:hover .proc-node-order-actions {
  display: flex;
}
.erp-workorder-workbench .btn-shift-order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  padding: 0;
  background: var(--wb-surface);
  color: var(--wb-text-muted);
  border: 1px solid var(--wb-border);
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.erp-workorder-workbench .btn-shift-order:hover {
  background: var(--primary);
  color: var(--wb-on-solid);
  border-color: var(--primary);
}
.erp-workorder-workbench .proc-route-arrow {
  flex: 0 0 auto;
  color: var(--wb-text-subtle);
  font-size: 14px;
  font-weight: 800;
}
.erp-workorder-workbench .proc-add-node-btn {
  flex: 0 0 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 52px;
  background: transparent;
  color: var(--wb-text-muted);
  border: 1.5px dashed var(--wb-border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.erp-workorder-workbench .proc-add-node-btn:hover {
  background: var(--wb-primary-soft);
  color: var(--wb-primary-text);
  border-color: var(--primary);
}
/* 站別代表色圓點（顏色由 inline background 指定） */
.erp-workorder-workbench .proc-color-dot {
  display: inline-block;
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ==========================================================================
   9. 當前製程深度明細微調工作台（Process Detail Workbench）
   ========================================================================== */
.erp-workorder-workbench .proc-detail-workbench {
  padding: 16px 18px;
  background: var(--wb-surface);
  border: 1.5px solid var(--wb-primary-edge);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.erp-workorder-workbench .proc-workbench-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wb-divider);
}
.erp-workorder-workbench .proc-detail-workbench label,
.erp-workorder-workbench .wb-station-notes label {
  color: var(--wb-text-strong);
  font-size: 13.5px !important;
  font-weight: 700;
}
.erp-workorder-workbench .workbench-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.erp-workorder-workbench .workbench-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--wb-primary-soft);
  color: var(--primary);
  border-radius: 7px;
  font-size: 15px;
  font-weight: 800;
}
.erp-workorder-workbench .workbench-title {
  color: var(--wb-text-strong);
  font-size: 15.5px;
  font-weight: 700;
}
.erp-workorder-workbench .workbench-tag {
  padding: 2px 8px;
  background: var(--wb-primary-soft);
  color: var(--wb-primary-deep);
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
}
.erp-workorder-workbench .workbench-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 印刷放數與令數自動試算橫幅。position:relative 是放數 popover 的定位錨點。 */
.erp-workorder-workbench .autocalc-strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 8px 14px;
  background: var(--wb-surface-2);
  color: var(--wb-text-2);
  border: 1px solid var(--wb-border);
  border-radius: 7px;
  font-size: 12.5px;
}
.erp-workorder-workbench .autocalc-strip strong {
  color: var(--wb-primary-text);
}
/* 配合廠商標籤 */
.erp-workorder-workbench .proc-node-vendor-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 4px;
  padding: 1px 6px;
  background: var(--wb-sky-soft);
  color: var(--wb-sky-strong);
  border: 1px solid var(--wb-sky-border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 工作台生產狀態與即時完工進度徽章 */
.erp-workorder-workbench .wb-status-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.erp-workorder-workbench .wb-progress-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.erp-workorder-workbench .wb-progress-badge.done {
  background: var(--wb-green-soft-2);
  color: var(--wb-green-strong);
  border-color: var(--wb-green-border-2);
}
.erp-workorder-workbench .wb-progress-badge.active {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue-border-2);
}
.erp-workorder-workbench .wb-progress-badge.pending {
  background: var(--wb-surface-3);
  color: var(--wb-text-3);
  border-color: var(--wb-border-strong);
}
.erp-workorder-workbench .wb-progress-badge.blocked {
  background: var(--wb-red-soft-2);
  color: var(--wb-red-strong);
  border-color: var(--wb-red-border);
}
.erp-workorder-workbench .btn-vendor-history {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  background: var(--wb-blue-soft);
  color: var(--wb-blue);
  border: none;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.erp-workorder-workbench .btn-vendor-history:hover {
  background: var(--wb-blue-soft-2);
  color: var(--wb-blue-strong);
}

/* 廠商名片與歷史報價表格（VB6 經典功能還原） */
.erp-workorder-workbench .vendor-profile-card {
  padding: 14px 18px;
  background: var(--wb-surface-2);
  border: 1.5px solid var(--wb-border);
  border-radius: 8px;
}
.erp-workorder-workbench .vendor-history-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 12.5px;
}
.erp-workorder-workbench .vendor-history-table th,
.erp-workorder-workbench .vendor-history-table td {
  padding: 8px;
  border-bottom: 1px solid var(--wb-border);
  vertical-align: middle;
  white-space: nowrap !important; /* 清單文字與數值絕不斷行 */
}
.erp-workorder-workbench .vendor-history-table th {
  background: var(--wb-surface-3);
  color: var(--wb-text-2);
  border-bottom: 1.5px solid var(--wb-border-strong);
  font-weight: 700;
  letter-spacing: 0.3px;
}
.erp-workorder-workbench .vendor-history-table tbody tr {
  transition: background 0.12s ease;
}
.erp-workorder-workbench .vendor-history-table tbody tr:hover {
  background: var(--wb-green-soft);
}
.erp-workorder-workbench .btn-apply-history-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--wb-green-solid);
  color: var(--wb-on-solid);
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap !important; /* 按鈕文字絕不斷行 */
  transition: all 0.15s ease;
}
.erp-workorder-workbench .btn-apply-history-price:hover {
  background: var(--wb-green-solid-hover);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}


/* ==========================================================================
   10. 工序代表色選擇器
   ========================================================================== */
.erp-workorder-workbench .proc-color-swatches {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.erp-workorder-workbench .proc-color-swatch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2.5px solid var(--wb-surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--wb-border-strong);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .proc-color-swatch-btn:hover {
  box-shadow: 0 0 0 2px var(--primary);
  transform: scale(1.18);
}
.erp-workorder-workbench .proc-color-swatch-btn.active {
  box-shadow: 0 0 0 2.5px var(--wb-text-strong), 0 3px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.22);
}
/* 自由自選調色盤彩虹按鈕 */
.erp-workorder-workbench .proc-color-swatch-custom-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: conic-gradient(from 180deg at 50% 50%, #EF4444 0deg, #F59E0B 72deg, #10B981 144deg, #3B82F6 216deg, #8B5CF6 288deg, #EF4444 360deg);
  border: 2px solid var(--wb-surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.erp-workorder-workbench .proc-color-swatch-custom-wrap:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: scale(1.15);
}
.erp-workorder-workbench .proc-color-swatch-custom-wrap.active {
  border-color: var(--wb-text-strong) !important;
  box-shadow: 0 0 0 2px var(--wb-blue) !important;
}
.erp-workorder-workbench .proc-color-native-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}


/* ==========================================================================
   11. 放數試算按鈕與「自訂常用放數」Popover
   ========================================================================== */
.erp-workorder-workbench .autocalc-btn {
  padding: 4px 10px;
  background: var(--wb-surface);
  color: var(--wb-text-2);
  border: 1px solid var(--wb-border-strong);
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .autocalc-btn:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue-mid);
}
.erp-workorder-workbench .autocalc-btn.active {
  background: var(--wb-blue-solid) !important;
  color: var(--wb-on-solid) !important;
  border-color: var(--wb-blue-strong) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.4) !important;
}
.erp-workorder-workbench .btn-custom-waste-gear {
  background: var(--wb-surface-2) !important;
  color: var(--wb-text-3) !important;
  border: 1px dashed var(--wb-border-hover) !important;
}
.erp-workorder-workbench .btn-custom-waste-gear:hover {
  background: var(--wb-blue-soft) !important;
  color: var(--wb-blue-strong) !important;
  border: 1px solid var(--wb-blue-mid) !important;
}

.custom-waste-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 105;
  display: none;
  width: 330px;
  max-width: calc(100vw - 32px);
  max-height: min(420px, calc(100vh - 120px));
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--wb-surface);
  color: var(--wb-text-2);
  border: 1.5px solid var(--wb-border-strong);
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.16), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  animation: wowbCwpFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-waste-popover.dropup {
  top: auto !important;
  bottom: calc(100% + 6px) !important;
}
.custom-waste-popover.show {
  display: block;
}
.wb-staff-menu {
  position: fixed !important;
  z-index: 999999 !important;
  overflow-y: auto !important;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--wb-surface, #FFFFFF);
  color: var(--wb-text, #0F172A);
  border: 1.5px solid var(--wb-border-strong, #94A3B8);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36), 0 2px 6px rgba(0, 0, 0, 0.15);
}
.wb-staff-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s ease;
}
.wb-staff-option:hover {
  background: var(--wb-surface-hover, #F1F5F9);
}
@keyframes wowbCwpFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.custom-waste-popover .cwp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--wb-border);
  color: var(--wb-text);
  font-weight: 700;
}
.custom-waste-popover .cwp-title {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--wb-text);
  font-size: 13px;
}
.custom-waste-popover .cwp-close {
  padding: 2px 6px;
  background: transparent;
  color: var(--wb-text-muted);
  border: none;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.custom-waste-popover .cwp-close:hover {
  background: var(--wb-surface-3);
  color: var(--wb-text);
}
.custom-waste-popover .cwp-field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--wb-text-2);
  font-weight: 700;
}
.custom-waste-popover .cwp-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.custom-waste-popover .cwp-input {
  flex: 1;
  padding: 5px 8px;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1.5px solid var(--wb-border-strong);
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  transition: all 0.15s;
}
.custom-waste-popover .cwp-input:focus {
  border-color: var(--wb-blue);
  box-shadow: 0 0 0 2px var(--wb-blue-ring);
}
.custom-waste-popover .cwp-hint {
  margin-bottom: 6px;
  color: var(--wb-text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.custom-waste-popover .cwp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.custom-waste-popover .cwp-tag {
  padding: 2px 6px;
  background: var(--wb-surface-3);
  color: var(--wb-text-3);
  border: 1px solid var(--wb-border-strong);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
.custom-waste-popover .cwp-tag:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue-border-2);
}
.custom-waste-popover .cwp-divider {
  margin: 9px 0 8px;
  border-top: 1px dashed var(--wb-border);
}
.custom-waste-popover .cwp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--wb-border);
}
.custom-waste-popover .cwp-btn-save {
  padding: 5px 12px;
  background: var(--wb-blue-solid);
  color: var(--wb-on-solid);
  border: 1px solid var(--wb-blue-strong);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.custom-waste-popover .cwp-btn-save:hover {
  background: var(--wb-blue-solid-hover);
}
.custom-waste-popover .cwp-btn-ghost {
  padding: 5px 8px;
  background: transparent;
  color: var(--wb-text-3);
  border: 1px solid var(--wb-border);
  border-radius: 5px;
  font-size: 11.5px;
  cursor: pointer;
}
.custom-waste-popover .cwp-btn-ghost:hover {
  background: var(--wb-surface-3);
  color: var(--wb-text);
}
.custom-waste-popover .cwp-btn-mini {
  padding: 4px 7px;
  background: var(--wb-surface-2);
  color: var(--wb-text-2);
  border: 1px solid var(--wb-border-strong);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.custom-waste-popover .cwp-btn-mini:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue-mid);
}


/* ==========================================================================
   12. Universal Combobox（可輸入快選）與全域 Portal 下拉
       輸入元件（.erp-combobox-wrap／-input／-arrow）在工作台之內，掛命名空間，
       這樣它和 .table-input／.input-lg／.modal-field input 的 specificity 大小關係
       才會和 demo 原樣一致（size-sm／size-md／size-lg 要贏過它們）。
       下拉清單（#erp-global-combobox-portal／.erp-portal-*）由 JS 直接掛到 body，
       名稱專屬，不依賴根節點。
   ========================================================================== */
.erp-workorder-workbench .erp-combobox-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  vertical-align: middle;
}
/* 輸入框：單行不斷行，科技藍外發光光暈 */
.erp-workorder-workbench .erp-combobox-input {
  width: 100%;
  padding: 0 24px 0 9px;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1px solid var(--wb-border-strong);
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .erp-combobox-input:focus {
  background: var(--wb-surface) !important;
  border-color: var(--wb-blue) !important;
  box-shadow: 0 0 0 2.5px var(--wb-blue-ring) !important;
  outline: none !important;
}
/* 右側小箭頭 */
.erp-workorder-workbench .erp-combobox-arrow {
  position: absolute;
  top: 50%;
  right: 7px;
  color: var(--wb-text-muted);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform 0.15s ease, color 0.15s ease;
}
.erp-workorder-workbench .erp-combobox-wrap.open .erp-combobox-arrow {
  color: var(--wb-blue);
  transform: translateY(-50%) rotate(180deg);
}
/* 尺寸規格 (L62 契約保證下限 >= 38px) */
.erp-workorder-workbench .erp-combobox-input.size-sm {
  min-height: 38px;
  height: 38px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.35;
}
.erp-workorder-workbench .erp-combobox-input.size-md {
  min-height: 38px;
  height: 38px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
}
.erp-workorder-workbench .erp-combobox-input.size-lg {
  height: 46px;
  border: 1.5px solid var(--wb-border-strong);
  border-radius: 7px;
  font-size: 15px;
}
/* 狀態型 Combobox（如 wb-status-select） */
.erp-workorder-workbench .erp-combobox-wrap.status-combobox {
  min-width: 110px;
}
.erp-workorder-workbench .erp-combobox-wrap.status-combobox .erp-combobox-input {
  font-weight: 700;
  cursor: pointer;
}

/* 全域懸浮清單（Fixed Portal）：徹底解決表格與對話框 overflow 遮切。
   #erp-global-combobox-portal 與 .erp-portal-dropdown 是同一個元素的 id 與 class。 */
.erp-portal-dropdown,
#erp-global-combobox-portal {
  position: fixed;
  z-index: var(--wb-z-popover);
  display: none;
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1.5px solid var(--wb-blue);
  border-radius: 8px;
  box-shadow: var(--wb-shadow-pop);
  font-family: var(--font-sans, inherit);
  font-size: 12.5px;
}
.erp-portal-dropdown.show,
#erp-global-combobox-portal.show {
  display: block;
  animation: wowbPortalFade 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wowbPortalFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 分組抬頭（OptGroup） */
.erp-portal-group-title {
  padding: 6px 12px 4px;
  background: var(--wb-surface-3);
  color: var(--wb-text-3);
  border-bottom: 1px solid var(--wb-border);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/* 選項條目 */
.erp-portal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  color: var(--wb-text);
  border-bottom: 1px solid var(--wb-surface-3);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap !important;
  transition: background 0.1s ease, color 0.1s ease;
}
.erp-portal-item:last-child {
  border-bottom: none;
}
.erp-portal-item:hover,
.erp-portal-item.active {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
}
.erp-portal-item.selected {
  font-weight: 700;
}
/* 選項內的徽章與輔助標籤 */
.erp-portal-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
}
.erp-portal-badge.internal {
  background: var(--wb-amber-soft);
  color: var(--wb-amber-text);
}
.erp-portal-badge.outsource {
  background: var(--wb-sky-soft);
  color: var(--wb-sky-strong);
}
.erp-portal-badge.done {
  background: var(--wb-green-soft-2);
  color: var(--wb-green-strong);
}
.erp-portal-badge.active {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
}
.erp-portal-badge.blocked {
  background: var(--wb-red-soft-2);
  color: var(--wb-red-strong);
}
.erp-portal-badge.pending {
  background: var(--wb-surface-3);
  color: var(--wb-text-3);
}
.erp-portal-code {
  margin-left: 6px;
  color: var(--wb-text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
}
.erp-portal-desc {
  margin-left: auto;
  padding-left: 12px;
  color: var(--wb-text-muted);
  font-size: 11px;
}
.erp-portal-empty {
  padding: 14px 12px;
  color: var(--wb-text-muted);
  font-size: 12px;
  text-align: center;
}

/* 片語專用 Combobox 與浮層選單（VB6 與 ERP 片語系統整合） */
.erp-workorder-workbench .phrase-combobox-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.erp-workorder-workbench .phrase-combobox-wrap .erp-combobox-arrow {
  padding: 2px 4px;
  cursor: pointer;
  pointer-events: auto;
}
.erp-workorder-workbench .phrase-combobox-wrap .erp-combobox-arrow:hover {
  color: var(--wb-blue);
}
.erp-portal-badge.phrase {
  background: var(--wb-indigo-soft);
  color: var(--wb-indigo-text);
  border: 1px solid var(--wb-indigo-border);
}
.erp-portal-phrase-list {
  max-height: 190px;
  overflow-y: auto;
}
.erp-portal-phrase-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--wb-surface-2);
  border-top: 1px solid var(--wb-border);
}
.btn-portal-add-phrase {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border: 1px solid var(--wb-blue-border);
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-portal-add-phrase:hover {
  background: var(--wb-blue-soft-2);
  color: var(--wb-blue-deep);
}
.btn-portal-manage-phrases {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--wb-surface);
  color: var(--wb-text-3);
  border: 1px solid var(--wb-border-strong);
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-portal-manage-phrases:hover {
  background: var(--wb-surface-3);
  color: var(--wb-text);
  border-color: var(--wb-border-hover);
}
/* 片語管理中心列表 */
.phrase-mgr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--wb-surface-3);
  transition: background 0.1s ease;
}
.phrase-mgr-row:hover {
  background: var(--wb-surface-2);
}
.btn-phrase-rename,
.btn-phrase-delete {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  cursor: pointer;
}
.btn-phrase-rename {
  background: var(--wb-surface);
  color: var(--wb-text-2);
  border: 1px solid var(--wb-border-strong);
}
.btn-phrase-delete {
  background: var(--wb-red-soft);
  color: var(--wb-red-strong);
  border: 1px solid var(--wb-red-border);
}

/* ==========================================================================
   廠商快速選擇下拉清單（依 design.md：對齊共用 .erp-portal-dropdown / .erp-portal-item）
   ========================================================================== */
.vendor-combobox-dropdown {
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1.5px solid var(--wb-blue);
  border-radius: 8px;
  box-shadow: var(--wb-shadow-pop);
  font-family: var(--font-sans, inherit);
  font-size: 12.5px;
  overflow-x: hidden;
  box-sizing: border-box;
}

.vendor-combobox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  color: var(--wb-text);
  border-bottom: 1px solid var(--wb-surface-3);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap !important;
  box-sizing: border-box;
  transition: background 0.1s ease, color 0.1s ease;
}

.vendor-combobox-item:last-child {
  border-bottom: none;
}

.vendor-combobox-item:hover,
.vendor-combobox-item.active {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
}

.vendor-combobox-title {
  display: flex;
  align-items: baseline;
  min-width: 0;
  flex: 1;
}

.vendor-combobox-name {
  font-weight: 500;
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vendor-combobox-code {
  margin-left: 8px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: var(--wb-text-3);
}

.vendor-combobox-item:hover .vendor-combobox-code,
.vendor-combobox-item.active .vendor-combobox-code {
  color: inherit;
}

.vendor-combobox-meta {
  margin-left: auto;
  padding-left: 12px;
  font-size: 12px;
  color: var(--wb-text-3);
}

.vendor-combobox-item:hover .vendor-combobox-meta,
.vendor-combobox-item.active .vendor-combobox-meta {
  color: inherit;
}


/* ==========================================================================
   13. 明細內嵌歷史報價（圖示、最近單價小膠囊、多筆歷史報價 Popover）
   ========================================================================== */
.erp-workorder-workbench .price-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.erp-workorder-workbench .row-history-trigger {
  position: absolute;
  top: 50%;
  right: 4px;
  padding: 2px 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  opacity: 0.65;
  cursor: pointer;
  transform: translateY(-50%);
  transition: all 0.15s ease;
}
.erp-workorder-workbench .row-history-trigger:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue);
  opacity: 1;
  transform: translateY(-50%) scale(1.15);
}
.erp-workorder-workbench .row-history-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
/* 最近單價小膠囊（點擊秒帶入） */
.erp-workorder-workbench .row-history-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1.5px 6px;
  background: var(--wb-blue-soft);
  color: var(--wb-blue);
  border: 1px solid var(--wb-blue-border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap !important;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .row-history-pill:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
  transform: translateY(-1px);
}
.erp-workorder-workbench .row-history-pill.internal {
  color: var(--wb-amber-text);
  border-color: var(--wb-amber-border);
}
.erp-workorder-workbench .row-history-pill.internal:hover {
  background: var(--wb-amber-soft);
}

/* 多筆歷史報價快選浮層（.rh-popover 與 .row-history-popover 是同一個元件的兩種寫法） */
.row-history-popover,
.rh-popover {
  position: fixed;
  z-index: var(--wb-z-popover);
  display: none;
  width: 440px;
  max-width: 95vw;
  overflow: hidden;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1.5px solid var(--wb-blue);
  border-radius: 8px;
  box-shadow: var(--wb-shadow-pop);
  font-family: var(--font-sans, inherit);
  font-size: 12px;
  animation: wowbRhPopoverFade 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
.row-history-popover.show,
.rh-popover.show {
  display: block;
}
@keyframes wowbRhPopoverFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.rh-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--wb-blue-soft);
  border-bottom: 1px solid var(--wb-blue-border);
}
.rh-popover-title {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--wb-blue-deep);
  font-size: 12.5px;
  font-weight: 800;
}
.rh-popover-hint {
  color: var(--wb-blue);
  font-size: 11px;
  font-weight: 700;
}
.rh-popover-list {
  max-height: 240px;
  overflow-y: auto;
}
.rh-popover-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--wb-surface-3);
  border-left: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap !important;
  transition: all 0.12s ease;
}
.rh-popover-item:last-child {
  border-bottom: none;
}
.rh-popover-item:hover {
  background: var(--wb-blue-soft);
  border-left-color: var(--wb-blue);
}
/* 價格是最容易出事的數字：不用 monospace 粗體，改系統無襯線體 ＋ tabular-nums */
.rh-popover-price {
  color: var(--wb-green-strong);
  font-size: 13.5px;
  font-weight: 800;
}
.rh-popover-tag {
  margin-left: 4px;
  padding: 1px 5px;
  background: var(--wb-green-soft-2);
  color: var(--wb-green-strong);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}
.rh-popover-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--wb-text-muted);
  font-size: 11.5px;
}
.rh-popover-item .btn-fast-apply {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  padding: 2.5px 8px;
  background: var(--wb-green-soft-2);
  color: var(--wb-green-strong);
  border: 1px solid var(--wb-green-border-2);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  transition: all 0.12s ease;
}
.rh-popover-item:hover .btn-fast-apply {
  background: var(--wb-green-solid-hover);
  color: #FFFFFF;
  border-color: var(--wb-green-solid-hover);
  box-shadow: 0 1px 3px rgba(21, 128, 61, 0.3);
}
.rh-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--wb-surface-2);
  border-top: 1px solid var(--wb-border);
}
.rh-btn-full-modal {
  padding: 3px 6px;
  background: transparent;
  color: var(--wb-blue);
  border: none;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.rh-btn-full-modal:hover {
  background: var(--wb-blue-soft);
  text-decoration: underline;
}


/* ==========================================================================
   14. 真實製程明細表（Real Process Lines Table）與數值零截斷欄寬
   ========================================================================== */
.erp-workorder-workbench .real-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.erp-workorder-workbench .real-lines-table th {
  padding: 6px 8px;
  background: var(--wb-surface-3);
  color: var(--wb-text);
  border-bottom: 2px solid var(--wb-border-strong);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.erp-workorder-workbench .real-lines-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--wb-border);
  vertical-align: middle;
  cursor: text;
  font-size: 14px;
  white-space: nowrap; /* 工作台清單儲存格絕不斷行 */
  transition: background 0.1s ease;
}
.erp-workorder-workbench .real-lines-table tr:hover td {
  background: var(--wb-surface-2);
}
.erp-workorder-workbench .real-lines-table tr.row-active td {
  background: var(--wb-blue-soft) !important;
}
.erp-workorder-workbench .real-lines-table tr.row-done td {
  background: var(--wb-surface-2);
  color: var(--wb-text-muted);
}
.erp-workorder-workbench .real-lines-table tr.row-done .table-input {
  color: var(--wb-text-3);
}

/* 明細品項滑鼠拖曳排序 */
.erp-workorder-workbench .row-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 3px;
  padding: 2px 4px;
  color: var(--wb-text-subtle);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
  cursor: grab;
  user-select: none;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.erp-workorder-workbench .row-drag-handle:hover {
  color: var(--wb-blue);
  background-color: var(--wb-blue-soft);
}
.erp-workorder-workbench .row-drag-handle:active {
  cursor: grabbing;
  transform: scale(1.1);
}
.erp-workorder-workbench .row-seq-num {
  display: inline-block;
  min-width: 18px;
  text-align: center;
}
.erp-workorder-workbench .real-lines-table tr.row-dragging {
  background: var(--wb-blue-soft) !important;
  opacity: 0.35;
}
.erp-workorder-workbench .real-lines-table tr.row-drag-over-top td {
  border-top: 2.5px solid var(--wb-blue) !important;
}
.erp-workorder-workbench .real-lines-table tr.row-drag-over-bottom td {
  border-bottom: 2.5px solid var(--wb-blue) !important;
}
.erp-workorder-workbench .real-lines-table tr.row-just-moved {
  animation: wowbRowHighlightFade 1.2s ease-out;
}
@keyframes wowbRowHighlightFade {
  0% { background-color: var(--wb-blue-soft-2); }
  100% { background-color: transparent; }
}

/* 表格內輸入框。
   .wo-process-modal .table-input 是給 body 層的片語管理對話框用的（它沿用 erp-styles.css 的
   .wo-process-modal 外殼，但不在工作台命名空間內）；.table-input 是既有畫面沒用過的 class，不會誤中。
   ⚠ .table-input 常與 .erp-combobox-input.size-sm 併用（項目、規格、單位欄）：
     - 高度 30／字級 12.5／圓角由 size-sm 決定（它的 specificity 較高，demo 原本就是這樣）；
     - padding／邊框／背景由 .table-input 決定（兩者 specificity 相同，後出現者優先），
       所以本區必須排在第 12 區（combobox）之後。 */
.erp-workorder-workbench .table-input,
.wo-process-modal .table-input {
  width: 100%;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 8px;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1px solid var(--wb-border-strong);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.35;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.erp-workorder-workbench .table-input:hover,
.wo-process-modal .table-input:hover {
  background: var(--wb-surface-2);
  border-color: var(--wb-border-hover);
}
.erp-workorder-workbench .table-input:focus,
.wo-process-modal .table-input:focus {
  outline: none;
  border-color: var(--wb-blue);
  box-shadow: 0 0 0 2.5px var(--wb-blue-ring);
}
/* combobox 版本：右側要留位置給箭頭，否則長字會被箭頭蓋住 */
.erp-workorder-workbench .erp-combobox-wrap .table-input {
  padding-right: 24px;
}
/* 數值輸入（單價、數量、放數）：靠右、等寬數字、不換字體粗細以外的任何花樣 */
.erp-workorder-workbench .table-input.num {
  font-size: 14.5px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 確保單價、數量、放數、小計完整顯示，絕不被壓縮切斷（零截斷）。
   th 與 td 同寬；min-width 略小於 width，表格被擠壓時最多縮 5px。 */
.erp-workorder-workbench .real-lines-table th.col-qty,
.erp-workorder-workbench .real-lines-table td.col-qty {
  width: 110px;
  min-width: 105px;
  text-align: right;
}
.erp-workorder-workbench .real-lines-table th.col-free,
.erp-workorder-workbench .real-lines-table td.col-free {
  width: 105px;
  min-width: 100px;
  text-align: right;
}
.erp-workorder-workbench .real-lines-table th.col-price,
.erp-workorder-workbench .real-lines-table td.col-price {
  width: 130px;
  min-width: 125px;
  text-align: right;
}
.erp-workorder-workbench .real-lines-table th.col-subtotal,
.erp-workorder-workbench .real-lines-table td.col-subtotal {
  width: 115px;
  min-width: 110px;
  text-align: right;
}
.erp-workorder-workbench .real-lines-table th.col-note,
.erp-workorder-workbench .real-lines-table td.col-note {
  width: 85px;
  min-width: 80px;
  text-align: center;
}
.erp-workorder-workbench .real-lines-table th.col-content,
.erp-workorder-workbench .real-lines-table td.col-content {
  width: 95px;
  min-width: 90px;
  text-align: center;
}
/* 小計：右對齊、不換行、不加省略號 */
.erp-workorder-workbench .subtotal-cell {
  color: var(--wb-primary-strong);
  font-size: 14.5px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* 步驟 2 印件規格緊湊排版（釋放 220px 垂直空間） */
.erp-workorder-workbench .wb-spec-compact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 12px;
  align-items: flex-start;
  margin-bottom: 4px;
}
.erp-workorder-workbench .wb-spec-secondary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--wb-surface-2, #F8FAFC);
  border-radius: 6px;
  border: 1px solid var(--wb-border, #E2E8F0);
}

.erp-workorder-workbench .table-select {
  width: 100%;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 8px;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1px solid var(--wb-border-strong);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.35;
  box-sizing: border-box !important;
}
.erp-workorder-workbench .table-select:focus {
  outline: none;
  border-color: var(--wb-blue);
  box-shadow: 0 0 0 2.5px var(--wb-blue-ring);
}
.erp-workorder-workbench .done-chk {
  width: 17px;
  height: 17px;
  accent-color: var(--wb-green);
  cursor: pointer;
}
.erp-workorder-workbench .del-row-btn {
  padding: 4px;
  background: transparent;
  color: var(--wb-red);
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.erp-workorder-workbench .del-row-btn:hover {
  background: var(--wb-red-soft);
}


/* ==========================================================================
   15. 膠囊按鈕（長文字 Modal 觸發鈕）
       .btn-capsule       尚未填寫：灰白虛線
       .btn-capsule-blue  已填寫（藍，備註／出貨交代）
       .btn-capsule-green 已填寫（綠，工作內容／裝訂）
       .is-compact        表格儲存格內的精簡尺寸
       ⚠ 這些按鈕常帶 .empty，而 erp-styles.css 的 .empty 有 padding:40px 20px；
         所以 padding／text-align／font-size／color 一律在這裡明講，不讓既有規則滲進來。
   ========================================================================== */
.erp-workorder-workbench .btn-capsule,
.erp-workorder-workbench .btn-capsule-blue,
.erp-workorder-workbench .btn-capsule-green {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .btn-capsule {
  background: var(--wb-surface-2);
  color: var(--wb-text-muted);
  border: 1.5px dashed var(--wb-border-strong);
}
.erp-workorder-workbench .btn-capsule:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue);
}
.erp-workorder-workbench .btn-capsule-blue {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border: 1.5px solid var(--wb-blue-border);
}
.erp-workorder-workbench .btn-capsule-blue:hover {
  background: var(--wb-blue-soft-2);
  color: var(--wb-blue-deep);
  border-color: var(--wb-blue);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}
.erp-workorder-workbench .btn-capsule-green {
  background: var(--wb-green-soft);
  color: var(--wb-green-strong);
  border: 1.5px solid var(--wb-green-border);
}
.erp-workorder-workbench .btn-capsule-green:hover {
  background: var(--wb-green-soft-2);
  color: var(--wb-green-deep);
  border-color: var(--wb-green);
  box-shadow: 0 2px 6px var(--wb-green-ring);
}
.erp-workorder-workbench .btn-capsule.is-compact,
.erp-workorder-workbench .btn-capsule-blue.is-compact,
.erp-workorder-workbench .btn-capsule-green.is-compact {
  justify-content: center;
  gap: 3px;
  min-height: 38px !important;
  height: 38px !important;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.35;
  box-sizing: border-box !important;
}
.erp-workorder-workbench .btn-capsule:disabled,
.erp-workorder-workbench .btn-capsule-blue:disabled,
.erp-workorder-workbench .btn-capsule-green:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.erp-workorder-workbench .btn-capsule .btn-icon,
.erp-workorder-workbench .btn-capsule-blue .btn-icon,
.erp-workorder-workbench .btn-capsule-green .btn-icon {
  flex-shrink: 0;
  font-size: 16px;
}
.erp-workorder-workbench .btn-capsule .btn-text,
.erp-workorder-workbench .btn-capsule-blue .btn-text,
.erp-workorder-workbench .btn-capsule-green .btn-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* demo 沿用的舊名：明細列的「備註」「工作內容」按鈕與步驟層級的長文字按鈕 */
.erp-workorder-workbench .btn-row-note,
.erp-workorder-workbench .btn-row-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 38px !important;
  height: 38px !important;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box !important;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .btn-row-note.empty,
.erp-workorder-workbench .btn-row-content.empty {
  background: var(--wb-surface-2);
  color: var(--wb-text-muted);
  border: 1px dashed var(--wb-border-strong);
}
.erp-workorder-workbench .btn-row-note.empty:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue);
  border-color: var(--wb-blue);
  border-style: solid;
  transform: translateY(-1px);
}
.erp-workorder-workbench .btn-row-content.empty:hover {
  background: var(--wb-green-soft);
  color: var(--wb-green);
  border-color: var(--wb-green);
  border-style: solid;
  transform: translateY(-1px);
}
.erp-workorder-workbench .btn-row-note.has-note {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border: 1px solid var(--wb-blue-border);
}
.erp-workorder-workbench .btn-row-note.has-note:hover {
  background: var(--wb-blue-soft-2);
  color: var(--wb-blue-deep);
  border-color: var(--wb-blue);
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.2);
  transform: translateY(-1px);
}
.erp-workorder-workbench .btn-row-content.has-content {
  background: var(--wb-green-soft);
  color: var(--wb-green-strong);
  border: 1px solid var(--wb-green-border);
}
.erp-workorder-workbench .btn-row-content.has-content:hover {
  background: var(--wb-green-soft-2);
  color: var(--wb-green-deep);
  border-color: var(--wb-green);
  box-shadow: 0 2px 5px var(--wb-green-ring);
  transform: translateY(-1px);
}
.erp-workorder-workbench .btn-row-note .note-preview-text {
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.erp-workorder-workbench .btn-row-content .content-preview-text {
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.erp-workorder-workbench .btn-step-modal {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .btn-step-modal.empty {
  background: var(--wb-surface-2);
  color: var(--wb-text-muted);
  border: 1.5px dashed var(--wb-border-strong);
}
.erp-workorder-workbench .btn-step-modal.empty:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue);
}
.erp-workorder-workbench .btn-step-modal.has-content {
  background: var(--wb-green-soft);
  color: var(--wb-green-strong);
  border: 1.5px solid var(--wb-green-border);
}
.erp-workorder-workbench .btn-step-modal.has-content:hover {
  background: var(--wb-green-soft-2);
  color: var(--wb-green-deep);
  border-color: var(--wb-green);
  box-shadow: 0 2px 6px var(--wb-green-ring);
}
.erp-workorder-workbench .btn-step-modal .btn-icon {
  flex-shrink: 0;
  font-size: 16px;
}
.erp-workorder-workbench .btn-step-modal .btn-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 交期快捷按鈕與急件標記 */
.erp-workorder-workbench .date-presets-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.erp-workorder-workbench .date-preset-pill {
  padding: 2px 7px;
  background: var(--wb-surface-2);
  color: var(--wb-text-2);
  border: 1px solid var(--wb-border-strong);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  transition: all 0.12s ease;
}
.erp-workorder-workbench .date-preset-pill:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue);
}
.erp-workorder-workbench .date-preset-pill.urgent-active {
  background: var(--wb-red-soft) !important;
  color: var(--wb-red-strong) !important;
  border-color: var(--wb-red-bright) !important;
  font-weight: 700;
}


/* ==========================================================================
   16. 卡片動作列按鈕與提示訊息
   ========================================================================== */
.erp-workorder-workbench .btn-next,
.wo-process-modal .btn-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 22px;
  background: var(--primary);
  color: var(--wb-on-solid);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(48, 160, 192, 0.3);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.erp-workorder-workbench .btn-next:hover,
.wo-process-modal .btn-next:hover {
  background: var(--primary-hover, #228AAA);
  transform: translateY(-1px);
}
.erp-workorder-workbench .btn-back {
  padding: 8px 16px;
  background: transparent;
  color: var(--wb-text);
  border: 1px solid var(--wb-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.erp-workorder-workbench .btn-back:hover {
  background: var(--wb-surface-3);
}
.erp-workorder-workbench .toast-bar {
  position: fixed;
  right: 30px;
  bottom: 20px;
  z-index: var(--wb-z-toast);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--wb-toast-bg);
  color: #FFFFFF;
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 12px 32px -8px rgba(15, 23, 42, 0.12));
  font-size: 13px;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.erp-workorder-workbench .toast-bar.show {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   17. 完工與關帳：狀態按鈕、一站式完工 Popover
   ========================================================================== */
.erp-workorder-workbench .btn-wo-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  max-width: 175px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
.erp-workorder-workbench .btn-wo-status .status-txt {
  white-space: nowrap;
}
/* 1. 未完工：清爽灰白，滑鼠移上去微藍提示「點擊立即完工」 */
.erp-workorder-workbench .btn-wo-status.pending {
  background: var(--wb-surface-2);
  color: var(--wb-text-muted);
  border-color: var(--wb-border-strong);
}
.erp-workorder-workbench .btn-wo-status.pending:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue-mid);
  box-shadow: 0 2px 5px rgba(59, 130, 246, 0.18);
  transform: translateY(-1px);
}
.erp-workorder-workbench .btn-wo-status.pending .status-icon {
  color: var(--wb-text-subtle);
  font-size: 11px;
}
.erp-workorder-workbench .btn-wo-status.pending:hover .status-icon {
  color: var(--wb-blue);
}
/* 2. 委外代工已完工：柔和草綠，點擊可改日期／帳期 */
.erp-workorder-workbench .btn-wo-status.done.outsource {
  background: var(--wb-green-soft);
  color: var(--wb-green-deep);
  border-color: var(--wb-green-border);
  font-weight: 700;
}
.erp-workorder-workbench .btn-wo-status.done.outsource:hover {
  background: var(--wb-green-soft-2);
  border-color: var(--wb-green-border-2);
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.18);
}
/* 3. 廠內機台已完工：柔和石板灰，提示免立應付 */
.erp-workorder-workbench .btn-wo-status.done.internal {
  background: var(--wb-surface-3);
  color: var(--wb-text-2);
  border-color: var(--wb-border-strong);
  font-weight: 600;
}
.erp-workorder-workbench .btn-wo-status.done.internal:hover {
  background: var(--wb-surface-2);
  border-color: var(--wb-border-hover);
}
.erp-workorder-workbench .btn-wo-status .status-arrow {
  margin-left: 2px;
  font-size: 10px;
  opacity: 0.6;
}

/* 一站式完工與關帳微調 Popover（掛在 body，名稱專屬）。
   背景／文字／不透明度用 !important：這是要蓋在表格與對話框上的浮層，絕不能被繼承成半透明。 */
.wo-completion-popover {
  position: fixed;
  z-index: var(--wb-z-popover);
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 295px;
  padding: 14px 16px;
  background-color: var(--wb-surface) !important;
  color: var(--wb-text) !important;
  border: 1.5px solid var(--wb-border-strong);
  border-radius: 10px;
  box-shadow: var(--wb-shadow-pop-lg);
  font-size: 12.5px;
  opacity: 1 !important;
}
.wo-completion-popover.show {
  display: flex;
}
.wo-completion-popover .cp-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wb-border);
}
.wo-completion-popover .cp-popover-title {
  color: var(--wb-text);
  font-size: 13px;
  font-weight: 700;
}
.wo-completion-popover input[type="date"],
.wo-completion-popover input[type="month"] {
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1.5px solid var(--wb-border-strong);
  border-radius: 5px;
}
/* 快選按鈕：.cp-quick-btn 為通用名稱，.cp-period-btn 是 demo 沿用的舊名 */
.wo-completion-popover .cp-quick-btn,
.wo-completion-popover .cp-period-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: var(--wb-surface-2);
  color: var(--wb-text);
  border: 1px solid var(--wb-border-strong);
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.wo-completion-popover .cp-quick-btn:hover,
.wo-completion-popover .cp-period-btn:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue-mid);
}
.wo-completion-popover .cp-quick-btn.active,
.wo-completion-popover .cp-period-btn.active {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue);
  box-shadow: 0 0 0 1.5px var(--wb-blue) inset;
  font-weight: 700;
}
.erp-workorder-workbench .btn-preset-month,
.wo-completion-popover .btn-preset-month {
  padding: 3px 8px;
  background: var(--wb-surface-2);
  color: var(--wb-text-2);
  border: 1px solid var(--wb-border-strong);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.erp-workorder-workbench .btn-preset-month:hover,
.wo-completion-popover .btn-preset-month:hover {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue-mid);
}
.erp-workorder-workbench .btn-preset-month.active,
.wo-completion-popover .btn-preset-month.active {
  background: var(--wb-blue-soft);
  color: var(--wb-blue-strong);
  border-color: var(--wb-blue-mid);
  font-weight: 700;
}


/* ==========================================================================
   18. 窄螢幕退化（demo 只有寬螢幕排版；這裡避免小視窗出現橫向捲軸）
   ========================================================================== */
@media (max-width: 1100px) {
  .erp-workorder-workbench .wide-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  /* 兩個人員按鈕需要各自至少容納三字姓名與下拉箭頭，窄桌面改成整列配置。 */
  .erp-workorder-workbench .wide-grid-4 .wb-staff-field {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .erp-workorder-workbench {
    padding: 12px;
  }
  .erp-workorder-workbench .wb-header-summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
  }
  .erp-workorder-workbench .wb-summary-card {
    padding: 8px 10px;
  }
  .erp-workorder-workbench .wb-summary-total-card {
    align-items: flex-start;
    text-align: left;
  }
  .erp-workorder-workbench .wb-summary-total {
    font-size: 16px;
  }
  .erp-workorder-workbench .wb-sticky-actions {
    align-items: stretch;
    flex-direction: column;
    padding: 10px;
  }
  .erp-workorder-workbench .wb-sticky-actions-left,
  .erp-workorder-workbench .wb-sticky-actions-right {
    width: 100%;
  }
  .erp-workorder-workbench .wb-sticky-actions-left > *,
  .erp-workorder-workbench .wb-sticky-actions-right > * {
    flex: 1 1 0;
  }
  .erp-workorder-workbench .wide-grid-4,
  .erp-workorder-workbench .wide-grid-2,
  .erp-workorder-workbench .modal-form-grid {
    grid-template-columns: 1fr;
  }
  .erp-workorder-workbench .modal-field.full {
    grid-column: auto;
  }
  .erp-workorder-workbench .card-body {
    padding: 16px;
  }
  .erp-workorder-workbench .focus-stepper {
    flex-wrap: wrap;
  }
}


/* ==========================================================================
   19. 減少動態（使用者系統設定偏好時關閉動畫）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .erp-workorder-workbench .flow-card.is-active-focus,
  .erp-workorder-workbench .wo-process-modal,
  .erp-workorder-workbench .proc-floating-actions,
  .erp-workorder-workbench .rush-btn.is-active .rush-dot,
  .erp-workorder-workbench .real-lines-table tr.row-just-moved,
  .erp-portal-dropdown.show,
  #erp-global-combobox-portal.show,
  .row-history-popover,
  .rh-popover,
  .custom-waste-popover {
    animation: none;
  }
  .erp-workorder-workbench .toast-bar {
    transition: none;
  }
}

/* ==========================================================================
   20. L62 原生契約深層強制保底（SUNCHEER_L62_UI_WORKBENCH_DEEP_38PX_OVERRIDE_20260929）
   ========================================================================== */

/* 1. 輸入框全域深層強制保底 */
.erp-workorder-workbench input[type="text"],
.erp-workorder-workbench input[type="number"],
.erp-workorder-workbench input[type="search"],
.erp-workorder-workbench input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.erp-workorder-workbench select,
.erp-workorder-workbench textarea,
.erp-workorder-workbench .field-input,
.erp-workorder-workbench .qtyInput,
.erp-workorder-workbench .priceInput,
.erp-workorder-workbench .form-control,
.erp-workorder-workbench .table-input,
.erp-workorder-workbench .table-select,
.erp-workorder-workbench .erp-combobox-input,
[data-wb-root] input[type="text"],
[data-wb-root] input[type="number"],
[data-wb-root] input[type="search"],
[data-wb-root] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
[data-wb-root] select,
[data-wb-root] textarea,
[data-wb-root] .field-input,
[data-wb-root] .qtyInput,
[data-wb-root] .priceInput,
[data-wb-root] .form-control,
[data-wb-root] .table-input,
[data-wb-root] .table-select,
[data-wb-root] .erp-combobox-input {
  min-height: 38px !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
}

/* 2. 按鈕深層強制保底（排除特定極小懸浮圖示與算式膠囊/抽屜關閉按鈕） */
.erp-workorder-workbench button:not(.proc-floating-btn):not(.tag-badge-remove):not(.autocalc-formula-hint-btn):not(.formula-drawer-close-btn),
.erp-workorder-workbench .btn-action-sm,
.erp-workorder-workbench .btn-stream-action,
.erp-workorder-workbench .proc-route-node button:not(.proc-floating-btn),
.erp-workorder-workbench .station-ctrl-btn,
.erp-workorder-workbench .btn-sub-compact,
.erp-workorder-workbench .btn-submit-compact,
.erp-workorder-workbench .btn-capsule,
.erp-workorder-workbench .btn-capsule-blue,
.erp-workorder-workbench .btn-capsule-green,
.erp-workorder-workbench .btn-row-note,
.erp-workorder-workbench .btn-row-content,
[data-wb-root] button:not(.proc-floating-btn):not(.tag-badge-remove):not(.autocalc-formula-hint-btn):not(.formula-drawer-close-btn),
[data-wb-root] .btn-action-sm,
[data-wb-root] .btn-stream-action,
[data-wb-root] .proc-route-node button:not(.proc-floating-btn),
[data-wb-root] .station-ctrl-btn,
[data-wb-root] .btn-sub-compact,
[data-wb-root] .btn-submit-compact,
[data-wb-root] .btn-capsule,
[data-wb-root] .btn-capsule-blue,
[data-wb-root] .btn-capsule-green,
[data-wb-root] .btn-row-note,
[data-wb-root] .btn-row-content {
  min-height: 38px !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
}

/* ─────────────────────────────────────────────────────────────
   製程明細算式提示 UI 與展開/摺疊抽屜 (TASK-C-UI2-AUTOCALC-FORMULA-UI-HINTS)
   ───────────────────────────────────────────────────────────── */

/* 小計欄位容器佈局 */
.col-subtotal {
  position: relative;
  text-align: right;
  vertical-align: middle;
}

.subtotal-val-text {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--wb-text-main, #0F172A);
  font-size: 13.5px;
  line-height: 1.3;
}

/* 小計單元格內精緻白話膠囊標籤 */
.autocalc-formula-hint-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  margin-top: 3px !important;
  padding: 1px 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #0369A1 !important; /* sky-700 */
  background: #E0F2FE !important; /* sky-100 */
  border: 1px solid #BAE6FD !important; /* sky-200 */
  border-radius: 9999px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  min-height: 20px !important;
  height: 20px !important;
  line-height: 1.2 !important;
}

.autocalc-formula-hint-btn:hover {
  background: #BAE6FD !important;
  border-color: #7DD3FC !important;
  color: #0284C7 !important;
  transform: translateY(-0.5px);
}

.autocalc-formula-hint-btn.is-open {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #0369A1 !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3) !important;
}

.autocalc-formula-hint-btn .hint-badge-icon {
  font-size: 10px;
}

.autocalc-formula-hint-btn .hint-badge-text {
  letter-spacing: 0.2px;
}

.autocalc-formula-hint-btn .hint-badge-arrow {
  font-size: 9px;
  opacity: 0.85;
}

/* 展開抽屜列 */
.formula-drawer-tr {
  background: #F8FAFC !important;
}

.formula-drawer-td {
  padding: 0 !important;
  border-top: none !important;
  border-bottom: 2px solid #E2E8F0 !important;
}

.formula-drawer-panel {
  padding: 12px 16px 14px;
  background: linear-gradient(180deg, #F0F9FF 0%, #F8FAFC 100%);
  border-left: 4px solid #0284C7;
  animation: wbFadeSlideDown 0.2s ease-out;
}

@keyframes wbFadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.formula-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #E0F2FE;
}

.formula-drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.formula-drawer-badge {
  font-size: 11px;
  font-weight: 700;
  color: #0369A1;
  background: #E0F2FE;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #BAE6FD;
}

.formula-drawer-name {
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
}

.formula-drawer-status-pill {
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 1px 6px;
  border-radius: 9999px;
}

.formula-drawer-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  background: transparent !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  min-height: 24px !important;
  height: 24px !important;
  line-height: 1.2 !important;
}

.formula-drawer-close-btn:hover {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

/* 抽屜內網格卡片 */
.formula-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.formula-drawer-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.formula-drawer-card.highlight {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.formula-drawer-card.tip {
  background: #FFFBEB;
  border-color: #FDE68A;
}

.drawer-card-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.formula-drawer-card.highlight .drawer-card-label {
  color: #15803D;
}

.formula-drawer-card.tip .drawer-card-label {
  color: #B45309;
}

.drawer-card-val-strong {
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.35;
}

.drawer-card-val-strong.val-money {
  font-size: 15px;
  font-family: var(--font-mono, monospace);
  color: #15803D;
}

.drawer-card-sub {
  font-size: 11.5px;
  color: #475569;
  line-height: 1.4;
}

.drawer-card-sub.text-hint {
  font-size: 10.5px;
  color: #64748B;
  font-style: italic;
}

.drawer-card-sub.tip-text {
  color: #92400E;
}

/* 深色主題相容 */
body.theme-dark .formula-drawer-panel,
.theme-dark .formula-drawer-panel {
  background: linear-gradient(180deg, #0B192C 0%, #0F172A 100%) !important;
  border-left-color: #38BDF8 !important;
}

body.theme-dark .formula-drawer-header,
.theme-dark .formula-drawer-header {
  border-bottom-color: #1E293B !important;
}

body.theme-dark .formula-drawer-name,
.theme-dark .formula-drawer-name {
  color: #F8FAFC !important;
}

body.theme-dark .formula-drawer-card,
.theme-dark .formula-drawer-card {
  background: #1E293B !important;
  border-color: #334155 !important;
}

body.theme-dark .formula-drawer-card.highlight,
.theme-dark .formula-drawer-card.highlight {
  background: rgba(22, 101, 52, 0.25) !important;
  border-color: #166534 !important;
}

body.theme-dark .formula-drawer-card.tip,
.theme-dark .formula-drawer-card.tip {
  background: rgba(180, 83, 9, 0.2) !important;
  border-color: #78350F !important;
}

body.theme-dark .drawer-card-val-strong,
.theme-dark .drawer-card-val-strong {
  color: #F1F5F9 !important;
}

body.theme-dark .drawer-card-sub,
.theme-dark .drawer-card-sub {
  color: #CBD5E1 !important;
}

body.theme-dark .drawer-card-sub.tip-text,
.theme-dark .drawer-card-sub.tip-text {
  color: #FDE68A !important;
}

body.theme-dark .autocalc-formula-hint-btn,
.theme-dark .autocalc-formula-hint-btn {
  background: rgba(14, 165, 233, 0.2) !important;
  color: #7DD3FC !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

body.theme-dark .autocalc-formula-hint-btn.is-open,
.theme-dark .autocalc-formula-hint-btn.is-open {
  background: #0284C7 !important;
  color: #FFFFFF !important;
}


/* erp-workorder-workbench.css 末端新增；僅 data-wb-mobile="true" 生效 */
.density-proposal[data-wb-mobile="true"] { overflow-x: hidden; }

.density-proposal[data-wb-mobile="true"] .split-pane-wrapper {
  flex-direction: column;
  height: auto;
  flex: 1 1 0;
  min-height: 0;
}
.density-proposal[data-wb-mobile="true"] .workbench-form-pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}

/* 單欄：所有 col-* 一律整列 */
.density-proposal[data-wb-mobile="true"] .form-row {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.density-proposal[data-wb-mobile="true"] .form-row > [class*="col-"] { grid-column: 1 / -1; }

/* 製程／站序寬表只在自身容器內橫捲，主頁不橫捲 */
.density-proposal[data-wb-mobile="true"] [data-wb-table-wrap] {
  overflow-x: auto;
  max-width: 100%;
}

/* 側欄：底部一條，不遮主表 */
.density-proposal[data-wb-mobile="true"] .workbench-split-sidebar {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  flex: 0 0 auto;
  order: 2;
  border-left: 0;
  border-top: 2px solid var(--border-color);
  transition: max-height 0.22s ease;
  z-index: 1;
}
.density-proposal[data-wb-mobile="true"] .workbench-split-sidebar.collapsed,
.density-proposal[data-wb-mobile="true"] .workbench-split-sidebar[data-wb-sidebar="collapsed"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 48px !important;
  height: 48px;
}
.density-proposal[data-wb-mobile="true"] .workbench-split-sidebar:not(.collapsed):not([data-wb-sidebar="collapsed"]) {
  max-height: 50dvh;
}
.density-proposal[data-wb-mobile="true"] .sidebar-body-scroll {
  overflow-y: auto;
  max-height: calc(50dvh - 48px);
}
.density-proposal[data-wb-mobile="true"] .sidebar-collapsed-ribbon {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  width: 100%;
  max-width: none;
  padding: 0 14px;
  gap: 10px;
}

/* 隱藏寫入動作與 F 鍵提示；返回鍵維持可點面積 */
.density-proposal[data-wb-mobile="true"] [data-wb-action="save"],
.density-proposal[data-wb-mobile="true"] [data-wb-action="copy"],
.density-proposal[data-wb-mobile="true"] [data-wb-action="dispatch"],
.density-proposal[data-wb-mobile="true"] [data-wb-hotkey-hint] { display: none !important; }
.density-proposal[data-wb-mobile="true"] button:disabled { display: none !important; }
.density-proposal[data-wb-mobile="true"] [data-wb-action="close"] {
  min-height: 44px;
  min-width: 44px;
}

/* ============================================================
   S002 手機補充（僅 .density-proposal[data-wb-mobile="true"]）
   A. 頂部導航：單列擠壓 → 三列換行
   ============================================================ */
.density-proposal[data-wb-mobile="true"] .top-navbar {
  height: auto;
  min-height: var(--header-height);
  padding: 6px 10px 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

/* 容器改 contents，子項直接參與換行與排序（DOM 不變，事件照常冒泡） */
.density-proposal[data-wb-mobile="true"] .nav-left,
.density-proposal[data-wb-mobile="true"] .nav-right {
  display: contents;
}

.density-proposal[data-wb-mobile="true"] .brand-logo-badge {
  display: none;
}

/* 列 1：單據號 + 類型章 + 狀態章（左）、返回（右） */
.density-proposal[data-wb-mobile="true"] .doc-identifier {
  order: 1;
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: wrap;
  gap: 4px 6px;
  white-space: normal;
}

.density-proposal[data-wb-mobile="true"] .doc-no {
  font-size: 16px;
  letter-spacing: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.density-proposal[data-wb-mobile="true"] .nav-right .nav-btn-icon {
  order: 2;
  margin-left: auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 10px;
  flex-shrink: 0;
}

/* 列 2：客戶獨立一列 */
.density-proposal[data-wb-mobile="true"] .client-chip {
  order: 3;
  flex: 1 1 100%;
  display: block;
  padding-left: 0;
  border-left: 0;
  min-width: 0;
  line-height: 1.35;
}

.density-proposal[data-wb-mobile="true"] .theme-toggle-btn {
  flex: 0 0 auto;
  min-height: 44px;
  height: 44px;
  padding: 0 10px;
}

/* ============================================================
   B. 收合側欄 → 48px 底列：直立 Ribbon 改橫排
   ============================================================ */
.density-proposal[data-wb-mobile="true"]
  .workbench-split-sidebar.collapsed .sidebar-collapsed-ribbon {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;          /* 覆寫 --sidebar-collapsed-width 的 28px 限制 */
  height: 48px;
  min-height: 48px;
  padding: 0 10px;
  gap: 10px;
  overflow: hidden;
}

.density-proposal[data-wb-mobile="true"] .ribbon-title-vertical,
.density-proposal[data-wb-mobile="true"] .ribbon-total-badge {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  letter-spacing: 0;
}

.density-proposal[data-wb-mobile="true"] .ribbon-title-vertical {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.density-proposal[data-wb-mobile="true"] .ribbon-total-badge {
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 13px;
}

.density-proposal[data-wb-mobile="true"] .ribbon-icon-btn {
  width: 40px;
  height: 40px;
  min-height: 40px;
  font-size: 16px;
}

/* ============================================================
   C. 展開態「收起」鈕：沿用既有側欄收合按鈕
   ============================================================ */
.density-proposal[data-wb-mobile="true"]
  .workbench-split-sidebar .sidebar-toggle-btn {
  min-height: 44px;
  min-width: 44px;
  position: relative;
  z-index: 1;
}

/* 手機站別標頭保留名稱與進度，移除不可使用的寫入控制。 */
.density-proposal[data-wb-mobile="true"] .proc-workbench-head {
  align-items: flex-start;
}
.density-proposal[data-wb-mobile="true"] .workbench-title-group {
  flex: 1 1 100%;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}
.density-proposal[data-wb-mobile="true"] .workbench-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.density-proposal[data-wb-mobile="true"] .station-seq-jump-wrap,
.density-proposal[data-wb-mobile="true"] .status-badge-select {
  display: none !important;
}
.density-proposal[data-wb-mobile="true"] .workbench-toolbar {
  flex: 1 1 100%;
  min-width: 0;
}
.density-proposal[data-wb-mobile="true"] .proc-detail-workbench,
.density-proposal[data-wb-mobile="true"] .workbench-form-pane > * {
  min-width: 0;
  max-width: 100%;
}
.density-proposal[data-wb-mobile="true"] [data-wb-table-wrap] {
  width: 100%;
}

/* Issue 635：Toast 顯示期間，工作台主區（表單欄＋右欄／手機底部比較條）讓出同高底部通道，
   右下角 Toast 不再蓋到成本、保存與 Ribbon。變數由 erp-desktop.jsx KxToastViewport 發佈，
   無 Toast 時變數移除 → fallback 0，佈局自動復原；桌機／手機、側欄展開／收合一體適用。 */
[data-wb-root] > .split-pane-wrapper {
  margin-bottom: var(--kx-toast-footprint, 0px);
  transition: margin-bottom 0.16s ease-out; /* 軟化保存列隨 Toast 增減的位移 */
}
@media (prefers-reduced-motion: reduce) {
  [data-wb-root] > .split-pane-wrapper { transition: none; }
}


/* 問題646：窄版桌機沿既有收合操作重排，僅螢幕樣式生效。 */
/* === 區塊 1：共同護欄 ≤1279px（讓既有收縮／省略真的生效） === */
@media screen and (max-width: 1279px) {
  .density-proposal:not([data-wb-mobile="true"]) .subbar-left { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .density-proposal:not([data-wb-mobile="true"]) .feature-tag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .density-proposal:not([data-wb-mobile="true"]) .subbar-right { flex: 0 0 auto; }

  /* 標籤可換行，不再硬撐出互遮 */
  .density-proposal:not([data-wb-mobile="true"]) .field-label { white-space: normal; align-items: flex-start; line-height: 1.25; overflow-wrap: anywhere; }

  /* 客戶名稱列「標籤＋＋新增客戶」的行內容器無 class，以結構選取；雙選擇器為相容備援 */
  .density-proposal:not([data-wb-mobile="true"]) .form-field > div:has(> label.field-label),
  .density-proposal:not([data-wb-mobile="true"]) .form-field > div[style*="space-between"] { flex-wrap: wrap; gap: 4px 8px; }
}

/* === 區塊 2：T-A 1100–1279px，只重排網格，側欄維持 420px === */
@media screen and (min-width: 1100px) and (max-width: 1279px) {
  .density-proposal:not([data-wb-mobile="true"]) .form-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-12, .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-9, .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-8, .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-6 { grid-column: span 6; }
  .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-4 { grid-column: span 3; }
  .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-3 { grid-column: span 3; }
  .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-2 { grid-column: span 2; }
  .density-proposal:not([data-wb-mobile="true"]) .form-row > .staff-picker-col { grid-column: span 3; }
}

/* === 區塊 3：T-B ≤1099px，兩欄改上下單欄 === */
@media screen and (max-width: 1099px) {
  /* 3a 頂部：客戶獨立一列，不再壓到右上動作 */
  .density-proposal:not([data-wb-mobile="true"]) .top-navbar { height: auto; min-height: var(--header-height); align-items: flex-start; flex-wrap: wrap; padding: 5px 14px 6px; gap: 4px 10px; }
  .density-proposal:not([data-wb-mobile="true"]) .nav-left { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
  .density-proposal:not([data-wb-mobile="true"]) .client-chip { flex: 1 1 100%; min-width: 0; padding-left: 0; border-left: 0; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
  .density-proposal:not([data-wb-mobile="true"]) .nav-right { flex: 0 0 auto; align-self: center; }

  /* 3b 主區改垂直堆疊；高度不再用固定 header/subbar 相減 */
  .density-proposal:not([data-wb-mobile="true"]) .split-pane-wrapper { flex-direction: column; height: auto; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .density-proposal:not([data-wb-mobile="true"]) .workbench-form-pane { order: 1; flex: 1 1 auto; height: auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }

  /* 3c 窄表單網格 4 欄 */
  .density-proposal:not([data-wb-mobile="true"]) .form-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-12, .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-9, .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-8, .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-6, .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-4 { grid-column: span 4; }
  .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-3, .density-proposal:not([data-wb-mobile="true"]) .form-row > .col-2 { grid-column: span 2; }
  .density-proposal:not([data-wb-mobile="true"]) .form-row > .staff-picker-col { grid-column: span 4; }

  /* 3d 側欄移到下方全寬（展開態） */
  .density-proposal:not([data-wb-mobile="true"]) .workbench-split-sidebar { order: 2; width: 100%; min-width: 0; max-width: none; height: auto; flex: 0 0 auto; border-left: 0; border-top: 2px solid var(--border-color); z-index: 1; }
  .density-proposal:not([data-wb-mobile="true"]) .workbench-split-sidebar:not(.collapsed):not([data-wb-sidebar="collapsed"]) { max-height: 45dvh; }
  .density-proposal:not([data-wb-mobile="true"]) .sidebar-body-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

  .erp-workorder-workbench[data-wb-entity="workorder"][data-wb-error-layout="active"] .workbench-form-pane {
    min-height: var(--wb-error-form-min-height);
  }
  .erp-workorder-workbench[data-wb-entity="workorder"][data-wb-error-layout="active"] .workbench-split-sidebar[data-wb-sidebar="expanded"] {
    max-height: min(45dvh, var(--wb-error-sidebar-max-height));
  }
  .erp-workorder-workbench[data-wb-entity="workorder"][data-wb-error-layout="active"] .workbench-split-sidebar > :not(.sidebar-body-scroll) {
    flex-shrink: 0;
  }

  /* 3e 收合態：48px 底部橫條，沿用既有 ribbon 開關 */
  .density-proposal:not([data-wb-mobile="true"]) .workbench-split-sidebar.collapsed,
  .density-proposal:not([data-wb-mobile="true"]) .workbench-split-sidebar[data-wb-sidebar="collapsed"] {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    flex: 0 0 48px !important; height: 48px;
  }
  .density-proposal:not([data-wb-mobile="true"]) .workbench-split-sidebar.collapsed .sidebar-collapsed-ribbon,
  .density-proposal:not([data-wb-mobile="true"]) .workbench-split-sidebar[data-wb-sidebar="collapsed"] .sidebar-collapsed-ribbon {
    flex-direction: row; align-items: center; justify-content: space-between;
    width: 100%; max-width: none; height: 48px; min-height: 48px; padding: 0 14px; gap: 12px; overflow: hidden;
  }
  .density-proposal:not([data-wb-mobile="true"]) .ribbon-title-vertical, .density-proposal:not([data-wb-mobile="true"]) .ribbon-total-badge { writing-mode: horizontal-tb; text-orientation: mixed; letter-spacing: 0; }

  /* 3f 自有寬表只在容器內橫捲，整頁不橫捲 */
  .density-proposal:not([data-wb-mobile="true"]) [data-wb-table-wrap] { overflow-x: auto; max-width: 100%; }
}

/* === 區塊 4：>=1280px，單列但改用非等寬 track（取代原 4a／4b） === */
@media screen and (min-width: 1280px) {
  /* 4-1 grid 子項可收縮，避免 min-width:auto 讓內容撐破 track */
  .density-proposal:not([data-wb-mobile="true"]) .form-row > [class*="col-"],
  .density-proposal:not([data-wb-mobile="true"]) .form-row > .staff-picker-col,
  .density-proposal:not([data-wb-mobile="true"]) .form-field { min-width: 0; }

  /* 4-2 只重配「含負責人員」那一列的 track 寬度，不再用 12 等欄硬擠。
     守衛：恰 5 個子欄且 staff-picker-col 為第 4 個，JSX 改動時自動失效回退。
     fr 比例來源＝1180 實測各欄最小需求（品名 113.94 / 數量 100.5 / 交期 142.578 / 人員 147.03 / 付款 100.5），
     交期 track 的下限參考既有預覽的可讀欄寬，仍須實際截圖驗證，
     floor 下在 track 不下在 input，控件仍留在自己 field 內。 */
  .density-proposal:not([data-wb-mobile="true"]) .form-row:has(> .staff-picker-col:nth-child(4)):has(> :nth-child(5):last-child) {
    grid-template-columns:
      minmax(0, 140fr)
      minmax(0, 110fr)
      minmax(142px, 160fr)
      minmax(0, 175fr)
      minmax(0, 126fr);
  }
  .density-proposal:not([data-wb-mobile="true"]) .form-row:has(> .staff-picker-col:nth-child(4)):has(> :nth-child(5):last-child) > * {
    grid-column: auto / span 1;
  }

  /* 4-3 安全網（未驗證項）：目前文案是否換行以實際畫面驗證；
     長文案以換行取代互遮，不隱藏、不省略、不縮字；任意長文案仍未驗證。 */
  .density-proposal:not([data-wb-mobile="true"]) .field-label {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  /* 4-4 問題646：>=1280 的客戶 header 沿用 ≤1279 同一組換行護欄。
     flex-wrap 只在放不下時生效，放得下的 header 為 no-op，不改既有版面。 */
  .density-proposal:not([data-wb-mobile="true"]) .form-field > div:has(> label.field-label),
  .density-proposal:not([data-wb-mobile="true"]) .form-field > div[style*="space-between"] {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  /* 4-5 label 內部改以「整段」為換行單位：label 本身是 flex 容器，
     4-3 的 overflow-wrap:anywhere 會把文字節點與 .req 兩個 item 的
     min-content 壓到單字寬，造成「客戶名稱／▾」「* (選取自動帶／出)」並排切碎。
     wrap + break-word：item 整段換行，min-content 不被壓縮，故不再切碎。 */
  .density-proposal:not([data-wb-mobile="true"]) .form-field > div:has(> label.field-label) > label.field-label,
  .density-proposal:not([data-wb-mobile="true"]) .form-field > div[style*="space-between"] > label.field-label {
    flex-wrap: wrap;
    overflow-wrap: break-word;
    column-gap: 4px;
    row-gap: 0;
  }
}
/* #664：沿既有側欄按鈕模式，查閱入口不擠壓主工作台。 */
[data-wb-root] [data-wb-view-box] { flex: 0 0 auto; margin: 0 12px 12px; }
[data-wb-root] [data-wb-view-box] .btn-row-dual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-wb-root] [data-wb-view-box] .btn-sub-compact { width: 100%; min-height: 38px; }
@media (max-width: 640px) {
  [data-wb-root] [data-wb-view-box] .btn-row-dual { grid-template-columns: minmax(0, 1fr); }
  [data-wb-root] [data-wb-view-box] .btn-sub-compact { min-height: 44px; }
}

/* ==========================================================================
   #669 技術補充區 #block-technical 窄幅退化：只作用 .wb-tech-grid，不動全系統 wide-grid-4／7315 手機停用鈕規則
   ========================================================================== */
/* 表單 pane 比 viewport 窄，1100 斷點打不到；1366 以下先退兩欄，日期欄不再被 1.3fr 擠成 109px。
   出貨欄 inline gridColumn:'span 2' 在兩欄軌道即等於整列。 */
@media (max-width: 1366px) {
  .erp-workorder-workbench #block-technical .wb-tech-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* 手機：保留兩條軌道但每格佔滿整列，避免 span 2 在單欄網格撐出隱性第二欄（咬口 64px／網線 221px 並排）。 */
@media (max-width: 640px) {
  .erp-workorder-workbench #block-technical .wb-tech-grid > * {
    grid-column: 1 / -1;
  }
}
/* 出貨交代靜態全文：預設隱藏（stepper 步驟四不受影響）；只在 #block-technical 內且按鈕被鎖定停用，或手機模式時顯示。 */
.erp-workorder-workbench .wb-tech-shipping {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.erp-workorder-workbench .wb-tech-shipping-fulltext {
  display: none;
  margin: 0;
  padding: 8px 12px;
  border: 1.5px solid var(--wb-blue-border);
  border-radius: 6px;
  background: var(--wb-blue-soft);
  color: var(--text-primary, #1E293B);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.erp-workorder-workbench .wb-tech-shipping-fulltext[data-wb-shipping-fulltext="empty"] {
  border-style: dashed;
  border-color: var(--wb-border-strong);
  background: var(--wb-surface-2);
  color: var(--wb-text-muted);
}
.erp-workorder-workbench #block-technical .wb-tech-shipping > :disabled ~ .wb-tech-shipping-fulltext,
.density-proposal[data-wb-mobile="true"] #block-technical .wb-tech-shipping-fulltext {
  display: block;
}
.erp-workorder-workbench .formula-drawer-td:has(.wb-calculation-panel) {
  padding: 0;
}

.erp-workorder-workbench .wb-calculation-panel {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  padding: 12px;
  min-width: 0;
}

.erp-workorder-workbench .wb-calculation-panel .formula-drawer-header {
  padding-right: 76px;
}

.erp-workorder-workbench .wb-calculation-panel .formula-drawer-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
}

.erp-workorder-workbench .wb-calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 12px;
}

.erp-workorder-workbench .wb-calc-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.erp-workorder-workbench .wb-calc-field,
.erp-workorder-workbench .wb-calc-settings,
.erp-workorder-workbench .wb-calc-cards {
  min-width: 0;
}

.erp-workorder-workbench .wb-calc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.erp-workorder-workbench .wb-calc-field .drawer-card-label {
  text-transform: none;
}
.erp-workorder-workbench .wb-calc-field .table-input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  box-sizing: border-box;
}

.erp-workorder-workbench .wb-calc-reference,
.erp-workorder-workbench .wb-calc-line {
  grid-column: 1 / -1;
}

.erp-workorder-workbench .wb-calc-cards {
  display: grid;
  align-content: start;
  gap: 10px;
}

.erp-workorder-workbench .wb-calc-cards .formula-drawer-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.erp-workorder-workbench .wb-calc-info,
.erp-workorder-workbench .wb-calc-line {
  color: #64748B;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.erp-workorder-workbench .wb-calc-error {
  color: #B91C1C;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.erp-workorder-workbench .wb-pending-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: #64748B;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .erp-workorder-workbench .wb-calc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .erp-workorder-workbench .wb-calc-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .erp-workorder-workbench .wb-calc-field input.table-input[data-wb-formula-field],
  .erp-workorder-workbench .wb-calc-field select.table-input,
  .erp-workorder-workbench .wb-calculation-panel button {
    min-height: 40px !important;
    height: auto !important;
  }
}

@media (max-width: 600px) {
  .erp-workorder-workbench .wb-calc-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}


.erp-workorder-workbench [data-wb-money-row],
.erp-workorder-workbench [data-wb-money-group],
.erp-workorder-workbench [data-wb-money-fit] {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
}
.erp-workorder-workbench [data-wb-money-row],
.erp-workorder-workbench [data-wb-money-group] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.erp-workorder-workbench [data-wb-money-group] { justify-content: flex-end; }
.erp-workorder-workbench [data-wb-money-value] {
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  overflow: visible;
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
  font-size: var(--wb-money-fit-size, inherit);
  line-height: 1.35;
}
.erp-workorder-workbench [data-wb-money-value][data-wb-money-font="compact"] { font-family: var(--font-tc); }
.erp-workorder-workbench [data-wb-money-note] {
  display: inline-block;
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
}
.erp-workorder-workbench [data-wb-money-note][data-wb-money-own-line="true"] { flex-basis: 100%; text-align: end; }
.erp-workorder-workbench .hero-main-amount:has([data-wb-money-group]) { display: block; }
.erp-workorder-workbench .hero-main-amount > [data-wb-money-group] { justify-content: flex-start; }
.erp-workorder-workbench .hero-main-amount [data-wb-money-note] { text-align: start; }
.erp-workorder-workbench .wb-money-band { padding: 8px 12px; margin-block: 4px; justify-content: space-between; }
.erp-workorder-workbench .wb-money-band > [data-wb-money-fit] { flex: 1; }
.erp-workorder-workbench .wb-calculation-panel[data-wb-money-wide="true"] .wb-calc-layout { grid-template-columns: minmax(0, 1fr); }
.erp-workorder-workbench .drawer-card-val[data-wb-money-fit] { font-size: 16px; width: 100%; }
.erp-workorder-workbench .wb-summary-value:has([data-wb-money-value]),
.erp-workorder-workbench .card-subtitle:has([data-wb-money-value]) { overflow: visible; text-overflow: clip; white-space: normal; }
.erp-workorder-workbench .totals-row:has([data-wb-money-fit]),
.erp-workorder-workbench .hero-unit-pricing:has([data-wb-money-fit]) { flex-wrap: wrap; gap: 4px 8px; }
.erp-workorder-workbench .side-pipeline-item[data-wb-money-stack="true"] { flex-wrap: wrap; }
.erp-workorder-workbench .side-pipeline-item[data-wb-money-stack="true"] .item-right { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
.erp-workorder-workbench .side-pipeline-item[data-wb-money-stack="true"] .item-cost { flex: 1 1 100%; min-width: 0; }
.erp-workorder-workbench .wb-calc-info:has(+ [data-wb-money-fit]),
.erp-workorder-workbench [data-wb-money-reason] { display: block; width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
@media (max-width: 1180px) {
  .erp-workorder-workbench .workbench-split-sidebar.collapsed:has([data-wb-money-group]),
  .erp-workorder-workbench .sidebar-collapsed-ribbon:has([data-wb-money-group]) { min-height: 48px; height: auto; flex-wrap: wrap; }
  .erp-workorder-workbench .ribbon-total-badge:has([data-wb-money-group]) { min-width: 0; max-width: 100%; }
}

.erp-workorder-workbench [data-wb-money-margin] .wb-calc-info { display: block; white-space: normal; }
.erp-workorder-workbench .sidebar-collapsed-ribbon:has([data-wb-money-group]) { overflow: visible; }
.erp-workorder-workbench .ribbon-total-badge:has([data-wb-money-group]) { min-height: 0; max-height: 100%; }
@media (min-width: 1181px) {
  .erp-workorder-workbench .sidebar-collapsed-ribbon:has([data-wb-money-group]) .ribbon-total-badge { flex: 1; }
  .erp-workorder-workbench .ribbon-total-badge [data-wb-money-group] { max-inline-size: 100%; max-block-size: 100%; }
}

.erp-workorder-workbench [data-wb-money-cell] > div { contain: inline-size; width: 100%; }
.erp-workorder-workbench .wb-money-band { contain: inline-size; }

.erp-workorder-workbench .side-pipeline-item[data-wb-money-stack="true"] .item-left { flex: 1 1 100%; padding-right: 16px; box-sizing: border-box; }
.erp-workorder-workbench .side-pipeline-item[data-wb-money-stack="true"] .pipe-arrow { position: absolute; top: 10px; right: 8px; }
.erp-workorder-workbench .wb-secondary-vendor {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
  font-size: 12px;
}

.erp-workorder-workbench .wb-process-summary-state { padding: 8px 12px; }
.erp-workorder-workbench .wb-process-summary-state button { margin-left: 8px; }
.erp-workorder-workbench .wb-row-cost-toggle {
  display: block; max-width: 100%; min-width: 0; width: 100%; padding: 2px 0;
  contain: inline-size; box-sizing: border-box;
  border: 0; background: transparent; color: var(--wb-text-muted, #475569);
  font-size: 11px; font-weight: 500; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.erp-workorder-workbench .wb-row-cost-toggle.is-planned { color: var(--wb-primary-strong, #1A5B72); }
.erp-workorder-workbench .wb-row-cost-toggle[aria-expanded="true"] { text-decoration: underline; }
.erp-workorder-workbench .wb-row-cost-toggle:focus-visible,
.erp-workorder-workbench .wb-row-cost-drawer:focus-visible { outline: 2px solid var(--primary-600, #2563eb); outline-offset: 2px; }
.erp-workorder-workbench .wb-row-cost-loading { font-size: 11px; color: var(--wb-text-muted, #475569); }
.erp-workorder-workbench .wb-row-cost-drawer {
  min-width: 0; padding: 12px; border: 1px solid var(--wb-border, #e2e8f0);
  border-radius: 8px; background: var(--wb-surface-2, #f8fafc); color: var(--wb-text, #1e293b);
  container-type: inline-size; container-name: wb-row-cost;
}
.erp-workorder-workbench .wb-row-cost-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.erp-workorder-workbench .wb-row-cost-header strong { min-width: 0; overflow-wrap: anywhere; }
.erp-workorder-workbench .wb-row-cost-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 12px 0 0; }
.erp-workorder-workbench .wb-row-cost-fields > div { min-width: 0; }
.erp-workorder-workbench .wb-row-cost-fields dt { font-size: 12px; color: var(--wb-text-muted, #475569); }
.erp-workorder-workbench .wb-row-cost-fields dd { margin: 3px 0 0; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@container wb-row-cost (max-width: 720px) { .erp-workorder-workbench .wb-row-cost-fields { grid-template-columns: minmax(0, 1fr); } }
.erp-workorder-workbench.theme-dark .wb-row-cost-drawer {
  background: #1E293B; border-color: #334155; color: #F1F5F9;
}
.erp-workorder-workbench.theme-dark .wb-row-cost-fields dt { color: #CBD5E1; }
.erp-workorder-workbench.theme-dark .wb-row-cost-drawer:focus-visible { outline-color: #38BDF8; }

.erp-workorder-workbench .wb-row-cost-error { display: flex; flex-direction: column; align-items: flex-end; max-width: 100%; font-size: 11px; }

#block-production-specs {
  container-type: inline-size;
}
#block-production-specs details {
  min-width: 0;
  border-bottom: 1px solid var(--border, #E2E8F0);
  padding: 8px 0;
}
#block-production-specs details:last-child { border-bottom: 0; }
#block-production-specs summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
  scroll-margin-block: 90px;
}
#block-production-specs .wb-production-count {
  float: right;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
#block-production-specs summary::before { content: '▸'; }
#block-production-specs details[open] > summary::before { content: '▾'; }
#block-production-specs summary > span:first-child { flex: 1; }

@media screen {
  [data-wb-root][data-wb-entity="workorder"]:not([data-wb-mobile="true"]) { padding: 0; }
  [data-wb-root] > [data-wb-main-scroll] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: start;
    height: auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }
  [data-wb-main-scroll] > .wb-error-banner { grid-column: 1 / -1; }
  [data-wb-root] > [data-wb-main-scroll]:has(> [data-wb-sidebar="collapsed"]) {
    grid-template-columns: minmax(0, 1fr) 54px !important;
  }
  [data-wb-root][data-wb-entity="workorder"]:not([data-wb-mobile="true"]) .workbench-form-pane,
  [data-wb-root][data-wb-entity="workorder"]:not([data-wb-mobile="true"]) .sidebar-body-scroll {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  [data-wb-root][data-wb-entity="workorder"]:not([data-wb-mobile="true"]) .workbench-form-pane > * { flex-shrink: 0; }
  [data-wb-root][data-wb-entity="workorder"]:not([data-wb-mobile="true"]) .workbench-split-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    position: static;
    overflow: visible;
    align-self: start;
  }
  [data-wb-root] .wb-cost-disclosure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 12px 6px;
    border: 0;
    background: var(--bg-panel);
    color: var(--text-main);
    font: inherit;
    cursor: pointer;
    overflow-wrap: anywhere;
  }
  [data-wb-root] > .wb-persistent-actions {
    padding: 6px 12px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 1fr);
    gap: 6px 12px;
    margin-bottom: var(--kx-toast-footprint, 0px);
  }
  [data-wb-root] > .wb-persistent-actions .sidebar-hotkey-legend { display: none; }
  [data-wb-root][data-wb-entity="workorder"]:not([data-wb-mobile="true"]) > .split-pane-wrapper { margin-bottom: 0; }
}
@media screen and (max-width: 1099px) {
  [data-wb-root] > [data-wb-main-scroll],
  [data-wb-root] > [data-wb-main-scroll]:has(> [data-wb-sidebar="collapsed"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-wb-root][data-wb-entity="workorder"]:not([data-wb-mobile="true"]) .workbench-form-pane { order: 2; }
  [data-wb-root][data-wb-entity="workorder"]:not([data-wb-mobile="true"]) .workbench-split-sidebar { order: 1; }
  [data-wb-root] .wb-cost-disclosure { flex-direction: row; justify-content: space-between; padding: 8px 14px; }
}
#block-production-specs .wb-production-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
#block-production-specs .wb-production-field { grid-column: span 3; min-width: 0; }
#block-production-specs .wb-production-wide { grid-column: span 6; }
#block-production-specs .wb-production-long,
#block-production-specs .wb-production-colors { grid-column: 1 / -1; }
#block-production-specs .field-label {
  white-space: normal;
  overflow-wrap: anywhere;
}
#block-production-specs .field-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  scroll-margin-block: 100px;
}
#block-production-specs textarea {
  min-height: 5.5em;
  resize: none;
  overflow: hidden;
  line-height: 1.5;
}
#block-production-specs .wb-production-fulltext {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 8px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 4px;
}
#block-production-specs .wb-production-hint,
#block-production-specs .wb-field-error {
  margin: 4px 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}
#block-production-specs .wb-field-error { color: var(--danger-500, #DC2626); }
#block-production-specs .wb-production-colors {
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border, #E2E8F0);
}
#block-production-specs .wb-production-colors-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
#block-production-specs .wb-production-colors-grid label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
#block-production-specs .wb-production-colors-grid input { flex-shrink: 0; }
@container (max-width: 760px) {
  #block-production-specs .wb-production-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #block-production-specs .wb-production-field,
  #block-production-specs .wb-production-wide { grid-column: span 2; }
  #block-production-specs .wb-production-long { grid-column: 1 / -1; }
}