/*
  固定資產及設備 — Module CSS (CLINICOS-FIXED-ASSETS-EQUIPMENT-PHASE1-001).

  依照 businessCenter.css / revenueWorkspace.css 已建立的雙重收斂慣例：每一條規則都
  scoped 在 #fixedAssetHostRoot 之下，且每個 class 都以 fa- 前綴 —— V3 的全域樣式空間是
  多模組共用的，未收斂的規則可能默默影響到不相干的頁面。

  所有色彩／間距值直接沿用 revenueWorkspace.css 既有 token，未引入任何新的視覺語言；
  表格一律使用全域既有的 .data-table，按鈕使用全域既有的 button 樣式與 .actions 容器，
  不另造 Sidebar／Card／Button／Drawer／Dialog 樣式。
*/
/* ============================================================================
   CLINICOS-FIXED-ASSETS-EQUIPMENT-UI-POLISH-V1
   以下全部是純視覺調整，且一律 scoped 在 #fixedAssets / #fixedAssetHostRoot 之下。
   刻意不動任何全域 class（.workspace-panel-v211 / .workspace-head-v211 / .data-table /
   .nav-tab-v1 …）本身的定義 —— 那些是 Customer／Finance／Inventory／Business Center
   共用的，本輪明文禁止改動它們。
   ============================================================================ */

/* ---- 1. Header 壓縮（Title 保留、Tabs 上移、內容區上移）----
   量測基準（1440，本輪 Browser UI Review 實測）：
     固定資產／財務管理 = panel padding 24、h3 24px（較鬆的一套）
     客戶中心／銷售     = panel padding 18、h3 18.72px（較緊的一套）
   本輪把固定資產調整到兩者之間偏緊，總高度約降 22～26px；只作用在 #fixedAssets，
   財務管理與其他模組的既有外觀完全不受影響。 */
#fixedAssets .workspace-panel-v211 {
  padding: 18px 20px;
}
#fixedAssets .workspace-head-v211 {
  gap: 12px;
}
#fixedAssets .workspace-head-v211 h3 {
  font-size: 24px;
  line-height: 1.35;
  margin: 0 0 4px;
}
#fixedAssets .workspace-head-v211 .note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #475467;
}

#fixedAssetHostRoot {
  /* 4. 間距統一：所有 Card／Section／Form／Table 留白都只用這五個 token，
     不再出現散落的魔術數字。 */
  --fa-space-1: 4px;
  --fa-space-2: 8px;
  --fa-space-3: 12px;
  --fa-space-4: 16px;
  --fa-space-5: 20px;
  /* 5. 表單控制項統一高度（input / select / button / date 一致）。 */
  --fa-control-h: 38px;
  /* 次要文字統一改用較深的灰（#475467），取代原本偏淡的 #667085 —— 規格：提高次要
     文字對比、不要使用過淡灰色。這是本模組自己的 token，不動全域變數。 */
  --fa-text: #1d2939;
  --fa-text-secondary: #475467;
  --fa-font-body: 14px;
  --fa-font-table: 14px;
  --fa-font-control: 14px;
  --fa-font-section: 17px;
}

#fixedAssetHostRoot .fa-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-space-2);
  row-gap: var(--fa-space-2);
  /* Tabs 上移：與上方 Header 更貼近，與下方內容維持一致節奏。 */
  margin: 0 0 var(--fa-space-3);
}

#fixedAssetHostRoot .fa-section {
  margin-bottom: var(--fa-space-4);
}
#fixedAssetHostRoot .fa-section:last-child {
  margin-bottom: 0;
}

#fixedAssetHostRoot .fa-section-title {
  font-size: var(--fa-font-section);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fa-text);
  margin-bottom: var(--fa-space-3);
}

#fixedAssetHostRoot .fa-stat-grid {
  display: grid;
  /* minmax() 的最小軌道用 min(160px, 100%)：在 390px 這種窄版，可用寬度會小於 160px，
     若寫死 160px 會讓 grid 軌道撐破容器造成水平溢出（本輪 Browser UAT 在 narrow-390
     量到 hostOverflowX=126 的實際成因）。min() 讓最小軌道在極窄時退讓為容器寬度。 */
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--fa-space-3);
}

