/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --ink: #1a1d21;
  --ink-muted: #5c6470;
  --ink-faint: #858d99;
  --rule: #e2e5ea;
  --surface: #ffffff;
  --surface-sunken: #f6f7f9;

  /* Provisional figures are not a warning about a mistake — they are a warning
     that the number will move. Amber, not red: nothing is wrong. */
  --caution: #8a5a00;
  --caution-bg: #fdf6e6;
  --caution-rule: #e8c987;

  --settled: #2f6b4f;
  --settled-bg: #eef5f1;

  --measure: 52rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2.5rem 1.5rem 4rem;
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Money and dates are compared down the column, so they need consistent digit
   widths. Tabular figures keep them from shifting against each other. */
.client__payoff,
.client__facts dd {
  font-variant-numeric: tabular-nums;
}

/* ---- Flash ------------------------------------------------------------- */

.flash {
  max-width: var(--measure);
  margin: 0 auto 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.9375rem;
}

.flash--alert {
  border-color: var(--caution-rule);
  background: var(--caution-bg);
  color: var(--caution);
}

.flash--notice {
  border-color: #b9d4c6;
  background: var(--settled-bg);
  color: var(--settled);
}

/* ---- Dashboard --------------------------------------------------------- */

.dashboard,
.sign-in {
  max-width: var(--measure);
  margin: 0 auto;
}

.dashboard__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.dashboard__header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.dashboard__firm {
  margin: 0.25rem 0 0;
  color: var(--ink-muted);
  font-size: 1rem;
}

.empty {
  padding: 2rem;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-muted);
  text-align: center;
}

/* ---- Client cards ------------------------------------------------------ */

.clients {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.client {
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
}

.client__name {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  font-weight: 620;
}

.client__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem;
  margin: 0;
}

.client__facts > div {
  min-width: 0;
}

.client__facts dt {
  margin-bottom: 0.25rem;
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.client__facts dd {
  margin: 0;
  font-size: 1rem;
}

/* The payoff is what the firm came to read. It outranks every other fact on
   the card, so it is the only figure that gets size and weight.
   Scoped through .client__facts to outrank the `dd` base rule above — as a bare
   class it loses on specificity and silently renders at body size. */
.client__facts .client__payoff {
  font-size: 1.5rem;
  font-weight: 640;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Absence of a price is information, not a blank. Italic and muted so it reads
   as an explanation rather than as a value. */
.client__facts .client__unavailable {
  color: var(--ink-muted);
  font-style: italic;
}

.client__facts .client__status {
  font-weight: 570;
  color: var(--settled);
}

/* A settled advance is finished business. Muting the whole card keeps the
   active ones visually first without hiding it. */
.client--paid-off {
  background: var(--surface-sunken);
}

.client--paid-off .client__name {
  color: var(--ink-muted);
}

/* ---- Payoff note -------------------------------------------------------- */

/* Deliberately quiet. This replaced an amber §1.9 caution that rendered under
   every active row and could never clear, because nothing in the app supplies
   net proceeds — a permanent alarm on every line reads as noise and trains firms
   to ignore it. The line's job now is smaller and factual: name the source of
   the figure and give a route to question it. Muted body text is correct for
   that; escalating it back to a caution would restore the original problem. */
.client__payoff-note {
  margin: 1rem 0 0;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* ---- Account bar ------------------------------------------------------- */

.account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  max-width: var(--measure);
  margin: 0 auto 1.5rem;
  font-size: 0.875rem;
}

.account__user {
  color: var(--ink-muted);
}

.account__sign-out button {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.account__sign-out button:hover {
  background: var(--surface-sunken);
}

/* ---- Auth pages -------------------------------------------------------- */

.auth {
  max-width: 26rem;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
}

.auth h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 650;
}

.auth__intro {
  margin: 0 0 1.5rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.auth__form {
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.375rem;
}

.field label {
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--ink-muted);
}

.field input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.field input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.field__hint {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.8125rem;
}

.button,
.auth__form input[type="submit"] {
  display: inline-block;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-weight: 550;
  /* a.button would otherwise carry the underline links get */
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.auth__form input[type="submit"]:hover {
  opacity: 0.9;
}

.auth__aside {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
}

.auth__aside a {
  color: var(--ink-muted);
}

/* ---- Form pages -------------------------------------------------------- */

.form-page {
  max-width: var(--measure);
  margin: 0 auto;
}

.form-page__header {
  margin-bottom: 2rem;
}

.form-page__header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.form-page__intro {
  margin: 0;
  max-width: 44ch;
  color: var(--ink-muted);
}

.request-form {
  display: grid;
  gap: 1.5rem;
}

.fieldset {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
}

.fieldset legend {
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Paired inputs sit side by side on a wide screen and stack on a narrow one
   without a media query. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

/* .fieldset and .field each set a display, which outranks the browser's own
   [hidden] rule — without this the conditional underwriting questions would
   stay on screen after the controller hid them. */
.fieldset[hidden],
.field[hidden] {
  display: none;
}

.fieldset select,
.fieldset textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.fieldset textarea {
  resize: vertical;
}

.fieldset select:focus-visible,
.fieldset textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* The dollar sign sits inside the input's border so the prefix reads as part
   of the field rather than as a label beside it. */
.field__prefixed {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
}

.field__prefixed:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.field__prefix {
  padding: 0 0.25rem 0 0.75rem;
  color: var(--ink-muted);
}

.field__prefixed input {
  border: none;
  background: transparent;
  padding-left: 0;
}

.field__prefixed input:focus-visible {
  outline: none;
}

.errors {
  padding: 1rem 1.25rem;
  border: 1px solid var(--caution-rule);
  border-left-width: 3px;
  border-radius: 0 6px 6px 0;
  background: var(--caution-bg);
  color: var(--caution);
}

.errors__title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.errors ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.button--quiet {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

/* ---- Dark mode --------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaed;
    --ink-muted: #a2abb8;
    --ink-faint: #8a94a2;
    --rule: #2f353d;
    --surface: #1b1f24;
    --surface-sunken: #14171b;

    --caution: #f0c674;
    --caution-bg: #2e2413;
    --caution-rule: #7a5f24;

    --settled: #7cc4a0;
    --settled-bg: #16241d;
  }

  .flash--notice {
    border-color: #2c4a3b;
  }
}

/* ---- Print ------------------------------------------------------------- */

/* Firms print payoff figures to file with a case. The provisional notice must
   survive the trip — background colors are commonly dropped, so restore a
   visible border and keep it with the card it qualifies. */
@media print {
  body {
    padding: 0;
    background: #fff;
  }

  .client {
    break-inside: avoid;
  }

  .client__payoff-note {
    color: #000;
  }
}