/* ===== Cosmic Debts — космо-эффекты только для вкладки "Факт./план. расходы" (#debts) ===== */
/* Палитра из crm-theme.css; паттерны повторяют cosmic-dashboard.css (скоуп по id вкладки,
   entrance cosmicRise, hover-glow, prefers-reduced-motion). */

/* --- Карточки вкладки --- */
#debts .card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  position: relative;
  transition: border-color .25s, transform .25s;
}
#debts .card:hover { border-color: var(--border-2) !important; }
#debts .card h2 {
  font-size: 15px !important; font-weight: 600 !important; color: var(--text) !important;
}

/* --- Появление карточек при открытии вкладки (карточки — прямые дети #debts) --- */
#debts.active > .card {
  animation: cosmicRiseDebts .5s cubic-bezier(.2,.8,.2,1) backwards;
}
#debts.active > .card:nth-of-type(1) { animation-delay: .04s; }
#debts.active > .card:nth-of-type(2) { animation-delay: .10s; }
#debts.active > .card:nth-of-type(3) { animation-delay: .16s; }
#debts.active > .card:nth-of-type(4) { animation-delay: .22s; }
#debts.active > .card:nth-of-type(5) { animation-delay: .28s; }
#debts.active > .card:nth-of-type(6) { animation-delay: .34s; }
@keyframes cosmicRiseDebts { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- Итоговые карточки (Остаток долга / Итого поступлений) — hover-glow --- */
#debts #debtsSummary > div,
#debts #debtReceiptsSummary > div {
  position: relative; overflow: hidden;
  transition: transform .25s, border-color .25s;
}
#debts #debtsSummary > div:hover,
#debts #debtReceiptsSummary > div:hover { transform: translateY(-2px); }
#debts #debtsSummary > div::after,
#debts #debtReceiptsSummary > div::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(180px 100px at 85% -20%, var(--cosmic-sum-glow, transparent), transparent 70%);
}
#debts #debtsSummary > div::after { --cosmic-sum-glow: rgba(244,63,94,.22); }
#debts #debtReceiptsSummary > div::after { --cosmic-sum-glow: rgba(16,185,129,.22); }

/* ===== Структурная схема категорий ===== */
#debts #receiptCategorySchema { display: flex; flex-direction: column; gap: 6px; }

#debts .rcat-node {
  --indent: calc(var(--rcat-indent, 0) * 26px);
  position: relative;
  margin-left: var(--indent);
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008));
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-2);
  transition: transform .2s, border-color .2s, background .2s;
}
#debts .rcat-node:hover { transform: translateX(2px); border-color: var(--border-2); }
#debts .rcat-node--root {
  border-left-color: var(--accent);
  background: linear-gradient(180deg, rgba(225,29,72,.06), rgba(225,29,72,.015));
}
#debts .rcat-node__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
#debts .rcat-node__name { color: var(--text); font-weight: 600; }
#debts .rcat-node__amt { color: var(--good); font-weight: 600; font-variant-numeric: tabular-nums; }
#debts .rcat-node__count { color: var(--text-3); font-size: 11px; }
#debts .rcat-node__empty { color: var(--text-3); font-size: 12px; }

#debts .rcat-recon {
  margin-top: 4px; font-size: 11.5px; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 6px;
}
#debts .rcat-recon--ok { color: var(--good); }
#debts .rcat-recon--gap { color: var(--warn); }
#debts .rcat-recon--info { color: var(--text-3); }
#debts .rcat-empty-note { color: var(--text-3); font-size: 13px; }

/* ===== Панель настройки категорий ===== */
#debts #receiptCategoryAdminList { display: flex; flex-direction: column; gap: 6px; }
#debts .rcat-admin-row {
  --indent: calc(var(--rcat-indent, 0) * 24px);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-left: var(--indent);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  transition: border-color .2s;
}
#debts .rcat-admin-row:hover { border-color: var(--border-2); }
#debts .rcat-admin-row__name { padding: 4px 8px; min-width: 180px; }
#debts .rcat-admin-row__parent { padding: 4px 8px; }
#debts .rcat-admin-row__label { color: var(--text-3); font-size: 12px; }

/* --- Пагинация поступлений --- */
#debts #debtReceiptsPager .btn { border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  #debts.active > .card { animation: none !important; }
  #debts .card,
  #debts #debtsSummary > div, #debts #debtReceiptsSummary > div,
  #debts .rcat-node, #debts .rcat-admin-row { transition: none !important; }
}