/* ---- 2. KPI Card ----
   [icon][label + value] 橫向版型，與既有 .sales-overview-kpi-card-v22 同一套語彙。
   上下 padding 16 -> 12，卡片高度約降 12%；數值 22 -> 24px（略放大），
   label 12 -> 11px（略縮小）。四欄對齊由上方 .fa-stat-grid 的 auto-fit 維持。 */
#fixedAssetHostRoot .fa-stat-card {
  display: flex;
  align-items: center;
  gap: var(--fa-space-3);
  border: 1px solid var(--color-border, #e4e7ec);
  border-radius: 12px;
  padding: var(--fa-space-3) var(--fa-space-4);
  background: #fff;
  /* Grid item 預設 min-width:auto，會被 .fa-stat-value 的 nowrap 內容撐出軌道寬度並造成
     容器水平溢出。min-width:0 讓軌道可以真正收縮（窄版溢出的第二個成因）。 */
  min-width: 0;
}

/* Icon 方塊：尺寸／圓角／底色沿用既有 .sales-overview-kpi-icon-v22 的視覺語彙，
   僅按本模組較緊湊的卡片高度等比縮小（40 -> 32）。 */
#fixedAssetHostRoot .fa-stat-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eef4ff;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

#fixedAssetHostRoot .fa-stat-body {
  min-width: 0;
  flex: 1 1 auto;
}

#fixedAssetHostRoot .fa-stat-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text, #1d2939);
  white-space: nowrap;
}

/* 窄版（手機）時允許數值換行，避免為了不換行而截斷或撐破版面。 */
@media (max-width: 900px) {
  #fixedAssetHostRoot .fa-stat-value {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 20px;
  }
}

/* 「期間」這類區間字串（例：2026-07 ~ 2033-06）比金額長得多，在四欄 KPI 版型下會超出
   卡片。只調整這一種數值的呈現：字級略降以「優先單行」，真的放不下時在既有空白處自然
   換行 —— 不使用 overflow:hidden 截斷，也不縮小其它 KPI 卡的字級。
   放在 max-width:900px 區塊之後，讓窄版也沿用同一組規則。 */
#fixedAssetHostRoot .fa-stat-value--range {
  font-size: 18px;
  white-space: normal;
  overflow-wrap: anywhere;
}

#fixedAssetHostRoot .fa-stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fa-text-secondary);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#fixedAssetHostRoot .fa-stat-hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--fa-text-secondary);
  margin-top: 3px;
}

#fixedAssetHostRoot .fa-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-space-2);
  align-items: flex-end;
  margin-bottom: var(--fa-space-3);
}

#fixedAssetHostRoot .fa-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* 同上：窄版時最小寬度退讓為容器寬度，避免篩選列把整個 host 撐寬。 */
  min-width: min(150px, 100%);
  max-width: 100%;
}

/* ---- 5. 表單：Label 對齊、Input／Select／Button／日期欄位高度一致 ----
   Review 前實測本模組控制項共有 38/41/43/45/52 五種高度，本輪統一為 --fa-control-h。 */
#fixedAssetHostRoot .fa-field input,
#fixedAssetHostRoot .fa-field select,
#fixedAssetHostRoot .fa-filter-bar input,
#fixedAssetHostRoot .fa-filter-bar select,
#fixedAssetHostRoot .fa-form-grid input,
#fixedAssetHostRoot .fa-form-grid select {
  max-width: 100%;
  box-sizing: border-box;
  height: var(--fa-control-h);
  min-height: var(--fa-control-h);
  padding: 0 12px;
  font-size: var(--fa-font-control);
  line-height: calc(var(--fa-control-h) - 2px);
  margin: 0;
  color: var(--fa-text);
}

/* 日期／月份欄位在 Chrome 會自帶 padding 與 inner spinner，明確歸零才會與其他欄位等高。 */
#fixedAssetHostRoot input[type="date"],
#fixedAssetHostRoot input[type="month"] {
  padding: 0 8px;
}

/* .actions 內的按鈕（含篩選列與表單頁尾）一律與輸入欄同高。 */
#fixedAssetHostRoot .fa-filter-bar .actions button,
#fixedAssetHostRoot .actions button {
  height: var(--fa-control-h);
  min-height: var(--fa-control-h);
  padding: 0 16px;
  font-size: var(--fa-font-control);
  line-height: 1;
  white-space: nowrap;
}

