/* finance.css — Financial Workspace, Phase 1.2 Dashboard UX. Colors/radii/shadows/spacing/control-height/typography all come from public/design-tokens.css (--cos-*) — design-tokens.css itself is NOT touched this round. Text-role mapping (unchanged from Phase 1.1): Page Title (--cos-fs-page-title/28/700) -> .fin-page-header h1 Section Title (--cos-fs-section-title/22/600) -> .fin-section-title Card Title (--cos-fs-card-title/18/600) -> placeholder title Body (--cos-fs-body/16/500) -> subtitle, task text, placeholder desc, checklist label, stat value Label (--cos-fs-label/15/600) -> nav label, kpi/stat/completeness labels Small (--cos-fs-small/14/600) -> tags, mock badge, status badge, cost row head .fin-kpi-value is the one exception: the spec asks for a KPI number with more visual weight than the Card Title token allows, without adding a new global typography token. It is a plain, module-local font-size (24px) used nowhere else — not a --cos-fs-* token, not reused outside this file. */ .fin-app{display:flex;min-height:100vh;font-family:var(--cos-font);background:var(--cos-surface-muted);color:var(--cos-text);} .fin-sidebar{width:260px;flex:0 0 260px;background:var(--cos-sidebar-bg);color:var(--cos-sidebar-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto;} .fin-sidebar-brand{padding:var(--cos-space-lg) var(--cos-space-md);font-size:var(--cos-fs-card-title);font-weight:var(--cos-fw-card-title);border-bottom:1px solid var(--cos-sidebar-border);} .fin-sidebar-brand small{display:block;font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);color:var(--cos-sidebar-text-muted);margin-top:var(--cos-space-xs);} .fin-nav{display:flex;flex-direction:column;padding:var(--cos-space-sm);gap:var(--cos-space-xs);} .fin-nav-divider{height:1px;background:var(--cos-sidebar-border);margin:var(--cos-space-xs) var(--cos-space-sm);} .fin-nav-item{display:flex;align-items:center;gap:var(--cos-space-sm);height:var(--cos-control-height);text-align:left;background:transparent;border:0;color:var(--cos-sidebar-text);padding:0 var(--cos-space-md);border-radius:var(--cos-radius-sm);font-family:inherit;cursor:pointer;transition:background var(--cos-transition-fast);} .fin-nav-item:hover{background:var(--cos-sidebar-hover);} .fin-nav-item.is-active{background:var(--cos-accent);color:#fff;font-weight:var(--cos-fw-label);} .fin-nav-icon{font-size:var(--cos-fs-body);line-height:1;flex:0 0 auto;} .fin-nav-label{flex:1;font-size:var(--cos-fs-label);font-weight:var(--cos-fw-label);} /* Phase 1.5: 人力成本 group header (non-clickable) + its two indented sub-items. */ .fin-nav-group-label{display:flex;align-items:center;gap:var(--cos-space-sm);height:var(--cos-control-height);padding:0 var(--cos-space-md);color:var(--cos-sidebar-text-muted);font-size:var(--cos-fs-label);font-weight:var(--cos-fw-label);} .fin-nav-item-sub{padding-left:calc(var(--cos-space-md) + var(--cos-space-lg));} .fin-main{flex:1;min-width:0;padding:var(--cos-space-lg);} /* Page header — compact; status now lives here as a tag, not as a banner. Phase 1.3: title/subtitle gap and header-to-KPI gap widened for vertical rhythm. */ .fin-page-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:var(--cos-space-md);margin-bottom:var(--cos-space-xl);} .fin-page-header h1{margin:0;font-size:var(--cos-fs-page-title);font-weight:var(--cos-fw-page-title);color:var(--cos-text);} .fin-page-subtitle{margin:var(--cos-space-sm) 0 0;color:var(--cos-text-muted);font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);} .fin-header-tags{display:flex;gap:var(--cos-space-sm);flex-wrap:wrap;align-items:center;} .fin-tag{display:inline-flex;align-items:center;height:var(--cos-space-xl);padding:0 var(--cos-space-sm);border-radius:var(--cos-radius-pill);font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);white-space:nowrap;box-sizing:border-box;} .fin-tag-month{background:var(--cos-accent-soft);color:var(--cos-accent);border:1px solid var(--cos-accent-soft-border);} .fin-tag-status{background:var(--cos-surface-muted);color:var(--cos-text-muted);border:1px solid var(--cos-border);} .fin-tag-demo{background:var(--cos-warning-bg);color:#93650a;border:1px solid #fde68a;} .fin-tag-disconnected{background:var(--cos-surface-muted);color:var(--cos-text-muted);border:1px solid var(--cos-border);} .fin-tag-planning{background:var(--cos-accent-soft);color:var(--cos-accent);border:1px solid var(--cos-accent-soft-border);} .fin-page-body{display:flex;flex-direction:column;gap:var(--cos-space-md);} .fin-card{background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-lg);padding:var(--cos-space-xl);box-shadow:var(--cos-shadow-sm);} .fin-section-title{margin:0 0 var(--cos-space-sm);font-size:var(--cos-fs-section-title);font-weight:var(--cos-fw-section-title);color:var(--cos-text);} /* ---- Financial KPI Cards — first-screen focus (section 3) ---- Phase 1.4: card padding reduced 30px->20px (~25% shorter cards); fixed 3-column grid capped at 900px so a 5-card default set lays out 3+2 with the trailing row left-aligned (default grid behavior — no extra alignment rules needed) and cards never over-stretch at wide viewports; per-card "展示資料" tag removed (redundant with the header's "展示模式" tag) in favor of the section-level settings entry below. */ .fin-kpi-section{background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-lg);padding:var(--cos-space-xl);box-shadow:var(--cos-shadow-sm);} .fin-kpi-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--cos-space-sm);} .fin-kpi-section-head .fin-section-title{margin:0;} .fin-kpi-settings-btn{height:32px;padding:0 var(--cos-space-md);border-radius:var(--cos-radius-sm);border:1px solid var(--cos-accent-soft-border);background:var(--cos-accent-soft);color:var(--cos-accent);font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);font-family:inherit;cursor:pointer;} .fin-kpi-settings-btn:hover{background:var(--cos-accent-soft-border);} .fin-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;gap:var(--cos-space-sm);} .fin-kpi-card{background:var(--cos-surface-muted);border:1px solid var(--cos-border);border-radius:var(--cos-radius-md);padding:20px var(--cos-space-md);display:flex;flex-direction:column;} .fin-kpi-card-head{display:flex;align-items:center;gap:var(--cos-space-xs);} .fin-kpi-icon{font-size:var(--cos-fs-body);line-height:1;} .fin-kpi-label{font-size:var(--cos-fs-label);font-weight:var(--cos-fw-label);color:var(--cos-text-muted);} .fin-kpi-value{font-size:24px;font-weight:700;color:var(--cos-text);line-height:1.2;margin-top:var(--cos-space-sm);} /* module-local KPI display size, see file header note */ .fin-kpi-note{font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);color:var(--cos-text-subtle);margin-top:var(--cos-space-sm);} .fin-kpi-mock{font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);color:var(--cos-text-subtle);background:var(--cos-surface);border:1px solid var(--cos-border);border-radius:var(--cos-radius-pill);padding:1px var(--cos-space-sm);align-self:flex-start;margin-top:var(--cos-space-xs);} /* Placeholder KPI card (availability = disconnected/future) — dashed border signals "not a real card" at a glance; never renders a value/note, only status + message. */ .fin-kpi-card-placeholder{border-style:dashed;} .fin-kpi-placeholder-status{font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);color:var(--cos-text-muted);margin-top:var(--cos-space-sm);} .fin-kpi-placeholder-msg{font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);color:var(--cos-text-subtle);margin-top:var(--cos-space-xs);} /* ---- Pending Tasks — secondary information, below the KPI row (section 4) ---- Phase 1.3: row height raised to ~56px (min-height, outside the --cos-space scale, same local-override precedent as .fin-kpi-value) with icon/text kept vertically centered via align-items:center; action button gets more horizontal breathing room. */ .fin-task-list{display:flex;flex-direction:column;gap:var(--cos-space-xs);} .fin-task-card{display:flex;align-items:center;min-height:56px;gap:var(--cos-space-md);padding:var(--cos-space-xs) var(--cos-space-md);border-radius:var(--cos-radius-md);background:var(--cos-surface-muted);border:1px solid var(--cos-border);} .fin-task-severity{font-size:var(--cos-fs-body);line-height:1;flex:0 0 auto;} .fin-task-text{flex:1;font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);color:var(--cos-text);} .fin-task-action{height:36px;padding:0 var(--cos-space-lg);border-radius:var(--cos-radius-sm);border:1px solid var(--cos-accent);background:var(--cos-accent);color:#fff;font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);font-family:inherit;flex:0 0 auto;cursor:default;} /* ---- Status badge — shared by Closing Checklist + Data Completeness ---- */ .fin-status-badge{display:inline-flex;align-items:center;height:26px;padding:0 var(--cos-space-sm);border-radius:var(--cos-radius-pill);font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);white-space:nowrap;box-sizing:border-box;} .fin-status-badge.is-done{background:var(--cos-success-bg);color:var(--cos-success);border:1px solid var(--cos-success-border);} .fin-status-badge.is-mock{background:var(--cos-accent-soft);color:var(--cos-accent);border:1px solid var(--cos-accent-soft-border);} .fin-status-badge.is-pending{background:var(--cos-warning-bg);color:#93650a;border:1px solid #fde68a;} .fin-status-badge.is-disconnected{background:var(--cos-surface-muted);color:var(--cos-text-muted);border:1px solid var(--cos-border);} /* ---- Month Closing Checklist — 10 items, 3+ states (section 5) ---- Phase 1.3: row gap tightened below --cos-space-xs (4px) to make the 10-step process read as one compact flow; badge size (.fin-status-badge) unchanged. */ .fin-checklist{display:flex;flex-direction:column;gap:2px;} .fin-checklist-row{display:flex;align-items:center;gap:var(--cos-space-sm);padding:var(--cos-space-xs) var(--cos-space-sm);border-radius:var(--cos-radius-sm);} .fin-checklist-mark{width:var(--cos-space-lg);flex:0 0 var(--cos-space-lg);text-align:center;font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);color:var(--cos-text-muted);} .fin-checklist-row.is-done .fin-checklist-mark{color:var(--cos-success);} .fin-checklist-row.is-mock .fin-checklist-mark{color:var(--cos-accent);} .fin-checklist-label{flex:1;font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);color:var(--cos-text);} .fin-checklist-row.is-disconnected .fin-checklist-label{color:var(--cos-text-muted);} /* ---- Cost Structure — proportion bars (section 6) ---- Phase 1.3: percentage pinned to the right edge regardless of label width. */ .fin-cost-list{display:flex;flex-direction:column;gap:var(--cos-space-sm);} .fin-cost-row{display:flex;flex-direction:column;gap:var(--cos-space-xs);} .fin-cost-row-head{display:flex;justify-content:space-between;font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);color:var(--cos-text);} .fin-cost-row-head span:last-child{text-align:right;} .fin-cost-track{height:8px;border-radius:var(--cos-radius-pill);background:var(--cos-surface-muted);border:1px solid var(--cos-border);overflow:hidden;} .fin-cost-fill{height:100%;border-radius:var(--cos-radius-pill);background:var(--cos-accent);} /* ---- Stat lists — Accounts Payable / Income Summary (sections 7-8) ---- Phase 1.3: amount pinned to the right edge regardless of label width. */ .fin-stat-list{display:flex;flex-direction:column;} .fin-stat-row{display:flex;justify-content:space-between;align-items:center;padding:var(--cos-space-xs) 0;border-bottom:1px solid var(--cos-border);} .fin-stat-row:last-child{border-bottom:none;} .fin-stat-label{font-size:var(--cos-fs-label);font-weight:var(--cos-fw-label);color:var(--cos-text-muted);} .fin-stat-value{font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);color:var(--cos-text);text-align:right;} .fin-stat-value.is-alert{color:var(--cos-danger);} /* ---- Data Completeness — overall bar + per-source status badges (section 9) ---- */ .fin-completeness-bar-wrap{display:flex;align-items:center;gap:var(--cos-space-sm);margin-bottom:var(--cos-space-md);} .fin-completeness-track{flex:1;height:var(--cos-space-sm);border-radius:var(--cos-radius-pill);background:var(--cos-surface-muted);border:1px solid var(--cos-border);overflow:hidden;} .fin-completeness-fill{height:100%;background:var(--cos-accent);border-radius:var(--cos-radius-pill);} .fin-completeness-pct{font-size:var(--cos-fs-card-title);font-weight:var(--cos-fw-card-title);color:var(--cos-text);min-width:44px;text-align:right;} .fin-completeness-grid{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:var(--cos-space-sm);} .fin-completeness-item{display:flex;align-items:center;justify-content:space-between;gap:var(--cos-space-xs);padding:var(--cos-space-sm);background:var(--cos-surface-muted);border-radius:var(--cos-radius-sm);} .fin-completeness-item-label{font-size:var(--cos-fs-label);font-weight:var(--cos-fw-label);color:var(--cos-text);} /* ---- Two-column bottom rows (section 10): Cost Structure|Payable, Income|Completeness ---- */ .fin-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--cos-space-md);align-items:start;} /* ---- Finance Settings overview (UAT-FIX-011) — compact capability rows. Card / section title / status badge / footer all reuse the existing vocabulary (.fin-card / .fin-section-title / .fin-status-badge / .fin-page-footer); only the row layout below is new. Body copy stays on --cos-text and the secondary line on --cos-text-subtle (#667085, 5.0:1 on white) rather than --cos-text-muted (#8a94a6, 2.9:1), so this page does not reintroduce the contrast defect UAT-FIX-010C fixed. */ .fin-settings-section + .fin-settings-section{margin-top:var(--cos-space-md);} .fin-settings-list{list-style:none;margin:var(--cos-space-md) 0 0;padding:0;display:flex;flex-direction:column;} .fin-settings-row{padding:var(--cos-space-sm) 0;border-bottom:1px solid var(--cos-border);} .fin-settings-row:last-child{border-bottom:none;padding-bottom:0;} .fin-settings-row-head{display:flex;align-items:center;gap:var(--cos-space-sm);flex-wrap:wrap;} .fin-settings-row-title{font-size:var(--cos-fs-body);font-weight:var(--cos-fw-card-title);color:var(--cos-text);} .fin-settings-row-desc{margin:var(--cos-space-xs) 0 0;font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);color:var(--cos-text);} .fin-settings-row-note{margin:2px 0 0;font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);color:var(--cos-text-subtle);} .fin-settings-row.is-unavailable .fin-settings-row-title{color:var(--cos-text-subtle);} /* ---- 會計科目的成本用途勾選（BATCH3-2 C）---- 表格儲存格內的一組 checkbox。必須明確宣告 flex-direction:row —— style.css 的全域 `label{display:flex;flex-direction:column}` 否則會把 checkbox 與文字拆成上下兩層 （與 UAT-FIX-006／008／010C／Batch1-L 同一個缺陷類型）。 */ .fin-coa-purpose{display:inline-flex;flex-direction:row;align-items:center;gap:4px;margin-right:var(--cos-space-sm);font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);color:var(--cos-text);white-space:nowrap;} .fin-coa-purpose input[type=checkbox]{width:15px;height:15px;flex:0 0 auto;accent-color:var(--cos-accent);cursor:pointer;} .fin-coa-purpose input[type=checkbox]:disabled{cursor:not-allowed;} .fin-coa-purpose:has(input:disabled){color:var(--cos-text-subtle);} .fin-placeholder-card{text-align:center;padding:calc(var(--cos-space-xl) * 2) var(--cos-space-xl);} .fin-placeholder-title{font-size:var(--cos-fs-card-title);font-weight:var(--cos-fw-card-title);color:var(--cos-text);margin-bottom:var(--cos-space-sm);} .fin-placeholder-desc{font-size:var(--cos-fs-body);font-weight:var(--cos-fw-body);color:var(--cos-text-muted);margin-bottom:var(--cos-space-md);} .fin-placeholder-tags{display:flex;gap:var(--cos-space-sm);justify-content:center;flex-wrap:wrap;} .fin-page-footer{margin-top:var(--cos-space-xs);padding-top:var(--cos-space-sm);border-top:1px solid var(--cos-border);font-size:var(--cos-fs-small);font-weight:var(--cos-fw-small);color:var(--cos-text-muted);text-align:center;} /* ---- KPI Widget settings drawer (section 3-8) — Mock UI only, closes on backdrop click ---- */ .fin-widget-overlay{position:fixed;inset:0;background:rgba(15,20,30,.35);z-index:40;} .fin-widget-drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:var(--cos-surface);box-shadow:var(--cos-shadow-lift);z-index:41;display:flex;flex-direction:column;padding:var(--cos-space-lg);overflow-y:auto;} /* CLINICOS-V4-UAT-FIX-008：抽屜自己的文字顏色契約。 這個抽屜是一個