/* ================================================================
   after-sale.css v8 — 售后分析 数据大屏风格
   设计语言：暗色科技感 / KPI横排 / 趋势图主视觉 / 对称网格
   布局: Grid(5+1列 × 4行) 一屏展示
   ================================================================ */

/* --- Design Tokens --- */
:root {
    --sa-bg: rgba(15, 23, 42, 0.50);
    --sa-bg-card: rgba(15, 23, 42, 0.65);
    --sa-bg-hover: rgba(20, 30, 50, 0.60);
    --sa-border: rgba(255, 255, 255, 0.07);
    --sa-border-glow: rgba(99, 102, 241, 0.25);
    --sa-text-primary: #f1f5f9;
    --sa-text-secondary: #94a3b8;
    --sa-text-muted: #475569;

    --sa-blue: #3b82f6;     --sa-blue-glow: rgba(59,130,246,0.35);
    --sa-rose: #f43f5e;     --sa-rose-glow: rgba(244,63,94,0.35);
    --sa-amber: #f59e0b;    --sa-amber-glow: rgba(245,158,11,0.35);
    --sa-violet: #8b5cf6;   --sa-violet-glow: rgba(139,92,246,0.35);
    --sa-cyan: #06b6d4;     --sa-cyan-glow: rgba(6,182,212,0.35);
    --sa-green: #10b981;
    --sa-indigo: #6366f1;
}

/* ==================== Root ==================== */
.sa { width: 100%; }

