/* ==========================================================================
   Broker accounting panel (feat_broker_accounting).

   ⚠⚠ EVERY COLOUR IN THIS FILE IS NAMED. NOTHING INHERITS ITS TEXT COLOUR.
   RENDERED IN A REAL BROWSER 2026-09-10 AND IT WAS UNREADABLE: measured
   contrast 1.02:1 -- rgb(17,26,24) ink on rgb(14,28,43) navy -- on the tab
   strip, every stat label, every stat VALUE, the notes and the disclaimer.
   Not "hard to read": invisible. The money figures could not be seen at all.

   WHY, and it is a trap any new panel here will hit: the base theme is LIGHT
   (body colour is --ink #17211d) and the signed-in workspace paints itself
   DARK with the --sv-* tokens (--sv-page #0e1c2b, --sv-text #ece5d5). A panel
   whose text colour is "inherit" therefore takes the LIGHT theme's ink and
   renders it on the DARK page. Everything AROUND this panel looked correct
   because those panels name their colours -- .results-area h2 is explicitly
   white -- so nothing nearby hinted at the problem.

   ⚠ AND NO TEST COULD SEE IT. accounting-regression.js asserts these class
   names HAVE RULES, and they did. The SQL suites never open a browser. CSS has
   no missing-symbol error, and it has no wrong-colour error either. It took
   loading the page as a real signed-in broker and MEASURING the computed
   colours. Same family as the note CLAUDE.md already carries from the opposite
   direction: a contrast check that passed on an element with no rule at all.

   ⚠ OPACITY IS NOT A COLOUR. The muted text here was opacity 0.66-0.85 over an
   inherited colour -- so it inherited the wrong colour and then faded it,
   which is how a stat LABEL ended up at 1.02:1. Muted tones now come from
   --sv-text-muted, a real colour chosen against this background.

   ⚠ THE FALLBACKS ARE DELIBERATE. var(--sv-text, var(--ink, #17211d)) is
   correct in the dark workspace AND in the light theme, rather than correct in
   the one I happened to be looking at.

   ⚠ ITS OWN FILE, NOT AN APPEND TO styles.css -- three sessions append to that
   stylesheet, and a range-based edit there once deleted two other features'
   rules.

   ⚠ EVERY SELECTOR IS PREFIXED .acct- AND SCOPED UNDER #accountingPanel.
   styles.css carries a GLOBAL `input, select, textarea { width: 100% }` that
   also hits checkboxes and radios, so the controls below set width explicitly.
   ========================================================================== */

