<template>
  <Toast/>
  <LoadingView v-if="loading"/>

  <div v-else class="px-4 bg-gray-100 h-full ">
    <div v-if="updateLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
      <ProgressSpinner
          v-if="updateLoading"
          class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50"
          style="width: 50px; height: 50px;"
          strokeWidth="8"
          fill="transparent"
          animationDuration=".5s"
          aria-label="Custom ProgressSpinner"
      />
    </div>
    <div :class="!updateLoading ? '' : 'h-fit bg-white opacity-50 z-0 '" class=" flex flex-col gap-3">
      <div class="flex flex-col ">
        <!--        {{ budget }}-->
        <h2 class="text-4xl  font-bold">Бюджет {{ budget.name }} </h2>
        <!--        <div class="flex flex-row gap-2 text-xl">{{ formatDate(budget.dateFrom) }} - -->
        <!--          {{ formatDate(budget.dateTo) }}-->
        <!--        </div>  -->
      </div>
      <div class="flex flex-col gap-2">
        <!-- Аналитика и плановые доходы/расходы -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start ">
          <div class="flex flex-col gap-4">
            <!-- Блок Аналитики (25%) -->
            <div
                class="bg-white p-4 shadow-lg rounded-lg flex flex-col gap-4 items-start ">
              <h3 class="text-xl font-bold">Аналитика</h3>

              <SelectButton v-model="selectedChart" :options="modes" optionLabel="label" optionIcon="icon">
                <template #option="slotProps">
                  <i :class="slotProps.option.icon"></i>
                </template>
              </SelectButton>
              <Chart v-if="selectedChart.value=='bar'" type="bar" :data="incomeExpenseChartData"
                     :options="incomeExpenseChartOptions" class="!w-full"
                     style="width: 100%"/>

              <Chart v-if="selectedChart.value=='pie'" type="pie" :data="pieChartData" :options="pieChartOptions"
                     class="chart "/>


              <div class="flex gap-5 items-center  justify-items-center w-full ">
                <div class="w-full">
                  <button class="grid grid-cols-2 gap-5 items-center w-full" @click="detailedShowed = !detailedShowed">
                    <div class="flex flex-col items-center font-bold ">
                      <h4 class="text-lg font-bold">Поступления</h4>
                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                        +{{ formatAmount(totalIncomes) }}
                        ₽
                      </div>
                      <!--              <p>Total Incomes</p>-->
                    </div>
                    <div class="flex flex-col items-center ">
                      <h4 class="text-lg font-bold ">Расходы</h4>
                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                        -{{ formatAmount(totalExpenses) }}
                        ₽
                      </div>
                    </div>
                  </button>
                  <div class="grid grid-cols-2 !gap-1 mt-4" :class="detailedShowed ? 'block' : 'hidden'">
                    <div class="flex flex-col items-center font-bold ">
                      <p class="font-light ">в первый период</p>
                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner text-center  w-full ">
                        +{{ formatAmount(incomesByPeriod[0]) }} ₽
                      </div>
                    </div>
                    <div class="flex flex-col  items-center">
                      <p class="font-light ">в первый период</p>
                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner text-center  w-full ">
                        -{{ formatAmount(expensesByPeriod[0]) }} ₽
                      </div>
                    </div>
                    <div class="flex flex-col  items-center">
                      <p class="font-light ">во второй период</p>
                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner text-center   w-full ">
                        +{{ formatAmount(incomesByPeriod[1]) }} ₽
                      </div>

                    </div>
                    <div class="flex flex-col  items-center">
                      <p class="font-light ">во второй период</p>
                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner text-center   w-full ">
                        -{{ formatAmount(expensesByPeriod[1]) }} ₽
                      </div>
                    </div>

                  </div>
                </div>

              </div>
              <div class="grid gap-5 items-center  justify-items-center w-full">
                <div class="w-full">
                  <button class="grid grid-cols-3 justify-between  gap-5 items-center w-full"
                          @click="detailedShowed = !detailedShowed">
                    <div class="flex flex-col items-center">
                      <h4 class="text-lg">💳 Долги</h4>
                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                        {{ loansRatio.toFixed(0) }} %
                      </div>
                      <!--              <p>Total Incomes</p>-->
                    </div>
                    <div class="flex flex-col items-center ">
                      <span class="text-base">💰Сбережения</span>
                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                        {{ savingRatio.toFixed(0) }} %
                      </div>
                    </div>
                    <div class="flex flex-col items-center ">
                      <h4 class="text-sm">🍎 Ежедневные</h4>
                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                        {{ dailyRatio.toFixed(0) }} %
                      </div>
                    </div>
                  </button>
                  <div class="grid grid-cols-2 !gap-1 mt-4" :class="detailedShowed ? 'block' : 'hidden'">
                    <div v-for="categorySum in transactionCategoriesSums" class="flex flex-col items-center font-bold ">
                      <p class="font-light ">{{ categorySum.category.icon }} {{ categorySum.category.name }}</p>
                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner text-center  w-full ">
                        {{ formatAmount(categorySum.sum) }} ₽
                      </div>
                    </div>
                  </div>
                </div>

              </div>
              <ProgressBar :value="value" class="mt-2 col-span-2" style="height: 1rem !important;"></ProgressBar>

            </div>
            <div class=" h-full  overflow-y-auto gap-4 flex-col row-span-6  hidden lg:flex">
              <div class="flex flex-row ">
                <h3 class="text-2xl font-bold">Транзакции</h3>
              </div>
              <div class=" flex gap-2 overflow-x-auto ">

                <button v-for="categorySum in transactionCategoriesSums"
                        class="rounded-xl border p-1 bg-white border-gray-300 mb-2 min-w-fit px-2">
                  <p> <span class="text-sm font-bold">{{ categorySum.category.name }}</span>: {{ categorySum.sum }} ₽</p>

                </button>
              </div>
              <div class="grid  grid-cols-1 gap-4 max-h-tlist overflow-y-auto pe-2">
                <BudgetTransactionView v-for="transaction in transactions" :key="transaction.id"
                                       :transaction="transaction"
                                       :is-list="true" class=""
                />
              </div>
            </div>

          </div>

          <div class="grid grid-cols-1 gap-4 row-span-3">
            <div class="card p-4 shadow-lg rounded-lg col-span-1  h-fit">
              <!-- Планируемые доходы -->
              <div>
                <div class="flex flex-row gap-4 items-center">
                  <h3 class="text-xl font-bold text-green-500 mb-4 ">Плановые поступления</h3>
                  <!--                  <Button icon="pi pi-plus" rounded outlined size="small"/>-->
                </div>
                <div class="grid grid-cols-2 mb-2">
                  <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                    {{ formatAmount(totalIncomes) }}
                    ₽
                  </div>
                  <div class="font-bold bg-gray-100  p-1 rounded-lg box-shadow-inner w-full text-center">
                    {{ formatAmount(totalIncomeLeftToGet) }}
                    ₽
                  </div>
                </div>
                <ul class="space-y-2">
                  <!--                  {{ plannedIncomes }}-->
                  <BudgetTransactionView v-for="transaction in plannedIncomes" :transaction="transaction"
                                         :is-list="false" @transaction-checked="fetchBudgetTransactions"
                                         @transaction-updated="updateTransactions"/>

                </ul>

              </div>
            </div>
            <div class="card p-4 shadow-lg rounded-lg col-span-1  h-fit">
              <!-- Планируемые расходы -->
              <div class>
                <h3 class="text-xl font-bold text-red-500 mb-4">Плановые расходы</h3>
                <div class="grid grid-cols-2 mb-2">
                  <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                    {{ formatAmount(totalPlannedExpenses) }}
                    ₽
                  </div>
                  <div class="font-bold bg-gray-100  p-1 rounded-lg box-shadow-inner w-full text-center">
                    {{ formatAmount(totalExpenseLeftToSpend) }}
                    ₽
                  </div>
                </div>
                <ul class="space-y-2">

                  <BudgetTransactionView v-for="transaction in plannedExpenses" :transaction="transaction"
                                         :is-list="false" @transaction-checked="fetchBudgetTransactions"
                                         @transaction-updated="updateTransactions"/>
                </ul>
              </div>
            </div>
          </div>

          <div class="row-span-1 h-fit">
            <h3 class="text-2xl font-bold ">Категории</h3>
            <div class="grid grid-cols-1  gap-4">
              <!--              {{categories.filter(cat => cat.category.id==35)}}-->
              <BudgetCategoryView v-for="category in categories" :key="category.id"
                                  :category="category" :budget-id="budget.id"
                                  @category-updated="updateBudgetCategory"
                                  class="p-4 shadow-lg rounded-lg bg-white flex justify-between items-center"/>

            </div>
          </div>
          <div class=" h-full  overflow-y-auto gap-4 flex-col row-span-6 lg:hidden ">
            <div class="flex flex-row ">
              <h3 class="text-2xl font-bold">Транзакций</h3>
            </div>
            <div class=" flex gap-2">
              <button v-for="categorySum in transactionCategoriesSums"
                      class="rounded-xl border p-1 bg-white border-gray-300 mb-2 min-w-fit px-2">
                <p> <span class="text-sm font-bold">{{ categorySum.category.name }}</span>: {{ categorySum.sum }} ₽</p>

              </button>
            </div>
            <div class="grid  grid-cols-1 gap-4 max-h-tlist overflow-y-auto pe-2">
              <BudgetTransactionView v-for="transaction in transactions" :key="transaction.id"
                                     :transaction="transaction"
                                     :is-list="true" class=""
              />
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import {computed, onMounted, ref} from 'vue';
import Chart from 'primevue/chart';
import BudgetTransactionView from "@/components/budgets/BudgetTransactionView.vue";
import {
  getBudgetCategories,
  getBudgetInfo,
  getBudgetTransactions,
  updateBudgetCategoryRequest
} from "@/services/budgetsService";
import {Budget, BudgetCategory, BudgetInfo} from "@/models/Budget";
import {useRoute} from "vue-router";
import {formatAmount} from "@/utils/utils";
import ProgressBar from "primevue/progressbar";
import ProgressSpinner from "primevue/progressspinner";
import BudgetCategoryView from "@/components/budgets/BudgetCategoryView.vue";
import {Transaction} from "@/models/Transaction";
import Toast from "primevue/toast";
import Button from "primevue/button";
import LoadingView from "@/components/LoadingView.vue";
import ChartDataLabels from 'chartjs-plugin-datalabels';
import {Chart as ChartJS} from 'chart.js/auto';
import SelectButton from "primevue/selectbutton";

