/* ===========================================================================
   Financials — cash and debt.

   Every selector is `fin-` prefixed. The portal already owns .card, .kpi,
   .chip, .pill, .tbl and .btn, and this screen needs its own versions of most
   of them; an unprefixed rule here restyles half the portal silently.

   Loaded after tokens.css, so the palette, the three faces and the radius
   steps come from the design system rather than from here.
   =========================================================================== */

/* ---- header ------------------------------------------------------------- */

.fin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 0 0 14px; flex-wrap: wrap;
}
.fin-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); margin: 0 0 3px; }
.fin-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dimmer); margin: 0;
}
.fin-headtools { display: flex; gap: 8px; align-items: center; flex: none; flex-wrap: wrap; }

.fin-qsel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  padding: 8px 11px; cursor: pointer;
}

.fin-btn {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 8px 13px; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
  white-space: nowrap;
}
.fin-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.fin-btn[disabled] { opacity: .5; cursor: default; }
.fin-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.fin-btn.primary:hover { filter: brightness(1.08); }

/* ---- tiles --------------------------------------------------------------
   Cash and debt sit side by side and are never summed. There is deliberately
   no "total" tile: the two are different account kinds and adding them
   produces a meaningless number in the hundreds of millions. */

.fin-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1100px) { .fin-tiles { grid-template-columns: 1fr 1fr; } }

.fin-tile {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px 13px; min-width: 0;
}
.fin-tile .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dimmer);
  display: flex; align-items: center; gap: 6px;
}
.fin-tile .v {
  font-family: var(--font-display); font-size: 25px; font-weight: 600;
  letter-spacing: -.014em; line-height: 1.14; margin-top: 7px;
  font-variant-numeric: tabular-nums; color: var(--ink);
  overflow-wrap: anywhere;
}
.fin-tile .d { font-size: 11.5px; margin-top: 4px; color: var(--dimmer); }
.fin-tile.cash .v { color: var(--s3); }
.fin-tile.debt .v { color: var(--s2); }

/* ---- filter bar ---------------------------------------------------------- */

.fin-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 11px 12px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.fin-ms { position: relative; }
.fin-ms-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; padding: 7px 10px; cursor: pointer; white-space: nowrap;
}
.fin-ms-btn:hover { border-color: var(--border-strong); }
.fin-ms-btn.on { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.fin-ms-btn .caret { opacity: .6; font-size: 9px; }

/* The panel is toggled by an explicit class, never by the `hidden` attribute.
   The ops dashboard's multi-selects hit exactly this: `hidden` lost to a
   `display` rule elsewhere, the attribute flipped correctly, and the panel
   stayed invisible with nothing in the console to say why. */
.fin-ms-panel {
  display: none;
  position: absolute; z-index: 60; top: calc(100% + 5px); left: 0;
  min-width: 250px; max-width: 340px;
  background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  padding: 8px;
}
.fin-ms-panel.open { display: block; }
.fin-ms-search {
  width: 100%; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  font: inherit; font-size: 12px; padding: 6px 9px; margin-bottom: 7px;
}
.fin-ms-list { max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.fin-ms-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 12.5px; color: var(--text);
}
.fin-ms-opt:hover { background: var(--panel-2); }
.fin-ms-opt input { accent-color: var(--accent); flex: none; margin: 0; }
.fin-ms-opt .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-ms-opt .c { font-family: var(--mono); font-size: 10px; color: var(--dimmer); flex: none; }
.fin-ms-none { padding: 8px 7px; font-size: 12px; color: var(--dimmer); }
.fin-ms-foot {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border);
}
.fin-ms-foot button {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dimmer);
}
.fin-ms-foot button:hover { color: var(--accent); }

.fin-range { display: inline-flex; align-items: center; gap: 5px; }
.fin-range input {
  width: 92px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  font-family: var(--mono); font-size: 11px; padding: 7px 8px;
}
.fin-range .sep { color: var(--dimmer); font-size: 11px; }

/* ---- active filter chips ------------------------------------------------- */

.fin-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.fin-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-sm); padding: 3.5px 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink);
}
.fin-chip .x { cursor: pointer; opacity: .65; font-size: 12px; line-height: 1; }
.fin-chip .x:hover { opacity: 1; color: var(--crit); }
.fin-chip-clear {
  background: none; border: 1px solid var(--border); cursor: pointer;
  border-radius: var(--r-sm); padding: 3.5px 9px; color: var(--dimmer);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
}
.fin-chip-clear:hover { color: var(--crit); border-color: var(--crit); }
.fin-count {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; color: var(--dimmer); white-space: nowrap;
}

/* ---- tabs ---------------------------------------------------------------- */

.fin-tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 13px; }
.fin-tab {
  background: none; border: none; cursor: pointer;
  padding: 9px 14px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--dimmer);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
}
.fin-tab:hover { color: var(--text); }
.fin-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.fin-tab .n { font-size: 9.5px; opacity: .7; margin-left: 5px; }

/* ---- table --------------------------------------------------------------- */

