@import '/theme.css';

/* Эффект нажатия для всех button, .chip-btn, .category-item и других интерактивных элементов */
button:active,
.chip-btn:active,
.category-item:active,
.delete-budget-btn:active,
.close-category-sheet:active {
  /* небольшое уменьшение размера */
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
  /* быстрый откат */
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

div {
  -ms-user-select: none;
  user-select: none;

  -webkit-tap-highlight-color: transparent;
}

div:focus {
  outline: none;
}


/* Стили для селектора темы */
.theme-selector {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--tertiary-color);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

.theme-selector label {
  display: block;
  margin-bottom: var(--spacing-sm);
  color: var(--secondary-color);
  font-weight: 600;
}

.theme-selector select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--accent-color);
  border-radius: var(--border-radius-md);
  background: var(--tertiary-color);
  color: var(--secondary-color);
  cursor: pointer;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232be82a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 10px;
}

.theme-selector select:focus {
  outline: 2px solid var(--primary-color);
  box-shadow: 0 0 0 2px rgba(43, 232, 42, 0.1);
}

.theme-selector select:hover {
  border-color: var(--primary-color);
}

/* Стили для темной темы */
[data-theme="dark"] .theme-selector select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
}

button, input, select, textarea {
  font-family: 'Montserrat', 'sans-serif';
  /*font-weight: 700;*/

  user-select: none;              /* Отключает выделение текста */
  -moz-user-select: none;
  -ms-user-select: none;
  outline: none;                  /* Убирает обводку при фокусе */
  -webkit-tap-highlight-color: transparent; /* Убирает подсветку на мобильных устройствах */
}

input, select, textarea {
  background-color: var(--tertiary-color);
  font-family: 'Montserrat', 'sans-serif';
  font-weight: bold;
}

h2 {
  font-size: 1.2rem;
}

h3 {
  padding-bottom: 10px;
}


/* Общие стили */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  /* font-family: 'JetBrains Mono', 'Apple Color Emoji', monospace; */
  /* font-family: 'Poppins', 'Montserrat'; */
  font-family: 'Montserrat', 'sans-serif', system-ui, "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  background-color: var(--main-ground);
  color: var(--secondary-color);
  user-select: none;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#block-budget {
  /* Блок Бюджет уже использует primary-color */
  background: var(--primary-color);
}

#block-income {
  background: var(--income-color);
}

#block-expense {
  background: var(--expense-color);
}

#block-deposit {
  background: var(--deposit-color);
}

#block-debt {
  background: var(--debt-color);
}

/* Hover для блоков */
.summary-block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Hover для кнопок */
button:hover {
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}

/* Контур для всех инпутов, select, textarea при фокусе */
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--secondary-color);
}


/* Скрытие элементов */
.hidden {
  display: none !important;
}

/* Оверлей для модальных окон */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Backdrop for bottom-sheets */
#bottom-sheet-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1099;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#bottom-sheet-backdrop:not(.hidden) {
  opacity: 1;
}

/* Bottom-sheet */
.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tertiary-color);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  padding: var(--spacing-md);
  max-height: 87vh;
  overflow-y: auto;
  z-index: var(--z-index-bottom-sheet);
  box-shadow: var(--shadow-lg);
  
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--transition-slow), 
              opacity var(--transition-slow);
  transform-origin: bottom center;
}

.bottom-sheet:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
}

/* Хедер */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-secondary-color);
  color: var(--primary-color);
  padding: var(--spacing-sm) var(--spacing-md);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-index-header);
}
header h1 {
  font-size: 1.7rem;
  cursor: pointer;
}

/* Основной контент */
main {
  flex: 1;
  overflow-y: auto;
  padding: 60px 0 90px;

}

.wrapper {
  padding: 0 var(--spacing-md) 0;
}

/* Блоки суммарной информации */
/* Контейнер для блоков */
#summary-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 7px;
}
/* Общие стили для блоков */
.summary-block {
  background: var(--tertiary-color);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: center;
}
/* Блок, занимающий всю ширину */
.summary-block.full {
  flex-basis: 100%;
}
/* Блоки, занимающие 50% ширины */
.summary-block.half {
  flex-basis: calc(50% - 5px);
  width: 48%;
}
/* Стили заголовков и значений */
.block-title {
  font-size: 1rem;
  margin-bottom: 5px;
  font-weight: 600;
}
.block-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark-color);
}
/* Стиль для смайликов */
.block-title .emoji {
  font-size: 1.1rem;
}


/* Список транзакций */
#transaction-list {
  list-style: none;
  margin-top: 10px;
}
#transaction-list li {
  border-left: 4px solid;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--tertiary-color);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  
}

/* Стили форм в bottom-sheet */
.transaction-form {
  margin-top: 10px;
}
.transaction-form label {
  display: block;
  margin-top: 10px;
}
.transaction-form input,
.transaction-form select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
}
.transaction-form button {
  margin-top: 10px;
  padding: 11px;
  width: 100%;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  background: var(--primary-color);
  color: var(--secondary-color);
  cursor: pointer;
}
.transaction-form .close-form {
  background: var(--secondary-color);
  color: var(--tertiary-color);
}


/* Стили для списка товаров */
#products-list .product-item {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}
#products-list .product-item input {
  flex: 1;
}

