/* ============================================================
   流量明细页面 - traffic.css
   原创设计：统计概览 + 时间线卡片列表
   与moban3的桌面表格+移动卡片双布局完全不同
   ============================================================ */

/* ====== 统计概览卡片 ====== */
.tf-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
    animation: fadeUp .3s var(--ease-out) both;
}

.tf-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-radius: var(--radius-lg);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.tf-stat-card::after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    pointer-events: none;
}

.tf-stat-card.card-up {
    background: linear-gradient(135deg, #60A5FA, #3B82F6);
}

.tf-stat-card.card-down {
    background: linear-gradient(135deg, #A78BFA, #7C3AED);
}

.tf-stat-card.card-total {
    background: linear-gradient(135deg, #34D399, #10B981);
}

.tf-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tf-stat-icon svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tf-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tf-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.tf-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,.8);
}

/* ====== 提示条 ====== */
.tf-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(59,130,246,.06);
    border: 1px solid rgba(59,130,246,.12);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
    animation: fadeUp .3s var(--ease-out) .05s both;
}

.tf-notice-icon {
    width: 18px;
    height: 18px;
    stroke: #3B82F6;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.tf-notice-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ====== 列表标题 ====== */
.tf-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    animation: fadeUp .3s var(--ease-out) .08s both;
}

.tf-list-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.tf-list-count {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--surface-alt);
    padding: 3px 10px;
    border-radius: 10px;
}

/* ====== 流量记录列表 ====== */
.tf-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: fadeUp .3s var(--ease-out) .1s both;
}

.tf-record {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--divider);
    transition: all .2s var(--ease-out);
}

.tf-record:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    transform: translateY(-1px);
    border-color: transparent;
}

/* 记录左侧图标 */
.tf-record-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(124,58,237,.1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tf-record-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 记录主体 */
.tf-record-body {
    flex: 1;
    min-width: 0;
}

.tf-record-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.tf-record-details {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tf-detail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.tf-detail-arrow {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.tf-detail-arrow.up {
    stroke: #3B82F6;
}

.tf-detail-arrow.down {
    stroke: #7C3AED;
}

.tf-detail-lbl {
    color: var(--text-muted);
}

.tf-detail-val {
    font-weight: 500;
    color: var(--text-primary);
}

/* 倍率标签 */
.tf-rate {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
    color: #D97706;
    background: rgba(234,179,8,.1);
}

/* 记录右侧总计 */
.tf-record-total {
    text-align: right;
    flex-shrink: 0;
}

.tf-total-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.tf-total-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ====== 空状态 ====== */
.tf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    animation: fadeUp .3s var(--ease-out) both;
}

.tf-empty svg {
    width: 56px;
    height: 56px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 12px;
    opacity: .5;
}

.tf-empty p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* ====== 响应式 ====== */
@media (max-width: 768px) {
    .tf-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .tf-stat-card {
        padding: 16px 20px 16px 17px;
    }

    .tf-stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .tf-stat-icon svg {
        width: 17px;
        height: 17px;
    }

    .tf-stat-num {
        font-size: 18px;
    }

    .tf-record {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 12px;
        padding: 14px 16px;
        align-items: center;
    }

    .tf-record-icon {
        grid-row: 1 / 3;
        grid-column: 1;
        width: 42px;
        height: 42px;
    }

    .tf-record-body {
        display: contents;
    }

    .tf-record-date {
        grid-row: 1;
        grid-column: 2;
        font-size: 13px;
        margin-bottom: 0;
    }

    .tf-record-details {
        grid-row: 2;
        grid-column: 2 / 4;
        gap: 10px;
        margin-top: 2px;
    }

    .tf-record-total {
        grid-row: 1;
        grid-column: 3;
    }

    .tf-total-val {
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .tf-stat-card {
        padding: 14px 16px 14px 15px;
    }

    .tf-stat-num {
        font-size: 16px;
    }

    .tf-record {
        padding: 12px 14px;
    }

    .tf-total-val {
        font-size: 13px;
    }
}