/* ==================== Filters Bar（保持紧凑）==================== */
.sa .filters-bar { margin-bottom: 16px; }
.sa .filters-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sa .filter-label {
    font-size: 11px; font-weight: 600; color: var(--sa-text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.sa .inv-filter-select {
    padding: 7px 13px; border-radius: 10px; background: var(--sa-bg);
    border: 1px solid var(--sa-border); color: var(--sa-text-primary);
    font-size: 13px; outline: none; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
    backdrop-filter: blur(8px); min-width: 130px;
}
.sa .inv-filter-select:focus {
    border-color: var(--sa-indigo); box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.filter-reset-btn {
    padding: 7px 15px; background: rgba(255,255,255,0.04); border: 1px solid var(--sa-border);
    border-radius: 8px; color: var(--sa-text-muted); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all 0.2s;
}
.filter-reset-btn:hover {
    background: rgba(255,255,255,0.08); color: var(--sa-text-secondary);
}

/* ========== 主 Grid 大屏布局 ========== */
/*
  列定义:  [1fr][1fr][1fr][1fr][1fr] | [2.4fr]
            ---- KPI x5 ----        | 趋势图
  Row1:     KPI-KPI-KPI-KPI-KPI   | 趋势图      (200px)
  Row2:     商品排行(span3)         | 环形图| 揽收   (240px)
  Row3:     仓库排行(span6全宽)                   (180px)
  Row4:     货主对比条(span6全宽)                  (72px)
*/
.sa-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr) 2.4fr;
    grid-template-rows: 190px 230px 160px 160px 64px;
    gap: 12px;
}

/* ==================== KPI 卡片（横排等宽）==================== */
.sa-kpi {
    position: relative;
    padding: 18px 16px;
    border-radius: 14px;
    background: var(--sa-bg-card);
    border: 1px solid var(--sa-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1),
                border-color 0.25s,
                box-shadow 0.25s;
}
/* 顶部发光线 */
.sa-kpi::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
}
.sa-kpi-primary::before  { background: linear-gradient(90deg, var(--sa-blue), #60a5fa); }
.sa-kpi-hero::before     { background: linear-gradient(90deg, var(--sa-rose), #fb7185); }
.sa-kpi-warn::before     { background: linear-gradient(90deg, var(--sa-amber), #fbbf24); }
.sa-kpi-default::before  { background: linear-gradient(90deg, var(--sa-violet), #a78bfa); }
.sa-kpi-good::before    { background: linear-gradient(90deg, #059669, #34d399); }

.sa-kpi-hero {
    background: linear-gradient(145deg, rgba(244,63,94,0.08), rgba(15,23,42,0.65));
    border-color: rgba(244,63,94,0.12);
}

.sa-kpi:hover {
    transform: translateY(-3px);
    border-color: var(--sa-border-hover);
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.sa-kpi-hero:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    border-color: rgba(244,63,94,0.15);
}

/* KPI 内部结构 */
.sa-kpi-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: auto;
}
.sa-kpi-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; flex-shrink: 0;
}
.sa-ki-blue   { background: rgba(59,130,246,0.15); color: #60a5fa; }
.sa-ki-rose   { background: rgba(244,63,94,0.15); color: #fb7185; }
.sa-ki-amber  { background: rgba(245,158,11,0.15); color: #fbbf24; }
.sa-ki-violet { background: rgba(139,92,246,0.15); color: #a78bfa; }
.sa-ki-cyan   { background: rgba(6,182,212,0.15); color: #22d3ee; }
.sa-ki-green  { background: rgba(16,185,129,0.15); color: #34d399; }

.sa-kpi-label {
    font-size: 11px; font-weight: 600; color: var(--sa-text-muted);
    text-transform: uppercase; letter-spacing: 0.6px;
}
.sa-kpi-val {
    font-size: 26px; font-weight: 800; color: var(--sa-text-primary);
    letter-spacing: -0.03em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.sa-kpi-hero .sa-kpi-val {
    font-size: 28px;
    color: #fb7185;
    text-shadow: 0 0 20px rgba(244,63,94,0.3);
}
.sa-kpi-warn .sa-kpi-val { color: #fbbf24; }
.sa-kpi-good .sa-kpi-val { color: #34d399; }

/* ==================== Card 通用容器 ==================== */
.sa-card {
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--sa-bg-card);
    border: 1px solid var(--sa-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color 0.25s, box-shadow 0.25s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sa-card:hover {
    border-color: var(--sa-border-hover);
    box-shadow: 0 4px 22px rgba(0,0,0,0.14);
}

.sa-card-title {
    font-size: 11px; font-weight: 700; color: var(--sa-text-secondary);
    text-transform: uppercase; letter-spacing: 0.6px;
    margin-bottom: 12px; display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
.sa-card-title::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--sa-indigo); flex-shrink: 0;
}
.sa-cyan-title::before { background: var(--sa-cyan); }

/* ==================== 趋势图卡片（Row1 右侧，视觉焦点）==================== */
.sa-trend-card {
    grid-column: 6;
    grid-row: 1;
}
.sa-trend-card .sa-chart-body {
    flex: 1; min-height: 0; position: relative;
}
.sa-trend-card .sa-chart-body canvas { position: absolute; inset: 0; }

/* ==================== 商品排行卡片（Row2 左侧，跨3列）==================== */
.sa-rank-card {
    grid-column: 1 / 4;
    grid-row: 2;
    padding: 14px 16px;
}
.sa-rank-card .sa-card-title { margin-bottom: 10px; }
.sa-rank-card .sa-chart-body { flex: 1; min-height: 0; position: relative; }
.sa-rank-card .sa-chart-body canvas { position: absolute; inset: 0; }

/* ==================== 类型环形图（Row2 中右）==================== */
.sa-donut-card {
    grid-column: 4;
    grid-row: 2;
}
.sa-donut-card .sa-doughnut-body {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.sa-donut-card .sa-doughnut-body canvas { position: absolute; inset: 0; }
.sa-doughnut-center {
    position: relative; z-index: 1;
    text-align: center; pointer-events: none;
}
.sa-dc-val {
    font-size: 20px; font-weight: 800; color: var(--sa-text-primary);
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.sa-dc-label {
    font-size: 9px; color: var(--sa-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* ==================== 揽收详情卡片（Row2 右侧）==================== */
.sa-pickup-card {
    grid-column: 5 / 7;
    grid-row: 2;
}
.sa-pickup-stats {
    display: flex; align-items: center; justify-content: space-around;
    flex: 1; gap: 12px;
}
.sa-ps-item { text-align: center; }
.sa-ps-label {
    font-size: 9px; color: var(--sa-text-muted);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 6px; display: block;
}
.sa-ps-val {
    font-size: 22px; font-weight: 800; color: var(--sa-cyan);
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.sa-ps-divider {
    width: 1px; height: 40px; background: var(--sa-border);
}

/* ==================== 仓库排行（Row3 全宽）==================== */
.sa-wh-card {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 14px 16px;
}
.sa-wh-card .sa-card-title { margin-bottom: 10px; }
.sa-wh-card .sa-chart-body { flex: 1; min-height: 0; position: relative; }
.sa-wh-card .sa-chart-body canvas { position: absolute; inset: 0; }

/* ==================== 违约金月度走势（Row4 全宽）==================== */
.sa-penalty-card {
    grid-column: 1 / -1;
    grid-row: 4;
    padding: 14px 16px;
}
.sa-penalty-card .sa-card-title { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.sa-penalty-card .sa-chart-body { flex: 1; min-height: 0; position: relative; }
.sa-penalty-card .sa-chart-body canvas { position: absolute; inset: 0; }
.sa-card-subtitle { font-size: 11px; color: var(--sa-text-muted); font-weight: 400; }

/* ==================== 货主对比横条（Row5 全宽）==================== */
.sa-seller-strip {
    grid-column: 1 / -1;
    grid-row: 5;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--sa-bg-card);
    border: 1px solid var(--sa-border);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; gap: 18px;
    overflow: hidden;
}
.sa-seller-label {
    font-size: 11px; font-weight: 700; color: var(--sa-text-secondary);
    text-transform: uppercase; letter-spacing: 0.6px;
    white-space: nowrap; flex-shrink: 0;
    display: flex; align-items: center; gap: 7px;
}
.sa-seller-label::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--sa-violet);
    flex-shrink: 0;
}
.sa-seller-bars {
    display: flex; align-items: center; gap: 16px;
    flex: 1; overflow-x: auto; padding: 2px 0;
    scrollbar-width: none;
}
.sa-seller-bars::-webkit-scrollbar { display: none; }
.sa-seller-bar {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    min-width: 100px; flex-shrink: 0; cursor: pointer;
    padding: 8px 14px; border-radius: 10px;
    background: transparent; border: 1px solid transparent;
    transition: all 0.2s;
}
.sa-seller-bar:hover { background: var(--sa-bg-hover); }
.sa-seller-bar.active {
    border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.06);
}
.sa-seller-bar-name {
    font-size: 11px; font-weight: 600; color: var(--sa-text-primary);
    white-space: nowrap;
}
.sa-seller-bar-track {
    width: 80px; height: 6px; border-radius: 3px;
    background: rgba(255,255,255,0.05); overflow: hidden;
}
.sa-seller-bar-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--sa-indigo), var(--sa-violet));
    transition: width 0.5s cubic-bezier(.16,1,.3,1);
}
.sa-seller-bar-amt {
    font-size: 13px; font-weight: 700; color: var(--sa-rose-light, #fb7185);
    font-variant-numeric: tabular-nums;
}

/* ==================== Tab Navigation ==================== */
.sa-nav {
    display: flex; gap: 0; padding: 0; margin-top: 16px;
    border-bottom: 1px solid var(--sa-border); position: relative;
}
.sa-nav-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 11px 24px; border: none; border-radius: 0;
    background: transparent; color: var(--sa-text-muted);
    cursor: pointer; font-size: 13px; font-weight: 600;
    transition: color 0.2s; position: relative; z-index: 1;
}
.sa-nav-btn:hover { color: var(--sa-text-secondary); }
.sa-nav-btn.active { color: var(--sa-text-primary); font-weight: 700; }
.sa-nav-indicator {
    position: absolute; bottom: -1px; height: 2.5px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--sa-indigo), var(--sa-violet));
    transition: left 0.3s cubic-bezier(.34,1.56,.64,1),
                width 0.3s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}

/* ==================== Tab Panel ==================== */
.sa-tab-panel {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--sa-border) transparent;
}
.sa-tab-panel::-webkit-scrollbar { width: 5px; }
.sa-tab-panel::-webkit-scrollbar-track { background: transparent; }
.sa-tab-panel::-webkit-scrollbar-thumb {
    background: var(--sa-border); border-radius: 3px;
}

.sa-view { display: none; }
.sa-view.active { display: block; animation: saIn 0.3s ease-out; }
@keyframes saIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== Reason Cards ==================== */
.sa-reason-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
    gap: 8px; margin-bottom: 14px;
}
.sa-reason-card {
    padding: 12px 14px; border-radius: 10px; cursor: pointer;
    background: var(--sa-bg); border: 1px solid var(--sa-border);
    backdrop-filter: blur(8px);
    transition: all 0.2s cubic-bezier(.34,1.56,.64,1);
    position: relative; overflow: hidden;
}
.sa-reason-card:hover {
    border-color: var(--sa-border-hover); transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.sa-reason-card.active {
    border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.05);
}
.sa-reason-name {
    font-size: 12px; font-weight: 700; color: var(--sa-text-primary); margin-bottom: 2px;
}
.sa-reason-cnt { font-size: 10px; color: var(--sa-text-muted); }
.sa-reason-amt {
    font-size: 17px; font-weight: 800; color: #fbbf24;
    margin-top: 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

/* ==================== Table ==================== */
.sa-table-card {
    border-radius: 12px; overflow: hidden;
    background: var(--sa-bg); border: 1px solid var(--sa-border);
    backdrop-filter: blur(12px);
}
.sa-table-head {
    padding: 10px 16px; font-size: 10px; font-weight: 700;
    color: var(--sa-text-secondary); text-transform: uppercase; letter-spacing: 0.6px;
    border-bottom: 1px solid var(--sa-border);
}
.sa-table-scroll { overflow-x: auto; max-height: 200px; overflow-y: auto; }
.sa-table {
    width: 100%; border-collapse: collapse; font-size: 11.5px;
}
.sa-table thead th {
    padding: 8px 14px; text-align: left; white-space: nowrap;
    color: var(--sa-text-muted); font-weight: 600; font-size: 10px;
    letter-spacing: 0.5px; text-transform: uppercase;
    border-bottom: 1px solid var(--sa-border);
    background: rgba(255,255,255,0.015);
}
.sa-table td {
    padding: 9px 14px; color: var(--sa-text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.012);
    white-space: nowrap; max-width: 180px;
    overflow: hidden; text-overflow: ellipsis;
}
.sa-table tbody tr { transition: background 0.12s; }
.sa-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.01); }
.sa-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.sa-table .amt { color: #fb7185; font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-table .tag {
    display: inline-flex; align-items: center; padding: 2px 7px;
    border-radius: 5px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.2px;
}
.tag-refund  { background: rgba(244,63,94,0.1); color: #fb7185; }
.tag-penalty { background: rgba(245,158,11,0.1); color: #fbbf24; }
.tag-pickup  { background: rgba(59,130,246,0.1); color: #60a5fa; }
.tag-tax     { background: rgba(139,92,246,0.1); color: #a78bfa; }
.tag-compensate { background: rgba(16,185,129,0.1); color: #34d399; }

/* ==================== Search ==================== */
.sa-search-box {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px; padding: 0 14px;
    background: var(--sa-bg); border: 1px solid var(--sa-border);
    border-radius: 10px; transition: border-color 0.2s; backdrop-filter: blur(8px);
}
.sa-search-box:focus-within {
    border-color: rgba(99,102,241,0.3); box-shadow: 0 0 0 3px rgba(99,102,241,0.06);
}
.sa-search-box svg { color: var(--sa-text-muted); flex-shrink: 0; }
.sa-search-box input {
    flex: 1; padding: 9px 0; background: transparent; border: none;
    color: var(--sa-text-primary); font-size: 12.5px; outline: none;
}
.sa-search-box input::placeholder { color: rgba(71,85,105,0.45); }

/* ==================== Pager ==================== */
.sa-pager {
    display: flex; justify-content: center; align-items: center; gap: 4px; padding: 14px;
}
.sa-pg {
    min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; background: transparent; border: 1px solid var(--sa-border);
    color: var(--sa-text-muted); cursor: pointer; font-size: 10.5px; font-weight: 500;
    transition: all 0.15s;
}
.sa-pg:hover { background: rgba(255,255,255,0.05); color: var(--sa-text-secondary); }
.sa-pg.cur {
    background: var(--sa-indigo); color: #fff; border-color: var(--sa-indigo);
    box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.sa-pg:disabled { opacity: 0.2; cursor: default; }
.sa-pg-info { font-size: 9.5px; color: var(--sa-text-muted); margin: 0 6px; }

.sa-empty {
    text-align: center; padding: 32px 16px; color: var(--sa-text-muted); font-size: 12px;
}

/* ==================== Stagger Animation（入场动画）==================== */
.sa-grid > * {
    animation: saCardIn 0.5s cubic-bezier(.16,1,.3,1) both;
}
.sa-grid > *:nth-child(1)  { animation-delay: 0ms; }
.sa-grid > *:nth-child(2)  { animation-delay: 40ms; }
.sa-grid > *:nth-child(3)  { animation-delay: 80ms; }
.sa-grid > *:nth-child(4)  { animation-delay: 120ms; }
.sa-grid > *:nth-child(5)  { animation-delay: 160ms; }
.sa-grid > *:nth-child(6)  { animation-delay: 200ms; }
.sa-grid > *:nth-child(7)  { animation-delay: 240ms; }
.sa-grid > *:nth-child(8)  { animation-delay: 280ms; }
.sa-grid > *:nth-child(9)  { animation-delay: 320ms; }
.sa-grid > *:nth-child(10) { animation-delay: 360ms; }

@keyframes saCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==================== Responsive 断点 ==================== */

/* ≤1400px: 缩小趋势图比例 */
@media (max-width: 1400px) {
    .sa-grid {
        grid-template-columns: repeat(5, 1fr) 2fr;
        grid-template-rows: 180px 225px 165px 68px;
        gap: 12px;
    }
    .sa-kpi-val { font-size: 22px; }
    .sa-kpi-hero .sa-kpi-val { font-size: 24px; }
}

/* ≤1200px: KPI保持横排但更紧凑，趋势图稍小 */
@media (max-width: 1200px) {
    .sa-grid {
        grid-template-columns: repeat(5, 1fr) 1.8fr;
        grid-template-rows: 170px 220px 155px 64px;
        gap: 10px;
    }
    .sa-kpi { padding: 14px 12px; }
    .sa-kpi-val { font-size: 19px; }
    .sa-kpi-hero .sa-kpi-val { font-size: 21px; }
    .sa-kpi-icon { width: 28px; height: 28px; }
}

/* ≤1100px: 改为2列布局 */
@media (max-width: 1100px) {
    .sa-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        gap: 10px;
    }
    /* 所有元素重置为自动行列 */
    .sa-kpi { grid-column: auto !important; grid-row: auto !important; }
    .sa-trend-card { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 220px; }
    .sa-rank-card  { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 200px; }
    .sa-donut-card { grid-column: auto !important; grid-row: auto !important; }
    .sa-pickup-card { grid-column: auto !important; grid-row: auto !important; }
    .sa-wh-card    { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .sa-penalty-card { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .sa-seller-strip{ grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* ≤768px: 单列 */
@media (max-width: 768px) {
    .sa-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .sa-trend-card { min-height: 200px; }
    .sa-rank-card { min-height: 220px; }
    .sa-tab-panel { max-height: 280px; }
}