:root {
  --clr-primary:      #2563eb;
  --clr-primary-d:    #4f7efc;
  --clr-income:       #059669;
  --clr-income-d:     #028858;
  --clr-expense:      #dc2626;
  --clr-expense-d:    #b91c1c;
  --clr-gray:         #e5e7eb;
  --clr-gray-d:       #d1d5db;
  --gap:              8px;
  --indent-unit:      24px;
}

/* ------- КНОПКИ только для категорий ------- */
.btn {
  padding: 0.74rem 1.24rem;
  font-size: 1.07rem;
  font-weight: 600;
  border-radius: 0.82rem;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  color: #fff;
  background: var(--clr-primary);
  outline: none;
  box-shadow: none;
}
.btn--primary { background: var(--clr-primary); color: #fff; }
.btn--primary:hover, .btn--primary.is-active { background: var(--clr-primary-d); }
.btn--income { background: var(--clr-income); color: #fff; }
.btn--income:hover, .btn--income.is-active { background: var(--clr-income-d); }
.btn--expense { background: var(--clr-expense); color: #fff; }
.btn--expense:hover, .btn--expense.is-active { background: var(--clr-expense-d); }
.btn--gray { background: var(--clr-gray); color: #384255; }
.btn--gray:hover, .btn--gray.is-active { background: var(--clr-gray-d); color: #212838; }
.btn.is-active { box-shadow: 0 4px 14px rgba(0,0,0,0.1); filter: brightness(0.97); }

/* --------- ФИЛЬТРЫ --------- */
.filters {
  display: flex;
  gap: var(--gap);
  margin-bottom: 16px;
}
.filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  color: #232b39;
  padding: 10px 16px;
  font-size: 0.95rem;
  border-radius: 10px;
  border: 1px solid #e0e4ed;
  cursor: pointer;
  transition: background 0.2s;
}
.filter-toggle-btn:hover { background: #e9ebf2; }
.filter-dropdown {
  position: absolute;
  top: 110%;
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1.5px solid #e0e4ef;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(60, 70, 120, 0.13);
  z-index: 9999;
  padding: 6px 0;
  display: block;
  animation: fadein .18s;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}
.filter-dropdown.hidden {
  display: none;
}
.filter-option {
  padding: 11px 20px;
  cursor: pointer;
  font-size: 1.04rem;
  color: #232b39;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.13s, color 0.13s;
  font-family: inherit;
}
.filter-option:hover,
.filter-option.is-active {
  background: #f5f7fa;
  color: #2563eb;
  font-weight: 600;
}
.filter-icon-wrap {
  position: relative;
  margin-bottom: 16px;
  display: inline-block;
}
.filter-icon-btn {
  background: #f1f3f9;
  border: 1px solid #dce0e9;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  box-shadow: 0 2px 6px rgba(60, 80, 130, 0.05);
}
.filter-icon-btn:hover { background: #e6eaf2; }

/* --------- ДЕРЕВО КАТЕГОРИЙ --------- */
.category-list-wrap {
  max-width: 1100px;
  margin: 24px auto 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 18px rgba(60,80,130,0.09);
  padding: 0;
}
.category-list {
  margin: 0;
  padding-top: 16px;
  border-radius: 18px;
  border: none;
  box-shadow: none;
  background: none;
}
.category-list:hover {
  border-color: var(--clr-gray);
  box-shadow: 0 7px 24px rgba(65,80,120,0.15);
}
.category-list ul { margin: 0; padding: 0; }
.category-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  padding-left: calc(16px + var(--depth) * var(--indent-unit));
  position: relative;
  transition: background .2s;
}
.category-item + .category-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(16px + var(--depth) * var(--indent-unit));
  right: 16px;
  border-top: 1px dashed #eee;
}
.category-item:hover { background: #fafbfc; }

.category-item__expander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65em;   /* Больше! */
  height: 1.65em;  /* Больше! */
  margin-right: var(--gap);
  border: none;
  background: none;
  color: #bfc6cf;  /* Серая (на всякий случай, но основной цвет задаётся в SVG) */
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: background 0.2s, transform .2s;
}
.category-item__expander[disabled] { visibility: hidden; }
.category-item__expander.is-open .chevron { transform: rotate(90deg); }
.category-item__expander:hover { background: #f4f5fa; }

.chevron {
  width: 1.65em;
  height: 1.65em;
  display: block;
  transition: transform .2s, stroke .15s;
}

.category-item__name {
  flex: 1;
  font-weight: 700;     /* Жирный текст */
  font-size: 1.10rem;   /* Чуть крупнее */
  letter-spacing: -0.01em;
}
.category-item--income .category-item__name { color: var(--clr-income); }
.category-item--expense .category-item__name { color: var(--clr-expense); }
.category-item--both .category-item__name { color: var(--clr-primary); }
.category-item__menu {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #bbb;
  cursor: pointer;
  padding: 4px;
}
.category-item__menu:hover { color: #444; }

/* --- КРАСИВЫЕ КНОПКИ ФИЛЬТРА ДЛЯ КАТЕГОРИЙ --- */
.categories-filters-row {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  max-width: 1100px;
  margin: 18px auto 18px auto;
  padding: 0 8px;
  background: none;
  box-shadow: none;
  border: none;
}

.cat-filter-btn {
  background: #f3f4f8;
  color: #232b39;
  border: 1.5px solid #e0e4ef;
  border-radius: 9px;
  padding: 9px 22px;
  font-size: 1.04rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border 0.16s, box-shadow 0.16s;
  outline: none;
  box-shadow: 0 1px 4px rgba(60, 80, 130, 0.04);
  margin: 0;
  min-width: 80px;
  position: relative;
  z-index: 1;
}

.cat-filter-btn.active,
.cat-filter-btn:focus {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37,99,235,0.10);
}

.cat-filter-btn:hover:not(.active) {
  background: #e6eaf2;
  color: #2563eb;
  border-color: #b3c7f7;
}

.hidden {
  display: none !important;
}

/* Красивый чекбокс для мультиселектора ролей */
.role-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #bfc8e6;
  border-radius: 7px;
  background: #fff;
  margin-right: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  vertical-align: middle;
  position: relative;
  box-shadow: 0 1px 4px #e6e9fa;
}

.role-option input[type="checkbox"]:checked {
  border-color: var(--clr-primary);
  background: var(--clr-primary);
}

.role-option input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.role-option label {
  font-size: 1.08em;
  color: #232b39;
  cursor: pointer;
  user-select: none;
}

@media (max-width: 600px) {
  :root { --indent-unit: 18px; }
  .category-list { padding-top: 12px; }
  .category-item {
    padding: 10px 10px 10px calc(10px + var(--depth) * var(--indent-unit));
  }
  .category-item__name {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .categories-filters-row {
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 8px 14px 8px;
    justify-content: flex-start;
  }
  .cat-filter-btn {
    padding: 8px 13px;
    font-size: 0.97rem;
  }
}

@media (max-width: 700px) {
  .categories-filters-row {
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 6px 8px 6px;
    justify-content: flex-start;
    padding: 0;
  }
  .cat-filter-btn {
    padding: 8px 13px;
    font-size: 0.97rem;
    min-width: 60px;
  }
}