/* Тема админки Meydan Group.
 *
 * Правила, чтобы ничего не ломать:
 *  - без backdrop-filter и transform на контейнерах: они создают «новую систему координат» и
 *    уводят выпадающие списки, календари и модальные окна не туда;
 *  - анимация только плавного появления (opacity), и она отключается при «меньше движения»;
 *  - всё держится на цветах Unfold (--color-primary-*), поэтому светлая и тёмная темы
 *    работают одинаково.
 */

@supports (background: color-mix(in oklab, red, blue)) {
    :root {
        --meydan-glow: color-mix(in oklab, var(--color-primary-500) 13%, transparent);
        --meydan-glow-soft: color-mix(in oklab, var(--color-primary-400) 8%, transparent);
        --meydan-focus: color-mix(in oklab, var(--color-primary-500) 24%, transparent);
        --meydan-hover: color-mix(in oklab, var(--color-primary-500) 6%, transparent);
        --meydan-button-shadow: color-mix(in oklab, var(--color-primary-600) 45%, transparent);
    }

    /* Фон области контента: мягкое свечение сверху поверх обычного цвета Unfold. */
    #main {
        background-image:
            radial-gradient(900px 380px at 0% -6%, var(--meydan-glow), transparent 70%),
            radial-gradient(700px 320px at 100% 0%, var(--meydan-glow-soft), transparent 70%);
        background-repeat: no-repeat;
    }

    /* Боковое меню: лёгкий градиент для глубины. */
    #nav-sidebar {
        background-image: linear-gradient(180deg, var(--meydan-glow) 0%, transparent 38%);
    }

    /* Страница входа. */
    body:has(#login-form) {
        background-image:
            radial-gradient(800px 420px at 20% -10%, var(--meydan-glow), transparent 70%),
            radial-gradient(700px 380px at 90% 100%, var(--meydan-glow-soft), transparent 70%);
        background-repeat: no-repeat;
    }

    /* Строки таблиц: подсветка при наведении. */
    #result_list tbody tr:hover {
        background-color: var(--meydan-hover);
    }

    /* Поля ввода: мягкое свечение в фокусе. */
    input:focus,
    select:focus,
    textarea:focus {
        box-shadow: 0 0 0 3px var(--meydan-focus);
    }

    /* Кнопки отправки: акцентная тень при наведении (без смещения элемента). */
    button[type="submit"]:not(:disabled):hover,
    #submit-row input[type="submit"]:hover {
        box-shadow: 0 6px 16px -6px var(--meydan-button-shadow);
    }
}

/* Название сайта в боковом меню. */
#site-name {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Плавные переходы для интерактивных элементов. */
#nav-sidebar a,
#result_list tbody tr,
button,
input,
select,
textarea {
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

@media (prefers-reduced-motion: no-preference) {
    /* Плавное появление страницы: только прозрачность, чтобы не создавать containing block. */
    #content {
        animation: meydan-fade-in 0.3s ease-out backwards;
    }
}

@keyframes meydan-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #nav-sidebar a,
    #result_list tbody tr,
    button,
    input,
    select,
    textarea {
        transition: none;
    }
}