@import url("fonts.css");

/* 🔹 Шапка сайта аватарка ✅✅✅*/
.header__img {
    display: block;
    width: 60px;
    height: 55px;
    object-fit: contain;
    margin-top: 10px;  /* Двигает логотип вниз (уменьшай для движения вверх) */
    margin-bottom: 12px;  /* Двигает логотип вверх */
    margin-left: -10px;  /* Двигает логотип вправо (уменьшай для движения влево) */
    margin-right: 10px;  /* Двигает логотип влево */
}


/* 🔹 Шапка сайта */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Увеличили высоту, чтобы элементы красиво смотрелись */
    background: #002e36;
    color: var(--text-color, #ffffff); /* Если переменная не найдена, будет белый цвет */
    z-index: 1000;
    padding: 10px 20px; /* Добавил побольше отступов */
    display: flex;
    align-items: center; /* Выравниваем элементы по центру */
    justify-content: space-between; /* Логотип слева, кнопки справа */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); /* Добавили тень, чтобы шапка выделялась */
}


/* 🔹 Улучшаем кнопку "Регистрация" */
.header .btn-warning {
    background-color: #ffc107; /* Яркий жёлтый */
    color: #000; /* Чёрный текст */
    font-weight: bold;
    border: none;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.header .btn-warning:hover {
    background-color: #e0a800; /* Темнее при наведении */
    color: white; /* Белый текст при наведении */
}

/* 🔹 ✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ */
/* 🔹 Основной стиль боковой панели */
.sidebar {
    display: flex; /* Используем flexbox */
    flex-direction: column; /* Элементы идут сверху вниз */
    justify-content: space-between; /* Основное меню - сверху, админские ссылки - внизу */
    height: calc(100vh - 50px); /* Уменьшаем высоту на 50px, чтобы не попадать под шапку */
    width: 70px; /* Фиксированная ширина панели */
    background-color: #002e36; /* Цвет фона */
    position: fixed; /* Фиксированное положение */
    top: 60px; /* Опускаем всю панель на 50px вниз */
    left: 0; /* Прижимаем к левому краю */
    padding-top: 0px; /* Отступ сверху */
    padding-bottom: 25px; /* Отступ снизу */
    z-index: 1030  !important; /* Поднимаем `sidebar`, чтобы `tooltip` не скрывался */

}

/* 🔹 Основные иконки меню */
.menu-container {
    list-style: none; /* Убираем маркеры списка */
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Распределяем пространство так, чтобы меню растягивалось */
}

/* 🔹 Общий стиль для пунктов меню и админ-ссылок */
.menu-container li,
.admin-links-container li {
    width: 100%; /* Элемент занимает всю ширину боковой панели */
    text-align: center; /* Выравниваем иконки по центру */
    padding: 15px 0; /* Отступ сверху и снизу для каждой иконки */
}

/* 🔹 Оформление ссылок (иконок) */
.sidebar a {
    display: flex; /* Используем flex-контейнер */
    flex-direction: column; /* Размещаем иконки вертикально */
    align-items: center; /* Центрируем элементы */
    justify-content: center; /* Выравниваем содержимое */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
    color: white; /* Белый цвет иконок */
    font-size: 28px; /* Размер иконок */
}

/* 🔹 Эффект при наведении */
.sidebar ul li:hover {
    background-color: #3d6066; /* Изменяем цвет фона при наведении */
}
.sidebar ul li.active {
    background-color: #3d6066;
}

/* 🔹 Контейнер для админ-ссылок */
.admin-links-container {
    list-style: none; /* Убираем маркеры списка */
    padding: 0;
    margin: 0;
}
/* 🔹 ОБЩИЕ НАСТРОЙКИ ДЛЯ ВСПЛЫВАЮЩИХ ОКОН */
.sidebar ul li {
    position: relative; /* НЕОБХОДИМО ДЛЯ ПРАВИЛЬНОГО РАСПОЛОЖЕНИЯ */
    z-index: 10; /* ЧТОБЫ ВСПЛЫВАЮЩИЕ ОКНА НЕ ПРЯТАЛИСЬ */
}

/* 🔹 ВСПЛЫВАЮЩИЙ ТЕКСТ */
.sidebar ul li::after {
    content: attr(data-tooltip); /* ПОЛУЧАЕМ ТЕКСТ ИЗ `data-tooltip` */
    position: absolute;
    left: 80px; /* СПРАВА ОТ ИКОНКИ */
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(0, 46, 54); /* ЧЁРНЫЙ ФОН (ТЁМНЕЕ) */
    color: white; /* БЕЛЫЙ ТЕКСТ */
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    text-transform: uppercase;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* БОЛЬШАЯ ТЕНЬ */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s, transform 0.1s;
    pointer-events: none;
    z-index: 99999 !important; /* Подсказки теперь ВСЕГДА сверху */
}

/* 🔹 ДОБАВЛЯЕМ СТРЕЛОЧКУ К ПОДСКАЗКЕ */
.sidebar ul li::before {
    content: "";
    position: absolute;
    left: 70px; /* ПРАВИЛЬНОЕ РАСПОЛОЖЕНИЕ */
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent rgba(0, 0, 0, 0.95) transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s, transform 0.1s;
    z-index: 99999 !important; /* Подсказки теперь ВСЕГДА сверху */
}

/* 🔹 ПОКАЗЫВАЕМ ВСПЛЫВАЮЩИЕ ОКНА ПРИ НАВЕДЕНИИ */
.sidebar ul li:hover::after,
.sidebar ul li:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(5px);
}


