/**
 * Responsive Tables - 响应式表格优化
 *
 * 功能:
 * 1. 移动端自动切换到卡片视图
 * 2. 保持桌面端表格布局
 * 3. 优化触摸目标大小
 * 4. 滚动优化
 *
 * @version 1.0.0
 */

/* ============================================
   表格容器基础样式
   ============================================ */

.table-responsive-cards {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 桌面端：正常表格 */
@media (min-width: 768px) {
    .table-responsive-cards {
        overflow-x: visible;
    }
}

/* ============================================
   移动端卡片视图
   ============================================ */

@media (max-width: 767px) {
    /* 隐藏原始表格 */
    .table-responsive-cards table {
        display: none;
    }

    /* 创建卡片布局 */
    .table-responsive-cards::after {
        content: attr(data-empty-text);
        display: block;
        text-align: center;
        padding: 2rem;
        color: var(--bs-gray-600);
    }

    /* 卡片容器 */
    .table-card-view {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* 单个卡片 */
    .table-card {
        background: white;
        border: 1px solid var(--bs-border-color);
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    .table-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* 卡片头部 */
    .table-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .table-card__title {
        font-weight: 600;
        color: var(--bs-gray-900);
        font-size: 1rem;
        margin: 0;
    }

    .table-card__badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
    }

    /* 卡片主体 */
    .table-card__body {
        display: grid;
        gap: 0.5rem;
    }

    .table-card__row {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 0.5rem;
        font-size: 0.875rem;
    }

    .table-card__label {
        color: var(--bs-gray-600);
        font-weight: 500;
    }

    .table-card__value {
        color: var(--bs-gray-900);
        word-break: break-word;
    }

    /* 卡片底部（操作按钮） */
    .table-card__footer {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--bs-border-color);
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .table-card__footer .btn {
        flex: 1;
        min-width: 0;
        font-size: 0.875rem;
        /* 确保触摸目标至少44px高 */
        min-height: 44px;
        padding: 0.5rem;
    }

    .table-card__footer .btn-sm {
        font-size: 0.8125rem;
        min-height: 40px;
    }
}

/* ============================================
   响应式表格增强（桌面端）
   ============================================ */

@media (min-width: 768px) {
    /* 优化表格滚动 */
    .table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    .table-scroll-wrapper::-webkit-scrollbar {
        height: 8px;
    }

    .table-scroll-wrapper::-webkit-scrollbar-track {
        background: var(--bs-gray-100);
        border-radius: 4px;
    }

    .table-scroll-wrapper::-webkit-scrollbar-thumb {
        background: var(--bs-gray-400);
        border-radius: 4px;
    }

    .table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--bs-gray-500);
    }

    /* 固定表头 */
    .table-fixed-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* 固定首列 */
    .table-fixed-column tbody tr td:first-child,
    .table-fixed-column thead tr th:first-child {
        position: sticky;
        left: 0;
        z-index: 9;
        background: white;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    }
}

/* ============================================
   触摸目标优化
   ============================================ */

@media (max-width: 767px) {
    /* 确保所有可点击元素至少44x44px */
    .table-card a,
    .table-card button,
    .table-card .btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 图标按钮 */
    .table-card .btn-icon {
        width: 44px;
        height: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 复选框和单选框 */
    .table-card input[type="checkbox"],
    .table-card input[type="radio"] {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    .table-card .form-check-input {
        width: 24px;
        height: 24px;
    }
}

/* ============================================
   状态徽章优化
   ============================================ */

.table-card__badge,
.table .badge {
    font-weight: 600;
    letter-spacing: 0.025em;
}

@media (max-width: 767px) {
    .table-card__badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
    }
}

/* ============================================
   空状态
   ============================================ */

.table-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bs-gray-600);
}

.table-empty__icon {
    font-size: 3rem;
    color: var(--bs-gray-400);
    margin-bottom: 1rem;
}

.table-empty__text {
    font-size: 1rem;
    color: var(--bs-gray-600);
    margin-bottom: 1rem;
}

.table-empty__action {
    margin-top: 1rem;
}

@media (max-width: 767px) {
    .table-empty {
        padding: 2rem 1rem;
    }

    .table-empty__icon {
        font-size: 2.5rem;
    }
}

/* ============================================
   加载状态
   ============================================ */

.table-loading {
    position: relative;
    min-height: 200px;
}

.table-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.table-loading::before {
    content: '加载中...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    color: var(--bs-gray-600);
}

/* ============================================
   分页优化（移动端）
   ============================================ */

@media (max-width: 767px) {
    .pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
    }

    /* 隐藏一些页码 */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
        display: none;
    }
}

/* ============================================
   搜索和筛选优化（移动端）
   ============================================ */

@media (max-width: 767px) {
    .table-filters {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .table-filters .form-control,
    .table-filters .form-select,
    .table-filters .btn {
        width: 100%;
        min-height: 44px;
    }

    .table-filters .input-group {
        width: 100%;
    }
}

/* ============================================
   批量操作优化
   ============================================ */

@media (max-width: 767px) {
    .table-bulk-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--bs-border-color);
        padding: 0.75rem 1rem;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        display: flex;
        gap: 0.5rem;
    }

    .table-bulk-actions .btn {
        flex: 1;
        min-height: 44px;
    }

    /* 为底部操作栏预留空间 */
    .has-bulk-actions {
        padding-bottom: 80px;
    }
}

/* ============================================
   暗色模式
   ============================================ */

@media (prefers-color-scheme: dark) {
    @media (max-width: 767px) {
        .table-card {
            background: #2d3748;
            border-color: #4a5568;
        }

        .table-card__title {
            color: #e2e8f0;
        }

        .table-card__label {
            color: #cbd5e0;
        }

        .table-card__value {
            color: #e2e8f0;
        }

        .table-bulk-actions {
            background: #2d3748;
            border-color: #4a5568;
        }
    }

    .table-empty__icon {
        color: #4a5568;
    }

    .table-empty__text {
        color: #cbd5e0;
    }
}

/* ============================================
   动画效果
   ============================================ */

@media (max-width: 767px) {
    .table-card {
        animation: slideInUp 0.3s ease;
    }

    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 交错动画 */
    .table-card:nth-child(1) { animation-delay: 0.05s; }
    .table-card:nth-child(2) { animation-delay: 0.1s; }
    .table-card:nth-child(3) { animation-delay: 0.15s; }
    .table-card:nth-child(4) { animation-delay: 0.2s; }
    .table-card:nth-child(5) { animation-delay: 0.25s; }
}

/* ============================================
   辅助类
   ============================================ */

/* 强制显示表格（不转换为卡片） */
.table-responsive-cards.table-no-cards table {
    display: table !important;
}

@media (max-width: 767px) {
    .table-responsive-cards.table-no-cards {
        overflow-x: auto;
    }
}

/* 隐藏移动端列 */
@media (max-width: 767px) {
    .d-md-table-cell {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .d-md-table-cell {
        display: table-cell !important;
    }
}

/* 仅移动端显示 */
.mobile-only {
    display: none;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }
}

/* 仅桌面端显示 */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}