/**
 * Target Image Tools - Preview and Results Styles
 *
 * Responsibilities:
 * - Image preview containers.
 * - File result cards.
 * - Original/output information.
 * - Compression statistics.
 * - Success and failure indicators.
 * - Retry buttons.
 * - File size comparison.
 *
 * This file does not control the overall application layout.
 */

.tit-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 预览表格外容器：限制最大高度显示约 30 行，支持上下/左右滑动 */
.tit-table-wrapper {
    width: 100%;
    max-height: 1200px;
    overflow-y: auto;
    overflow-x: auto;
    margin-top: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* 无缩略图预览表格基础样式 */
.tit-preview-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    text-align: left;
    background-color: #ffffff;
}

/* 滚动时固定表头 (Sticky Header) */
.tit-preview-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.tit-preview-table th,
.tit-preview-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.tit-preview-table th {
    font-weight: 600;
    color: var(--tit-text-muted);
}

.tit-preview-table tr:hover {
    background-color: #fcfcfc;
}

/* 序号列样式 */
.tit-col-index {
    width: 60px;
    text-align: center;
    font-weight: 600;
    color: var(--tit-text-muted);
}

/* 文件名与格式容器 */
.tit-file-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tit-file-name {
    font-weight: 500;
    color: var(--tit-text-main);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 文件名下方的格式转换说明 (例如: png→jpg) */
.tit-file-format {
    font-size: 0.75rem;
    color: var(--tit-text-muted);
    font-weight: 500;
    font-family: SFMono-Regular, Consolas, monospace;
}

.tit-size-diff,
.tit-res-diff {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
}

.tit-badge-success {
    display: inline-block;
    padding: 2px 8px;
    background-color: #ecfdf5;
    color: #10b981;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 6px;
}

.tit-btn-sm {
    padding: 4px 12px;
    font-size: 0.8rem;
    border-radius: 6px;
    text-decoration: none;
}

.tit-status-pending {
    color: var(--tit-text-muted);
    font-size: 0.85rem;
}

.tit-status-processing {
    color: var(--tit-primary);
    font-weight: 500;
    font-size: 0.85rem;
}

.tit-status-error {
    color: #ef4444;
    font-size: 0.85rem;
}