/* 🔹 ✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ */

/* 🔹 Сообщение (Flash) по центру */
.flash-message {
    position: fixed;        /* Закрепляем в окне */
    top: 20px;              /* Отступ от верхнего края */
    left: 50%;             /* Центрируем по горизонтали */
    transform: translateX(-50%); /* Смещаем наполовину ширины */
    background-color: #d4edda; /* Светло-зелёный фон */
    color: #155724;        /* Тёмно-зелёный текст */
    border: 1px solid #c3e6cb; /* Зелёный бордюр */
    padding: 12px 20px;    /* Внутренние отступы */
    border-radius: 8px;    /* Скруглённые углы */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
    font-weight: bold;     /* Жирный текст */
    opacity: 1;            /* Полностью видимо */
    transition: opacity 0.5s ease-in-out; /* Плавное исчезновение */
    z-index: 1050;         /* Выше контента */
}

.flash-message.hide {
    opacity: 0; /* Становится прозрачным (спрятано) */
    transition: opacity 0.5s ease-in-out; /* Плавное скрытие */
}

/* 🔹 Уведомление при добавлении/удалении */
.alert {
    top: -35px;                /* Сдвигаем чуть выше */
    left: 50%;                /* Центрируем по горизонтали */
    transform: translateX(-50%);  /* Смещаем наполовину ширины */
    display: inline-block;    /* Ширина по содержимому */
    max-width: 500px;         /* Максимальная ширина */
    margin: 10px auto;        /* Центрируем вертикально */
    padding: 10px 20px;       /* Внутренние отступы */
    font-size: 20px;          /* Размер текста */
    border-radius: 5px;       /* Скруглённые углы */
    text-align: center;       /* Текст по центру */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* Тень вокруг */
}
/* 🔹 ✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ */


/* Уменьшает верхний отступ где все названия Операции потоки итд*/
main {
    margin-top: -20px;  /* Уменьшает верхний отступ */
    padding: 0px;     /* Добавляет отступы внутри блока */
    max-width: 100%;   /* Убирает ограничение ширины */
    width: auto;       /* Убирает фиксированную ширину */
}
/* ----------------------------------------------------------------------------- */
/* Стили для карточки фильтр везде*/
.card {
    border-radius: 16px; /* Скругляет углы карточки */
    background-color: #f8f9fa; /* Устанавливает светлый фон для карточки */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Добавляет тень для карточки с прозрачностью */
    z-index: auto !important;  /* Убираем высокий z-index */
    position: static !important;  /* Отменяем относительное позиционирование */
}


/* ----------------------------------------------------------------------------- */
/* 🔹 Контейнер для сообщения о неавторизованном пользователе */
.auth-container {
    background: white;  /* Фон контейнера – белый */
    padding: 40px;  /* Внутренние отступы (пространство внутри блока) */
    border-radius: 12px;  /* Закругленные углы */
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);  /* Тень для объемности */
    text-align: center;  /* Выравнивание текста по центру */
    width: 350px;  /* Ширина блока */
    margin: auto;  /* Центрирование по горизонтали */
    margin-top: 10%;  /* Отступ сверху (приближение к центру экрана) */
    animation: fadeIn 1s ease-in-out;  /* Анимация появления */
}

/* 🔹 Кнопка авторизации */
.auth-button {
    background: #3d6066;  /* Синий фон кнопки */
    color: white;  /* Белый текст */
    border: none;  /* Без границ */
    padding: 12px 20px;  /* Внутренние отступы кнопки */
    border-radius: 6px;  /* Закругление углов */
    font-size: 18px;  /* Размер текста */
    transition: 0.3s;  /* Плавные эффекты при наведении */
    text-decoration: none;  /* Убираем подчеркивание */
    display: inline-block;  /* Корректное отображение */
}

/* 🔹 Эффект при наведении на кнопку */
.auth-button:hover {
    background: #002e36;  /* Темнее синий цвет при наведении */
    transform: scale(1.05);  /* Легкое увеличение кнопки */
}



/* ----------------------------------------------------------------------------- */