/* ═══════════════ ФІНАНСИ — стилі розділу ═══════════════
   Мова дизайн-системи: картки на івері з тонкими рамками, чипи, групи
   з датами, рядки з плиткою-значком і сумою праворуч. Кольори — з
   tokens.css; зелена гілка — надходження, теракота — витрати. */

/* ── Картки рахунків: УСІ в один ряд, витягнуті прямокутники ── */
.fin-cards { margin-bottom: 22px; }
.fin-cards-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 10px; margin-bottom: 8px;
}
.fin-card {
  position: relative; display: flex; flex-direction: column; gap: 0; min-width: 0;
  background: var(--surface); border: 1px solid var(--row-border);
  border-radius: var(--r-row); padding: 13px 15px 12px; cursor: pointer;
  transition: border-color var(--t-base) ease;
}
.fin-card:hover { border-color: var(--row-border-hover); }
.fin-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fin-ic {
  width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--ivory-100); color: var(--ink-soft);
}
.fin-type {
  font: 500 9.5px var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-card-top .fin-dot { margin-left: auto; }
.fin-name {
  font: 500 13px var(--font-sans); color: var(--ink-soft); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-bal { font: 500 21px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.fin-bal.neg { color: #9C4B45; }
.fin-bal-cur { font: 400 11px var(--font-sans); color: var(--ink-faint); margin-left: 5px; letter-spacing: 0; }
.fin-bal-2nd { font: 400 15px/1.2 var(--font-display); color: var(--ink-soft); margin-top: 2px; white-space: nowrap; }

.fin-month {
  display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 10px;
  font: 400 11.5px var(--font-sans); white-space: nowrap; overflow: hidden;
}
.fin-month .fp { color: #47694E; }
.fin-month .fn { color: #9C6A47; }
.fin-month .n { color: var(--ink-placeholder); margin-left: auto; overflow: hidden; text-overflow: ellipsis; }

/* Кнопка «Оновити» в тулбарі: доки Make перевіряє пошту — значок крутиться,
   підказка каже, коли перевіряли останній раз. */
#btnFinRefresh.busy svg { animation: fin-spin 1s linear infinite; }
#btnFinRefresh.ok { color: #47694E; border-color: #CFE2CC; background: #E4EFE2; }
#btnFinRefresh.fail { color: #9C4B45; border-color: #E8CDBB; background: #F5E4DA; }
@keyframes fin-spin { to { transform: rotate(360deg); } }

/* Розкривається ЛИШЕ «Нова транзакція» — рівно на свій підпис. «Оновити»
   й «Новий магазин» лишаються круглими значками з підказкою. */
#btnNewTx:hover, #btnNewTx:focus-visible { width: 148px; }
#btnFinRefresh, #btnNewShop { width: 36px !important; }
#btnFinRefresh span, #btnNewShop span { display: none; }

.fin-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.fin-act {
  height: 28px; padding: 0 12px; cursor: pointer; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-soft);
  font: 400 12px var(--font-sans); white-space: nowrap;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background var(--t-fast) ease;
}
.fin-act:hover { border-color: var(--line-hover); color: var(--ink); }
.fin-act-ic { padding: 0 8px; }

/* «Усього» — тепла картка-зведення, як прибуток у замовленні. */
.fin-card-total { background: #F1E9DE; border-color: transparent; cursor: default; }
.fin-card-total .fin-ic { background: rgba(255, 255, 255, .55); }

/* ── Фільтри ── */
#secFinance .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fin-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; flex: 0 0 auto; }
.fin-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }

/* ── Транзакції ── */
.fin-group-h {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 2px 10px;
}
/* Перша група стоїть одразу під капсулами — без подвійного відступу. */
#finTx > .fin-group-h:first-child { margin-top: 0; }
#secFinance .filters { margin-bottom: 8px; }
#secFinance .groups { margin-top: 10px; }
.fin-group-t { font: 500 15px var(--font-display); letter-spacing: -.005em; color: var(--ink); white-space: nowrap; }
.fin-group-l { flex: 1; height: 1px; background: var(--line); }
.fin-group-n { font: 400 11.5px var(--font-sans); color: var(--ink-placeholder); }

.fin-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--row-border);
  border-radius: var(--r-row); margin-bottom: 8px; padding: 12px 18px 12px 13px;
  cursor: pointer; transition: border-color var(--t-base) ease;
}
.fin-row:hover { border-color: var(--row-border-hover); }
.fin-tx-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center;
}
.fin-tx-ic.pos { background: #E4EFE2; color: #47694E; }
.fin-tx-ic.neg { background: #F5E4DA; color: #9C6A47; }
.fin-tx-main { flex: 1; min-width: 0; }
.fin-tx-desc {
  font: 400 13.5px var(--font-sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-tx-sub {
  display: flex; align-items: center; gap: 10px; margin-top: 3px;
  font: 400 11.5px var(--font-sans); color: var(--ink-faint);
  overflow: hidden; white-space: nowrap;
}
.fin-tx-shop { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fin-tx-shop .fin-dot { width: 6px; height: 6px; }
.fin-tx-amt-col { flex: 0 0 auto; text-align: right; }
.fin-tx-amt { display: block; font: 500 15.5px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.fin-tx-amt.pos { color: #47694E; }
/* Комісія — окремим рядком ПІД сумою, не поруч. */
.fin-tx-fee { display: block; font: 400 11px var(--font-sans); color: var(--ink-placeholder); margin-top: 2px; }

.fin-more {
  width: 100%; padding: 12px; margin: 6px 0 0; cursor: pointer;
  border: 1px dashed var(--line-hover); border-radius: var(--r-row);
  background: transparent; color: var(--ink-soft); font: 400 13px var(--font-sans);
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.fin-more:hover { border-color: var(--ink-faint); color: var(--ink); }

.fin-empty {
  padding: 60px 20px; text-align: center;
  font: 400 13.5px var(--font-sans); color: var(--ink-faint);
}
.fin-empty b { display: block; font: 500 16px var(--font-display); color: var(--ink); margin-bottom: 6px; }

/* ── Форми в модалці (доповнення до .exp-form / .exp-inp) ── */
.fin-tgl { display: flex; gap: 8px; }
.fin-tgl-b {
  flex: 1; height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line-input); border-radius: var(--r-input);
  background: var(--surface-input); color: var(--ink-soft);
  font: 400 13px var(--font-sans);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.fin-tgl-b.on.tin { background: #E4EFE2; border-color: #CFE2CC; color: #3A5C41; font-weight: 500; }
.fin-tgl-b.on.tout { background: #F5E4DA; border-color: #E8CDBB; color: #8A5735; font-weight: 500; }
.fin-tgl-b.dis { opacity: .55; pointer-events: none; }

/* Кнопка-дата: виглядає полем, відкриває календар-попап. */
.fin-date {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; text-align: left;
}
.fin-date svg { color: var(--ink-faint); flex: 0 0 auto; }
/* Попап живе в модалці: fixed-координати від вікна. */
#finCalPop { position: fixed; z-index: 90; }

.fin-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-sw {
  width: 28px; height: 28px; border-radius: 999px; cursor: pointer; border: none;
  box-shadow: inset 0 0 0 1px rgba(43, 35, 29, .12);
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.fin-sw:hover { transform: scale(1.1); }
.fin-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

.fin-lock {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px; border-radius: var(--r-input);
  background: var(--ivory-100); color: var(--ink-soft);
  font: 400 12.5px/1.5 var(--font-sans);
}
.fin-lock svg { flex: 0 0 auto; margin-top: 2px; color: var(--ink-faint); }

.fin-receipt { border: 1px dashed var(--line-hover); border-radius: var(--r-input); padding: 4px 14px; }
.fin-rc-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  font: 400 12.5px var(--font-sans); color: var(--ink);
}
.fin-rc-row:last-child { border-bottom: none; }
.fin-rc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-rc-qty { color: var(--ink-faint); }
.fin-rc-amt { font-weight: 500; }
.fin-hint { font: 400 11.5px/1.5 var(--font-sans); color: var(--ink-faint); margin-top: 6px; }

/* Скелет першого завантаження. */
.fin-skel { height: 148px; border-radius: var(--r-row); background: var(--ivory-100); animation: fin-skel 1.1s ease infinite alternate; }
@keyframes fin-skel { from { opacity: .55; } to { opacity: 1; } }