/* app/static/css/ui/tables.css */

/* ==================================================================
   1. БАЗОВЫЕ СТИЛИ ТАБЛИЦ
================================================================== */

/* Улучшенные базовые таблицы */
.table-custom {
    font-size: var(--app-font-size-sm);
    color: var(--app-color-text-primary);
    border-color: var(--app-color-border);
    width: 100%;
    border-collapse: collapse;
}

.table-custom th {
    font-weight: 600;
    background-color: var(--app-color-bg-tertiary);
    border-bottom: 2px solid var(--app-color-border);
    padding: var(--app-spacing-sm);
    text-align: left;
}

.table-custom td {
    padding: var(--app-spacing-sm);
    vertical-align: middle;
    border-top: 1px solid var(--app-color-border);
}

/* Полосатые таблицы */
.table-striped-custom tbody tr:nth-of-type(odd) {
    background-color: color-mix(in srgb, var(--app-color-primary) 5%, var(--app-color-bg-body));
}

/* Эффект при наведении */
.table-hover-custom tbody tr:hover {
    background-color: color-mix(in srgb, var(--app-color-primary) 10%, var(--app-color-bg-body));
    transition: background-color var(--app-transition-fast) ease;
}

/* Выделенная строка */
.table-row-highlight {
    background-color: color-mix(in srgb, var(--app-color-primary) 15%, transparent) !important;
    border-left: 3px solid var(--app-color-primary);
}

/* ==================================================================
   2. FLEX МИНИ-ТАБЛИЦЫ
================================================================== */

/* Контейнер для мини-таблиц в сетке */
.mini-tables-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--app-spacing-md);
    width: 100%;
}

/* Мини-таблица как карточка */
.table-mini {
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-md);
    background-color: var(--app-color-bg-body);
    overflow: hidden;
    height: fit-content;
}

.table-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    background-color: var(--app-color-bg-tertiary);
    border-bottom: 1px solid var(--app-color-border);
}

.table-mini-title {
    font-weight: 600;
    color: var(--app-color-heading);
    font-size: var(--app-font-size-sm);
    margin: 0;
}

.table-mini-badge {
    background-color: var(--app-color-secondary);
    color: white;
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    border-radius: var(--app-radius-full);
    font-size: var(--app-font-size-xs);
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.table-mini-content {
    padding: 0;
}

.table-mini-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--app-spacing-sm);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    border-bottom: 1px solid var(--app-color-border-light);
    align-items: center;
}

.table-mini-row:last-child {
    border-bottom: none;
}

.table-mini-cell {
    display: flex;
    align-items: center;
    gap: var(--app-spacing-xs);
    font-size: var(--app-font-size-xs);
    color: var(--app-color-text-secondary);
}

/* app/static/css/ui/tables.css - добавить в конец файла */

/* ==================================================================
   3. GRID-ТАБЛИЦЫ
   ================================================================== */

/* Контейнер таблицы */
.table-grid {
    width: 100%;
    font-size: var(--app-font-size-sm);
    color: var(--app-color-text-secondary);
}

/* Содержимое таблицы */
.table-grid-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Строка таблицы */
.table-grid-row {
    display: grid;
    gap: var(--app-spacing-sm);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    border-bottom: 1px solid var(--app-color-border-light);
    align-items: center;
}

.table-grid-row:last-child {
    border-bottom: none;
}

/* Ячейка таблицы */
.table-grid-cell {
    display: flex;
    align-items: center;
    font-size: var(--app-font-size-sm);
    color: var(--app-color-text-secondary);
    word-break: break-word;
}

/* Выравнивание */
.table-grid-cell-start {
    justify-content: flex-start;
    text-align: left;
}

.table-grid-cell-center {
    justify-content: center;
    text-align: center;
}

.table-grid-cell-end {
    justify-content: flex-end;
    text-align: right;
}

/* Иконки */
.table-grid .table-icon {
    margin-right: var(--app-spacing-sm);
    color: var(--app-color-text-secondary);
    width: 1.25rem;
    text-align: center;
    font-size: var(--app-font-size-sm);
    transition: color var(--app-transition-fast) ease;
}

/* Компактный режим */
.table-grid-compact .table-grid-row {
    padding: var(--app-spacing-xs) var(--app-spacing-md);
}

.table-grid-compact .table-grid-cell {
    font-size: var(--app-font-size-xs);
}

