@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../js/**/*.{vue,ts}';

/* Доступность: уважаем reduced-motion — гасим все переходы/анимации. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Бренд: оранжевый акцент + холодный графит-тил как несущий тёмный тон */
    --color-brand-50: oklch(0.96 0.03 67);
    --color-brand-100: oklch(0.92 0.06 65);
    --color-brand-400: oklch(0.8 0.16 60);
    --color-brand: oklch(0.745 0.187 57);   /* #FF8400 */
    --color-brand-600: oklch(0.66 0.18 50);
    --color-brand-700: oklch(0.57 0.16 48);

    /* Графит-тил — чёрный сайдбар и тёмные поверхности */
    --color-anchor: oklch(0.31 0.035 220);
    --color-ink: oklch(0.17 0.012 240);      /* почти чёрный для сайдбара */
    --color-ink-700: oklch(0.27 0.014 240);

    /* Motion — product register: 150–250ms, ease-out, без page-load шоу */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
}

/* Тонкий скроллбар без стрелок — для сайдбара и светлых панелей. */
@layer utilities {
    .scroll-slim {
        scrollbar-width: thin;
        scrollbar-gutter: stable;
    }

    .scroll-slim::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .scroll-slim::-webkit-scrollbar-button,
    .scroll-slim::-webkit-scrollbar-corner {
        display: none;
        width: 0;
        height: 0;
    }

    .scroll-slim-dark {
        scrollbar-color: oklch(1 0 0 / 0.18) transparent;
    }

    .scroll-slim-dark::-webkit-scrollbar-track {
        margin: 6px 0;
        background: transparent;
    }

    .scroll-slim-dark::-webkit-scrollbar-thumb {
        border: 1px solid transparent;
        border-radius: 9999px;
        background: oklch(1 0 0 / 0.14);
        background-clip: padding-box;
    }

    .scroll-slim-dark::-webkit-scrollbar-thumb:hover {
        background: oklch(1 0 0 / 0.28);
        background-clip: padding-box;
    }

    .scroll-slim-light {
        scrollbar-color: oklch(0.55 0.01 240 / 0.35) transparent;
    }

    .scroll-slim-light::-webkit-scrollbar-track {
        margin: 6px 0;
        background: transparent;
    }

    .scroll-slim-light::-webkit-scrollbar-thumb {
        border: 1px solid transparent;
        border-radius: 9999px;
        background: oklch(0.55 0.01 240 / 0.22);
        background-clip: padding-box;
    }

    .scroll-slim-light::-webkit-scrollbar-thumb:hover {
        background: oklch(0.45 0.01 240 / 0.38);
        background-clip: padding-box;
    }

    /* Кнопки: мгновенный press-feedback */
    .motion-press {
        transition:
            transform var(--duration-fast) var(--ease-out-quart),
            background-color var(--duration-fast) var(--ease-out-quart),
            border-color var(--duration-fast) var(--ease-out-quart),
            color var(--duration-fast) var(--ease-out-quart),
            opacity var(--duration-fast) var(--ease-out-quart);
    }

    .motion-press:active:not(:disabled) {
        transform: scale(0.98);
    }

    /* Поля: фокус без scale — только цвет границы */
    .motion-field {
        transition:
            border-color var(--duration-fast) var(--ease-out-quart),
            box-shadow var(--duration-fast) var(--ease-out-quart);
    }

    .motion-field:focus {
        box-shadow: 0 0 0 3px oklch(0.745 0.187 57 / 0.12);
    }

    /* Появление карточек/строк с ритмом (cap ~5 × 50ms) */
    @keyframes motion-rise-in {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .motion-rise-in {
        animation: motion-rise-in var(--duration-slow) var(--ease-out-quart) both;
        animation-delay: calc(var(--motion-i, 0) * 50ms);
    }

    /* Столбцы потока — пересчёт при смене периода */
    .motion-bar {
        transition: height var(--duration-slow) var(--ease-out-expo);
    }

    /* Переходы маршрутов и панелей (Vue <Transition name="...">) */
    .page-enter-active,
    .page-leave-active {
        transition: opacity var(--duration-normal) var(--ease-out-quart);
    }

    .page-enter-from,
    .page-leave-to {
        opacity: 0;
    }

    .drawer-backdrop-enter-active,
    .drawer-backdrop-leave-active {
        transition: opacity var(--duration-normal) var(--ease-out-quart);
    }

    .drawer-backdrop-enter-from,
    .drawer-backdrop-leave-to {
        opacity: 0;
    }

    .drawer-panel-enter-active,
    .drawer-panel-leave-active {
        transition: transform var(--duration-slow) var(--ease-out-quart);
    }

    .drawer-panel-enter-from,
    .drawer-panel-leave-to {
        transform: translateX(100%);
    }

    .alert-enter-active,
    .alert-leave-active {
        transition:
            opacity var(--duration-normal) var(--ease-out-quart),
            transform var(--duration-normal) var(--ease-out-quart);
    }

    .alert-enter-from,
    .alert-leave-to {
        opacity: 0;
        transform: translateY(-4px);
    }

    /* Раскрытие «Справочники» */
    .motion-collapse {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--duration-slow) var(--ease-out-quart);
    }

    .motion-collapse.is-open {
        grid-template-rows: 1fr;
    }

    .motion-collapse > div {
        overflow: hidden;
    }
}