#fixedAssetHostRoot .fa-field > label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fa-text-secondary);
  /* Label 對齊：固定行高，讓同一列不同欄位的輸入框頂端切齊。 */
  line-height: 20px;
  min-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#fixedAssetHostRoot .fa-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--fa-space-3);
  align-items: start;
}

/* ---- 3. 表格：Header／Row 高度降低、Padding 縮小、提高資訊密度（欄位不變） ----
   採用既有「消耗品項設定」.setting-table 的 8px 10px 密度，而不是自創數值。 */
#fixedAssetHostRoot .data-table th,
#fixedAssetHostRoot .data-table td {
  padding: 12px 12px;
  font-size: var(--fa-font-table);
  line-height: 1.55;
  vertical-align: middle;
  color: var(--fa-text);
}
/* 視窗變窄時表格本身已可橫向捲動（見 .fa-table-wrap overflow-x），儲存格再折行只會把
   狀態標籤壓成直書（使／用／中）並撐高整列，因此欄位一律不折行，交給捲動處理。 */
#fixedAssetHostRoot .data-table td,
#fixedAssetHostRoot .data-table td .badge-v1 {
  white-space: nowrap;
}
#fixedAssetHostRoot .data-table th {
  white-space: nowrap;
  font-size: var(--fa-font-table);
  font-weight: 700;
  color: var(--fa-text);
}

/* 表格內的操作按鈕：本輪 Review 前實測資料列高達 103px，主因是兩欄操作鈕換行堆疊。
   縮小為單行的 mini 按鈕後列高大幅下降，欄位與功能完全未變。 */
#fixedAssetHostRoot .data-table td.actions,
#fixedAssetHostRoot .data-table td .actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}
#fixedAssetHostRoot .data-table td.actions button,
#fixedAssetHostRoot .data-table td .actions button {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* 金額／數量欄位靠右（表頭一併靠右，維持欄位對齊）。 */
#fixedAssetHostRoot .data-table td.fa-num,
#fixedAssetHostRoot .data-table th.fa-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 表格上下留白統一。 */
#fixedAssetHostRoot .fa-table-wrap + .fa-inline-note {
  margin-top: var(--fa-space-3);
}

#fixedAssetHostRoot .fa-loading-state,
#fixedAssetHostRoot .fa-empty-state {
  padding: var(--fa-space-5);
  text-align: center;
  font-size: var(--fa-font-body);
  color: var(--fa-text-secondary);
}

#fixedAssetHostRoot .fa-inline-note {
  font-size: var(--fa-font-body);
  line-height: 1.6;
  color: var(--fa-text-secondary);
  margin-top: var(--fa-space-3);
}

#fixedAssetHostRoot .fa-delta-up { color: #027a48; }
#fixedAssetHostRoot .fa-delta-down { color: #b42318; }
#fixedAssetHostRoot .fa-delta-flat { color: var(--fa-text-secondary); }

#fixedAssetHostRoot .fa-table-wrap {
  overflow-x: auto;
  /* 父層是 grid/flex item 時預設 min-width:auto，會被表格內容撐開造成整頁水平溢出；
     min-width:0 讓捲動真正發生在這一層。 */
  min-width: 0;
}

/* 合約文件的檔案選擇器：沿用 .fa-field 既有版型，只確保它在窄版能收縮而不撐破查詢列。 */
#fixedAssetHostRoot .fa-field input[type="file"] {
  max-width: 100%;
  min-width: 0;
  font-size: 13px;
}

/* 資產明細總覽：同一欄在自有與租賃資產有不同語意（累計折舊／已認列租金），
   因此每一格的金額下方標註該列實際的語意，避免用單一表頭誤導。 */
#fixedAssetHostRoot .fa-cell-sub {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--fa-text-secondary);
}

#fixedAssetHostRoot .fa-equipment-row {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
  gap: var(--fa-space-2);
  align-items: end;
  margin-bottom: var(--fa-space-2);
}

@media (max-width: 900px) {
  #fixedAssetHostRoot .fa-equipment-row {
    grid-template-columns: 1fr;
  }
}

