/* 1. Возвращаем темный мятный фон и анимацию навигации */
.animated-gradient {
    background: linear-gradient(-45deg, 
        rgba(10, 25, 47, 0.9), 
        rgba(0, 150, 136, 0.3), 
        rgba(10, 30, 50, 0.9)
    ) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite !important;
    backdrop-filter: blur(15px) saturate(160%);
    -webkit-backdrop-filter: blur(15px) saturate(160%);
    border-bottom: 1px solid rgba(0, 245, 212, 0.25); /* Мятная граница */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.animated-gradient .navbar-brand img {
    filter: drop-shadow(0 0 7px rgba(86, 207, 255, 0.48));
}

/* 2. БУКВЫ: Кремовый и Ярко-белый (как вы просили) */
.animated-gradient .nav-link {
    color: #FAF9F6 !important; /* Ярко-белый с оттенком крема */
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 253, 208, 0.3);
}

.animated-gradient .nav-link:hover {
    color: #FFFDD0 !important; /* Насыщенный кремовый при наведении */
    background-color: rgba(0, 245, 212, 0.1);
    transform: translateY(-2px);
}

h1, h3, h5, h6, .card-title, .card-title a {
    color: #FFFFF0 !important; /* Слоновая кость (Ivory) */
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

h2 {
    color: #FAF9F6 !important;
    border-left: 4px solid #00F5D4; /* Оставляем мятную черту для стиля */
}

/* 3. Кнопки: Кремовый текст на мятном фоне */
.animated-gradient .btn-outline-primary {
    color: #FFFDD0 !important;
    border-color: #00F5D4 !important;
}

.animated-gradient .btn-outline-primary:hover {
    background: #00F5D4 !important;
    color: #0a192f !important;
    box-shadow: 0 0 20px rgba(0, 245, 212, 0.5);
}

/* 4. Возвращаем оригинальный фон BODY */
body {
    background-color: #0a192f;
    background: radial-gradient(circle at top, #002b2d 0%, #0a192f 100%) no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* 5. Карточки: Возвращаем анимацию, блик и подъем */
/* 5. Карточки: Исправленный темный фон, анимация и подъем */
.card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    z-index: 1;
    
    /* ВОЗВРАЩАЕМ ТЕМНЫЙ ФОН */
    background: rgba(255, 255, 255, 0.03) !important; 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 245, 212, 0.15) !important;
    border-radius: 15px !important;
}

/* Бегущий блик для карточки */
.card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -150%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        to right, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent
    );
    transform: rotate(25deg);
    transition: 0s;
    z-index: 2;
    pointer-events: none;
}

/* Эффекты при наведении на карточку */
.card:hover {
    transform: translateY(-8px) scale(1.02);
    /* При наведении делаем фон чуть плотнее, но не белым */
    background: rgba(255, 255, 255, 0.07) !important; 
    border-color: rgba(0, 245, 212, 0.5) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
}

/* Запуск блика */
.card:hover::before {
    left: 150%;
    transition: 0.8s ease-in-out;
}

/* Усиливаем свечение кремового заголовка внутри карточки при наведении */
.card:hover .card-title {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(255, 253, 208, 0.5);
}

/* Принудительно красим параграфы, списки и мелкий текст в карточках */
.card p, 
.card span, 
.card div, 
.card li, 
.card small {
    color: #FAF9F6 !important; 
    text-shadow: 0 0 5px rgba(255, 253, 208, 0.1);
}

/* Заголовки карточек (Кремовый поярче) */
.card-title, 
.card-title a, 
.card-header {
    color: #FFFDD0 !important;
    text-shadow: 0 0 10px rgba(255, 253, 208, 0.2);
}

/* Ссылки внутри карточек (Кремовый с подчеркиванием) */
.card a:not(.btn) {
    color: #FFFDD0 !important;
    text-decoration: underline rgba(255, 253, 208, 0.3);
}

