/* Cash Flow styles. Reuses the KISS design tokens
   (/design-system/colors_and_type.css) and mirrors the Support app's shell,
   header, and auth-card so the two internal apps feel like one product. */

/* ── Shell ────────────────────────────────────────────────────────── */
.app-shell {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

/* Shared chrome (header / auth gate / toolbar / panel / pills) lives in
   /design-system/hive-chrome.css — only app-specific overrides here. */
.toolbar input[type="search"] { min-width: 220px; }
.toolbar label.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--n-600); }

/* ── KPI strip — total open supplier balance across the filtered set ───── */
.kpi-strip {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-left: 4px solid var(--kiss-red);
  border-radius: var(--radius-lg);
}
.kpi-strip__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--n-500);
}
.kpi-strip__value { font-size: 22px; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi-strip__sub   { font-size: 12px; color: var(--n-500); }
.kpi-strip__planning {
  font-size: 11px; color: var(--n-500); margin-left: var(--space-3);
  font-variant-numeric: tabular-nums;
}

/* ── Kanban board ─────────────────────────────────────────────────── */
/* The board has five columns: Planning / Submitted / In Transit are always
   full-width; Received and Paid are collapsible rails (default collapsed).
   grid-template-columns is set inline by JS based on which rails are open. */
.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(240px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.col { background: var(--bg-subtle); border: 1px solid var(--n-200); border-radius: var(--radius-lg); padding: var(--space-3); min-height: 200px; }
.col.drop-target { outline: 2px dashed var(--n-400); outline-offset: -4px; background: var(--n-100); }
.col__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 var(--space-1) var(--space-3); }
.col__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-600); }
.col__count { font-family: var(--font-mono); font-size: 11px; color: var(--n-400); }
.col__open {
  font-size: 13px; font-weight: 600; color: var(--fg-1);
  margin: 0 var(--space-1) var(--space-3);
  font-variant-numeric: tabular-nums;
}
.col__open span { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--n-500); letter-spacing: 0.06em; text-transform: uppercase; margin-left: 4px; }
.col__toggle {
  background: transparent; border: 0; color: var(--n-500); cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1; padding: 0 4px;
}
.col__toggle:hover { color: var(--n-900); }
.col--received .col__title,
.col--paid     .col__title { color: var(--n-500); }

/* Collapsed Received rail: hide cards, lay header vertically. */
.col--collapsed { cursor: pointer; min-height: 200px; padding: var(--space-3) 0; }
.col--collapsed:hover { background: var(--n-100); }
.col--collapsed .col__cards { display: none; }
.col--collapsed .col__head {
  flex-direction: column; gap: var(--space-2); align-items: center;
  margin: 0;
}
.col--collapsed .col__title {
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; letter-spacing: 0.12em;
}
.col--collapsed .col__count { font-size: 11px; }

.card {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-3); cursor: pointer;
  box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast) var(--ease-standard);
}
.card:hover { border-color: var(--n-400); }
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: 0.5; }
.card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.card__po { font-family: var(--font-mono); font-size: 12px; color: var(--n-700); font-weight: 600; }
.card__total { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.card__vendor { font-size: 14px; color: var(--fg-1); margin: 2px 0 var(--space-2); }
.card__meta { font-size: 12px; color: var(--n-500); }
/* purchase_overview — small body text, two lines max so the card stays compact. */
.card__overview {
  font-size: 12px; color: var(--n-600); margin-top: var(--space-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-line;
}
.card__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-2); }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 7px; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; }
.badge--warn  { background: var(--warning-soft); color: #92400e; border-color: #fcd9a3; }
.badge--soon  { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.badge--due   { background: var(--error-soft); color: #991b1b; border-color: #fca5a5; }
.badge--info  { background: var(--info-soft); color: var(--n-600); border-color: var(--n-200); }
.badge--ok    { background: var(--success-soft); color: #065f46; border-color: #a7f3d0; }

/* ── Side panel (drawer) ──────────────────────────────────────────── */
.panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(520px, 94vw);
  background: var(--n-0); border-left: 1px solid var(--n-200); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease-standard);
  z-index: 50; display: flex; flex-direction: column; overflow-y: auto;
}
.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: 1px solid var(--n-200); position: sticky; top: 0; background: var(--n-0); }
.panel h2 { font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-500); margin: 0 0 var(--space-3); }
.panel a.inflow-link { font-size: 12px; color: var(--fg-link); text-decoration: none; }
.panel__overview {
  font-size: 13px; color: var(--fg-2); white-space: pre-line;
  border-left: 2px solid var(--n-200); padding-left: var(--space-3);
}
/* Inflow's "Purchase Overview" custom1 — short tag (e.g. "10,000 Disc").
   Shown as a chip near the top of the side panel for quick context. */