/* Стили для bottom-sheet переключения бюджета */
#budget-switch-sheet .budget-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
}
#budget-switch-sheet .budget-list div {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
#budget-switch-sheet .budget-add {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
#budget-switch-sheet .budget-add input {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--secondary-color);
  border-radius: 8px;
}
#budget-switch-sheet img {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  display: block; 
}
#budget-switch-sheet .budget-description {
  font-size: 14px;
  color: var(--text-muted, #666);
  margin: 10px 0 20px;
  line-height: 1.5;
}

#budget-switch-sheet .budget-description ul {
  padding-left: 20px;
  margin: 10px 0;
}

#budget-switch-sheet .budget-description li {
  margin-bottom: 6px;
  list-style: disc;
}

#budget-switch-sheet .tip {
  font-weight: bold;
  color: var(--income-color);
}



#budget-form {
  background: var(--tertiary-color);
  padding: 30px;
  border-radius: 8px;
  margin: 0 40px;
}
#budget-name {
  width: 100%;
  padding: 10px;
  font-weight: bold;
  border-radius: 8px;
  margin-top: 5px;
  font-size: 16px;
}

#budget-form button {
  width: 100%;
}

#pay-debt, #close-detail, #delete-transaction, #close-budget-sheet, #add-budget-btn, #export-btn, #import-label, #close-settings, #budget-form button, #cancel-delete-budget, #confirm-delete-budget, #pay-debt-detail{
  color: var(--tertiary-color);
  font-weight: bolder;
  font-size: 16px;
}


/* Кнопка "Закрыть" закреплена внизу */
.close-settings-btn {
  width: 100%;
  bottom: 0;
  background: var(--secondary-color);
  color: var(--tertiary-color);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  border: none;
  cursor: pointer;
  border-radius: var(--border-radius-md);
}


.close-settings-btn:hover {
  background: var(--tertiary-color);
  color: var(--secondary-color);
}



#pay-debt, #delete-transaction, #confirm-delete-budget, #confirm-clear-data, #confirm-clear-cache, #cancel-clear-data, #cancel-clear-cache, #cancel-delete-budget, #pay-debt-detail, #confirm-delete-transaction, #cancel-delete-transaction{
  width: 49%;
}

#delete-transaction, #confirm-delete-budget, #confirm-clear-data, #confirm-clear-cache, #cancel-clear-data, #cancel-clear-cache {
  font-weight: 700;
}

/* Отключил кнопку Оплатить времено пока не сделаю нормальную логику */
#pay-debt { 
  display: none;
}

.pay-debt {
  color: var(--tertiary-color);
  font-weight: bolder;
  width: 100%;
}

#delete-transaction, #confirm-delete-budget, #confirm-clear-data, #confirm-clear-cache, #confirm-delete-transaction {
  background-color: var(--expense-color);
}
#close-detail, #close-budget-sheet {
  background-color: var(--secondary-color);
  width: 100%;
}

#add-budget-btn {
  margin-top: 0;
  width: 100%;
  color: var(--secondary-color);
  background: var(--primary-color);
}

#export-btn, #import-label, #close-settings{
  width: 100% !important;
}

#income-amount, #debt-direction, #deposit-status {
  margin-bottom: 40px;
}

#add-product {
  margin-top: 40px;
}

/* Настройки */
.settings-content {
  background: var(--tertiary-color);
  padding: 20px;
  border-radius: var(--border-radius-md);
  text-align: left;
}
.settings-content button,
.settings-content label,
button {
  margin-top: 10px;
  font-size: 16px;
  padding: 10px 20px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  background: var(--secondary-color);
  color: var(--tertiary-color);
  cursor: pointer;
}
.settings-content a {
  color: #007bff;
}

#settings-btn {
  font-size: 18px;
  margin-top: 5px;
  padding: 0;
  background: none;
}

.settings-nav-list button {
  width: 100%;
  margin: 10px 0;
  font-size: 1.1rem;
  padding: 10px;
  text-align: left;
  border-radius: var(--border-radius-md);
  background: var(--main-ground);
  color: var(--secondary-color);
  font-weight: 700;
}

#export-import-page button {
  font-weight: 700;
}

.theme-option {
  padding: 12px;
  margin: 6px 0;
  border-radius: 10px;
  cursor: pointer;
  background: var(--tertiary-color);
  color: var(--secondary-color);
  font-weight: 600;
  transition: background 0.3s;
  text-align: left;
}

.theme-option:hover {
  background: var(--primary-color);
  color: var(--dark-color);
}

.theme-option.active {
  border: 2px solid var(--primary-color);
  background: rgba(255, 255, 255, 0.1);
}

.fullscreen-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  max-height: none;
  padding: var(--spacing-md);
  overflow-y: auto;
  background: var(--tertiary-color);
  z-index: var(--z-index-bottom-sheet, 1100);
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 0;
}

/* Появление */
.fullscreen-sheet:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
}



/* Стили для страницы настроек */
/* Контейнер для страницы настроек как bottom-sheet на 80% экрана */
#settings-page {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--tertiary-color);
  box-shadow: 0 -2px 25px rgba(0, 0, 0, 0.9);
  padding: var(--spacing-md);
  z-index: 1500;
  overflow-y: auto;      /* Чтобы контент прокручивался, если его слишком много */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