.fin-tablewrap {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.fin-scroll { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fin-table th {
  text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); color: var(--dimmer);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
}
.fin-table th.nosort { cursor: default; }
.fin-table th .dir { color: var(--accent); margin-left: 4px; }
.fin-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.fin-table tr:last-child td { border-bottom: none; }
.fin-table tbody tr:hover { background: var(--panel-2); }
.fin-table td.r { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; }
.fin-table td.mono { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

/* An unreported value, a not-applicable one and a measured zero are three
   different claims and must never render identically. */
.fin-nil { color: var(--ink-4); }

.fin-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; border-top: 1px solid var(--border); background: var(--panel-2);
}
.fin-foot .pginfo { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--dimmer); }
.fin-foot .sp { flex: 1; }

/* ---- states -------------------------------------------------------------- */

.fin-empty, .fin-loading {
  padding: 44px 20px; text-align: center; color: var(--dimmer); font-size: 13px;
}
.fin-empty b { display: block; color: var(--text); font-size: 14px; margin-bottom: 6px; font-family: var(--font-display); }

.fin-problem {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent);
  background: var(--crit-soft); border-radius: var(--r-md);
  font-size: 12.5px; color: var(--text);
}
.fin-problem b { color: var(--crit-ink); }
.fin-problem ul { margin: 5px 0 0 16px; padding: 0; }
.fin-problem li { margin: 2px 0; }

/* The Loans tab measures something different from the Debt tab and the two
   totals do not agree. This says so where the number is, not in a footnote. */
.fin-note {
  padding: 9px 13px; margin-bottom: 11px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm); font-size: 12.5px; color: var(--dim);
}
.fin-note b { color: var(--text); font-weight: 600; }

/* The date control is free-form, so it lands on dates the data does not have.
   This says which snapshot it resolved to, and only when that differs from the
   date asked for - repeating a date the reader just picked is noise. */
.fin-resolved {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dimmer);
  padding: 6px 9px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--border);
  white-space: nowrap;
}
.fin-resolved.warn { color: var(--warn-ink); background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 32%, transparent); }

input.fin-qsel { font-family: var(--mono); }

.fin-daterange { display: inline-flex; align-items: center; gap: 5px; }
.fin-daterange .sep {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dimmer);
}

/* ---- the entity rollup ---------------------------------------------------
   One row per entity, cash beside debt, with its accounts underneath when a
   row is opened. */

.fin-etable tbody tr.fin-erow { cursor: pointer; }
.fin-etable tbody tr.fin-erow.open { background: var(--accent-soft); }
.fin-etoggle { display: inline-block; width: 12px; color: var(--dimmer); margin-right: 4px; }
.fin-erow.open .fin-etoggle { color: var(--accent); }

.fin-exp > td { padding: 0 0 0 26px; background: var(--panel-2); }
.fin-sub-table { font-size: 12px; margin: 6px 0 10px; }
.fin-sub-table th { background: none; border-bottom: 1px solid var(--border); position: static; }
.fin-sub-table td { border-bottom: 1px solid var(--border); }

/* Accounting convention: parentheses, not a leading minus that is easy to miss
   in a column of figures. Eight entities carry a negative cash balance, so
   this is the normal case rather than an exception. */
.fin-neg { color: var(--crit); }

/* Net position runs to about -$220M across the portfolio. That is what a
   leveraged property portfolio looks like, so the column is NOT painted as an
   error state and carries no health indicator. Only the individual negative
   figure is coloured, by the rule above. */
.fin-totals td {
  border-top: 2px solid var(--border-strong);
  background: var(--panel-2); position: sticky; bottom: 0;
  font-variant-numeric: tabular-nums;
}

.fin-tri { display: inline-flex; align-items: center; gap: 0; }
.fin-tri .lbl, .fin-range .lbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dimmer); margin-right: 6px;
}
.fin-tri-opt {
  background: var(--panel-2); border: 1px solid var(--border); cursor: pointer;
  color: var(--dimmer); padding: 6px 9px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
}
.fin-tri-opt:first-of-type { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.fin-tri-opt:last-of-type { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.fin-tri-opt + .fin-tri-opt { border-left: none; }
.fin-tri-opt:hover { color: var(--text); }
.fin-tri-opt.on { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }

.fin-note.warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
  color: var(--text);
}

/* ---- shared with the Folio screen ---------------------------------------
   portal-folio-fin.js reuses this stylesheet so Folio and LeavenWealth read as
   one product without a second file. These two rules exist for it.

   .fin-flag was here for the Verified column and went with it. Folio brings it
   back for a real reason: a payment's status VARIES (paid / open), where
   is_verified never did. */

.fin-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .07em;
  text-transform: uppercase; padding: 1.5px 6px; border-radius: 3px;
  white-space: nowrap;
}
.fin-flag.ok { background: var(--good-soft); color: var(--good-ink);
  border: 1px solid color-mix(in srgb, var(--good) 28%, transparent); }
.fin-flag.draft { background: var(--warn-soft); color: var(--warn-ink);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); }

