/* ========================================
   销售订单完成时长统计系统 - 自定义样式
   ======================================== */

/* ---------- 全局 ---------- */
body {
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  font-size: 14px;
  color: #333;
}

/* ---------- 导航栏 ---------- */
.navbar-brand {
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

/* ---------- 卡片 ---------- */
.card {
  border: none;
  border-radius: 10px;
}
.card-header {
  border-bottom: 1px solid #eee;
  padding: 12px 20px;
}

/* ---------- 统计卡片 ---------- */
.stat-card {
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.stat-card .stat-label {
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
}

/* 各卡片配色 */
.stat-card.total       { background: linear-gradient(135deg, #e8eaf6, #c5cae9); color: #283593; }
.stat-card.valid       { background: linear-gradient(135deg, #e8f5e9, #a5d6a7); color: #2e7d32; }
.stat-card.completed   { background: linear-gradient(135deg, #e3f2fd, #90caf9); color: #1565c0; }
.stat-card.uncompleted { background: linear-gradient(135deg, #fff3e0, #ffcc80); color: #e65100; }
.stat-card.abnormal    { background: linear-gradient(135deg, #fce4ec, #ef9a9a); color: #c62828; }
.stat-card.duplicate   { background: linear-gradient(135deg, #fff8e1, #ffe082); color: #f57f17; }
.stat-card.skipped     { background: linear-gradient(135deg, #f3e5f5, #ce93d8); color: #6a1b9a; }

/* ---------- 分组颜色标签 ---------- */
.group-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}
.group-A { background-color: #10B981; }
.group-B { background-color: #06B6D4; }
.group-C { background-color: #3B82F6; }
.group-D { background-color: #F59E0B; }
.group-E { background-color: #EF4444; }
.group-F { background-color: #6B7280; }
.group-G { background-color: #DC2626; }

/* ---------- 表格 ---------- */
#orders-table thead th {
  font-size: 0.82rem;
  white-space: nowrap;
  background-color: #f8f9fa;
}
#orders-table tbody td {
  vertical-align: middle;
  font-size: 0.85rem;
}

/* 重复订单行高亮 */
tr.row-duplicate {
  background-color: #fff8e1 !important;
}
tr.row-duplicate:hover {
  background-color: #fff3cd !important;
}

/* 异常订单行 */
tr.row-abnormal {
  background-color: #fce4ec !important;
}
tr.row-abnormal:hover {
  background-color: #f8bbd0 !important;
}

/* 负数/异常值标红 */
.text-danger-value {
  color: #dc3545;
  font-weight: 600;
}

/* ---------- 上传区 ---------- */
#file-input {
  font-size: 0.9rem;
}

/* ---------- 图表容器 ---------- */
#chart-pie, #chart-bar {
  max-height: 360px;
}

/* ---------- 提示信息 ---------- */
.alert-section .alert {
  border-radius: 8px;
  font-size: 0.9rem;
}

/* ---------- 响应式优化 ---------- */
@media (max-width: 768px) {
  .stat-card .stat-value {
    font-size: 1.4rem;
  }
  .navbar-brand {
    font-size: 0.95rem;
  }
}

/* ---------- DataTables 覆盖 ---------- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 10px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  margin-top: 10px;
}

/* ---------- 分组统计表 ---------- */
#group-stats-table td,
#group-stats-table th {
  vertical-align: middle;
}
#group-stats-table .btn-group .btn {
  padding: 2px 8px;
  font-size: 0.8rem;
}

/* ---------- 按钮图标对齐 ---------- */
.btn i {
  vertical-align: middle;
}

/* ---------- 页脚 ---------- */
footer {
  background: #fff;
}