.card a:not(.btn):hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 6. Таблицы (на случай, если они внутри карточек) */
.table {
    color: #FAF9F6 !important;
}

/* 7. Стили для основного контента (Main) */
main .container {
    color: #FAF9F6 !important; /* Ярко-кремовый для основного текста */
}

main h1 {
    color: #FFFFF0 !important; /* Слоновая кость для заголовка */
    text-shadow: 0 0 15px rgba(255, 253, 208, 0.2);
    margin-bottom: 1.5rem;
}

main p {
    line-height: 1.6;
    font-size: 1.1rem;
    color: #FAF9F6 !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Тень для глубины на темном фоне */
}

/* Стилизация ссылок в тексте (например, на moex.com) */
main a {
    color: #FFFDD0 !important;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 245, 212, 0.4); /* Мятный пунктир в стиле фона */
    transition: 0.3s;
}

main a:hover {
    color: #00F5D4 !important; /* Вспышка мятным при наведении */
    border-bottom-style: solid;
}

/* 8. Футер (БКС 4ever) */
footer {
    border-top: 1px solid rgba(0, 245, 212, 0.2) !important; /* Мятная разделительная линия */
    background: rgba(10, 25, 47, 0.8);
    color: #FFFDD0 !important;
}

footer p {
    margin: 0;
    font-weight: 500;
    letter-spacing: 1px;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animated-gradient .nav-link {
    position: relative;
    overflow: hidden;
    /* Убедимся, что текст выше блика */
    z-index: 1;
}

.animated-gradient .nav-link::before {
    content: "";
    position: absolute;
    top: 0; 
    left: -150%; /* Спрятан слева */
    width: 50%; 
    height: 100%;
    /* Белый полупрозрачный градиент-блик */
    background: linear-gradient(
        to right, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    transform: skewX(-25deg);
    transition: 0s;
    z-index: -1;
}

/* Анимация при наведении: пролет блика слева направо */
.animated-gradient .nav-link:hover::before {
    left: 150%;
    transition: 0.6s ease-in-out;
}

/* Дополнительно: усиление свечения при наведении */
.animated-gradient .nav-link:hover {
    text-shadow: 0 0 15px rgba(255, 253, 208, 0.6);
    background-color: rgba(255, 253, 208, 0.1) !important;
}

/* Основной стиль формы */
.form-inline {
    background: rgba(255, 255, 255, 0.05); /* Легкая прозрачность для контейнера */
    padding: 15px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Кнопка "Применить" в стиле вашего градиента */
.form-inline .btn-primary {
    background: transparent !important;
    color: #FFFFF0 !important; /* Слоновая кость */
    border: 2px solid #00F5D4 !important; /* Цвет из вашего hover */
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Эффект при наведении на кнопку (как вы просили) */
.form-inline .btn-primary:hover {
    background: #00F5D4 !important;
    color: #0a192f !important; /* Темный текст на ярком фоне */
    box-shadow: 0 0 20px rgba(0, 245, 212, 0.5);
    transform: translateY(-2px);
}

/* Стилизация полей ввода (инпутов) */
.form-inline .form-control {
    background: rgba(10, 25, 47, 0.6) !important; /* Глубокий темный фон */
    border: 1px solid rgba(0, 245, 212, 0.3) !important;
    color: #FFFFF0 !important; /* Слоновая кость */
    border-radius: 8px;
}

/* Цвет подсказок (placeholder) */
.form-inline .form-control::placeholder {
    color: rgba(255, 255, 240, 0.5) !important; /* Полупрозрачная слоновая кость */
}

/* Фокус на инпуте */
.form-inline .form-control:focus {
    border-color: #00F5D4 !important;
    box-shadow: 0 0 10px rgba(0, 245, 212, 0.2) !important;
    outline: none;
}

/* Общий стиль для меток и текста внутри формы */
.form-inline label, 
.form-inline .col-auto {
    color: #FFFFF0 !important;
    text-shadow: 0 0 12px rgba(255, 255, 240, 0.2);
}

/* Общий контейнер таблицы */
.table-container {
    background: rgba(10, 25, 47, 0.4) !important; /* Глубокий фон */
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 10px;
    border: 1px solid rgba(0, 245, 212, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    width: 100%;       /* Контейнер занимает всю ширину */
    overflow-x: auto;  /* Включает горизонтальную прокрутку, если таблица шире экрана */
    -webkit-overflow-scrolling: touch; /* Делает скролл плавным на iPhone/iPad */
}

/* Сама таблица */
.table {
    color: #FFFFF0 !important; /* Текст - Слоновая кость */
    background: transparent !important;
    min-width: 600px;  /* (Опционально) Укажите минимальную ширину, чтобы данные не слипались */
    width: 100%;
}

/* Заголовки (Дата, Время и т.д.) */
.table thead th {
    border-bottom: 2px solid #00F5D4 !important; /* Линия под шапкой */
}

.table thead th a {
    color: #00F5D4 !important; /* Неоновые ссылки в шапке */
    text-decoration: none;
    text-shadow: 0 0 8px rgba(0, 245, 212, 0.4);
}

/* Ячейки таблицы */
.table td {
    border-color: rgba(255, 255, 240, 0.1) !important; /* Тонкие разделители цвета слоновой кости */
    vertical-align: middle;
}

/* Полоски (striped) */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 240, 0.03) !important;
}

/* Наведение на строку */
.table tbody tr:hover {
    background-color: rgba(0, 245, 212, 0.05) !important;
    transition: 0.3s;
}

/* Кнопки "Изменить" и "Удалить" внутри таблицы */
.table .btn-primary {
    background: transparent !important;
    color: #FFFFF0 !important;
    border: 1px solid #00F5D4 !important;
    font-size: 0.85rem;
    padding: 4px 12px;
    transition: all 0.3s ease;
}

.table .btn-primary:hover {
    background: #00F5D4 !important;
    color: #0a192f !important;
    box-shadow: 0 0 15px rgba(0, 245, 212, 0.5);
    transform: translateY(-1px);
}

/* Тексты h5 и h6 внутри ячеек (ХЕ, Ингредиенты) */
.table h5, .table h6 {
    color: #FFFFF0 !important;
    margin-bottom: 0;
}

.table tbody tr {
    background: linear-gradient(90deg, rgba(0, 150, 136, 0.1), rgba(0, 150, 136, 0.3)) !important;
    transition: all 0.4s ease; /* Плавный переход */
}

/* Сбрасываем фон ячеек, чтобы был виден фон строки */
.table td {
    background: transparent !important;
}

/* Четные строки (вместо стандартного серого Bootstrap) */
.table-striped tbody tr:nth-of-type(even) {
    background: linear-gradient(90deg, rgba(0, 150, 136, 0.2), rgba(0, 150, 136, 0.4)) !important;
}

/* Эффект при наведении (плавное усиление градиента) */
.table tbody tr:hover {
    background: linear-gradient(90deg, rgba(0, 245, 212, 0.3), rgba(0, 150, 136, 0.5)) !important;
    box-shadow: inset 0 0 15px rgba(0, 245, 212, 0.2);
    cursor: pointer;
}

/* Цвет текста внутри h5/h6 в таблице (Слоновая кость) */
.table h5, .table h6, .table td {
    color: #FFFFF0 !important;
}

/* Применяем градиент к заголовкам таблицы */
.table thead th {
    background: linear-gradient(90deg, rgba(0, 150, 136, 0.4), rgba(0, 150, 136, 0.6)) !important;
    border-bottom: 2px solid #00F5D4 !important; /* Неоновая линия под шапкой */
    padding: 15px 10px !important;
}

/* Сбрасываем возможный фон у самой ссылки внутри заголовка */
.table thead th a {
    background: transparent !important;
    color: #FFFFF0 !important; /* Слоновая кость для названий колонок */
    text-decoration: none;
    font-weight: bold;
    display: block;
    width: 100%;
}

/* Эффект при наведении на заголовок (для сортировки) */
.table thead th:hover {
    background: linear-gradient(90deg, rgba(0, 245, 212, 0.4), rgba(0, 150, 136, 0.6)) !important;
    transition: 0.3s;
}

.table thead th {
    /* Используем сплошной полупрозрачный цвет вместо градиента */
    background: rgba(0, 150, 136, 0.4) !important; 
    border-bottom: 2px solid #00F5D4 !important; /* Неоновый акцент снизу */
    padding: 12px 10px !important;
    vertical-align: middle;
}

/* Ссылки внутри заголовков (Дата, Время и т.д.) */
.table thead th a {
    color: #FFFFF0 !important; /* Слоновая кость */
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase; /* Делает заголовки более аккуратными */
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

/* Эффект при наведении на заголовок (только изменение яркости текста) */
.table thead th:hover a {
    color: #00F5D4 !important; /* Подсветка текста при наведении */
    transition: 0.3s;
}

/* Убираем стандартную тень или фон Bootstrap, который может мешать */
.table thead {
    background-color: transparent !important;
}

/* Общий стиль для всех полей ввода в форме */
form input[type="text"], 
form input[type="number"], 
form input[type="time"], 
form select, 
form textarea {
    background-color: rgba(10, 25, 47, 0.7) !important; /* Темный фон */
    color: #FFFFF0 !important; /* Слоновая кость */
    border: 1px solid rgba(0, 245, 212, 0.3) !important; /* Приглушенная бирюза */
    border-radius: 6px;
    padding: 6px 10px;
    outline: none;
    transition: all 0.3s ease;
}

/* Цвет текста в выпадающих списках (для Chrome/Safari) */
form select option {
    background-color: #0a192f; /* Темный фон опций */
    color: #FFFFF0;
}

/* Эффект свечения при нажатии (фокусе) на поле */
form input:focus, 
form select:focus, 
form textarea:focus {
    border-color: #00F5D4 !important;
    box-shadow: 0 0 10px rgba(0, 245, 212, 0.4) !important;
    background-color: rgba(10, 25, 47, 0.9) !important;
}

/* Стили для меток (label) рядом с полями */
form label {
    color: #FFFFF0 !important;
    font-weight: 500;
    margin-right: 10px;
    text-shadow: 0 0 5px rgba(255, 255, 240, 0.2);
}

/* Стилизация карточки-контейнера формы */
.card {
    background: rgba(10, 25, 47, 0.5) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 240, 0.1) !important;
}

.card-header {
    background: rgba(0, 150, 136, 0.3) !important;
    color: #FFFFF0 !important;
    border-bottom: 1px solid #00F5D4 !important;
    font-weight: bold;
}

/* Кнопка "Редактировать" в стиле вашего градиента */
.btn-info {
    background: transparent !important;
    border: 2px solid #00F5D4 !important;
    color: #FFFFF0 !important;
    font-weight: bold;
    transition: 0.3s;
}

.btn-info:hover {
    background: #00F5D4 !important;
    color: #0a192f !important;
    box-shadow: 0 0 20px rgba(0, 245, 212, 0.5);
}

/* Убираем стандартную рамку у чекбоксов */
input[type="checkbox"] {
    accent-color: #00F5D4;
    cursor: pointer;
}

    /* Стили для круга в вашем неоновом стиле */
    .glucose-circle {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        border: 3px solid #00F5D4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgba(10, 25, 47, 0.6) !important;
        backdrop-filter: blur(5px);
        box-shadow: 0 0 25px rgba(0, 245, 212, 0.3), inset 0 0 15px rgba(0, 245, 212, 0.1);
        margin: 15px 0;
    }
    .glucose-value { 
        font-size: 2.8rem; 
        font-weight: bold; 
        color: #FFFFF0; 
        line-height: 1;
    }
    .glucose-unit { 
        font-size: 0.8rem; 
        color: #00F5D4; 
        margin-top: 5px;
        font-weight: 500;
    }
    /* Стили для "ленты" значений */
    .glucose-timeline {
        display: flex;
        overflow-x: auto; /* Появится прокрутка, если часов много */
        gap: 15px;
        padding-bottom: 10px;
        scrollbar-width: thin;
        scrollbar-color: #00F5D4 rgba(10, 25, 47, 0.5);
    }
    .timeline-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 50px;
        background: rgba(10, 25, 47, 0.4);
        padding: 10px 5px;
        border-radius: 8px;
        border: 1px solid rgba(0, 245, 212, 0.1);
    }
    .timeline-item .time { font-size: 0.7rem; color: rgba(255, 255, 240, 0.6); margin-bottom: 8px; }
    .timeline-item .val { font-size: 0.9rem; font-weight: bold; color: #00F5D4; margin-top: 8px; }
    
    /* Маленькая полоска-индикатор для красоты */
    .value-bar {
        width: 4px;
        background: linear-gradient(to top, #00F5D4, transparent);
        border-radius: 2px;
        min-height: 10px;
        max-height: 60px;
    }
    /* Неоновая карточка */
    .neon-card {
        background: #0b0e14 !important; /* Глубокий темный фон */
        border: 1px solid #00f2ff !important;
        border-radius: 12px !important;
        box-shadow: 0 0 15px rgba(0, 242, 255, 0.2), inset 0 0 10px rgba(0, 242, 255, 0.1) !important;
        padding: 20px;
        margin-bottom: 20px;
        position: relative;
    }

    .neon-title {
        color: #00f2ff;
        text-shadow: 0 0 8px rgba(0, 242, 255, 0.7);
        font-weight: bold;
        margin-bottom: 15px;
        text-align: center;
    }
/* Модальное окно */
.modal-content {
    background: rgba(10, 25, 47, 0.95) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(0, 245, 212, 0.3) !important;
    border-radius: 15px !important;

    color: #FFFFF0 !important;

    box-shadow:
        0 0 25px rgba(0,245,212,0.2),
        0 15px 40px rgba(0,0,0,0.6);
}

/* Заголовок */
.modal-header {
    background: rgba(0,150,136,0.2) !important;
    border-bottom: 1px solid rgba(0,245,212,0.3) !important;
}

.modal-title {
    color: #FFFDD0 !important;
    text-shadow: 0 0 10px rgba(255,253,208,0.2);
}

/* Подвал */
.modal-footer {
    border-top: 1px solid rgba(0,245,212,0.2) !important;
}

/* Крестик */
.btn-close {
    filter: invert(1) brightness(2);
}

/* Поля внутри модалки */
.modal .form-control,
.modal .form-select,
.modal textarea {
    background: rgba(10,25,47,0.8) !important;
    color: #FFFFF0 !important;

    border: 1px solid rgba(0,245,212,0.3) !important;
}

.modal .form-control:focus,
.modal .form-select:focus,
.modal textarea:focus {
    border-color: #00F5D4 !important;
    box-shadow: 0 0 12px rgba(0,245,212,0.3) !important;
}

/* label */
.modal label {
    color: #FFFDD0 !important;
}

/* затемнение фона */
.modal-backdrop.show {
    opacity: 0.8;
    backdrop-filter: blur(5px);
}
.modal-content {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(0,245,212,0.15) !important;
}

.modal-content::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -150%;
    width: 60%;
    height: 200%;

    background: linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,0.08),
        transparent
    );

    transform: rotate(25deg);
    pointer-events: none;
}

.modal-content:hover::before {
    left: 150%;
    transition: 0.8s ease-in-out;
}

.profile-avatar{

    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#00d4ff;

    color:black;

    font-weight:bold;

    text-decoration:none;

    cursor:pointer;
}