.table-grid-compact .table-icon {
    font-size: var(--app-font-size-xs);
    width: 1rem;
}

/* Кнопки */
.table-grid .app-btn-xs {
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    font-size: var(--app-font-size-xs);
    font-weight: 500;
    border-radius: var(--app-radius-sm);
}

.table-grid .app-btn-ghost-primary {
    color: var(--app-color-primary);
    background: transparent;
    border: 1px solid var(--app-color-primary);
}

.table-grid .app-btn-ghost-primary:hover {
    background-color: var(--app-color-primary);
    color: white;
}

.table-grid .app-btn-ghost-warning {
    color: var(--app-color-warning);
    background: transparent;
    border: 1px solid var(--app-color-warning);
}

.table-grid .app-btn-ghost-warning:hover {
    background-color: var(--app-color-warning);
    color: white;
}

.table-grid .app-btn-ghost-danger {
    color: var(--app-color-danger);
    background: transparent;
    border: 1px solid var(--app-color-danger);
}

.table-grid .app-btn-ghost-danger:hover {
    background-color: var(--app-color-danger);
    color: white;
}

.table-grid .app-btn-ghost-success {
    color: var(--app-color-success);
    background: transparent;
    border: 1px solid var(--app-color-success);
}

.table-grid .app-btn-ghost-success:hover {
    background-color: var(--app-color-success);
    color: white;
}

/* Заголовок */
.table-grid-header {
    display: grid;
    gap: var(--app-spacing-sm);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    background-color: var(--app-color-bg-tertiary);
    border-bottom: 2px solid var(--app-color-border);
    font-weight: 600;
    font-size: var(--app-font-size-xs);
    color: var(--app-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .table-grid-responsive .table-grid-row {
        grid-template-columns: 1fr !important;
        gap: var(--app-spacing-xs);
        padding: var(--app-spacing-md);
    }

    .table-grid-responsive .table-grid-header {
        display: none;
    }

    .table-grid-responsive .table-grid-cell {
        justify-content: flex-start !important;
        padding: var(--app-spacing-xs) 0;
    }

    .table-grid-responsive .table-grid-cell::before {
        content: attr(data-label);
        font-weight: 600;
        width: 40%;
        color: var(--app-color-text-muted);
        margin-right: var(--app-spacing-sm);
    }
}

/* ==================================================================
   4. ТАБЛИЦЫ-КАРТОЧКИ ДАННЫХ
================================================================== */

.table-data-card {
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-md);
    background-color: var(--app-color-bg-body);
    overflow: hidden;
}

.table-data-header {
    padding: var(--app-spacing-md);
    background-color: var(--app-color-bg-tertiary);
    border-bottom: 1px solid var(--app-color-border);
}

.table-data-title {
    font-weight: 600;
    color: var(--app-color-heading);
    font-size: var(--app-font-size-base);
    margin: 0;
}

.table-data-content {
    padding: 0;
}

.table-data-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--app-spacing-md);
    padding: var(--app-spacing-md);
    border-bottom: 1px solid var(--app-color-border-light);
    align-items: center;
}

.table-data-row:last-child {
    border-bottom: none;
}

.table-data-cell {
    display: flex;
    align-items: center;
    font-size: var(--app-font-size-sm);
    color: var(--app-color-text-primary);
}

/* ==================================================================
   5. ЭЛЕМЕНТЫ ТАБЛИЦ С ИКОНКАМИ
================================================================== */

.table-icon-cell {
    display: flex;
    align-items: center;
    gap: var(--app-spacing-sm);
}

.table-icon {
    font-size: var(--app-font-size-base);
    width: 1.5rem;
    text-align: center;
    color: var(--app-color-text-secondary);
}

/* Изображения в таблицах */
.table-img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--app-radius-full);
    object-fit: cover;
    vertical-align: middle;
}

.table-img-sm {
    width: 2rem;
    height: 2rem;
}

.table-img-lg {
    width: 3.5rem;
    height: 3.5rem;
}

/* ==================================================================
   6. ЭЛЕМЕНТЫ УПРАВЛЕНИЯ В ТАБЛИЦАХ
================================================================== */

.table-action-btn {
    background: none;
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-sm);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--app-color-danger);
    transition: all var(--app-transition-fast) ease;
}

.table-action-btn:hover {
    background-color: color-mix(in srgb, var(--app-color-danger) 10%, transparent);
    border-color: var(--app-color-danger);
}