#settings-page {
  top: 0;
  height: 100vh;
  max-height: none;
  border-radius: 0;
  padding-bottom: 60px; /* чтобы кнопка Закрыть не наезжала на контент */
}


/* При удалении класса .hidden bottom-sheet «въезжает» и становится видимым */
#settings-page:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
}

/* Шапка настроек (название, общее описание) */
.settings-header {
  margin-bottom: 10px;
}
.settings-header h2 {
  font-size: 1.4rem;
  margin-bottom: 5px;
  color: var(--secondary-color);
}
.settings-header p {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Блок "версия, автор, ссылка" */
.settings-info p {
  margin: 4px 0;
  font-size: 0.95rem;

}
.settings-info a {
  color: var(--deposit-color);
  text-decoration: none;
}
.settings-info a:hover {
  text-decoration: underline;
}

.settings-buttons-inline {
  display: flex;
  gap: 10px;   /* Расстояние между кнопками */
  margin-top: 15px;
}

/* Одинаковые стили для кнопки и label */
.settings-buttons-inline button,
.settings-buttons-inline label {
  flex: 1; /* Растягиваем оба элемента равномерно */
  display: inline-flex; /* Чтобы можно было центрировать содержимое */
  align-items: center;
  justify-content: center;
  height: 48px;            /* Фиксируем одну высоту */
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: center;
  color: #fff; /* например, белый текст */
  /* Можно разные фоны, если нужно различать кнопки */
  /* background: #000;  <-- для Экспорт */
  /* background: #5A00FF; <-- для Импорт */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.settings-buttons-inline button:hover,
.settings-buttons-inline label:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Скрываем input[type=file], чтобы клик шел по всей «кнопке» */
#import-label {
  position: relative;
  overflow: hidden;
}
#import-label input[type="file"] {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0; /* file-элемент невидим, но кликабелен */
  cursor: pointer;
}

/* Блок для дополнительных кнопок */
.extra-buttons-container {
  margin: 10px 0;
}


@media (max-width: 768px) {
  #settings-page h2 {
    font-size: 1.2rem;
    font-weight: 700;
  }
  #settings-page button {
    font-size: 1rem;
    font-weight: 700;
  }
  #settings-page input {
    font-size: 0.9rem;
    font-weight: 700;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Кнопка установки приложения */
#install-btn {
  position: fixed;
  bottom: 40px;
  right: 20px;
  padding: 10px 20px;
  background: var(--primary-color);
  color: var(--secondary-color);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.801);
}

#install-btn:hover {
  background-color: var(--secondary-color);
  color: var(--accent-color);

}

/* Футер (кнопка +) */
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  /* padding: 10px; */
  background-color: var(--main-ground);
}
#add-btn {
  font-size: 16px;
  font-weight: 600;
  background: var(--bg-secondary-color);
  color: var(--tertiary-color);
  border: none;
  /* border-radius: 80%; */
  width: 93%;
  height: 40px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  cursor: pointer;
  margin-bottom: 10px;
}
/* Стили для страницы настроек */
  
.settings-header h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.settings-header p {
  margin: 5px 0;
  font-size: 1rem;
}

.settings-header a {
  color: #007bff;
  text-decoration: none;
}

.settings-header a:hover {
  text-decoration: underline;
}

.settings-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.settings-buttons button,
#import-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #6a11cb, #2575fc);
  border: none;
  border-radius: var(--border-radius-md);
  padding: 10px 15px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 10px 0; /* Центровка кнопки */
}

.settings-buttons button:hover,
#import-label:hover {
  background: linear-gradient(45deg, #5a0cb4, #1f65c1);
  transform: translateY(-2px); /* Поднимается вверх */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

.settings-buttons i {
  margin-right: 8px;
  font-size: 1.2rem;
}

#clear-cache-btn, #clear-data-btn {
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
}

#import-label {
  position: relative;
  /* overflow: hidden; */
  cursor: pointer;
}

#import-file {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}



.settings-buttons button,
#import-label {
transition: transform 0.2s ease, background 0.3s ease;
}

.settings-buttons button:hover,
#import-label:hover {
transform: translateY(-2px); /* Лёгкое поднятие кнопки */
}

/* Сбрасываем стандартный вид select */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--tertiary-color);
  /* border: 2px solid var(--primary-color); */
  border-radius: 8px;
  padding: 8px 40px 8px 10px; /* Отступ справа для стрелочки */
  font-size: 16px;
  color: var(--secondary-color);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232be82a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Эффект фокуса для select */
select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 5px rgba(43,232,42,0.5);
}

/* При наведении немного меняем прозрачность */
select:hover {
  opacity: 0.9;
}

/* Контейнер main, если в нем динамически добавляются элементы */
main {
  max-height: 95vh; /* Или другое подходящее ограничение */
  overflow-y: auto; /* Включаем вертикальный скролл */
  /* padding: 90px 5px; */
  scroll-behavior: smooth; /* Плавный скролл */
  border-radius: 8px;
  background-color: var(--main-ground);
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

/* Стилизация scrollbar (для WebKit браузеров) */
main::-webkit-scrollbar {
  width: 3px; /* Ширина скроллбара */
}


main::-webkit-scrollbar-thumb {
  background: var(--primary-color); /* Синий ползунок */
  border-radius: 10px;
}

/* Общие стили для модального окна */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200; /* Increased z-index to appear above the backdrop */
}