/* The panel names its own text colour instead of taking the page body's. */
#accountingPanel {
  color: var(--sv-text, var(--ink, #17211d));
}

#accountingPanel .acct-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 18px;
  border-bottom: 1px solid var(--sv-line, var(--line, #dce3df));
}

#accountingPanel .acct-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--sv-text-muted, var(--muted, #61716d));
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 8px 12px;
}

#accountingPanel .acct-tab:hover { color: var(--sv-text, var(--ink, #17211d)); }

#accountingPanel .acct-tab.is-active {
  border-bottom-color: var(--sv-heading, var(--gold, #c59548));
  color: var(--sv-text, var(--ink, #17211d));
}

#accountingPanel .acct-stat-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 18px;
}

#accountingPanel .acct-stat {
  background: var(--sv-surface, var(--paper, #f8faf8));
  border: 1px solid var(--sv-card-line, var(--line, #dce3df));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
}

#accountingPanel .acct-stat-label {
  color: var(--sv-text-muted, var(--muted, #61716d));
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ⚠ The figure itself. This was 1.03:1 -- a money number nobody could see. */
#accountingPanel .acct-stat-value {
  color: var(--sv-text, var(--ink, #17211d));
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.2;
}

#accountingPanel .acct-stat-note {
  color: var(--sv-text-muted, var(--muted, #61716d));
  font-size: 0.8rem;
}

#accountingPanel .acct-table {
  border-collapse: collapse;
  color: var(--sv-text, var(--ink, #17211d));
  font-size: 0.92rem;
  margin: 8px 0 20px;
  width: 100%;
}

#accountingPanel .acct-table th,
#accountingPanel .acct-table td {
  border-bottom: 1px solid var(--sv-line, var(--line, #dce3df));
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

#accountingPanel .acct-table th {
  color: var(--sv-text-muted, var(--muted, #61716d));
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Money right-aligns so columns of figures can be compared by eye. */
#accountingPanel .acct-table .acct-num { text-align: right; font-variant-numeric: tabular-nums; }
#accountingPanel .acct-table th.acct-num { text-align: right; }

/* ⚠ opacity is fine HERE: these two mean "de-emphasised relative to the row
   beside them", not "this is muted text". They sit on a colour that is already
   correct, so fading them cannot make them the wrong hue -- only lighter. */
#accountingPanel .acct-table tr.acct-reversed td { opacity: 0.55; text-decoration: line-through; }
#accountingPanel .acct-table tr.acct-unestimable td { opacity: 0.8; }
#accountingPanel .acct-subrow td { color: var(--sv-text-muted, var(--muted, #61716d)); font-size: 0.82rem; padding-top: 0; }

#accountingPanel .acct-controls {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

#accountingPanel .acct-controls label,
#accountingPanel .acct-form label {
  color: var(--sv-text-muted, var(--muted, #61716d));
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  gap: 4px;
}

/* ⚠ Explicit width: the global `input, select, textarea` rule in styles.css
   sets width:100%, which would stretch every one of these across the panel. */
#accountingPanel .acct-controls input,
#accountingPanel .acct-controls select,
#accountingPanel .acct-form input,
#accountingPanel .acct-form select {
  min-width: 0;
  width: auto;
}

#accountingPanel .acct-controls input[type="text"] { min-width: 22rem; }

#accountingPanel .acct-form {
  background: var(--sv-surface, var(--paper, #f8faf8));
  border: 1px solid var(--sv-card-line, var(--line, #dce3df));
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 18px;
  padding: 16px;
}

#accountingPanel .acct-form-actions {
  display: flex;
  gap: 10px;
  grid-column: 1 / -1;
}

#accountingPanel .acct-basis {
  background: var(--sv-surface-2, var(--pearl, #f4f0e7));
  border-left: 3px solid var(--sv-heading, var(--gold, #c59548));
  border-radius: 4px;
  color: var(--sv-text, var(--ink, #17211d));
  font-size: 0.86rem;
  margin: 0 0 16px;
  padding: 10px 14px;
}

#accountingPanel .acct-note,
#accountingPanel .acct-disclaimer {
  color: var(--sv-text-muted, var(--muted, #61716d));
  font-size: 0.82rem;
  margin: 6px 0 16px;
}

#accountingPanel .acct-warn { color: #f0b34d; }

#accountingPanel .acct-error {
  background: rgba(220, 70, 70, 0.12);
  border: 1px solid rgba(220, 70, 70, 0.4);
  border-radius: 8px;
  color: var(--sv-text, var(--ink, #17211d));
  margin-bottom: 14px;
  padding: 10px 14px;
}

#accountingPanel .acct-notice {
  background: rgba(70, 180, 120, 0.12);
  border: 1px solid rgba(70, 180, 120, 0.4);
  border-radius: 8px;
  color: var(--sv-text, var(--ink, #17211d));
  margin-bottom: 14px;
  padding: 10px 14px;
}

#accountingPanel .acct-cda {
  border: 1px solid var(--sv-card-line, var(--line, #dce3df));
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 14px 16px;
}

#accountingPanel .acct-cda h4 { color: var(--sv-text, var(--ink, #17211d)); margin: 0 0 10px; }
#accountingPanel .acct-cda-void { opacity: 0.6; }
#accountingPanel .acct-cda-approved { border-color: rgba(70, 180, 120, 0.45); }

/* A checkbox row. ⚠ styles.css sets a GLOBAL input { width:100%; padding:12px 13px }
   that also hits checkboxes -- without an explicit override the box renders as a
   full-width padded slab with its label shoved to the far edge. */
#accountingPanel .acct-check {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 8px;
  grid-column: 1 / -1;
}
#accountingPanel .acct-check input[type="checkbox"] {
  flex: 0 0 auto;
  height: 16px;
  margin: 2px 0 0;
  min-width: 0;
  padding: 0;
  width: 16px;
}

#accountingPanel .acct-badge {
  border: 1px solid var(--sv-heading, var(--gold, #c59548));
  border-radius: 999px;
  color: var(--sv-heading, var(--gold, #c59548));
  font-size: 0.72rem;
  font-weight: 600;
  margin-left: 6px;
  padding: 1px 8px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   PRIMARY ACTION, IN THE SITE'S GOLD (Matt, 2026-09-11: "Make the 'new plan'
   button the gold we've been using instead of the faded color. Make sure you
   get the font color right so it shows up when in Navy mode.")
   The shared .ghost-button is a near-transparent white pill built for the LIGHT
   theme; on the navy workspace it reads as a greyed-out, disabled control.
   ⚠ BOTH COLOURS ARE NAMED, per this file's rule: gold ground, dark ink on it.
   Dark-on-gold is the pair that works in the light theme AND the navy one, so
   there is no theme-conditional text colour to get wrong.
   --------------------------------------------------------------------------- */
#accountingPanel .acct-gold-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(197, 149, 72, 0.55);
  background: var(--gold, #c59548);
  color: #17211d;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
}

#accountingPanel .acct-gold-button:hover {
  background: #d4a75f;
}

#accountingPanel .acct-gold-button:focus-visible {
  outline: 2px solid var(--sv-text, #ece5d5);
  outline-offset: 2px;
}

#accountingPanel .acct-gold-button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* ---------------------------------------------------------------------------
   SECONDARY ACTIONS ON THE NAVY WORKSPACE (Matt, 2026-09-15: "grayed out
   buttons still"). The shared .ghost-button is a near-transparent WHITE pill
   with dark ink, built for the light theme; on navy it reads as a disabled
   control. Every secondary action in this panel uses it -- Save, Preview split,
   Mark sent to title, Assign, Open, Back.
   ⚠ BOTH COLOURS NAMED, like everything else in this file: a light ink on a
   faint gold-bordered ground, so it reads as a button that can be pressed and
   still sits below the gold primary action.
   --------------------------------------------------------------------------- */
#accountingPanel .ghost-button {
  background: rgba(197, 149, 72, 0.14);
  color: var(--sv-text, #ece5d5);
  border: 1px solid rgba(197, 149, 72, 0.55);
  font-weight: 700;
}

#accountingPanel .ghost-button:hover {
  background: rgba(197, 149, 72, 0.26);
  color: var(--sv-text, #ece5d5);
}

#accountingPanel .ghost-button:focus-visible {
  outline: 2px solid var(--sv-text, #ece5d5);
  outline-offset: 2px;
}

/* The money boundary, rendered on every accounting tab by boundaryHtml().
   Quiet but permanently visible -- it sits under the panel body, reads as a
   footnote, and is never collapsed or hidden behind a control. It states the
   same limit as Section 13 of the Subscription Terms, in the place where a
   broker could actually mistake a recorded figure for a payment we made.
   ⚠ accounting-regression.js asserts this class still has a rule here. CSS
   has no missing-symbol error, so deleting it would silently downgrade the
   disclosure to unstyled body text with every check still green. */
#accountingPanel .acct-boundary {
  margin: 28px 0 0;
  padding: 12px 14px;
  border-top: 1px solid var(--sv-line, var(--line, #dce3df));
  border-left: 3px solid var(--sv-heading, var(--gold, #c59548));
  background: var(--sv-surface, var(--paper, #f8faf8));
  color: var(--sv-text-muted, var(--muted, #61716d));
  font-size: 13px;
  line-height: 1.55;
}

#accountingPanel .acct-boundary strong {
  color: var(--sv-text, var(--ink, #17211d));
}

/* The "send the authorisation to <recipient>" row on an approved CDA.
   Label and select sit on one line so the sentence reads as a sentence
   rather than as a form. */
#accountingPanel .acct-send-to {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
  color: var(--sv-text, var(--ink, #17211d));
  font-size: 14px;
}

#accountingPanel .acct-send-to select {
  width: auto;
  min-width: 220px;
  padding: 8px 10px;
}

/* Document-readiness warning on the disbursement screen (2026-09-20).
   Three states, and they must not look alike: unknown is not the same as
   complete. Colour is not the signal -- the words are -- but a missing
   document should not read like a success line. */
.acct-readiness { border-radius: 8px; padding: 12px 14px; margin: 12px 0; border-left: 4px solid var(--line, #2a4257); }
.acct-readiness.is-ok { border-left-color: #4a7c59; }
.acct-readiness.is-missing { border-left-color: #c9a227; }
.acct-readiness.is-unknown { border-left-color: #8ba0b3; }
.acct-readiness ul { margin: 8px 0 0 18px; }
.acct-readiness .acct-note { margin-top: 8px; }