.table-action-btn-sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--app-font-size-xs);
}

/* Кнопки действий в ячейках */
.cell-action {
    display: flex;
    align-items: center;
    gap: var(--app-spacing-xs);
}

/* ==================================================================
   7. ФИЛЬТРЫ И КОНТРОЛЫ ДЛЯ ТАБЛИЦ
================================================================== */

.table-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-spacing-md);
    margin-bottom: var(--app-spacing-lg);
    padding: var(--app-spacing-md);
    background-color: var(--app-color-bg-tertiary);
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-color-border);
}

.filter-group {
    flex: 1 1 auto;
    min-width: 8rem;
}

.filter-label {
    display: block;
    margin-bottom: var(--app-spacing-xs);
    font-size: var(--app-font-size-sm);
    font-weight: 600;
    color: var(--app-color-text-primary);
}

/* ==================================================================
   8. СОСТОЯНИЯ И ПУСТЫЕ ТАБЛИЦЫ
================================================================== */

.table-empty-state {
    padding: var(--app-spacing-2xl) var(--app-spacing-md);
    text-align: center;
    color: var(--app-color-text-secondary);
}

.table-empty-state p {
    margin: 0;
    font-size: var(--app-font-size-sm);
}

.table-empty-state-icon {
    font-size: var(--app-font-size-4xl);
    color: var(--app-color-text-muted);
    margin-bottom: var(--app-spacing-md);
    opacity: 0.5;
}

/* Неактивные элементы */
.table-cell-muted {
    color: var(--app-color-text-muted) !important;
}

/* Ссылки в таблицах */
.table-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--app-transition-fast) ease;
}

.table-link:hover {
    color: var(--app-color-primary);
    text-decoration: underline;
}

/* ==================================================================
   9. СОРТИРОВКА И ЗАГОЛОВКИ
================================================================== */

.table-sort-header {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.table-sort-header:hover {
    background-color: color-mix(in srgb, var(--app-color-primary) 5%, transparent);
}

.sort-indicator {
    margin-left: var(--app-spacing-xs);
    opacity: 0.5;
    transition: opacity var(--app-transition-fast) ease;
    display: inline-flex;
    align-items: center;
}

.table-sort-header:hover .sort-indicator {
    opacity: 1;
}

.sort-asc .sort-indicator::after {
    content: "↑";
}

.sort-desc .sort-indicator::after {
    content: "↓";
}

/* ==================================================================
   10. ИНТЕРАКТИВНЫЕ ТАБЛИЦЫ (НОВЫЙ СТИЛЬ)
================================================================== */

/* Основные стили интерактивных таблиц */
.table-interactive {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--app-spacing-md);
    background-color: transparent;
    font-size: var(--app-font-size-sm);
    border-collapse: collapse;
}

.table-interactive tbody tr {
    border-bottom: 1px solid var(--app-color-border);
}

.table-interactive td {
    vertical-align: top;
    word-wrap: break-word;
    white-space: normal !important;
    padding: var(--app-spacing-sm);
}

/* Стили для заголовков интерактивных таблиц */
.table-interactive .table-header-interactive {
    background-color: var(--app-color-bg-tertiary);
    font-weight: 600;
    font-size: var(--app-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-interactive td[data-sort] {
    background-color: var(--app-color-bg-tertiary);
    color: var(--app-color-text-primary);
    cursor: pointer;
    user-select: none;
    padding: var(--app-spacing-sm);
    transition: background-color var(--app-transition-fast) ease;
}

.table-interactive td[data-sort]:hover {
    background-color: color-mix(in srgb, var(--app-color-primary) 10%, var(--app-color-bg-tertiary));
}

/* Стили для изображений в таблицах */
.table-image-interactive {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--app-radius-full);
    object-fit: cover;
}

/* Стиль для неактивных ячеек */
.table-cell-not-active {
    color: var(--app-color-text-muted) !important;
}

/* Четные/нечетные строки */
.table-row-even {
    background-color: transparent;
}

.table-row-odd {
    background-color: var(--app-color-bg-tertiary);
}

/* Эффекты при наведении и выделении */
.table-interactive tbody tr:hover {
    background-color: color-mix(in srgb, var(--app-color-primary) 10%, transparent);
}

.table-interactive tbody tr.row-highlight {
    background-color: color-mix(in srgb, var(--app-color-primary) 20%, transparent);
}

/* Колоночные классы ширины */
.table-col-7 { width: 7%; }
.table-col-10 { width: 10%; }
.table-col-15 { width: 15%; }
.table-col-25 { width: 25%; }
.table-col-auto { width: auto; }

/* Фильтры для интерактивных таблиц */
.filter-container-interactive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-spacing-md);
    background-color: var(--app-color-bg-tertiary);
    padding: var(--app-spacing-md);
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-color-border);
    margin-bottom: var(--app-spacing-lg);
}