// Зарегистрируем плагин
ChartJS.register(ChartDataLabels);


const loading = ref(true);
const updateLoading = ref(false);
const route = useRoute()
const detailedShowed = ref(false);
const selectedChart = ref({"label": "bar", "icon": "pi pi-chart-bar", "value": "bar"});
const modes = [
  {label: 'bar', icon: 'pi pi-chart-bar', value: 'bar'},
  {label: 'pie', icon: 'pi pi-chart-pie', value: 'pie'}
];


const value = ref(50)

const leftForUnplanned = ref(0)


const budget = ref<Budget>()
const plannedIncomes = ref<Transaction[]>([])
const totalIncomes = computed(() => {
  let totalIncome = 0;
  plannedIncomes.value.forEach((i) => {
    totalIncome += i.amount
  })
  return totalIncome
})
const totalIncomeLeftToGet = computed(() => {
  let totalIncomeLeftToGet = 0;
  plannedIncomes.value.forEach(i => {
    if (!i.isDone) {
      totalIncomeLeftToGet += i.amount
    }
  })
  return totalIncomeLeftToGet
})

const totalLoans = computed(() => {
  let value = 0
  categories.value.filter((cat) => cat.category.id == 29).forEach(cat => {
    value += cat.currentLimit
  })
  return value
})