/* Скрытый класс для модалки */
.modal.hidden {
  display: none;
}

/* Содержимое модального окна */
.modal-content {
  background: var(--tertiary-color);
  padding: 20px;
  border-radius: var(--border-radius-md);
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s ease-in-out;
}

/* Кнопки внутри модалки */
.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

/* Стили кнопок */
.modal-buttons button {
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.pay-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

/* Стили для каждой кнопки */
.pay-modal-buttons button {
  /* padding: 12px 16px; */
  border: none;
  border-radius: var(--border-radius-md);
  font-size: 16px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.15s ease;
}

/* Полная оплата — зелёная кнопка */
#pay-debt-confirm {
  background-color: var(--primary-color);
  color: #000;
}

#pay-debt-confirm:hover {
  background-color: var(--secondary-color);
  color: var(--accent-color);
  transform: scale(1.02);
}

/* Частичная — оранжевая */
#pay-debt-part {
  background-color: #ffa726;
  color: #000;
}

#pay-debt-part:hover {
  background-color: #fb8c00;
  transform: scale(1.02);
}

/* Отмена — нейтральная/серая */
#cancel-debt-pay {
  background-color: #ccc;
  color: #333;
}

#cancel-debt-pay:hover {
  background-color: #bbb;
  transform: scale(1.02);
}

#debt-pay-amount {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  border: 2px solid #888;
  border-radius: 10px;
  background-color: #f9f9f9;
  color: #000;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s ease;
}

#debt-pay-amount:focus {
  border-color: #2be82a;
  background-color: #fff;
}


#confirm-delete-budget:hover {
  background: #c62828;
}

#cancel-delete-budget:hover {
  background: #388e3c;
}

#export-before-delete {
  background: #007bff; /* Синяя кнопка экспорта */
  color: white;
  width: 100%;
  margin-bottom: 10px;
}

#export-before-delete:hover {
  background: #0056b3;
}

/* Анимация появления */
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: scale(0.95);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}

.budget-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

.delete-budget-btn {
  background-color: var(--main-ground);
}


#current-budget {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#current-budget:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.delete-product {
  background: none !important;
  color: var(--primary-color) !important;
  width: 5% !important;
  padding: 5px;
}

.open-subpage-btn {
  font-weight: 700;
}

/* Ошибки (hint) - всплывающие */
.product-item {
  position: relative; /* чтобы .error-message позиционировалась относительно этого контейнера */
}

/* Для бюджетных форм (если нужно ошибки и там), тоже можно position: relative */
#budget-form,
#budget-switch-sheet .budget-add,
#debt-form,
#deposit-form,
#income-form {
  position: relative;
}

/* Сама подсказка об ошибке */
.error-message {
  position: absolute;
  top: 100%;      /* появляется чуть ниже инпута */
  left: 0;
  margin-top: 2px;
  background: rgba(255, 0, 0, 0.1);
  color: red;
  padding: 3px 5px;
  border-radius: 8px;
  font-size: 0.85rem;
  white-space: nowrap;  /* не переносим текст */
  pointer-events: none; /* клики проходят «сквозь» */
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;   /* поверх всего */
}

.error-message.visible {
  opacity: 1;
  transform: translateY(0);
}

.chips-container {
  display: flex;
  gap: 10px;
  justify-content: space-around;
  margin: 10px 0;
}

.chip-btn {
  flex: 1;
  background: #f0f0f0;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
  color: #333;
  transition: background 0.2s ease;
}

.chip-btn:hover {
  background: #ddd;
}

/* Стили для загрузочного экрана */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--dark-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px; /* Расстояние между иконкой, loader и текстом */
  font-size: 20px;
  text-align: center;
  z-index: 9999;
  padding: 0 20px; /* Небольшой отступ по краям для защиты от переполнения */
  box-sizing: border-box;
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid var(--primary-color);
  border-top: 5px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#loading-text {
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  font-size: 1rem;
  min-height: 3.5em;
  font-weight: 700;
  transition: opacity 0.3s ease;
}


.transaction-type-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;      /* Позволяет горизонтальную прокрутку при переполнении */
  /* padding: 10px 0;    */
}

.chip-btn {
  flex-shrink: 0;        
  padding: 8px;
  background: var(--accent-color);
  color: var(--secondary-color);
  border: none;
  border-radius: 16px;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s ease;
}

.chip-btn:hover {
  background: var(--secondary-color);
  color: var(--tertiary-color);
}

.chip-btn.active {
  background: var(--secondary-color);      /* Стиль для выбранной кнопки (если захотите) */
  color: var(--tertiary-color);
}

/* Месяц/год фильтр */
#year-filter {
  padding:8px; border-radius:8px; border:2px solid var(--secondary-color);
  font-weight: 600;
}

/* Контейнер для всего слайдера */
.banner-carousel {
  position: relative;
  width: 100%;
  /* Высоту можно задать фиксированную, например 120px или 150px, чтобы ужать 
     (зависит от вашего дизайна). Или можно вообще не задавать, тогда height:auto. */
  height: auto;
  overflow: hidden;
}

/* Контейнер со слайдами выстраиваем в линию */
.slides-container {
  display: flex;
  transition: transform 0.5s ease; /* анимация при смене слайда */
  will-change: transform;         /* небольшая оптимизация */
}

