/* Общие стили с использованием шрифта Montserrat */
body {
  font-family: 'Montserrat', sans-serif;
  background: #f0f2f5;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  background: linear-gradient(135deg, #74ebd5, #acb6e5);
}

/* Основной контейнер */
.container {
  display: flex;
  width: 90%;

  margin: 20px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* Левая панель с балансами */
.left-panel {
  width: 25%;
  background: #007bff;
  color: #fff;
  padding: 20px;
  overflow-y: auto;
}

.left-panel h3 {
  margin-top: 0;
  font-size: 1.5em;
}

.left-panel ul {
  list-style: none;
  padding: 0;
}

.left-panel li {
  margin-bottom: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.left-panel li:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.3);
}
.status-text {
  cursor: pointer;         /* Змінює курсор на "руку" */
  transition: color 0.3s;   /* Плавна зміна кольору */
}

.status-text:hover {
  color: rgb(88, 88, 88);             /* Зміна кольору при наведенні */
  text-decoration: underline; /* Підкреслення тексту */
}


/* Стили для плитки с негативным балансом */
.left-panel li.negative-balance {
  background-color: #f8d7da;
  color: #721c24;
}


#category-description {
  white-space: pre-line;
}


@media (max-width: 768px) {
  .arrow {
    font-size: 24px; /* Увеличенный размер */
    color: #333; /* Более контрастный цвет */
    display: inline-block;
  }
}

/* Цветовая маркировка строк по статусу */
.status-pending {
  background-color: #fc2020a0;  /* Светло-желтый для "В очікуванні" */
}

.status-paid {
  background-color:  #a4d18a;  /* Светло-зеленый для "Оплачено" */
}

.status-canceled {
  background-color: #ff0000d0;  /* Светло-красный для "Відмінено" */
}

.status-processed {
  background-color: #a4d18a;  /* Светло-голубой для "Проведено" */
}

.status-confirm {
  background-color: #fea601;  /* Светло-серый для "Підтверджено" */
}


/* Стиль для стрелки */
.arrow {
  display: inline-block;
  transition: transform 0.5s ease;
  cursor: pointer;
}

/* При развёрнутом состоянии стрелка поворачивается */
.arrow.rotated {
  transform: rotate(180deg);
}

/* Скрытый контейнер с формой */
#transaction-form-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
}

/* Класс expanded задаёт достаточную высоту для формы */
#transaction-form-container.expanded {
  max-height: 900px; /* Значение достаточно большое, чтобы вместить содержимое */
}


/* Правая панель с формой и транзакциями */
.right-panel {
  width: 75%;
  padding: 20px;
}

.right-panel h3 {
  margin-top: 0;
  font-size: 1.5em;
}

/* Стили для формы создания транзакции */
form {
  margin-bottom: 20px;
}

form input,
form select {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body input,
body select {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}


.search-container input {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}





.modal {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}



form button {
  width: 100%;
  background: #007bff;
  color: #fff;
  font-size: 1em;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  font-family: 'Montserrat', sans-serif;
}

form button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}


.table-wrapper {
  width: 100%;
  overflow-x: auto;  /* Дозволяє горизонтальну прокрутку */
  margin-bottom: 20px; /* Відступ внизу */
  -webkit-overflow-scrolling: touch; /* Для плавної прокрутки на iOS */
  overflow-y: hidden; /* Вимикає вертикальну прокрутку для цього контейнера */
}

/* Таблиця повинна бути більше по ширині для того, щоб з'явився ползунок */
table {
  width: 100%;
  min-width: 1200px; /* Задаємо мінімальну ширину таблиці для того, щоб ползунок з'явився */
  border-collapse: collapse;
}

/* Стилізація ползунка прокрутки */
table::-webkit-scrollbar {
  height: 8px;  /* Висота ползунка */
}

table::-webkit-scrollbar-thumb {
  background-color: #888;  /* Колір ползунка */
  border-radius: 4px;
}

table::-webkit-scrollbar-thumb:hover {
  background-color: #555;  /* Колір ползунка при наведенні */
}



th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

th {
  background: #f8f8f8;
}

/* Стили для кнопок в таблице */
button {
  margin-right: 5px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  background-color: #ffffffea;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 0.5px solid #6e6e6e;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ffffff;
  border-radius: 16px;
  box-sizing: border-box;
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}



.button1 {
  margin-right: 5px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  background-color: #2e43ffea;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 0.5px solid #6e6e6e;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #939393;
  border-radius: 16px;
  box-sizing: border-box;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

.button1:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}


/* Зменшення ширини стовпця "Опис" */
td:nth-child(7), th:nth-child(7) { 
  max-width: 200px; /* Обмежуємо ширину стовпця опису */
  overflow: hidden; 
  text-overflow: ellipsis; /* Для тексту, який не вміщується */
  white-space: nowrap; /* Перешкоджає переносу тексту на новий рядок */
}

/* Адаптивні стилі для мобільних пристроїв */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    width: 100%; /* Ширина контейнера на мобільних пристроях */
  }
  
  .left-panel, .right-panel {
    width: 100%; /* Використовуємо всю ширину для панелей */
    padding: 10px;
  }

  /* Зменшення розміру шрифтів для таблиці та форми на мобільних пристроях */
  table, th, td {
    font-size: 0.85em;
  }

  form input, form select, form button {
    font-size: 0.85em; /* Зменшуємо розмір тексту в формах */
  }

  /* Додаємо горизонтальну прокрутку для таблиці */
  .table-wrapper {
    overflow-x: auto; /* Дозволяє горизонтальну прокрутку для таблиці */
    -webkit-overflow-scrolling: touch; /* Для плавної прокрутки на iOS */
  }

  /* Зменшення ширини стовпців таблиці для мобільних пристроїв */
  th, td {
    padding: 8px;
    text-align: left;
  }

  th:nth-child(1), td:nth-child(1), /* Дата */
  th:nth-child(2), td:nth-child(2), /* Компанія */
  th:nth-child(3), td:nth-child(3), /* Каса */
  th:nth-child(4), td:nth-child(4), /* Автор */
  th:nth-child(5), td:nth-child(5), /* Сума */
  th:nth-child(6), td:nth-child(6), /* Категорія */
  th:nth-child(7), td:nth-child(7) /* Опис */ {
    font-size: 0.9em;
  }

  /* Зменшуємо розмір кнопок на мобільних пристроях */
  button, .button1 {
    font-size: 0.9em;
    padding: 8px 14px;
  }
}


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

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .left-panel,
  .right-panel {
    width: 100%;
  }
  
  table, th, td {
    font-size: 0.9em;
  }
  
  form input, form select, form button {
    font-size: 0.9em;
  }
}