const loansRatio = computed(() => {

  return totalLoans.value / totalExpenses.value * 100
})


const savingRatio = computed(() => {

  return totalSaving.value / totalExpenses.value * 100
})

const totalSaving = computed(() => {
  let value = 0
  categories.value.filter((cat) => cat.category.id == 35).forEach(cat => {
    value += cat.currentLimit
  })
  return value
})

//

const dailyRatio = computed(() => {
  const value = (totalExpenses.value - totalLoans.value - totalSaving.value) / totalExpenses.value

  return value * 100
})
const fetchPlannedIncomes = async () => {
  plannedIncomes.value = await getBudgetTransactions(route.params.id, 'PLANNED', 'INCOME')
}
const plannedExpenses = ref<Transaction[]>([])
const totalExpenses = computed(() => {
  let totalExpense = 0;
  categories.value.forEach((cat) => {
    let catValue = cat.currentLimit - cat.categoryPlannedLimit

    plannedExpenses.value.filter(t => t.category.id == cat.category.id).forEach((i) => {

      catValue += i.amount
    })

    totalExpense += catValue
  })

  return totalExpense
})


const totalPlannedExpenses = computed(() => {
  let expenses = 0
  plannedExpenses.value.forEach((t) => {
    expenses += t.amount
  })
  return expenses
})
const totalExpenseLeftToSpend = computed(() => {
  let totalExpenseLeftToSpend = 0;
  plannedExpenses.value.forEach(i => {
    if (!i.isDone) {
      totalExpenseLeftToSpend += i.amount
    }
  })
  return totalExpenseLeftToSpend
})
const fetchPlannedExpenses = async () => {
  plannedExpenses.value = await getBudgetTransactions(route.params.id, 'PLANNED', 'EXPENSE')
  updateLoading.value = false
}
const transactions = ref<Transaction[]>([])
const fetchBudgetTransactions = async () => {


  transactions.value = await getBudgetTransactions(route.params.id, 'INSTANT')
  updateLoading.value = false
}

