/* ============================================================
   Неоморфный скин поверх daisyUI 5 — анклав дизайнера, нормы скилла
   design-system внутри не действуют (раздел «Neo-скин — анклав дизайнера»).
   ЕДИНСТВЕННЫЙ файл правок скина (+ палитры в Styles/theme-*.css):
   в tailwind-пайплайн не входит, подключён отдельным <link> ПОСЛЕ
   css/tailwind.css — поэтому статический (правка видна по F5, без
   пересборки) и перебивает и daisy в @layer, и нелейерные правила
   бандла без !important. Темы (Styles/theme-*.css) ограничены
   переменными daisy — всё неоморфное, включая грани теней по темам,
   живёт здесь.
   ============================================================ */

/* ---------- Тени-токены ---------- */
/* Светлая и тёмная грани — по темам, той же схемой селекторов, что даисы-темы
   в бандле: дефолт светлый, тёмный по prefers-color-scheme, явный выбор —
   data-theme (позже в файле — перебивает media-блок). */
:root {
    --neo-hi: rgba(255, 255, 255, 0.85);
    --neo-lo: rgba(125, 125, 125, 0.5);
    --border-high-contrast: white;
}

@media (prefers-color-scheme: dark) {
    :root {
        --neo-hi: rgba(255, 255, 255, 0.055);
        --neo-lo: rgba(0, 0, 0, 0.55);
        --border-high-contrast: color-mix(
            in oklab,
            var(--color-base-content) 12%,
            transparent
        );
    }
}

[data-theme="light"] {
    --neo-hi: rgba(255, 255, 255, 0.85);
    --neo-lo: rgba(125, 125, 125, 0.5);
    --border-high-contrast: white;
}

[data-theme="dark"] {
    --neo-hi: rgba(255, 255, 255, 0.055);
    --neo-lo: rgba(0, 0, 0, 0.55);
    --border-high-contrast: color-mix(
        in oklab,
        var(--color-base-content) 12%,
        transparent
    );
}

:root {
    --neo-raise: 7px 7px 16px var(--neo-lo), -7px -7px 16px var(--neo-hi);
    --neo-raise-sm: 3px 3px 8px var(--neo-lo), -3px -3px 8px var(--neo-hi);
    --neo-raise-xs: 2px 2px 4px var(--neo-lo), -2px -2px 4px var(--neo-hi);
    --neo-inset:
        inset 4px 4px 9px var(--neo-lo), inset -4px -4px 9px var(--neo-hi);
    --neo-inset-sm:
        inset 2px 2px 5px var(--neo-lo), inset -2px -2px 5px var(--neo-hi);
}

/* ---------- Поверхности ---------- */
.card,
.stats {
    background-color: var(--color-base-100);
    border-color: transparent;
    box-shadow: var(--neo-raise);
}

.stats .stat {
    border-color: color-mix(
        in oklab,
        var(--color-base-content) 8%,
        transparent
    );
}

.alert {
    border-color: transparent;
    box-shadow: var(--neo-raise-sm);
}