.panel__chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px; margin-bottom: var(--space-4);
  background: var(--n-100); color: var(--n-700);
  border: 1px solid var(--n-200); border-radius: var(--radius-pill);
}

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px var(--space-3); font-size: 13px; }
.kv input[type="date"] { font: inherit; font-size: 13px; padding: 2px 6px; border: 1px solid var(--n-300); border-radius: var(--radius-sm); }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-500); padding: 4px 6px; border-bottom: 1px solid var(--n-200); }
table.tbl td { padding: 6px; border-bottom: 1px solid var(--n-100); color: var(--fg-1); vertical-align: middle; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl .est-default td { color: var(--n-500); font-style: italic; }

.tranche-status { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: var(--radius-pill); }
.tranche-status.pending { background: var(--n-100); color: var(--n-600); }
.tranche-status.partial { background: var(--warning-soft); color: #92400e; }
.tranche-status.settled { background: var(--success-soft); color: #065f46; }

/* Source chip on tranche rows — distinguishes policy-generated rows from
   the auto-balance fallback (and any legacy manual rows from pre-040). */
.tranche-source {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 6px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.tranche-source.src-policy           { background: var(--info-soft); color: var(--n-700); border-color: var(--n-200); }
.tranche-source.src-default_balance  { background: var(--n-100); color: var(--n-500); font-style: italic; }
.tranche-source.src-user             { background: var(--warning-soft); color: #92400e; border-color: #fcd9a3; }
.tranche-source.src-actual           { background: var(--success-soft); color: #065f46; border-color: #a7f3d0; }

/* Actual-payment rows in the Payments table: subtle tint so they read
   distinctly from the future-estimated rows without shouting. */
table.tbl .pay-actual td { background: #f0fdf4; }

/* Policy picker line inside the side panel — select + vendor-default chk. */
.policy-pick { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.policy-pick select {
  font: inherit; font-size: 13px; padding: 4px 8px;
  border: 1px solid var(--n-300); border-radius: var(--radius-sm); background: var(--n-0);
  min-width: 200px;
}
.policy-pick label.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--n-600); }
.policy-pick label.chk input[disabled] + * { opacity: 0.5; }

.row-actions button { background: transparent; border: 0; color: var(--n-500); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0 4px; }
.row-actions button:hover { color: var(--kiss-red); }

.add-tranche { display: flex; gap: var(--space-2); align-items: flex-end; margin-top: var(--space-3); flex-wrap: wrap; }
.add-tranche label { font-size: 11px; color: var(--n-600); display: block; }
.add-tranche input { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--n-300); border-radius: var(--radius-sm); }
.btn { background: var(--n-900); color: var(--n-0); border: 0; border-radius: var(--radius-md); padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn--ghost { background: transparent; color: var(--n-700); border: 1px solid var(--n-300); }
.btn--ghost:hover { background: var(--n-100); }

.notes textarea { width: 100%; min-height: 80px; font: inherit; font-size: 13px; padding: var(--space-2); border: 1px solid var(--n-300); border-radius: var(--radius-md); resize: vertical; }
.notes__meta { font-size: 11px; color: var(--n-400); margin-top: 4px; }

/* Footer of the side panel — quiet identifier so support / engineering
   can cross-reference an Inflow PO without leaving Hive. */
.panel__footer {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-6); padding-top: var(--space-3);
  border-top: 1px solid var(--n-200);
  font-family: var(--font-mono); font-size: 11px;
}
.panel__footer code {
  font: inherit; color: var(--n-700);
  user-select: all;  /* one click selects the whole UUID for copy */
}

.flag-banner { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: 12px; margin-bottom: var(--space-3); }
.flag-banner.over { background: var(--error-soft); color: #991b1b; border: 1px solid #fca5a5; }
.flag-banner.rev  { background: var(--warning-soft); color: #92400e; border: 1px solid #fcd9a3; }

/* ── Cash Outflows view ───────────────────────────────────────────── */
.outflows { max-width: 760px; }
.outflows .lead { color: var(--n-600); font-size: 14px; margin: 0 0 var(--space-5); }
.outflows table { width: 100%; border-collapse: collapse; }
.outflows th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-500); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--n-200); }
.outflows td { padding: var(--space-3); border-bottom: 1px solid var(--n-100); font-size: 14px; }
.outflows td.num, .outflows th.num { text-align: right; font-variant-numeric: tabular-nums; }
.outflows .bar { height: 8px; background: var(--kiss-red); border-radius: var(--radius-pill); }
.outflows tfoot td { font-weight: 700; border-top: 2px solid var(--n-300); }
/* Past-due bucket: unsettled tranches with estimated_date < today. Rolled
   into a single "expected soon" line so they don't fade into old weeks. */
.outflows .past-due-row td { background: var(--warning-soft); }
.outflows .past-due-row td:first-child { font-weight: 600; color: #92400e; }
.outflows .past-due-row .bar { background: #f59e0b; }

/* ── AR view (collections exposure vs backlog) ────────────────────── */
.ar-view { max-width: 1040px; }
.ar-view a { color: var(--fg-link); text-decoration: none; }
.ar-view a:hover { text-decoration: underline; }
/* Three KPIs side by side, reusing the kpi-strip band per card. */
.ar-kpis { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.ar-kpis .kpi-strip { flex: 1 1 0; min-width: 200px; margin-bottom: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.ar-h { font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-700); margin: var(--space-6) 0 var(--space-3); display: flex; align-items: baseline; gap: var(--space-2); }
.ar-sub { font-family: var(--font-mono); font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0.02em; color: #92400e; }
.ar-view .badge--warn { margin-left: 6px; }

/* ── Policies admin view ──────────────────────────────────────────── */
.policies { max-width: 960px; }
.policies .lead { color: var(--n-600); }
.policies .toolbar { margin-bottom: var(--space-4); }

.policy {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--radius-lg);
  padding: var(--space-4); margin-bottom: var(--space-4);
}
.policy__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.policy__head .spacer { flex: 1; }
.policy__name {
  font: inherit; font-size: 16px; font-weight: 600;
  border: 1px solid transparent; background: transparent; padding: 2px 4px;
  border-radius: var(--radius-sm); min-width: 220px;
}
.policy__name:hover, .policy__name:focus { border-color: var(--n-300); background: var(--n-0); outline: none; }
.policy__desc {
  width: 100%; min-height: 36px; resize: vertical;
  font: inherit; font-size: 13px; color: var(--n-600);
  border: 1px solid var(--n-200); border-radius: var(--radius-sm);
  padding: 6px 8px; margin-bottom: var(--space-3); background: var(--bg-subtle);
}
.policy__meta { font-size: 12px; color: var(--n-600); display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.policy__meta .muted { font-family: var(--font-mono); }

/* Vendor-default chips on a policy card. The single source of truth for
   "which suppliers default to this policy" lives here on the Policies tab —
   the PO side panel no longer has a vendor-default toggle. */
.policy__vendors {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.policy__vendors-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--n-500);
}
.vendor-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--n-100); color: var(--n-700);
  border: 1px solid var(--n-200);
  padding: 2px 4px 2px 8px; border-radius: var(--radius-pill);
  font-size: 12px;
}
.vendor-chip__x {
  background: transparent; border: 0; color: var(--n-500);
  cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1;
}
.vendor-chip__x:hover { color: var(--kiss-red); }
.vendor-chip__add {
  font: inherit; font-size: 12px;
  border: 1px dashed var(--n-300); border-radius: var(--radius-pill);
  padding: 2px 8px; background: var(--n-0); color: var(--n-600);
  cursor: pointer;
}
.policy__tranches input[type="number"], .policy__tranches select {
  font: inherit; font-size: 12px;
  border: 1px solid var(--n-300); border-radius: var(--radius-sm);
  padding: 2px 6px; background: var(--n-0);
}
.policy__tranches label.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--n-600); }

/* Policy edit state: dirty card gets a KISS-red accent so the user knows
   there are unsaved changes; Save button enabled only when valid. */
.policy--dirty { border-color: var(--kiss-red); box-shadow: 0 0 0 1px var(--kiss-red); }
.policy__actions {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
}
.policy__actions .spacer { flex: 1; }
.policy__actions button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Tranche-sum read-out: turn red when the percents don't total 100. */
.policy__meta .sum-bad { color: var(--kiss-red); font-weight: 600; }

.row-actions__btn { background: transparent; border: 0; color: var(--n-500); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0 4px; }
.row-actions__btn:hover { color: var(--kiss-red); }

/* ── 13-Week forecast ─────────────────────────────────────────────── */
.forecast { max-width: 980px; }
.forecast .neg { color: #b91c1c; }
.forecast .tail-row td { color: var(--n-500); font-style: italic; }
.forecast .fc-start { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); font-size: 13px; }
.forecast .fc-start input { width: 140px; padding: 4px 8px; border: 1px solid var(--n-300); border-radius: var(--radius-md); font: inherit; }
/* Lowest projected cumulative week — the "will we run low?" signal. Amber for
   the trough; red if it actually goes negative. */
.forecast .fc-low td { background: var(--warning-soft); }
.forecast .fc-low td:first-child { font-weight: 600; color: #92400e; }
.forecast .fc-neg td { background: var(--error-soft); }
.forecast .fc-neg td:first-child { color: #991b1b; font-weight: 700; }
.forecast .fc-note { font-size: 12px; color: var(--n-600); margin: var(--space-3) 0 0; }
.forecast .fc-note.warn { color: #991b1b; font-weight: 600; }

/* Cells that carry a hover breakdown of what makes up the amount. */
.forecast td.cf-has-tip { cursor: help; text-decoration: underline dotted var(--n-300); text-underline-offset: 3px; }
.forecast tr:hover td.cf-has-tip { background: var(--n-50); }

/* Floating breakdown tooltip — a single element parked on <body> (position:
   fixed) so it never clips against the table or its scroll container. */
.cf-tip {
  position: fixed; z-index: 1000; display: none; pointer-events: none;
  min-width: 220px; max-width: 340px;
  background: var(--bg-inverse); color: var(--n-0);
  border-radius: var(--radius-md); padding: 10px 12px;
  font-size: 12px; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.cf-tip__title { font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--n-400); margin-bottom: 6px; }
.cf-tip__row { display: flex; justify-content: space-between; gap: 18px; font-variant-numeric: tabular-nums; }
.cf-tip__lbl { color: var(--n-100); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-tip__amt { color: var(--n-0); white-space: nowrap; flex-shrink: 0; }
.cf-tip__more .cf-tip__lbl, .cf-tip__more .cf-tip__amt { color: var(--n-400); }
.cf-tip__total { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--n-700); font-weight: 600; }
.cf-tip__note { margin-top: 7px; color: var(--n-400); font-size: 11px; line-height: 1.4; white-space: normal; }

/* ── Inline-editable cells (Revenue software + Labor editors) ──────── */
.cell-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 3px 5px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--fg-1);
}
.cell-input:hover, .cell-input:focus { border-color: var(--n-300); background: var(--n-0); outline: none; }
.cell-input.num { text-align: right; font-variant-numeric: tabular-nums; }
select.cell-input { cursor: pointer; }
.sw-table input[type="date"].cell-input, .labor-table input[type="date"].cell-input { font-size: 12px; }

/* ── Labor planning ───────────────────────────────────────────────── */
.labor-view { max-width: 1280px; }
.labor-bucket { margin-bottom: var(--space-6); }
.labor-bucket__head { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-2); }
/* Keep the gross/benefits/tax/est columns compact so all 11 fit without scroll. */
.labor-table th.num, .labor-table td.num { width: 92px; }