/* Каждый слайд (баннер) занимает ширину равную контейнеру */
.banner-slide {
  min-width: 100%;
  cursor: pointer;   /* чтобы показывать, что можно кликать */
  user-select: none;
}

/* Сама картинка внутри баннера */
.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* или contain, если хотите видеть всю картинку целиком */
  display: block;    /* убирает лишние пробелы и отступы */
  border-radius: var(--border-radius-md);
}

/* Стили для bottom-sheet выбора категорий */
#category-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tertiary-color);
  border-radius: 16px 16px 0 0;
  padding: 20px;
  min-height: 60vh;
  max-height: 85vh;
  /* max-height: 60vh; */
  /* overflow-y: auto; */
  z-index: 1200;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -2px 25px rgba(0, 0, 0, 0.9);

  display: flex;
  flex-flow: column nowrap;
}

#category-sheet:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
}

.category-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 0 0 15px 0; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  /* position: sticky; */
  top: 0;
  background: var(--tertiary-color);
  z-index: 1;
}

.category-sheet-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--secondary-color);
}

.close-category-sheet {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--secondary-color);
  padding: 5px;
  margin-top: 0;
}

/* Поисковое поле в выборке категорий */
/* закрепляем шапку + поиск */
.category-sheet-header,
#category-search {
  position: sticky;
  top: 0; /* «прилипает» к верхней границе контейнера */
  z-index: 10; /* выше списка, чтобы не перекрывался */
  background: var(--tertiary-color); /* тот же фон, что и у листа */
}


#category-search {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  margin: 0 0 var(--spacing-md);
  border: 1px solid var(--secondary-color);
  border-radius: var(--border-radius-md);
  background: var(--tertiary-color);
  color: var(--secondary-color);
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#category-search:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 2px rgba(43, 232, 42, 0.2);
}

#category-search::placeholder {
  color: var(--text-muted);
}


.category-list {
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
  max-height: calc(85vh - 50px - 40px);
  overflow-y: auto;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 10px 0;

}

.category-item {
  padding: 12px 15px;
  border-radius: 8px;
  background: var(--accent-color);
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 1rem;
  color: var(--secondary-color);
  border: 1px solid rgba(0, 0, 0, 0.1);
  list-style-type: none;
  margin-bottom: 7px;
}

.category-item:hover {
  background: var(--secondary-color);
  color: var(--tertiary-color);
}

.category-item:active {
  transform: scale(0.98);
}

.category-select-container {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}

.category-select-button {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: var(--accent-color) !important;
  text-align: left;
  font-size: 16px;
  /* color: var(--tertiary-color) !important; */
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  pointer-events: auto;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.category-select-button:hover {
  color: var(--tertiary-color) !important;
  background: var(--secondary-color) !important;
}

.category-select-button:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}


.category-group-label {
  font-weight: bold;
  padding: 8px 12px;
  background-color: var(--accent-color);
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s ease;
}

.category-group-label:hover {
  background-color: var(--secondary-color);
  color: var(--accent-color);
}

.group-options {
  padding-left: 16px;
  margin-top: 4px;
}

.group-options.hidden {
  display: none;
}

/* Скрываем стандартный select */
#expense-category {
  display: none;
}

/* Отступ сверху у первой записи каждой новой даты */
#transaction-list li.new-date-group {
  margin-top: 1em;      /* можно регулировать под ваш дизайн */
  padding-top: 0.5em;   /* дополнительный внутренний отступ, опционально */
  border-top: 1px solid #ddd; /* тонкая разделительная линия, если нужно */
}

/* Стили для самой даты */
#transaction-list .transaction-date {
  font-size: 0.8em;
  color: gray;
  text-align: right;
  margin-top: 0.25em;
}


