/* ==========================================================================
   Finance — Wunschliste (Seite finalisiert 2026-08)
   Aus der früheren finance.css ausgezogen (diese wurde 2026-09 ganz aufgelöst;
   ihr Rest → css/pages/settings.css).
   Einklappbare Kategorien (Chevron + Name + Anzahl + „Summe … von …" rechts,
   auf Mobile in Zeile 2) mit Wunsch-Karten: Klick öffnet das Bearbeiten-Modal,
   den Griff halten sortiert per Drag & Drop innerhalb der Kategorie. Alle
   Kategorien sitzen in einer weißen .card. Formular = Modal
   (components.css .overlay/.modal), geöffnet über einen FAB
   (js/components/fab.js). Kacheln: .stat-tile.
   ========================================================================== */

/* Content-fit sizes for this page (see the note in css/base.css). */
:root {
  --fin-wl-card-min: 190px;        /* wish-card grid column min width */
  --fin-wl-card-min-mobile: 140px; /* … on phones */
  --fin-wl-avatar-fs: 30px;        /* the oversized placeholder initial when a wish has no image */
}

/* The form modal (image dropzone + 4 fields) can get tall on short viewports —
   the .overlay scrolls to handle that (components.css), so the modal box stays
   overflow: visible and doesn't clip its own tooltips/popovers. */

/* Exactly the Transaktionen list-card heading rhythm: 32px above the title
   (card padding 16 + the sticky .fin-tx-list-header's own padding-top 16) and
   20px below it (that header's `.card h3` margin-bottom 10 + its flex gap 10).
   Here there's no wrapper, so both live as margins on the bare <h3> — and the
   first category header's padding-top is 0 (see below), so the 20 isn't
   doubled. */
#page-finance-wishlist > .card > h3 {
  margin-top: var(--space-16);
  margin-bottom: var(--space-20);
}

/* ---------- Wunschliste: Kategorie (einklappbar, in der Karte) ---------- */
/* Header layout + chevron + name + count are the shared `.collapsible section
   header` rules in components.css; only the trailing "Summe … von … (source)"
   figure and the first-child padding are page-specific. */

/* First category sits right under the card's own top padding — no extra. */
#finWishlist > .fin-bucket-group:first-child .fin-wishlist-cat-header {
  padding-top: 0;
}

/* "<total> von <available> (source)" pinned to the right end of the header row. */
.fin-wishlist-cat-sum {
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-m);
  color: var(--ink-dim);
}

.fin-wishlist-cat-sum b {
  font-size: var(--fs-l);
  color: var(--ink);
}

/* Mobile: the sum drops onto its own line under the name. */
@media (max-width: 720px) {
  .fin-wishlist-cat-sum {
    margin-left: 0;
    flex: 1 0 100%;
  }
}

.fin-wishlist-cat.is-collapsed .fin-wishlist-grid {
  display: none;
}

/* ---------- Wunschliste: Karten-Grid ---------- */
/* Vertical cards: square image/avatar with a drag handle (top-left) and the
   open-link / delete buttons (top-right) overlaid, then title / price /
   affordability bar. Click opens the edit modal; hold the handle to reorder
   within the category. */
.fin-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--fin-wl-card-min), 1fr));
  gap: var(--space-16);
  margin-top: var(--space-12);
}

/* After the base rule (not in the shared 720px block) so it wins the cascade. */
@media (max-width: 720px) {
  .fin-wishlist-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--fin-wl-card-min-mobile), 1fr));
    gap: var(--space-10);
  }
}

/* No `overflow: hidden` — a [data-tooltip] bubble rising off an overlaid
   control would be clipped by it. The image rounds its own top corners
   instead. */
.fin-wishlist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* A hair greyer / accent-nudged surface so the card reads as its own
     tile on the white .card behind it (shared with the pantry tiles). */
  background: var(--tile-bg);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: box-shadow var(--t-fast) ease;
}

.fin-wishlist-card:hover {
  box-shadow: var(--shadow-card);
}

/* The card currently being dragged to a new position. */
.fin-wishlist-card.is-dragging {
  opacity: var(--dragging-opacity);
}

.fin-wishlist-card-image {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-alt);
  color: var(--ink-dim);
  overflow: hidden;
  /* Rounds with the card's own top corners, inset by the card's border width. */
  border-radius: calc(var(--radius) - var(--bw)) calc(var(--radius) - var(--bw)) 0 0;
}

.fin-wishlist-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder initial when a wish has no image — deliberately oversized. */
.fin-wishlist-card-avatar {
  font-family: var(--font-mono);
  font-size: var(--fin-wl-avatar-fs);
  font-weight: 600;
}

.fin-wishlist-card-actions {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  z-index: 2;
  display: flex;
  gap: var(--space-4);
}

/* Opaque so the buttons stay legible over the image behind them. */
.fin-wishlist-card-actions .fin-row-btn,
.fin-wishlist-card-handle {
  background: var(--panel);
}

/* Drag handle — top-left, mirror of the actions cluster. The only draggable
   part of the card; hold and move to reorder. Extends the shared .drag-handle
   (components.css) with the overlay box it needs to sit on the card image. */
.fin-wishlist-card-handle {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: 2;
  width: var(--hit);
  height: var(--hit);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius);
}

.fin-wishlist-card-body {
  padding: var(--space-10) var(--space-12) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Extra breathing room specifically below the affordability bar. */
.fin-wishlist-card-body .fin-btbl-goal-bar-wrap {
  margin-bottom: var(--space-4);
}

.fin-wishlist-card-title {
  font-weight: 600;
  font-size: var(--fs-l);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fin-wishlist-card-price {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
}

.fin-wishlist-card-status {
  font-size: var(--fs-s);
  color: var(--ink-dim);
}

.fin-wishlist-card-status b {
  color: var(--ink);
}

.fin-wishlist-card-status.is-ok {
  color: var(--good);
  font-weight: 600;
}