const updateTransactions = async () => {

  await Promise.all([fetchPlannedIncomes(), fetchPlannedExpenses(), fetchBudgetCategories(),])
}

const categories = ref<BudgetCategory[]>([])
const fetchBudgetCategories = async () => {
  categories.value = await getBudgetCategories(route.params.id)
  categories.value = [...categories.value];
  updateLoading.value = false
}

const transactionCategoriesSums = computed(() => {
  // Используем reduce для создания массива сумм по категориям
  return transactions.value.reduce((acc, transaction) => {
    const category = transaction.category;

    // Проверяем, существует ли категория в аккумуляторе
    const existingCategory = acc.find(item => item.category.id === category.id);

    if (existingCategory) {
      // Если категория существует, добавляем сумму к текущей
      existingCategory.sum += transaction.amount;

    } else {
      // Если категории еще нет в аккумуляторе, добавляем ее
      acc.push({category: category, sum: transaction.amount});
    }

    return acc;
  }, []);
});


// const fetchBudgetTransactionCategoriesSums = async () => {
//
//   transactionCategoriesSums.value = await getBudgetCategoriesSums(route.params.id)
//   updateLoading.value = false
// }


const budgetInfo = ref<BudgetInfo>();
const fetchBudgetInfo = async () => {


  budget.value = await getBudgetInfo(route.params.id);
  updateLoading.value = false
}

