/* Finance, procurement and contracts. Tokens from app.css only. */

.fin-tabs { margin-top: calc(-1 * var(--s2)); }
.fin-toolbar { margin-bottom: var(--s4); gap: var(--s3); }
.fin-num, .fin-table .num, .fin-bar-figs { font-variant-numeric: tabular-nums; }
.fin-neg { color: var(--danger); }
.fin-strong { font-weight: 600; color: var(--text); }
.fin-strong:hover { color: var(--accent-text); }
.fin-gap { margin-top: var(--s3); } .fin-gap-xs { margin-top: 4px; }
.fin-pre { white-space: pre-line; color: var(--text-2); }
.fin-h3 { font-size: 14px; margin: 0; }
.fin-demo { height: 20px; padding: 0 7px; font-size: 11px; background: var(--surface-3); color: var(--muted); vertical-align: middle; }
.fin-code { display: block; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border);
  font: 12.5px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.fin-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fin-plain li { display: flex; flex-wrap: wrap; gap: 4px var(--s2); align-items: center; }
.fin-issues { margin: 4px 0 0; padding-left: 18px; }
.fin-issues li + li { margin-top: 2px; }
.fin-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }

/* ---------- budget vs actual bar: actual (solid), committed (hatched), plan to date and budget ticks */
.fin-bar { position: relative; display: flex; height: 10px; border-radius: 99px; background: var(--surface-3); margin: 6px 0 2px; }
.fin-seg { display: block; height: 100%; flex: none; }
.fin-seg.actual { background: var(--violet); border-radius: 99px 0 0 99px; }
.fin-seg.committed { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--violet) 55%, transparent) 0 3px,
  color-mix(in srgb, var(--violet) 22%, transparent) 3px 6px); }
.fin-seg.committed:last-of-type { border-radius: 0 99px 99px 0; }
.fin-bar.warn .fin-seg.actual { background: var(--warn); }
.fin-bar.warn .fin-seg.committed { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 55%, transparent) 0 3px,
  color-mix(in srgb, var(--warn) 22%, transparent) 3px 6px); }
.fin-bar.danger .fin-seg.actual { background: var(--danger); }
.fin-bar.danger .fin-seg.committed { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 55%, transparent) 0 3px,
  color-mix(in srgb, var(--danger) 22%, transparent) 3px 6px); }
.fin-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; }
.fin-tick.budget { background: var(--text); }
.fin-tick.ytd { width: 0; border-left: 2px dotted var(--muted); }
.fin-legend { display: flex; flex-wrap: wrap; gap: 6px var(--s4); font-size: 12px; color: var(--muted); }
.fin-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fin-legend .sw { display: inline-block; width: 14px; height: 8px; border-radius: 3px; }
.fin-legend .sw.actual { background: var(--violet); }
.fin-legend .sw.committed { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--violet) 55%, transparent) 0 3px,
  color-mix(in srgb, var(--violet) 22%, transparent) 3px 6px); }
.fin-legend .sw.budget { width: 2px; height: 12px; background: var(--text); border-radius: 1px; }
.fin-legend .sw.ytd { width: 0; height: 12px; border-left: 2px dotted var(--muted); border-radius: 0; }

.fin-bars > li { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(160px, 2fr) 128px; gap: var(--s4); align-items: center; }
.fin-bar-name { min-width: 0; }
.fin-bar-viz { min-width: 0; }
.fin-bar-figs { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; flex-wrap: wrap; }
.fin-bar-state { justify-self: end; }
.fin-bar-col { min-width: 140px; }
.fin-table td { vertical-align: top; }
.fin-table tfoot td { border-top: 1px solid var(--border-strong); background: var(--surface-2); }
.fin-table tr.fin-future td { color: var(--muted); }
.fin-table .fin-group th, .fin-table .fin-group td { background: var(--surface-2); font-size: 12.5px; text-transform: none; color: var(--text-2); }

