/* ==========================================
   TABLE-RESPONSIVE — Адаптивные таблицы
   Версия: 15.05.2026
   ========================================== */

/* Обёртка для горизонтального скролла таблиц на мобильных */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border, #e3e8ef) transparent;
}

/* Webkit scrollbar styling */
.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--color-border, #ccc);
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted, #999);
}

/* Таблица внутри обёртки не сжимается */
.table-responsive > table {
    min-width: 600px;
    margin-bottom: 0;
}

/* Индикатор скролла — тень справа при наличии overflow */
.table-responsive {
    position: relative;
}

.table-responsive::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(0 0 0 / 0.04), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Показываем тень только когда есть скролл */
@supports (animation-timeline: scroll()) {
    .table-responsive::after {
        opacity: 1;
        animation: fade-scroll-hint linear;
        animation-timeline: scroll(self inline);
    }

    @keyframes fade-scroll-hint {
        0% { opacity: 1; }
        95% { opacity: 1; }
        100% { opacity: 0; }
    }
}

/* Брейкпоинты для table-responsive */
@media (max-width: 991px) {
    .table-responsive > table {
        min-width: 700px;
    }
}

@media (max-width: 575px) {
    .table-responsive > table {
        min-width: 500px;
    }

    .table-responsive > table td,
    .table-responsive > table th {
        white-space: nowrap;
        font-size: 0.8em;
        padding: 0.4rem 0.3rem;
    }
}

/* Вариант: стековая таблица на мобильных (опционально) */
@media (max-width: 575px) {
    .table-responsive--stack > table,
    .table-responsive--stack > table thead,
    .table-responsive--stack > table tbody,
    .table-responsive--stack > table tr,
    .table-responsive--stack > table td,
    .table-responsive--stack > table th {
        display: block;
        width: 100%;
    }

    .table-responsive--stack > table thead {
        display: none;
    }

    .table-responsive--stack > table tr {
        margin-bottom: 12px;
        border: 1px solid var(--color-border, #e3e8ef);
        border-radius: 8px;
        overflow: hidden;
    }

    .table-responsive--stack > table td {
        text-align: left;
        padding: 8px 12px;
        border: none;
        border-bottom: 1px solid var(--border-lighter, #eef2f7);
    }

    .table-responsive--stack > table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        font-size: 0.75em;
        color: var(--color-text-muted, #6b778c);
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .table-responsive--stack > table td:last-child {
        border-bottom: none;
    }
}