const updateBudgetCategory = async (category) => {

  // loading.value = true
  await updateBudgetCategoryRequest(budget.value.id, category)

  // categories.value = await getBudgetCategories(route.params.id)

  // incomeExpenseChartData.value = {
  //   labels: ['10.10', '25.10'],
  //   datasets: [
  //     {
  //       label: 'Income',
  //       backgroundColor: ['#2E8B57'],
  //       data: budgetInfo.value?.chartData[0],
  //     },
  //     {
  //       label: 'Expense',
  //       backgroundColor: ['#B22222'],
  //       data: budgetInfo.value?.chartData[1],
  //     },
  //   ],
  // }
  // leftForUnplanned.value =
  //     budgetInfo.value.chartData[0][0] +
  //     budgetInfo.value.chartData[0][1] -
  //     budgetInfo.value.chartData[1][0] -
  //     budgetInfo.value.chartData[1][1]
  // // loading.value = false

}

const twentyFour = computed(() => {
  let twentyFour = new Date(budget.value?.dateFrom)
  twentyFour.setDate(24)
  return twentyFour
})

const incomesByPeriod = computed(() => {
  let incomesUntil25 = 0
  let incomesFrom25 = 0
  plannedIncomes.value.forEach((i) => {

    if (i.date <= budget.value?.dateFrom && i.date <= twentyFour.value) {
      incomesUntil25 += i.amount
    } else {
      incomesFrom25 += i.amount
    }
  })

  return [incomesUntil25, incomesFrom25]
})


const expensesByPeriod = computed(() => {
  let expensesUntil25 = 0
  let expensesFrom25 = 0
  plannedExpenses.value.forEach((i) => {

    if (i.date >= budget.value?.dateFrom && i.date <= twentyFour.value) {
      expensesUntil25 += i.amount
    } else {
      expensesFrom25 += i.amount
    }
  })
  categories.value.forEach((i) => {
    expensesUntil25 += (i.currentLimit - i.categoryPlannedLimit) / 2
    expensesFrom25 += (i.currentLimit - i.categoryPlannedLimit) / 2

  })

  return [expensesUntil25, expensesFrom25]
})

const pieChartData = computed(() => {

  let labels = []
  let values = []
  categories.value.forEach((i) => {
    labels.push(i.category.name)
    values.push(i.currentLimit / totalExpenses.value)
  })
  return {
    labels: labels,
    datasets: [
      {
        clip: {left: 100, top: false, right: 50, bottom: 0},
        radius: '100%',
        data: values,
        backgroundColor: [
          'rgba(6, 182, 212, 0.2)', 'rgba(249, 115, 22, 0.2)', 'rgba(50, 205, 50, 0.2)',
          'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)',
          'rgba(123, 239, 178, 0.2)', 'rgba(255, 105, 180, 0.2)', 'rgba(147, 112, 219, 0.2)',
          'rgba(60, 179, 113, 0.2)', 'rgba(100, 149, 237, 0.2)', 'rgba(220, 20, 60, 0.2)',
          'rgba(255, 140, 0, 0.2)', 'rgba(72, 61, 139, 0.2)', 'rgba(210, 105, 30, 0.2)',
          'rgba(106, 90, 205, 0.2)', 'rgba(199, 21, 133, 0.2)', 'rgba(32, 178, 170, 0.2)',
          'rgba(65, 105, 225, 0.2)', 'rgba(218, 165, 32, 0.2)', 'rgba(255, 127, 80, 0.2)',
          'rgba(46, 139, 87, 0.2)', 'rgba(139, 69, 19, 0.2)', 'rgba(75, 0, 130, 0.2)',
          'rgba(255, 69, 0, 0.2)', 'rgba(244, 164, 96, 0.2)'
        ],
        hoverBackgroundColor: [
          'rgba(6, 182, 212, 1)', 'rgba(249, 115, 22, 1)', 'rgba(50, 205, 50, 1)',
          'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)',
          'rgba(123, 239, 178, 1)', 'rgba(255, 105, 180, 1)', 'rgba(147, 112, 219, 1)',
          'rgba(60, 179, 113, 1)', 'rgba(100, 149, 237, 1)', 'rgba(220, 20, 60, 1)',
          'rgba(255, 140, 0, 1)', 'rgba(72, 61, 139, 1)', 'rgba(210, 105, 30, 1)',
          'rgba(106, 90, 205, 1)', 'rgba(199, 21, 133, 1)', 'rgba(32, 178, 170, 1)',
          'rgba(65, 105, 225, 1)', 'rgba(218, 165, 32, 1)', 'rgba(255, 127, 80, 1)',
          'rgba(46, 139, 87, 1)', 'rgba(139, 69, 19, 1)', 'rgba(75, 0, 130, 1)',
          'rgba(255, 69, 0, 1)', 'rgba(244, 164, 96, 1)'
        ]

      }
    ]
  };
})
const pieChartOptions = ref({
  layout: {
    padding: {
      left: 50, // Добавляем отступ слева
      right: 50 // Добавляем отступ справа
    }
  },
  plugins: {
    legend: {
      display: false // Отключаем легенду
    },
    datalabels: {
      anchor: 'end', // Позиция метки относительно данных
      align: 'top', // Выравнивание метки
      formatter: (value, context) => {
        const label = context.chart.data.labels[context.dataIndex];
        const percentage = (value * 100).toFixed(0);
        return percentage >= 2 ? `${label} ${percentage}%` : '';
      },
      color: 'black', // Цвет текста метки
      font: {
        size: 12 // Устанавливаем меньший размер шрифта
      }
    },
    tooltip: {
      enabled: true, // Включить tooltips
      callbacks: {
        title: function (tooltipItems) {
          return tooltipItems[0].dataset.label;
        },
        label: function (tooltipItems) {
          return Number(tooltipItems.formattedValue * 100).toFixed(0) + '%';
        }
      }
    }
  }
});


