/* ============================================================
   Бюджет
   ============================================================ */

.balance-card {
  position: relative;
  overflow: hidden;
  background: var(--hero-grad);
  border-radius: var(--r-lg);
  padding: 18px 20px 20px;
  box-shadow: 0 12px 26px rgba(var(--shadow-rgb), 0.14);
}
.balance-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 4px 0 14px;
}
.balance-split { display: flex; gap: 40px; }
.balance-split b { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; display: block; margin-top: 2px; }
.balance-split .pos { color: var(--green); }
.balance-split .neg { color: var(--pink-deep); }
.balance-card .mini-label { color: var(--hero-text-2); }
.balance-heart {
  position: absolute;
  right: -18px; top: 8px;
  width: 150px; height: 140px;
  color: var(--hero-art);
  pointer-events: none;
}

/* ---------- список трат/доходов по дням ---------- */

.tx-day-group + .tx-day-group { border-top: 1px solid var(--line); }
.tx-day-header {
  padding: 10px 14px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* обёртка позиционирования строки траты — сама .row уезжает влево свайпом
   и открывает .row-actions с удалением под ней, как у событий/дел/заметок */
.tx-item { position: relative; overflow: hidden; }
.tx-item + .tx-item { border-top: 1px solid var(--line); }
.tx-item .row {
  position: relative;
  z-index: 1;
  background: var(--panel);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
}

/* ---------- переключатели-пилюли ---------- */

.pills { display: flex; gap: 8px; }
.pill {
  flex: 1;
  border: none;
  background: var(--panel);
  color: var(--muted);
  border-radius: 999px;
  padding: 11px 8px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: transform 0.12s ease;
}
.pill:active { transform: scale(0.96); }
.pill.active {
  background: var(--pink-grad);
  color: #fff;
  box-shadow: 0 8px 18px rgba(var(--shadow-rgb), 0.26);
}
.pills-sm { gap: 6px; flex-wrap: wrap; }
.pills-sm .pill { flex: 0 1 auto; padding: 9px 14px; font-size: 13px; }
#date-sheet-input { margin-bottom: 12px; }
.pills-wrap { flex-wrap: wrap; }

/* ---------- навигация по месяцам ---------- */

.month-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.month-arrow {
  width: 32px; height: 32px;
  border: none; background: none;
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.month-arrow svg { width: 18px; height: 18px; }
.month-label {
  background: none; border: none;
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 5px;
}
.month-label svg { width: 16px; height: 16px; color: var(--muted); }

/* ---------- прогресс месяца ---------- */

.progress-card {
  background: var(--panel);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.progress-col { flex: 1; min-width: 0; }
.progress-col-right { text-align: right; }
.progress-value { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 3px 0 2px; }
#budget-donut { width: 84px; height: 84px; flex-shrink: 0; }
#budget-donut .donut-track { fill: none; stroke: var(--pink-soft); stroke-width: 11; }
#budget-donut .donut-value {
  fill: none; stroke: var(--pink-deep); stroke-width: 11; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s ease;
}
#budget-donut text {
  font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800;
  fill: var(--text); text-anchor: middle;
}

/* ---------- планирование ---------- */

#budget-tracking { display: flex; flex-direction: column; gap: 14px; }
#view-planning { display: flex; flex-direction: column; gap: 10px; }
/* обёртка позиционирования — как у .todo-item; .plan-row уезжает влево свайпом
   и открывает .plan-actions с удалением категории под ней */
.plan-item { position: relative; border-radius: var(--r-md); overflow: hidden; }
.plan-row {
  background: var(--panel);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 9px;
  position: relative;
  z-index: 1;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
}
.plan-actions {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 64px;
  display: flex;
}
.plan-actions button {
  flex: 1;
  border: none;
  background: var(--panel);
  color: var(--pink-deep);
  display: flex; align-items: center; justify-content: center;
  border-top-right-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}
.plan-actions svg { width: 18px; height: 18px; }
.plan-top { display: flex; align-items: center; gap: 11px; }
.plan-top .ic-circle { width: 36px; height: 36px; min-width: 36px; font-size: 17px; }
.plan-name { flex: 1; font-size: 14.5px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-amount { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.plan-amount.over { color: var(--pink-deep); }
.plan-track { height: 7px; border-radius: 4px; background: var(--pink-tint); overflow: hidden; }
.plan-fill { height: 100%; border-radius: 4px; background: var(--pink-grad); transition: width 0.4s ease; }
.plan-fill.over { background: var(--pink-deep); }
.plan-row { width: 100%; border: none; text-align: left; font: inherit; color: inherit; }
.plan-row:active { transform: scale(0.99); }

.color-picker { display: flex; gap: 10px; padding: 2px 0 4px; }
.color-swatch {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  padding: 0;
  box-shadow: inset 0 0 0 2px transparent;
}
.color-swatch.active { box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 2px var(--pink-deep); }

.plan-fill.done { background: var(--green); }
.plan-amount.done { color: var(--green); }