/* A bare .fin-flag had no ground of its own - only the .ok and .draft
   variants carried one - so Folio's "Not set" and "assumed monthly" chips
   rendered as floating text. The base is neutral; the variants still win. */
.fin-flag {
  background: var(--panel-3, var(--panel-2)); color: var(--dimmer);
  border: 1px solid var(--border);
}

/* Folio's funnel bars. 4,637 of 4,645 leads have no stage, so the staged
   figures are tiny next to the total and the bar is scaled to the largest
   STAGE rather than to the total - otherwise every bar is one pixel and the
   panel says nothing. Width comes from the data, inline, per row. */
.fin-bar {
  display: inline-block; height: 8px; border-radius: 2px;
  background: var(--accent); opacity: .75;
}

/* A failed payment stays in the list (a failed renewal is the earliest churn
   signal there is) but reads as secondary. Not hidden, not red - the decline
   reason next to it is the part worth reading. */
.fin-table tbody tr.muted td { opacity: .62; }

/* Folio's Reports & Financials uses the PORTAL's cards, table and badges
   (.kpis/.kpi, .card, .pill from portal.html) rather than a language of its
   own, so a status reads the same there as on any other screen. The only
   additions it needs are these: a sortable header, and the caret that says
   which column is sorted and which way.

   Sorting is on the five-column table only. `nulls last` in both directions is
   done in the JS, because number_of_units is null on every row today and a
   null at the top of a descending column reads as the largest value. */
.fin-sortable {
  cursor: pointer; user-select: none; white-space: nowrap;
}
.fin-sortable:hover { color: var(--text); }
.fin-sortable.on { color: var(--ink); }
.fin-caret { font-size: 8px; margin-left: 5px; color: var(--accent); }

/* An inline provider id: a payment id or a Whop membership id, which are
   strings to be compared character by character. */
.fin-mono {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: -.01em;
  color: var(--text);
}

/* The raw-provider record under an expanded payment row. */
.fin-fields { display: grid; grid-template-columns: minmax(120px, 26%) 1fr; gap: 1px 12px; font-size: 12.5px; }
.fin-fields dt { color: var(--dimmer); padding: 5px 0; border-bottom: 1px solid var(--border); }
.fin-fields dd { color: var(--text); padding: 5px 0; margin: 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }

/* ===========================================================================
   Shell restyle (docs/mockup/shell.dc.html + properties-mockup.dc.html).
   Layered over the rules above rather than rewriting them, so the diff says
   exactly what changed: sentence case in the body face, key figures in one
   frame with hairlines, tabs as underlined text, no decorative colour on
   cash and debt, no callout bar.
   =========================================================================== */
:is(#financialsNative, #folioReportsNative, #folioSubsNative, #leadliFinNative) * {
  text-transform: none !important; letter-spacing: 0 !important;
}
:is(#financialsNative, #folioReportsNative, #folioSubsNative, #leadliFinNative) :is(div, span, b, th, td, button, input, select, label, p, h1, h2, h3) {
  font-family: var(--font);
}
.fin-title { font-size: 22px; letter-spacing: -.01em !important; margin: 0 0 2px; }
.fin-sub { font-size: 13px; color: var(--ink-3); }
.fin-btn, .fin-qsel, .fin-ms-btn, .fin-range input, .fin-daterange input {
  height: 32px; border-radius: 6px; font-size: 13px; font-weight: 500; background: transparent; color: var(--ink);
}
.fin-btn:hover { background: var(--hov); }
.fin-btn.primary { color: var(--page); }
.fin-tiles { gap: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); overflow: hidden; }
.fin-tile { border: 0; border-left: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; padding: 12px 14px; }
.fin-tile:first-child { border-left: 0; }
.fin-tile .k { font-size: 12.5px; color: var(--ink-3); }
.fin-tile .v { font-size: 21px; font-weight: 600; }
.fin-tile.cash .v, .fin-tile.debt .v { color: var(--ink); }
.fin-tile .d { font-size: 12px; color: var(--ink-3); }
.fin-filters { border-radius: 8px; background: var(--panel); }
.fin-tabs { gap: 22px; margin-bottom: 14px; }
.fin-tab { padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--ink-3); background: none; border-radius: 0; }
.fin-tab .n { font-size: 12px; }
.fin-tablewrap { border-radius: 8px; background: var(--panel); }
.fin-table { font-size: 13.5px; }
.fin-table th { font-size: 12.5px; font-weight: 500; color: var(--ink-3); background: var(--panel); position: sticky; top: 0; }
.fin-table td.r, .fin-table td.mono { font-size: 13.5px; color: inherit; }
.fin-table tbody tr:hover { background: var(--hov); }
.fin-note { border-left: 1px solid var(--border); background: transparent; color: var(--ink-3); }
.fin-foot .pginfo, .fin-count { font-size: 12.5px; color: var(--ink-3); }
.fin-chip { border-radius: 6px; font-size: 12.5px; }
.fin-empty b { font-family: var(--font); }