/* Finance module (screens 01–10)
   Only what assets/css/global.css does not already provide. Modals, fields, form grids, KPI tiles,
   tables, notices and buttons all come from the design system. These rules are scoped to the Finance
   panels so nothing here reaches another module. The Customer Financial Hub keeps its own file for
   what only it draws (the utilisation meter, the rule row). Every custom property used below is
   defined in global.css for both themes. */

/* ---- table cell alignment (replaces the per-cell inline styles the export carried) ---- */
/* Money columns start from the left edge, header and value on the same line, so a short heading
   over a long figure no longer leaves the column looking ragged down its left side — the client
   called that out on the A/R aging table. tabular-nums gives every digit the same width, so the
   figures still stack into even columns without being right-aligned.
   nowrap keeps a money value (and its "+ X unapplied" note) from breaking mid-number when the
   column narrows — a wrapped amount reads as jagged whichever edge it is aligned to. */
.screen-panel[data-module="Finance"] .num,
.screen-panel[data-module="Finance"] th.num   { text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.screen-panel[data-module="Finance"] .num-b,
.screen-panel[data-module="Finance"] th.num-b { text-align: left; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.screen-panel[data-module="Finance"] .num-b .meta { white-space: nowrap; }

/* The totals row sat 9px off every row above it. global.css pads `tbody td` and says nothing about
   `tfoot td`, so the footer fell back to the browser's 1px default: one row indented differently
   from the whole table, which is the slant the client pointed at on the A/R aging. Match the body. */
.screen-panel[data-module="Finance"] tfoot td { padding: 6px 10px; }

/* ---- compact row buttons and the action clusters they sit in ---- */
.screen-panel[data-module="Finance"] .btn-xs { font-size: 12px; padding: 3px 8px; }
.screen-panel[data-module="Finance"] a.btn-xs { display: inline-block; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); }
.screen-panel[data-module="Finance"] .hub-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.screen-panel[data-module="Finance"] .crumbbar .actions button { white-space: nowrap; }

/* ---- rows that read as struck, as memo, or as the one picked ---- */
.screen-panel[data-module="Finance"] tr.is-void td { opacity: .45; }
.screen-panel[data-module="Finance"] tr.is-memo td { color: var(--ink-mut); }
.screen-panel[data-module="Finance"] tr.is-picked td { background: var(--active-bg); }

/* ---- free text typed on these screens must wrap where it sits ---- */
.screen-panel[data-module="Finance"] .gridwrap { overflow-x: auto; }
.screen-panel[data-module="Finance"] table td, .screen-panel[data-module="Finance"] table th { overflow-wrap: break-word; word-break: break-word; }
.screen-panel[data-module="Finance"] .cell-wrap { max-width: 340px; overflow-wrap: break-word; word-break: break-word; }
.screen-panel[data-module="Finance"] .notice, .screen-panel[data-module="Finance"] .field-error,
.screen-panel[data-module="Finance"] .modal-body { overflow-wrap: break-word; word-break: break-word; }

/* ---- a KPI tile asked to show a wide figure breaks inside the number rather than clipping ---- */
.screen-panel[data-module="Finance"] .kpi { min-width: 0; }
.screen-panel[data-module="Finance"] .kpi .n { overflow-wrap: anywhere; word-break: break-word; line-height: 1.08; hyphens: none; }

/* ---- the A/R Dashboard’s summary row: one tile per question, in fixed columns so the row never
        strands a tile alone on a second line the way auto-fit does when three columns fit ---- */
.screen-panel[data-module="Finance"] .kpis.fin-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .screen-panel[data-module="Finance"] .kpis.fin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .screen-panel[data-module="Finance"] .kpis.fin-summary { grid-template-columns: minmax(0, 1fr); } }

/* ---- late money takes the overdue family: the design system gives --overdue-* to genuinely late A/R
        and keeps --danger-* for destructive controls; AP Aging’s Past Due tile already uses it. Bar and
        value together, the way the product’s admin dashboard tints its overdue A/R tile. The renderer
        sets the class only while past-due money exists, so a $0.00 tile never turns red ---- */
