/* ==========================================================================
   Filter summary card ("filter view") — the active-filter card from
   bank-transactions (.tx-fsum), generalised so every list page shows the same
   thing while filtering: removable chips + Add filter + Clear all + a running
   calc of the filtered set. (Peter, 29 Jun.)
   ========================================================================== */

.fsum {
  border: var(--border-width) solid var(--color-border);   /* a hairline like every other card (Peter, 8 Sep): the chip and the lit Filter button already say the filter is on */
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Breathing room between the filter-summary card and the list header below it (Peter, 3 Jul). */
  margin-bottom: 16px;
}
.fsum[hidden] { display: none; }

.fsum__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* A removable filter chip */
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-translucent);
  border: var(--border-width) solid var(--color-border-pink);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}
.fchip:hover { background: var(--color-bg-subtle); }
.fchip__x { display: inline-flex; color: var(--color-text-muted); font-size: 16px; line-height: 1; }

/* "Add filter" pill (dashed, opens the filter drawer) */
.fchip--add {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  gap: 6px;
}
.fchip--add svg { width: 14px; height: 14px; }
.fchip--add:hover { color: var(--color-text); border-color: var(--color-text); background: var(--color-surface); }

/* "Clear all" text button */
.fsum__clearall {
  background: none;
  border: none;
  padding: 6px 4px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: underline;
}
.fsum__clearall:hover { color: var(--color-text); }

/* Plain-language summary line — states what the current filter is showing (e.g. the "Unlinked"
   filter: "Showing unlinked items — not yet linked to a payment"). Sits under the chips.
   (Peter, 7 Jul.) */
.fsum__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.fsum__note[hidden] { display: none; }

/* Select all (text button) + Export (solid pill) — global filter-summary defaults */
.fsum__seln {
  background: none;
  border: none;
  padding: 6px 4px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
}
.fsum__seln:hover { text-decoration: underline; }
.fchip--export {
  border-style: solid;
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-surface);
  gap: 6px;
}
.fchip--export svg { width: 15px; height: 15px; }
/* Keep the solid dark fill on hover (the generic .fchip:hover lightens the bg, which left the
   white label unreadable) — a subtle opacity dip for feedback, like the standard CTA. */
.fchip--export:hover { background: var(--color-text); opacity: 0.9; }

/* Active-filter dot — ui.js shows this on a page's Filter button whenever its
   filter-summary (.fsum) is active, so it doesn't need re-wiring per page
   (Peter, 30 Jun 2026). Matches the bank-transactions filter dot. */
.filter-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF9F00;
  border: 1.5px solid var(--color-surface);
  pointer-events: none;
}
/* Filter button ON state — the dot alone was missed in testing: while filters are active
   the whole button reads on — orange funnel, medium label, strong border (ui.js toggles
   .is-fon with the dot; bank-transactions' inline dot engine does the same) (Peter, 9 Jul 2026). */
/* FLASH THEN SETTLE (Peter, 5 Sep 2026): the steady ON look was too dominant for Mariana, but
   she had missed the dot alone before it existed. So the strong look plays once when filtering
   turns on (about two seconds), then settles to the dot; the filter chips carry the fact after. */
button.is-fon { animation: fonFlash 2.8s cubic-bezier(0.32, 0, 0.1, 1) both; }
button.is-fon > svg:first-of-type { animation: fonFlashIcon 2.8s cubic-bezier(0.32, 0, 0.1, 1) both; }
/* no 100% frame on purpose: the end is whatever the button's own resting look is */
@keyframes fonFlash { 0%, 65% { border-color: var(--color-text); font-weight: var(--weight-medium); } }
@keyframes fonFlashIcon { 0%, 65% { stroke: #FF9F00; } }
@media (prefers-reduced-motion: reduce) {
  button.is-fon, button.is-fon > svg:first-of-type { animation: none; }
}
/* Disabled (nothing selected): the inverted black fill would read white-on-white,
   so drop to a plain white chip with black text (Peter, 30 Jun 2026). */
.fchip--export:disabled,
.fchip--export[disabled] {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  cursor: not-allowed;
  opacity: 0.55;
}

/* Select mode — per-row checkbox + selected tint/tick (exactly the transactions
   .tx-selecting behaviour, generalised to .row-card). */
.app__content.is-selecting .row-card { cursor: pointer; }
.app__content.is-selecting .row-card::before {
  content: ''; flex: none; box-sizing: border-box; width: 20px; height: 20px; margin-right: 12px;
  border: 2px solid var(--color-border-strong); border-radius: 6px;
  background: center/13px no-repeat;
}
.app__content.is-selecting .row-card.is-selected::before {
  background-color: var(--color-text); border-color: var(--color-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.row-card.is-selected { border-color: var(--color-text); background: var(--color-bg-subtle); }

/* Running calc of the filtered set */
.fsum__calc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
}
.fsum__calc strong { color: var(--color-text); font-weight: var(--weight-bold); }
.fsum__n { margin-left: auto; color: var(--color-text); font-weight: var(--weight-medium); }