.currency-chip-container {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 4px 10px 0;
  margin-bottom: 10px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.currency-chip-container::-webkit-scrollbar {
  display: none; /* Chrome */
}


.currency-chip {
  background-color: var(--an-secondary-color);
  color: var(--accent-color);
  border-radius: var(--border-radius-md);
  padding: 6px 10px;
  min-width: 140px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.75em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.currency-chip:hover {
  transform: scale(1.03);
}

.chip-info {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
  font-weight: 600;
}

.chip-value {
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 3px;
}

.chip-body {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  width: 100%;
}

.trend-up {
  color: var(--primary-color);
}

.trend-down {
  color: var(--an-expense-color);
}

.trend-graph {
  width: 100%;
  height: 30px;
  margin-bottom: 8px;
}

.chip-update-time {
  margin-top: -16px;
  font-size: 0.75em;
  color: #888;
  text-align: right;
  padding-right: 10px;
}



/* =================================== */
/* Стили для раздела «Аналитика» */
/* =================================== */

/*.analytics-title {*/
/*  text-align: center;*/
/*  color: var(--an-primary-color);*/
/*  font-size: 1.8rem;*/
/*  margin-bottom: 16px;*/
/*}*/
/*.analytics-carousel {*/
/*  position: relative;*/
/*  width: 100%;*/
/*  height: 500px;*/
/*  overflow: hidden;*/
/*}*/
/*.analytics-slides-container {*/
/*  display: flex;*/
/*  height: 100%;*/
/*  transition: transform 0.5s ease;*/
/*  touch-action: pan-y;*/
/*  cursor: grab;*/
/*}*/
/*.analytics-slides-container:active {*/
/*  cursor: grabbing;*/
/*}*/
/*.analytics-slide {*/
/*  flex: 0 0 100%;*/
/*  box-sizing: border-box;*/
/*  padding: 16px;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  align-items: center;*/
/*}*/
/*.analytics-slide h4 {*/
/*  margin: 0 0 12px;*/
/*  font-size: 1.3rem;*/
/*  font-weight: 600;*/
/*  text-align: center;*/
/*  color: #000;*/
/*}*/
/*.analytics-slide canvas {*/
/*  .analytics-slide canvas {*/
/*    width: 100% !important;*/
/*    height: auto !important;*/
/*    aspect-ratio: 1 / 1; !* всегда квадрат *!*/
/*    max-height: 400px; !* <-- ограничим максимум *!*/
/*    background: var(--an-tertiary-color);*/
/*    border-radius: var(--an-border-radius-md);*/
/*  }*/

/*.analytics-dots {*/
/*  position: relative;*/
/*  bottom: 0;*/
/*  left: 75%;*/
/*  transform: translateX(-50%);*/
/*  display: flex;*/
/*  gap: 8px;*/
/*  padding: 8px 0;*/
/*}*/
/*.analytics-dots .dot {*/
/*  width: 12px;*/
/*  height: 12px;*/
/*  border-radius: 50%;*/
/*  background: var(--an-accent-color);*/
/*  transition: background-color 0.3s, box-shadow 0.3s;*/
/*  cursor: pointer;*/
/*}*/
/*.analytics-dots .dot.active {*/
/*  background: var(--an-primary-color);*/
/*  box-shadow: 0 0 6px var(--an-primary-color);*/
/*}*/
/* Центр doughnut */
#expensesByCategoryCenterText {
  position: absolute;
  top: 43%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
}
#expensesByCategoryCenterText .center-total {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-top: -50px;
}
#expensesByCategoryCenterText .center-label {
  font-size: 1rem;
  color: var(--an-secondary-color);
}

/* Стили для фильтра аналитики */
#analytics-filter {
  margin-bottom: 20px;
  text-align: center;
}

#analytics-filter label {
  font-size: 1rem;
  color: var(--tertiary-color);
  margin-right: 10px;
}

.month-selector {
  margin: 20px auto;
}

#month-filter-container .custom-select-button {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  padding-right: 30px; /* Отступ справа для стрелки */
  text-align: left; /* Выравнивание текста слева, как в нативных селектах */
}

#analytics-month-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  max-width: 220px; /* фиксируем размер, чтобы не сжимался */
  display: block; /* чтобы растянуть */
  margin: 8px auto; /* центрируем */

  padding: 8px 12px;
  background-color: var(--dark-color);
  color: var(--tertiary-color);
  border: 1px solid var(--accent-color);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

#analytics-month-select:hover {
  background-color: #2a2a2a;
  border-color: var(--primary-color);
}

#analytics-month-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 5px var(--primary-color);
}

.custom-select {
  position: relative;
  width: 100%;
  /* margin: 8px auto; */
  font-family: inherit;
  color: var(--tertiary-color);
}

.custom-select-button {
  background-color: var(--dark-color);
  border: 1px solid var(--accent-color);
  color: var(--tertiary-color);
  border-radius: var(--border-radius-md);
  /* padding-right: 20px; */
  padding: 10px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s, border-color 0.3s;
}

.custom-select-button:hover {
  background-color: #2a2a2a;
  border-color: var(--primary-color);
}

.custom-select-options {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background-color: var(--dark-color);
  border: 1px solid var(--accent-color);
  border-radius: 12px;
  overflow: hidden;
  z-index: 1000;
  max-height: 220px;
  overflow-y: auto;
}

.custom-select-options div {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.custom-select-options div:hover {
  background-color: var(--primary-color);
  color: var(--dark-color);
}

/* Общий стиль текста ошибки */
.inline-error-message {
  color: var(--expense-color);
  font-size: 0.85em;
  margin-top: 4px;
  font-family: 'Poppins', sans-serif;
  animation: fadeIn 0.3s ease-out;
}


/* Красная рамка для кастомной кнопки выбора категории */
.category-select-button.error {
  border: 2px solid var(--an-expense-color);
  border-radius: var(--border-radius-md);
  background-color: rgba(255, 4, 0, 0.1);
}

/* Анимация появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.chart-mode-switch {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.chart-mode-switch button {
  background-color: #2e2e2e;
  color: #fff;
  border: 1px solid #555;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-mode-switch button:hover {
  background-color: #444;
  border-color: #999;
}

.chart-mode-switch button.active {
  background-color: var(--primary-color);
  color: #000;
}




.user-id-display.legendary {
  color: gold;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.6);
  animation: sparkle 2s infinite ease-in-out;
}

@keyframes sparkle {
  0%   { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
  50%  { text-shadow: 0 0 12px rgba(255, 255, 100, 0.9); }
  100% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
}


.user-profile-card {
  background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
  padding: 20px;
  border-radius: var(--border-radius-lg);
  display: flex;
  gap: 20px;
  align-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

.user-profile-card::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle, var(--primary-color, rgba(102,204,255,0.1)), transparent 70%);
  animation: floatBlob 6s infinite linear;
  z-index: 0;
}


@keyframes floatBlob {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.user-emoji {
  z-index: 1;
}

.emoji-avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  border: 3px solid transparent;
  background: linear-gradient(135deg, var(--primary-color), var(--income-color)) border-box;
  box-shadow: 0 0 15px var(--primary-color, rgba(102, 204, 255, 0.5));
  /* padding: 3px; */
  background-origin: border-box;
  background-clip: content-box, border-box;
}