/* month-by-month mini comparison */
.fin-mini-col { width: 32%; min-width: 120px; }
.fin-mini { position: relative; height: 18px; margin-top: 2px; }
.fin-mini .b, .fin-mini .a { position: absolute; left: 0; height: 7px; border-radius: 4px; }
.fin-mini .b { top: 0; background: var(--border-strong); }
.fin-mini .a { top: 10px; background: var(--violet); }
.fin-mini .a.over { background: var(--danger); }

.fin-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.fin-split > div { display: flex; flex-direction: column; gap: 4px; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.fin-split strong { font: 600 18px/1.2 var(--font-display); }
.fin-queue li { min-height: 44px; }
.fin-kv-cols { grid-template-columns: max-content 1fr; }

.fin-details > summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--accent-text); padding: 4px 0; }
.fin-details[open] > summary { margin-bottom: var(--s2); }
details.card > summary.card-head { cursor: pointer; list-style: none; }
details.card > summary.card-head::-webkit-details-marker { display: none; }
details.card:not([open]) > summary.card-head { border-bottom: 0; }
.fin-new { margin-bottom: var(--s5); }

.fin-month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s3); }
.fin-month-grid label { font-size: 12px; }
html.js .fin-month-grid[hidden] { display: none; }
.fin-line-grid { display: grid; gap: var(--s3); margin-top: var(--s2); }
.fin-line-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(60px, .7fr) minmax(90px, 1fr) minmax(80px, 1fr); gap: var(--s2) var(--s3); align-items: end; }
.fin-line-row.three { grid-template-columns: minmax(0, 3fr) minmax(80px, 1fr) minmax(90px, 1fr); padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.fin-qty { max-width: 140px; }

/* suppliers */
.fin-chips { justify-content: flex-end; }
.fin-checks > li { align-items: flex-start; padding-top: var(--s4); padding-bottom: var(--s4); }
.fin-check-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px;
  border: 2px solid var(--border-strong); color: var(--surface); }
.fin-check-dot.done, .fin-check-dot.not_needed { background: var(--good); border-color: var(--good); }
.fin-check-dot.concern { background: var(--danger); border-color: var(--danger); }

/* contracts */
.fin-countdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.fin-countdown > div { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); }
.fin-countdown strong { font: 600 17px/1.3 var(--font-display); }
.fin-search { flex: 0 1 280px; }

/* subscriptions */
.fin-subs > li { align-items: flex-start; padding-top: var(--s4); padding-bottom: var(--s4); }
.fin-seats { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); flex-wrap: wrap; }
.fin-seats .meter { flex: 0 1 220px; min-width: 120px; }

/* set-up */
.fin-period-pick { align-items: flex-end; }
.fin-period-pick .field { flex: 0 1 260px; }
.fin-periods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s2); }
.fin-periods li { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; flex-wrap: wrap; padding: 6px 6px 6px var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.fin-periods li.closed { background: var(--surface-2); }
.fin-currencies { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fin-currencies li { display: flex; flex-wrap: wrap; gap: 4px var(--s3); align-items: baseline; }
.fin-report-sum { margin-bottom: var(--s2); }
.fin-imports > li { display: block; }
.fin-history .title { font-weight: 500; }

@media (max-width: 900px) {
  .fin-bars > li { grid-template-columns: minmax(0, 1fr) auto; }
  .fin-bars .fin-bar-viz { grid-column: 1 / -1; grid-row: 2; }
  .fin-bars .fin-bar-state { grid-column: 2; grid-row: 1; }
  .fin-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fin-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-line-row, .fin-line-row.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fin-line-row > .field:first-child { grid-column: 1 / -1; }
  .fin-countdown { grid-template-columns: minmax(0, 1fr); }
  .fin-search { flex: 1 1 100%; }
  .fin-mini-col { display: none; }
}
.fin-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.fin-period-pick select, .fin-toolbar select { width: 100%; min-width: 0; }
.fin-tabs a { padding: 10px 12px; }
.fin-table td:first-child { min-width: 200px; }
.fin-table { position: relative; }