const incomeExpenseChartData = computed(() => {

  return {
    labels: ['до 25 ', 'с 25'],
    datasets: [
      {
        label: 'Пополнения',
        data: incomesByPeriod.value,
        backgroundColor: ['rgba(6, 182, 212, 0.2)', 'rgba(6, 182, 212, 0.2)'],
        borderColor: ['rgb(6, 182, 212)', 'rgb(6, 182, 212)'],
        borderWidth: 1
      },
      {
        label: 'Расходы',
        data: expensesByPeriod.value,
        backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(249, 115, 22, 0.2)'],
        borderColor: ['rgb(249, 115, 22)', 'rgb(249, 115, 22)'],
        borderWidth: 1
      }
    ]
  }
})
const incomeExpenseChartOptions = ref({

  plugins: {
    legend: {
      display: false // Отключаем легенду
    },
    datalabels: {
      anchor: 'end', // Позиция метки относительно данных
      align: 'top', // Выравнивание метки
      formatter: (value) => {
        // const label = context.chart.data.labels[context.dataIndex];

        return formatAmount(value) + '₽';
        // return percentage >= 2 ? `${percentage} ` : '';
      },
      color: 'black', // Цвет текста метки
      font: {
        size: 12 // Устанавливаем меньший размер шрифта
      }
    },
    tooltip: {
      enabled: true, // Включить tooltips
      callbacks: {
        title: function (tooltipItems) {
          return tooltipItems[0].dataset.label;
        },
        label: function (tooltipItems) {
          return formatAmount(tooltipItems.raw) + '₽';
        }
      }
    }
  }
});


onMounted(async () => {

  try {
    await Promise.all([
      fetchBudgetInfo(),
      // budget.value = await getBudgetInfo(route.params.id),
      fetchPlannedIncomes(),
      fetchPlannedExpenses(),
      fetchBudgetCategories(),
      fetchBudgetTransactions(),
    ]);
  } catch (error) {
    console.error('Error during fetching data:', error);
  } finally {
    loading.value = false
  }

  setTimeout(() => {

  }, 100)
});
</script>

<style scoped>
/* Добавляем стили для стилизации */
.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.grid {
  gap: 1rem;
}

.max-h-tlist {
  max-height: 1170px; /* Ограничение высоты списка */
}


.box-shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.3);
}

.chart {
  width: 70%;
}

</style>