/* ============================================================
   Finances — the money page of a project and of a product
   (owner: finances agent, D-023). The table, the notes and the
   danger buttons reuse tools.css (.tls-*) and the project
   header reuses projects.css (.prj-*); only what is new is here.
   Only theme variables: both themes come from vars.css / app.css.
   ============================================================ */

/* ── The three totals ─────────────────────────────────────── */
.fin-totals-card { margin-bottom: var(--space-4); }
.fin-totals {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   var(--space-3);
    margin:                0 0 var(--space-3);
    padding:               0;
    list-style:            none;
}
.fin-total {
    padding:          var(--space-3) var(--space-4);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-bg-muted);
}
.fin-total__label {
    display:   block;
    color:     var(--color-text-muted);
    font-size: var(--font-size-xs);
}
.fin-total__value {
    display:       block;
    margin-top:    var(--space-1);
    font-size:     var(--font-size-lg);
    overflow-wrap: anywhere;
}
.fin-total--in  .fin-total__value { color: var(--color-success-text); }
.fin-total--out .fin-total__value { color: var(--color-error-text); }
.fin-total--balance { border-color: var(--color-border-strong); }
.fin-total--balance.is-negative .fin-total__value { color: var(--color-error-text); }

/* ── Filters above the list ───────────────────────────────── */
.fin-filters-body { padding-bottom: var(--space-3); }
.fin-filters {
    display:     flex;
    flex-wrap:   wrap;
    align-items: flex-end;
    gap:         var(--space-3);
}
.fin-filters .form-group { margin-bottom: 0; min-width: 9rem; }
.fin-filters__actions { display: flex; gap: var(--space-2); }

/* ── The list ─────────────────────────────────────────────── */
.fin-list { margin-bottom: var(--space-4); }
.fin-title { overflow-wrap: anywhere; }
.fin-amount-col { text-align: right; }
.fin-table td.fin-amount, .fin-months td.fin-amount { text-align: right; font-variant-numeric: tabular-nums; }
.fin-amount--in  { color: var(--color-success-text); }
.fin-amount--out { color: var(--color-error-text); }
.fin-period, .fin-meta {
    display:    block;
    margin-top: var(--space-1);
    color:      var(--color-text-muted);
    font-size:  var(--font-size-xs);
}

/* Where a line comes from: the project itself, or one of its products. */
.fin-source {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-2);
}
/* --deleted: a product that was deleted; its money stays with the project (B-083). */
.fin-source--project, .fin-source--deleted { font-size: var(--font-size-sm); }
/* The product's code as a neutral chip: the list joins only its key and name,
   not the colour of its type, so it takes the theme's badge tokens. */
.fin-key {
    padding:          0.1rem var(--space-2);
    border-radius:    var(--radius-sm);
    background-color: var(--color-badge-default-bg);
    color:            var(--color-badge-default-text);
    font-size:        var(--font-size-xs);
    font-weight:      600;
    letter-spacing:   0.04em;
}

/* ── Direction pill ───────────────────────────────────────── */
.fin-dir {
    display:          inline-block;
    padding:          0.15rem var(--space-2);
    border-radius:    var(--radius-full);
    font-size:        var(--font-size-xs);
    white-space:      nowrap;
    background-color: var(--color-badge-default-bg);
    color:            var(--color-badge-default-text);
}
.fin-dir--in  { background-color: var(--color-success-bg); color: var(--color-success-text); }
.fin-dir--out { background-color: var(--color-error-bg);   color: var(--color-error-text); }

/* ── Add / edit form ──────────────────────────────────────── */
.fin-months { margin-bottom: var(--space-4); }
.fin-form__row {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   var(--space-3) var(--space-4);
}
.fin-form__period {
    margin:        0 0 var(--space-4);
    padding:       var(--space-3) var(--space-4);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.fin-form__period legend {
    padding:   0 var(--space-2);
    color:     var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.fin-form__period .fin-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 899.98px) {
    .fin-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
    .fin-totals, .fin-form__row, .fin-form__period .fin-form__row { grid-template-columns: 1fr; }
    .fin-filters .form-group { min-width: 0; flex: 1 1 100%; }
}