/* ============================================================
   Полировка UX: доступность, тач-цели, микро-анимации.
   Подключается последним — усиливает существующие стили.
   ============================================================ */

/* ── Фокус только при навигации с клавиатуры ── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), 0.45);
    outline-offset: 2px;
}

/* ── Микро-анимации кнопок ── */
.btn {
    transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s ease,
                background-color .2s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Вход страницы: мягкое появление контента (как на iOS) */
#app-content > * {
    animation: app-enter .3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes app-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* Мягкий hover */
.list-row { transition: background-color .12s ease; }
.card { transition: box-shadow .15s ease, transform .15s ease; }
.sidebar-link, .nav-item { transition: background-color .12s ease, color .12s ease; }

/* Запрет горизонтального скролла страницы */
html, body { max-width: 100%; overflow-x: hidden; }

/* Таблицы скроллятся внутри, не ломая макет */
.table-wrap, .responsive-table, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Крупные тач-цели для планшетов ── */
@media (pointer: coarse), (max-width: 1024px) {
    .btn { min-height: 44px; }
    .form-control,
    input, select, textarea { min-height: 44px; font-size: 16px; }
    .sidebar-link, .nav-item { min-height: 44px; }
    .list-row { padding-top: 12px; padding-bottom: 12px; }
}

/* ── Уважать «уменьшить движение» ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Кастомная подсветка текста ── */
::selection { background: var(--primary-soft); color: var(--primary); }

/* ── Плавный карточный lift на десктопе ── */
@media (min-width: 1024px) {
    .card, .metric-card, .stat-card {
        transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s ease;
    }
    .card:hover, .stat-card:hover {
        box-shadow: var(--shadow-md);
    }
    .card-interactive:hover,
    .stat-card.clickable:hover {
        transform: translateY(-2px);
    }
    .card-clickable, [data-id], [style*="cursor:pointer"] {
        cursor: pointer;
    }
}

/* ── Сглаженный скролл для модалок ── */
.modal-content { scroll-behavior: smooth; }

/* ── Sidebar: плавное появление активного элемента ── */
.sidebar-link.active {
    position: relative;
}
.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
    opacity: 0;
    animation: sidebar-in .25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes sidebar-in {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── Hover для строк таблицы ── */
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--surface-row-hover); }