/* Стиль для бокового меню */
.sidebar {
    position: fixed;
    top: 0; /* размещение сверху */
    left: 0;
    width: 80px; /* ширина по умолчанию */
    height: 100%; /* полная высота страницы */
    background-color: #f8f9fa;
    padding-top: 20px;
    color: #333;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 100;
    flex: 0 0 250px; /* по умолчанию */
    transition: width 0.3s ease;
    overflow-x: hidden;
}

.sidebar-logo { /* Сначала стили для логотипа (в развернутом виде) */
    display: block;
    width: 80%;
    max-width: 200px;
    margin: 20px auto;
    border-radius: 5px;
}

.sidebar.collapsed .sidebar-logo { /* Затем стили для свернутого меню */
    display: block;
    width: 85%;
    max-width: none;
    margin: 10px auto;
    /*background-color: #f8f9fa; !* Убрать или закомментировать *!*/
}

/* Состояние свернутого меню */
.sidebar.collapsed {
    width: 60px; /* меньшая ширина при свертывании */
}

/* Ссылки внутри меню */
.sidebar a {
    padding: 12px 20px;
    display: block;
    align-items: center;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border-radius: 8px;
}

/* При наведении на ссылки */
.sidebar a:hover {
    background-color: #e9ecef;
}

/* Иконки внутри меню */
.sidebar i {
    font-size: 20px;
    min-width: 20px;
}

/* Активные ссылки */
.sidebar .nav-link.active {
    background-color: #007bff;
    color: white;
    border-radius: 8px;
    display: block;
    width: 100%;
}

/* Столбец "Действие" для таблиц */
.actions-column {
    width: 80px; /* Задайте желаемую ширину в пикселях */
    text-align: center; /* По желанию: центрируйте содержимое */
}

/* Обеспечивающая плавность переходов */
.content {
    transition: margin-left 0.3s;
    padding: 20px;
}

.chart-container {
    width: 80%;
    margin: auto;
    position: relative;
    height: 400px;
}

.table-container {
    width: 75%;  /* Та же ширина, что и у графиков */
    margin: auto; /* Центрирование контейнера */
}

.table-responsive {
    width: 100%;  /* Таблица занимает всю ширину контейнера */
    overflow-x: auto;
}

h1 {
    color: #007bff;
    margin-bottom: 20px;
    text-align: center; /* Добавляем выравнивание по центру */
}

/* Скрыть первый столбец таблицы */
#id-table th:nth-child(1),
#id-table td:nth-child(1) {
display: none;
}