.filter-box-interactive {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 160px;
}

.filter-label-interactive {
    margin-bottom: var(--app-spacing-xs);
    font-size: var(--app-font-size-sm);
    font-weight: 600;
    color: var(--app-color-text-primary);
    display: block;
}

/* Иконки сортировки */
.sort-icon-interactive {
    margin-left: var(--app-spacing-xs);
    opacity: 0.5;
    transition: opacity var(--app-transition-fast) ease;
}

[data-sort]:hover .sort-icon-interactive {
    opacity: 1;
}

/* ==================================================================
   11. ТЕМНАЯ ТЕМА
================================================================== */

[data-theme="dark"] .table-mini,
[data-theme="dark"] .table-data-card,
[data-theme="dark"] .table-filters,
[data-theme="dark"] .filter-container-interactive {
    border-color: var(--app-color-border);
    background-color: var(--app-color-bg-secondary);
}

[data-theme="dark"] .table-mini-header,
[data-theme="dark"] .table-data-header {
    background-color: var(--app-color-bg-tertiary);
    border-color: var(--app-color-border);
}

[data-theme="dark"] .table-mini-row,
[data-theme="dark"] .table-data-row,
[data-theme="dark"] .table-interactive tbody tr {
    border-color: var(--app-color-border);
}

[data-theme="dark"] .table-mini-badge {
    background-color: var(--app-color-bg-primary);
}

[data-theme="dark"] .table-row-odd {
    background-color: color-mix(in srgb, var(--app-color-bg-tertiary) 50%, transparent);
}

[data-theme="dark"] .table-interactive .table-header-interactive,
[data-theme="dark"] .table-interactive td[data-sort] {
    background-color: var(--app-color-bg-tertiary);
}

/* ==================================================================
   12. АДАПТИВНОСТЬ
================================================================== */

@media (max-width: 768px) {
    .mini-tables-grid {
        grid-template-columns: 1fr;
        gap: var(--app-spacing-sm);
    }

    .table-mini-row {
        grid-template-columns: 1fr 1fr;
    }

    .table-mini-row .table-mini-cell:nth-child(3),
    .table-mini-row .table-mini-cell:nth-child(4) {
        display: none;
    }

    .table-data-row {
        grid-template-columns: 1fr 1fr;
    }

    .table-data-row .table-data-cell:nth-child(3) {
        display: none;
    }

    .table-filters {
        flex-direction: column;
        gap: var(--app-spacing-sm);
    }

    .filter-group,
    .filter-box-interactive {
        min-width: 100%;
        max-width: 100%;
    }

    .filter-container-interactive {
        flex-direction: column;
        gap: var(--app-spacing-sm);
    }
}

@media (max-width: 576px) {
    .table-custom,
    .table-interactive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-mini-row,
    .table-data-row {
        grid-template-columns: 1fr;
    }

    .table-img {
        width: 2rem;
        height: 2rem;
    }

    .table-image-interactive {
        width: 2rem;
        height: 2rem;
    }
}

/* ==================================================================
   13. ДОПОЛНИТЕЛЬНЫЕ УТИЛИТЫ
================================================================== */

/* Выравнивание текста */
.table-text-center { text-align: center !important; }
.table-text-end { text-align: end !important; }
.table-text-start { text-align: start !important; }

/* Вертикальное выравнивание */
.table-align-top { vertical-align: top !important; }
.table-align-middle { vertical-align: middle !important; }
.table-align-bottom { vertical-align: bottom !important; }

/* Компактные таблицы */
.table-compact th,
.table-compact td {
    padding: var(--app-spacing-xs) var(--app-spacing-sm) !important;
    font-size: var(--app-font-size-xs);
}

/* Таблицы без границ */
.table-borderless th,
.table-borderless td {
    border: none !important;
}

/* Скрытые элементы на мобильных */
.table-mobile-hidden {
    display: table-cell;
}

@media (max-width: 768px) {
    .table-mobile-hidden {
        display: none;
    }
}