.user-level-info {
  flex-grow: 1;
  z-index: 1;
}

.user-level-text {
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--secondary-color);
}

.progress-bar {
  background: linear-gradient(135deg, var(--primary-color), var(--income-color)) border-box;
  /* background: linear-gradient(to right, #66ccff, #00ffcc); */
  height: 100%;
  transition: width 0.4s ease;
  border-radius: 12px;
}


.progress-bar-container {
  background: #2e2e2e;
  border-radius: 12px;
  height: 12px;
  overflow: hidden;
  margin-bottom: 6px;
  border: 1px solid #444;
}

.user-profile-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.user-emoji {
  font-size: 2.5rem;
}

.user-meta {
  font-size: 0.95rem;
}

.progress-container {
  margin: 6px 0;
}

.progress-bar {
  width: 100%;
  height: 10px;
  /*background: #444;*/
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--linear-progress-bar, linear-gradient(to right, #0ff, #0f0));
  width: 0%;
  transition: width 0.4s ease;
  border-radius: 12px;
}

.tx-counter, .tx-counter span {
  font-size: 0.9em;
  color: var(--an-tertiary-color, #ccc);
  margin-top: 4px;
}

.bonus-explanation {
  color: #999;
  font-size: 0.85em;
  margin-bottom: 10px;
}


.user-id-display {
  font-size: 0.9em;
  color: var(--secondary-color, #aaa);
  margin-top: 6px;
  background: var(--tertiary-color, #333);
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-block;
  font-family: monospace;
  letter-spacing: 0.5px;
}

#detail-type, #detail-name, #detail-products {
  font-weight: 600;
  margin-bottom: 10px;
}

#detail-type {
  margin-top: 10px;
}

.about-container {
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about-container h2 {
  font-size: 1.8rem;
  color: var(--primary-color, #00ffc3);
  margin-bottom: 10px;
}

.app-description {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.about-info-block {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 255, 195, 0.1);
  font-size: 0.95rem;
}

.about-info-block p {
  margin: 8px 0;
}

.about-info-block a {
  color: var(--primary-color, #66ccff);
  text-decoration: none;
}

.about-info-block a:hover {
  text-decoration: underline;
}

.budget-list-grid {
  font-size: 0.8em;
  background: #2e2e2e;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 16px 0;
  color: #eee;
}

.avatar-btn {
  width: 32px;               /* размер значка в хедере */
  height: 32px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;        /* круглая форма */
}

/* analytics.css */
#analytics-page canvas {
  flex: 0 0 60vh;   /* ← фиксируем и flex-basis, и максимальную высоту */
  height: auto !important;
  max-height: 60vh;
  /*margin: 0 0 28px;*/
}

#categoriesByDescendingChart {
  flex: 0 0 auto;   /* ← фиксируем и flex-basis, и максимальную высоту */
  height: auto !important;
  max-height: 70vh;
}

#analytics-page h4 {
  margin: 16px 0 10px;
}

#analytics-page #analytics-custom-select {
  margin: 8px auto;
}

.analytics-scroll {
  max-height: 80vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

.analytics-scroll > section {
  /* …ваши старые правила… */
  position: relative;          /* ← добавили */
}

.analytics-scroll::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 12px;
  box-shadow: 0 0 10px #2be82a;
}

.analytics-scroll::-webkit-scrollbar {
  width: 3px;
}

.analytics-scroll::-webkit-scrollbar-track {
  background: transparent;
}


#export-import-page canvas {
  flex: 0 0 35vh;   /* ← фиксируем и flex-basis, и максимальную высоту */
  height: 35vh !important;
  max-height: 35vh;
}

.hr-spacing {
  margin: 20px 0;
  border-color: var(--dark-color);
  border-radius: var(--spacing-lg);
}

.settings-nav-list button {
  position: relative;
  display: flex;
  justify-content: space-between;   /* текст слева, стрелка справа */
  align-items: center;
  width: 100%;
  /*padding: 12px 18px;*/
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s;
}

.settings-nav-list button:hover {
  background: #3a3a3a;
}

/* стрелочка */
.settings-nav-list button::after {
  content: '›';                    /* можно заменить на ➡️ или → */
  font-size: 1.5em;
  line-height: 1;
  margin-left: 12px;
  color: inherit;
  transform: translateY(1px);      /* лёгкое выравнивание по оптике */
}

/* Transaction-detail: товары */
.detail-products-list{
  margin-top: 6px;
}

.detail-product-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;          /* чуть воздуха между колонками */
  line-height: 1.25;
}

.product-title{
  flex: 1 1 60%;
  word-break: break-word;   /* длинные названия переносятся */
}

.product-meta{
  flex: 0 0 auto;
  white-space: nowrap;      /* не переносим "n × цена" */
  text-align: right;
}

