/*
 * theme-gradient.css — лёгкие градиенты поверх базовой темы.
 *
 * Подключается ПОСЛЕ custom.css в base.html. Только переопределяет
 * background-* свойства; геометрия, размеры, поведение — из custom.css.
 *
 * Идея: CSS-переменные (--bg-card, --bg-primary и т.д.) остаются
 * сплошными цветами — их читает Canvas в timeline.js. Градиенты
 * накладываем напрямую на DOM-элементы, не трогая переменные.
 *
 * Палитра задумана как «угольный + еле-заметный синий», чтобы
 * интерфейс не выглядел угрюмо-плоским, но и не превратился в
 * лендинг. Никаких ярких stop'ов, никаких ярких теней.
 */


/* ============================================================
 * Тонкие акценты-токены. Не переопределяют --bg-*  из custom.css.
 * ============================================================ */
:root {
    /* Акцентный синий в RGB-формате — нужно для rgba(var(--...), alpha) */
    --accent-primary-rgb: 13, 110, 253;

    /* Полупрозрачные «подсветки» поверх карточек */
    --tint-blue-soft: rgba(13, 110, 253, 0.04);
    --tint-blue-medium: rgba(13, 110, 253, 0.08);

    /* Сплошные «градиентные» цвета для крупных поверхностей.
     * Чуть-чуть светлее, чем --bg-card / --bg-primary. */
    --grad-card-top: #141414;
    --grad-card-bottom: #0a0a0a;
    --grad-bg-1: #0d0d10;
    --grad-bg-2: #050507;
}


/* ============================================================
 * Body — фоновая виньетка
 * ============================================================ */

body {
    /* Многослойный фон:
     *   1) Радиальный «синий рассеянный свет» в правом-верхнем углу.
     *      Создаёт мягкий цветовой акцент без подсветки шрифтов.
     *   2) Радиальный тёплый цвет в левом-нижнем (на 2% — почти не виден).
     *   3) Базовый диагональный градиент, как было в custom.css.
     *
     * Слои объединяются через запятую, верхний имеет приоритет. */
    background:
        radial-gradient(
            ellipse at 85% -10%,
            rgba(var(--accent-primary-rgb), 0.10) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 10% 110%,
            rgba(255, 255, 255, 0.02) 0%,
            transparent 60%
        ),
        linear-gradient(
            135deg,
            var(--grad-bg-1) 0%,
            var(--grad-bg-2) 100%
        );
    background-attachment: fixed;
}


/* ============================================================
 * Карточки
 * ============================================================ */

.card {
    background:
        linear-gradient(
            180deg,
            var(--grad-card-top) 0%,
            var(--grad-card-bottom) 100%
        );
    /* Внутреннее свечение по верхней кромке + базовая тень из custom.css */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 4px 6px rgba(0, 0, 0, 0.3);
}

.card-header {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025) 0%,
            transparent 100%
        ),
        var(--grad-card-top);
}


/* ============================================================
 * Навигация
 * ============================================================ */

.navbar.bg-black {
    /* Горизонтальный градиент с лёгким синим уклоном к правому краю.
     * Перекрывает Bootstrap-овский bg-black, который тут жёстко чёрный. */
    background: linear-gradient(
        90deg,
        #050505 0%,
        #080809 60%,
        #0a0a10 100%
    ) !important;
    border-bottom: 1px solid var(--border-color);
}


/* ============================================================
 * Активная камера в сайдбаре
 * ============================================================ */

.camera-item.active {
    background:
        linear-gradient(
            90deg,
            var(--tint-blue-medium) 0%,
            var(--tint-blue-soft) 100%
        ) !important;
}


/* ============================================================
 * Кнопки primary — мягкий градиент
 * ============================================================ */

.btn-primary {
    background: linear-gradient(
        180deg,
        var(--accent-primary) 0%,
        var(--accent-hover) 100%
    );
    border-color: var(--accent-hover);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(
        180deg,
        var(--accent-hover) 0%,
        #094bb0 100%
    );
    border-color: #094bb0;
}

.btn-primary:active {
    background: var(--accent-hover);
}


/* ============================================================
 * Бейджи статуса — тонкое свечение без мерцания
 * ============================================================ */

.status-badge.live {
    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 204, 102, 0.20) 0%,
            rgba(0, 204, 102, 0.10) 70%
        );
}

.status-badge.live-active {
    /* Когда подключение реально установлено — чуть ярче.
     * Box-shadow из custom.css остаётся, он отвечает за «свечение». */
    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 204, 102, 0.32) 0%,
            rgba(0, 204, 102, 0.18) 70%
        );
}


/* ============================================================
 * Timeline — едва заметный градиент в полосе
 * ============================================================ */

.timeline-root {
    background:
        linear-gradient(
            180deg,
            #0d0d0d 0%,
            #060606 100%
        );
}


/* ============================================================
 * Логин — добавить акцент вокруг формы
 * ============================================================ */

.card-header.bg-black {
    background: linear-gradient(
        180deg,
        rgba(var(--accent-primary-rgb), 0.06) 0%,
        transparent 100%
    ),
    #060608 !important;
}


/* ============================================================
 * Accessibility — уважение к системным настройкам
 * ============================================================ */

@media (prefers-reduced-transparency: reduce) {
    /* Пользователь явно просил меньше прозрачностей — отдаём
     * сплошные цвета. Контраст выше, нагрузка на рендер ниже. */
    body {
        background: var(--bg-primary);
    }
    .card {
        background: var(--bg-card);
    }
    .card-header {
        background: var(--bg-card);
    }
    .navbar.bg-black {
        background: #000 !important;
    }
    .camera-item.active {
        background: rgba(13, 110, 253, 0.1) !important;
    }
    .btn-primary {
        background: var(--accent-primary);
    }
}

@media (prefers-contrast: more) {
    /* Режим повышенного контраста: убираем градиенты, усиливаем границы. */
    body {
        background: #000;
    }
    .card {
        background: #050505;
        border-color: #555;
    }
    .card-header {
        background: #0a0a0a;
        border-bottom-color: #555;
    }
}