.screen-panel[data-module="Finance"] .kpi.kpi-overdue::after { background: var(--overdue-text); }
.screen-panel[data-module="Finance"] .kpi.kpi-overdue .n { color: var(--overdue-text); }

/* ---- a hint line under a tile’s label, and the links it may carry ---- */
.screen-panel[data-module="Finance"] .kpi .field-hint { margin-top: 4px; }
.screen-panel[data-module="Finance"] .kpi .field-hint a { color: var(--cyan); font-weight: 600; }
.screen-panel[data-module="Finance"] .kpi .field-hint a:hover { text-decoration: underline; }

/* ---- dialogs: a long form still fits on a short viewport; a detail view gets room for a table ---- */
.screen-panel[data-module="Finance"] .modal { max-height: calc(100vh - 48px); overflow-y: auto; }
.screen-panel[data-module="Finance"] .modal.modal-wide { max-width: 760px; }
.screen-panel[data-module="Finance"] .form-grid > .field { min-width: 0; }
.screen-panel[data-module="Finance"] .form-grid > .field > input,
.screen-panel[data-module="Finance"] .form-grid > .field > select,
.screen-panel[data-module="Finance"] .form-grid > .field > textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.screen-panel[data-module="Finance"] .fin-static { font-size: 13px; padding: 6px 0; color: var(--ink); }
.screen-panel[data-module="Finance"] .modal-extra { margin-top: 12px; }
.screen-panel[data-module="Finance"] .modal .gridwrap { margin: 0; }
.screen-panel[data-module="Finance"] .fin-kv { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 4px 12px; font-size: 12.5px; align-items: center; }
.screen-panel[data-module="Finance"] .fin-kv > span:nth-child(odd) { color: var(--ink-mut); text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; font-weight: 700; }
.screen-panel[data-module="Finance"] .fin-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---- allocation history and apply-step chrome ---- */
.screen-panel[data-module="Finance"] .fin-alloc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 2px 0; font-size: 12.5px; }
.screen-panel[data-module="Finance"] .fin-apply-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.screen-panel[data-module="Finance"] .fin-apply-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.screen-panel[data-module="Finance"] .fin-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-mut); cursor: pointer; }

/* ---- a small view switch (AP Aging: Summary / By Vendor), drawn like the hub's tab strip ---- */
.screen-panel[data-module="Finance"] .fin-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.screen-panel[data-module="Finance"] .fin-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 10px 8px 4px; margin-right: 10px; font-size: 13px; font-weight: 600; color: var(--ink-mut); cursor: pointer; border-radius: 0; }
.screen-panel[data-module="Finance"] .fin-tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.screen-panel[data-module="Finance"] .fin-tab:hover { color: var(--cyan); background: none; }

/* ---- the filter bars the export shipped as forms with nothing behind them ---- */
.screen-panel[data-module="Finance"] .filterbar select, .screen-panel[data-module="Finance"] .filterbar input { min-width: 0; }

/* ---- the A/R Dashboard's trend chart: two lines over month-end snapshots, kept small so it
        sits between the summary row and the DSO form without pushing the aging table below the
        fold. Title and legend share one row; colours reuse the summary tiles' --cyan (total)
        and --overdue-text (past-due). ---- */