/* ===== FAQ section ============================================== */
#faq-container {
  flex: 1 1 auto;
  max-height: 80vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  padding-right: 8px; /* небольшой отступ для скроллбара */
  margin: 10px 0;
}

.faq-item {
  margin: 10px 0;
  border: 1px solid transparent;               /* для анимации бордера */
  border-radius: 12px;
  background: linear-gradient(135deg, #1b1b1d 0%, #25252a 100%);
  overflow: hidden;                            /* прячет анимацию summary */
  transition: border-color .25s ease,
  background   .25s ease;
}

.faq-item[open] {
  border-color: var(--primary-color, #2be82a); /* подсветка открытого */
  background: linear-gradient(135deg, #202024 0%, #2c2c32 100%);
}

/* --------- Заголовок -------------------------------------------- */
.faq-item summary {
  list-style: none;            /* убираем стандартный треугольник */
  padding: 12px 16px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
  color: #fff;
}

.faq-item summary::marker { content: ''; }     /* Safari fallback */
.faq-item summary::-webkit-details-marker { display: none; }

/* кастомный треугольник */
.faq-item summary::after {
  content: '▸';
  font-size: 1rem;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .25s ease;
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}

/* --------- Текст ответа ----------------------------------------- */
.faq-item p {
  padding: 0 16px 14px;
  line-height: 1.45;
  color: #c5c6ce;
  animation: fadeIn .25s ease;
  font-size: 0.95rem;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#faq-container::-webkit-scrollbar {
  width: 3px;
}

#faq-container::-webkit-scrollbar-thumb {
  background: var(--primary-color, #2be82a);
  border-radius: 12px;
}

#faq-container::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================== */
/* 1) Контейнер                */
/* =========================== */
.tweak-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  pointer-events: none;
}

.tweak-container.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* =========================== */
/* 2) Твик                     */
/* =========================== */
.tweak {
  width: 90vw;                   /* теперь 90% ширины окна */
  max-width: 600px;              /* но не шире 600px */
  margin: 0 auto;

  padding: 16px 20px;
  background: linear-gradient(135deg, #1f1f1f, #2c2c2c);
  color: #f8f8f8;

  font-family: "Monsterat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;

  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  white-space: normal;
  word-break: break-word;

  opacity: 0;
  transform: translateY(-20px);
  animation: tweak-slide-in 0.3s ease-out forwards;

  pointer-events: auto;
  position: relative;
  align-items: center;
}


/* =========================== */
/* 3) Цветовые вариации        */
/* =========================== */
.tweak.success {
  background: linear-gradient(135deg, #198754, #28a745);
}

.tweak.error {
  background: linear-gradient(135deg, #b02a37, #dc3545);
}

/* =========================== */
/* 4) Анимации                 */
/* =========================== */
@keyframes tweak-slide-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tweak-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* =========================== */
/* 5) Кнопка закрытия          */
/* =========================== */
.tweak-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.tweak-close:hover {
  opacity: 1;
}


.chip-time-note {
  font-size: 0.8rem;
}

.category-select-button:focus{
  outline:2px solid var(--primary-color);
}

/* Контейнер с ачивками */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px;
  max-height: 75vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

.achievements-summary {
  padding: 10px 16px 3px;
}

/* Карточка ачивки */
.achievement {
  background: #1e1e1e;
  color: #888;
  border: 2px solid #444;
  border-radius: var(--spacing-md);
  padding: 16px 5px;
  text-align: center;
  font-size: 1em;
  font-family: 'Monsterat', sans-serif;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
}

/* Разблокированная */
.achievement.unlocked {
  background: linear-gradient(145deg, var(--primary-color) 0%, var(--income-color) 100%);
  color: #fff;
  font-weight: bold;
  /*border-color: #26cc1d;*/
  border: none;
  box-shadow: 0 0 5px var(--primary-color);
  transform: scale(1.02);
}

/* Заблокированная */
.achievement.locked {
  filter: grayscale(100%) blur(0.3px);
  opacity: 0.6;
}

/* Hover эффект */
.achievement:hover {
  transform: scale(1.03);
  box-shadow: 0 0 10px #ffffff22;
}

/* Эмоджи-иконка (если добавишь отдельно) */
.achievement span.emoji {
  display: block;
  font-size: 2em;
  margin-bottom: 6px;
}

/* Название ачивки */
.achievement span {
  display: block;
  font-size: 0.95em;
  line-height: 1.3;
}

.achievement {
  position: relative;
  display: inline-block;
  cursor: pointer;
  max-width: 100%;
}

.achievement::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  max-width: 240px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 9999; /* поверх всего */
}

/* Показываем при наведении или тапе */
.achievement:hover::after,
.achievement:active::after {
  opacity: 1;
}

.progress-container .progress-bar {
  background: #2e2e2e;
}

#sw-update-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #222;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 16px;
  z-index: 1000;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#sw-update-banner.show {
  transform: translateY(0%);
  opacity: 1;
}

#sw-update-banner.hidden {
  opacity: 0;
}

.load-more-achievements {
  margin-top: 0;
  display: block;
  padding: 16px;
  font-size: 15px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: var(--spacing-md);
  cursor: pointer;
  transition: background 0.2s;
}
.load-more-achievements:hover {
  background-color: #555;
}