/* ---------- Кнопки ---------- */
.btn {
    border: none;
    box-shadow: var(--neo-raise-sm);
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn:focus-visible,
.btn:has(:focus-visible) {
    color: var(--color-primary);
    box-shadow: var(--neo-raise-xs);
    --btn-bg: none;
    outline-style: none;
}

.btn:active:not(.btn-disabled):not(:disabled),
.btn.btn-active {
    color: var(--color-primary);
    box-shadow: var(--neo-raise-xs);
}

/* Перекраска в primary — только у ghost: Primary/Error на ховере сохраняют заливку и смысл. */
.btn-ghost:hover,
.btn-ghost:active {
    --btn-bg: none;
    color: var(--color-primary);
}

.btn-ghost {
    box-shadow: none;
}

.btn-ghost:hover {
    box-shadow: var(--neo-raise-xs);
}

.btn-disabled,
.btn:disabled {
    box-shadow: none;
    background-color: transparent;
}

/* join — единый выдавленный блок, активный сегмент вдавлен */
.join {
    border-radius: var(--radius-field);
    box-shadow: var(--neo-raise-sm);
}

.join .btn {
    box-shadow: none;
}

.join .btn.btn-active {
    box-shadow: var(--neo-inset-sm);
}

/* ---------- Поля ввода ---------- */
.input,
.select,
.textarea,
.file-input {
    background-color: var(--color-base-200);
    border-color: transparent;
    box-shadow: var(--neo-inset-sm);
}

.input {
    transition: all 0.3s ease;
}

/* Фокус — поле «всплывает» на base-100, без кольца. */
:is(.input, .select, .textarea, .file-input):is(:focus, :focus-within) {
    border-color: transparent;
    outline: none;
    background-color: var(--color-base-100);
    box-shadow: var(--neo-inset-sm);
}

/* Автофилл Chrome: форс-фон не перекрашиваем (заливка внутреннего input
   рисует шов после иконки в обёртке .input), а убираем совсем:
   background-clip: text клипает его по глифам — снаружи прозрачно, видно
   фон и рельеф обёртки. Тень-заливку продуктового бандла гасим; голому
   input.input (без обёртки) вдавленность возвращаем отдельным правилом. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--color-base-content);
    box-shadow: none;
}

input.input:-webkit-autofill,
input.input:-webkit-autofill:hover,
input.input:-webkit-autofill:focus {
    box-shadow: var(--neo-inset-sm);
}

/* ---------- Чекбоксы и тоглы ---------- */
.checkbox {
    border-color: transparent;
    background-color: var(--color-base-200);
    box-shadow: var(--neo-inset-sm);
}

.checkbox:checked {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
    /* Без inset-тени: на заливке primary она читается градиентом, заливка сплошная */
    box-shadow: none;
}

.toggle {
    border-color: transparent;
    background-color: var(--color-base-200);
    box-shadow: var(--neo-inset-sm);
}

.toggle:checked {
    color: var(--color-primary);
}

/* ---------- Бейджи ---------- */
.badge {
    border-color: transparent;
    box-shadow: var(--neo-raise-xs);
}

/* ---------- Табы: активная и hover — выпуклая «кнопка» ---------- */
.tabs-border {
    gap: 0.5rem;
    border-bottom: 0;
}

.tabs-border > .tab:before {
    display: none;
}

/* Без паддинга тени табов обрезаются границами контейнера; нужно более элегантное решение. */
.tabs {
    padding: 0.5rem;
}

.tab {
    border: none;
    border-radius: var(--radius-field);
    box-shadow: none;
    transition: all 0.3s ease;
}

.tab:hover {
    box-shadow: var(--neo-raise-xs);
}

.tab.tab-active {
    background-color: var(--color-base-100);
    color: var(--color-primary);
    box-shadow: var(--neo-raise-xs);
}

/* ---------- Меню: hover и активный пункт — выпуклая плашка ---------- */
/* Выпуклой плашке нужен воздух: сток кладёт пункты вплотную, и тень наезжает
   на соседние строки. Зазор на всех уровнях: между li самого меню и вложенных
   списков, и внутри li — между строкой и её вложенным списком (деревья). */
.menu,
.menu :where(li),
.menu :where(ul) {
    row-gap: 0.25rem;
}

.menu
    :where(
        li:not(.menu-title, .disabled)
            > :not(ul, menu, details, .menu-title):not(
                .menu-active,
                :active,
                .btn
            ):hover,
        li:not(.menu-title, .disabled)
            > details
            > summary:not(.menu-title):not(.menu-active, :active, .btn):hover
    ) {
    background-color: var(--color-base-100);
    box-shadow: var(--neo-raise-xs);
}

/* Перекраска активного пункта — через переменные daisy, а не поверх нарисованных
   свойств: на --menu-active-fg завязаны потребители (иконки-кнопки на активной
   строке через --btn-rest-fg), при прямом override цвет иконок остаётся
   от старого тёмного фона и сливается со светлой плашкой. */
.menu {
    --menu-active-bg: var(--color-base-100);
    --menu-active-fg: var(--color-primary);
}

.menu :where(li) > :not(ul, menu, .menu-title, details, .btn):active,
.menu :where(li) > details > summary:active,
.menu .menu-active {
    box-shadow: var(--neo-raise-xs);
}

/* ---------- Прогресс ---------- */
.progress {
    height: 0.75rem;
    border-radius: 9999px;
    background-color: var(--color-base-200);
    box-shadow: var(--neo-inset-sm);
}

.card,
.stats,
.alert {
    border: var(--border) solid var(--border-high-contrast);
}

.textarea {
    transition: all 0.3s ease;
    resize: none;
}