/**
 * IIFIN — Layered surfaces (design tokens)
 * Переопределение базовых поверхностей: paper → card → raised fields
 * Без изменений HTML/JS.
 */

/* Фон страницы = paper */
body {
  background: var(--background);
}

/* Карточки = surface-card */
.iifin-card,
.section-box,
.widget-box,
.dashboard-page .iifin-block,
.iifin-block {
  background: var(--surface-card) !important;
  border-color: var(--stroke-card) !important;
}

/* Элементы списков (цели, обязательства) — raised на карточках */
#goals-list .goal-item,
#obligations-list .obligation-item {
  background: var(--surface-raised) !important;
  border-color: var(--stroke-field) !important;
}

/* Инпуты = raised + stroke-field */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
select,
textarea {
  background: var(--surface-raised) !important;
  border-color: var(--stroke-field) !important;
}

/* Таблицы */
.iifin-table,
table.finance-table {
  background: var(--surface-raised) !important;
  border-color: var(--stroke-field) !important;
}

/* Страницы /reports/ и /more/ — сетка карточек */
.iifin-reports-page,
.iifin-more-page {
  padding: var(--spacing-6);
  max-width: 900px;
  margin: 0 auto;
}

.iifin-reports__title,
.iifin-more__title {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-2xl);
}

.iifin-reports__intro,
.iifin-more__nav {
  margin-bottom: var(--spacing-6);
}

.iifin-reports__grid,
.iifin-more__nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-4);
}

.iifin-reports__card,
.iifin-more__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
}

.iifin-reports__card .material-symbols-outlined,
.iifin-more__card .material-symbols-outlined {
  font-size: 28px;
  color: var(--primary);
}

.iifin-reports__card h2,
.iifin-more__card h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.iifin-reports__card p,
.iifin-more__card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  flex: 1;
}