/* ---- 設備維護紀錄：明細列與作廢列（沿用既有 bc-plain-status-row 版式） ---- */
#fixedAssetHostRoot .fa-detail-row {
  display: flex;
  justify-content: space-between;
  gap: var(--fa-space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border, #e4e7ec);
  font-size: var(--fa-font-body);
}
#fixedAssetHostRoot .fa-detail-label {
  color: var(--fa-text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
#fixedAssetHostRoot .fa-detail-value {
  color: var(--fa-text);
  text-align: right;
  overflow-wrap: anywhere;
}
#fixedAssetHostRoot .data-table tr.fa-row-voided td {
  color: var(--fa-text-secondary);
  text-decoration: line-through;
}
#fixedAssetHostRoot .data-table tr.fa-row-voided td .badge-v1 {
  text-decoration: none;
}

/* ---- 設備維護紀錄：明細列與作廢列（沿用既有 bc-plain-status-row 版式） ---- */
#fixedAssetHostRoot .fa-detail-row {
  display: flex;
  justify-content: space-between;
  gap: var(--fa-space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border, #e4e7ec);
  font-size: var(--fa-font-body);
}
#fixedAssetHostRoot .fa-detail-label {
  color: var(--fa-text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
#fixedAssetHostRoot .fa-detail-value {
  color: var(--fa-text);
  text-align: right;
  overflow-wrap: anywhere;
}
#fixedAssetHostRoot .data-table tr.fa-row-voided td {
  color: var(--fa-text-secondary);
  text-decoration: line-through;
}
#fixedAssetHostRoot .data-table tr.fa-row-voided td .badge-v1 {
  text-decoration: none;
}

/* ============================================================================
   CLINICOS-FIXED-ASSETS-UAT-UI-AND-POSTING-REVISION §二 — 按鈕統一
   全站基礎 button 是實心深黑（style.css: background:#111827），整排列在表格內會造成
   視覺壓迫。這裡不改全域定義，只在本模組內把三種角色分開，並沿用既有的 .primary /
   .ghost / .danger class 名稱（Design System 既有語彙，不新增第二套 class 體系）：
     主要動作 primary → 單一主色（沿用既有 .primary 的 #1e3a8a）
     次要動作 ghost   → 白底描邊
     危險動作 danger  → 淡紅底紅字（沿用既有 .danger 的配色）
   ============================================================================ */

/* 次要動作：白底描邊（既有 .ghost 在全域是淡藍底，本模組內統一為白底描邊）。 */
#fixedAssetHostRoot button.ghost {
  background: #fff;
  color: var(--fa-text-secondary);
  border: 1px solid var(--color-border, #d0d5dd);
}
#fixedAssetHostRoot button.ghost:hover {
  background: #f9fafb;
  border-color: #98a2b3;
  color: var(--fa-text);
}

/* 主要動作：單一主色。 */
#fixedAssetHostRoot button.primary {
  background: #1e3a8a;
  color: #fff;
  border: 1px solid #1e3a8a;
}
#fixedAssetHostRoot button.primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* 危險動作：淡紅底紅字，不使用黑底。 */
#fixedAssetHostRoot button.danger {
  background: #fef3f2;
  color: #b42318;
  border: 1px solid #fecdca;
}
#fixedAssetHostRoot button.danger:hover { background: #fee4e2; border-color: #fda29b; }

/* 未標註角色的按鈕一律退為次要（白底描邊），避免任何地方殘留整排深黑按鈕。 */
#fixedAssetHostRoot button:not(.primary):not(.danger):not(.nav-tab-v1) {
  background: #fff;
  color: var(--fa-text-secondary);
  border: 1px solid var(--color-border, #d0d5dd);
}

/* 表格列內的緊湊尺寸：高度／圓角／間距一致，文字仍維持 14px（不得小於 14px）。 */
#fixedAssetHostRoot .fa-btn-compact,
#fixedAssetHostRoot .data-table td.actions button {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1;
  border-radius: 8px;
  white-space: nowrap;
}
/* 操作欄同樣不折行：視窗變窄時讓表格橫向捲動，而不是把五顆按鈕疊成多列把列高撐到 200px+。 */
#fixedAssetHostRoot .data-table td.actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}

#fixedAssetHostRoot .fa-muted { color: var(--fa-text-secondary); }