.screen-panel[data-module="Finance"] .fin-trend { margin: 0 0 4px; }
.screen-panel[data-module="Finance"] .fin-trend-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.screen-panel[data-module="Finance"] .fin-trend-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.screen-panel[data-module="Finance"] .fin-trend-svg { width: 100%; height: auto; display: block; max-width: 100%; }
.screen-panel[data-module="Finance"] .fin-trend-grid { stroke: var(--line); stroke-width: 1; }
.screen-panel[data-module="Finance"] .fin-trend-axis { fill: var(--ink-mut); font-size: 10.5px; font-family: inherit; }
.screen-panel[data-module="Finance"] .fin-trend-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.screen-panel[data-module="Finance"] .fin-trend-line.fin-trend-total { stroke: var(--cyan); }
.screen-panel[data-module="Finance"] .fin-trend-line.fin-trend-past  { stroke: var(--overdue-text); }
.screen-panel[data-module="Finance"] .fin-trend-dot.fin-trend-total { fill: var(--cyan); stroke: var(--canvas); stroke-width: 1.5; }
.screen-panel[data-module="Finance"] .fin-trend-dot.fin-trend-past  { fill: var(--overdue-text); stroke: var(--canvas); stroke-width: 1.5; }
.screen-panel[data-module="Finance"] .fin-trend-legend { display: inline-flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mut); }
.screen-panel[data-module="Finance"] .fin-trend-key { display: inline-flex; align-items: center; gap: 6px; }
.screen-panel[data-module="Finance"] .fin-trend-swatch { width: 14px; height: 2px; border-radius: 2px; display: inline-block; }
.screen-panel[data-module="Finance"] .fin-trend-swatch.fin-trend-total { background: var(--cyan); }
.screen-panel[data-module="Finance"] .fin-trend-swatch.fin-trend-past  { background: var(--overdue-text); }

/* ---- status keys these screens derive that have no .b-* rule in global.css.
        Same semantic token families the existing badges use, so no new colours enter the system. ---- */
.screen-panel[data-module="Finance"] .b-VOID,
.screen-panel[data-module="Finance"] .b-CLOSED,
.screen-panel[data-module="Finance"] .b-UNMATCHED,
.screen-panel[data-module="Finance"] .b-OPEN,
.screen-panel[data-module="Finance"] .b-CANCELLED_,
.screen-panel[data-module="Finance"] .b-DISABLED     { background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral-border); }
.screen-panel[data-module="Finance"] .b-DISPUTED,
.screen-panel[data-module="Finance"] .b-INVESTIGATING,
.screen-panel[data-module="Finance"] .b-DISCREPANCY,
.screen-panel[data-module="Finance"] .b-PARTIALLY_APPLIED,
.screen-panel[data-module="Finance"] .b-SUBMITTED    { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.screen-panel[data-module="Finance"] .b-ESCALATED,
.screen-panel[data-module="Finance"] .b-REJECTED     { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.screen-panel[data-module="Finance"] .b-APPLIED,
.screen-panel[data-module="Finance"] .b-UNAPPLIED,
.screen-panel[data-module="Finance"] .b-ISSUED       { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }
.screen-panel[data-module="Finance"] .b-RESOLVED,
.screen-panel[data-module="Finance"] .b-MATCHED,
.screen-panel[data-module="Finance"] .b-ELIGIBLE,
.screen-panel[data-module="Finance"] .b-active,
.screen-panel[data-module="Finance"] .b-ENABLED      { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }

/* Pipeline: the A/P flow as a row of queues, so what is waiting at each step and what it is worth
   read together. Columns scroll sideways rather than wrap, so a stage never lands under the stage
   that feeds it. */
.screen-panel[data-module="Finance"] .fin-pipeline { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: stretch; }
.screen-panel[data-module="Finance"] .fin-stage { flex: 1 0 200px; min-width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.screen-panel[data-module="Finance"] .fin-stage.is-empty { opacity: .6; }
.screen-panel[data-module="Finance"] .fin-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.screen-panel[data-module="Finance"] .fin-stage-label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-mut); }
.screen-panel[data-module="Finance"] .fin-stage-count { font-size: 11px; font-weight: 700; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral-text); }
.screen-panel[data-module="Finance"] .fin-stage-total { font-size: 19px; font-weight: 700; margin-top: 6px; }
.screen-panel[data-module="Finance"] .fin-stage-hint { font-size: 11px; color: var(--ink-mut); margin-top: 2px; }
.screen-panel[data-module="Finance"] .fin-stage-items { margin-top: 10px; border-top: 1px solid var(--line-2); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.screen-panel[data-module="Finance"] .fin-stage-item { font-size: 12px; }
.screen-panel[data-module="Finance"] .fin-stage-item .meta.is-overdue { color: var(--danger-text); }