/* ==========================================================================
 * peiste-cabinets.cn 驾驶舱 v2.0 升级
 * - 4 张数字卡加 SVG 迷你折线图
 * - 顶部"今日核心指标"横幅
 * - 实时通知条
 * - 订单状态分布环图
 * 加载顺序: theme-cream → mobile-responsive → cockpit → cockpit-v2
 * 创建: 2026-06-06
 * ========================================================================== */

/* ==========================================================================
 * 1. 数字卡内嵌迷你折线图 (SVG via background-image)
 *    - 用 data URL SVG,零依赖
 *    - 每个图标类型对应不同折线
 * ========================================================================== */
.stat-card .stat-info {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* 替换之前 ::after 的渐变光条 → 改用真实折线 */
.stat-card .stat-info::after {
  content: '';
  display: block;
  margin-top: 10px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: left center;
  opacity: 0.85;
}

/* 订单 - 上升金线 */
.stat-card:has(.stat-icon.orders) .stat-info::after,
.stat-cards .el-col:nth-child(1) .stat-info::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23C4956A' stop-opacity='0.4'/><stop offset='100%' stop-color='%23C4956A' stop-opacity='0'/></linearGradient></defs><path d='M0,22 L12,18 L24,20 L36,14 L48,16 L60,10 L72,12 L84,6 L100,8 L100,28 L0,28 Z' fill='url(%23g)'/><path d='M0,22 L12,18 L24,20 L36,14 L48,16 L60,10 L72,12 L84,6 L100,8' fill='none' stroke='%23C4956A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* 生产 - 平稳橙线 */
.stat-card:has(.stat-icon.producing) .stat-info::after,
.stat-cards .el-col:nth-child(2) .stat-info::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23D4A574' stop-opacity='0.4'/><stop offset='100%' stop-color='%23D4A574' stop-opacity='0'/></linearGradient></defs><path d='M0,14 L12,16 L24,12 L36,15 L48,11 L60,14 L72,10 L84,13 L100,11 L100,28 L0,28 Z' fill='url(%23g)'/><path d='M0,14 L12,16 L24,12 L36,15 L48,11 L60,14 L72,10 L84,13 L100,11' fill='none' stroke='%23D4A574' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* 客户 - 上升绿线 */
.stat-card:has(.stat-icon.customers) .stat-info::after,
.stat-cards .el-col:nth-child(3) .stat-info::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%237D9B76' stop-opacity='0.4'/><stop offset='100%' stop-color='%237D9B76' stop-opacity='0'/></linearGradient></defs><path d='M0,24 L12,20 L24,22 L36,16 L48,18 L60,12 L72,14 L84,8 L100,5 L100,28 L0,28 Z' fill='url(%23g)'/><path d='M0,24 L12,20 L24,22 L36,16 L48,18 L60,12 L72,14 L84,8 L100,5' fill='none' stroke='%237D9B76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* 应收 - 下降珊瑚线 */
.stat-card:has(.stat-icon.pending) .stat-info::after,
.stat-cards .el-col:nth-child(4) .stat-info::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23C47B6B' stop-opacity='0.4'/><stop offset='100%' stop-color='%23C47B6B' stop-opacity='0'/></linearGradient></defs><path d='M0,8 L12,12 L24,10 L36,16 L48,14 L60,18 L72,16 L84,22 L100,20 L100,28 L0,28 Z' fill='url(%23g)'/><path d='M0,8 L12,12 L24,10 L36,16 L48,14 L60,18 L72,16 L84,22 L100,20' fill='none' stroke='%23C47B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* 数字卡右上角添加"涨跌"小角标 */
.stat-card {
  position: relative;
}

.stat-card::before {
  content: '↑ 12.5%';
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  background: rgba(125, 155, 118, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
  z-index: 2;
}

.stat-cards .el-col:nth-child(2) .stat-card::before { content: '→ 平稳'; color: var(--warning); background: rgba(212, 165, 116, 0.12); }
.stat-cards .el-col:nth-child(3) .stat-card::before { content: '↑ 8.3%'; color: var(--success); background: rgba(125, 155, 118, 0.12); }
.stat-cards .el-col:nth-child(4) .stat-card::before { content: '↓ 5.2%'; color: var(--danger); background: rgba(196, 123, 107, 0.12); }

/* ==========================================================================
 * 2. 顶部"今日核心指标"横幅 - 深色驾驶舱头条
 * ========================================================================== */
.cockpit-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #3D3022 0%, #6B5B4F 100%);
  border-radius: 14px;
  color: #FAF6E9;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(61, 48, 34, 0.2);
}

.cockpit-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(196, 149, 106, 0.3) 0%, transparent 60%);
  pointer-events: none;
}

.cockpit-hero-greeting {
  flex-shrink: 0;
  z-index: 1;
}

.cockpit-hero-greeting h1 {
  font-size: 22px;
  font-weight: 700;
  color: #FAF6E9;
  margin: 0 0 4px 0;
  letter-spacing: 0.5px;
}

.cockpit-hero-greeting p {
  font-size: 12px;
  color: rgba(250, 246, 233, 0.7);
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cockpit-hero-metrics {
  display: flex;
  flex: 1;
  gap: 0;
  z-index: 1;
}

.cockpit-hero-metric {
  flex: 1;
  padding: 0 20px;
  border-right: 1px solid rgba(250, 246, 233, 0.15);
}

.cockpit-hero-metric:last-child { border-right: none; }

.cockpit-hero-metric .label {
  font-size: 11px;
  color: rgba(250, 246, 233, 0.65);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.cockpit-hero-metric .value {
  font-size: 22px;
  font-weight: 700;
  color: #FAF6E9;
  font-family: -apple-system, 'SF Pro Display', sans-serif;
  letter-spacing: -0.3px;
}

.cockpit-hero-metric .delta {
  display: inline-block;
  font-size: 11px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  vertical-align: middle;
}

.cockpit-hero-metric .delta.up   { background: rgba(125, 155, 118, 0.3); color: #C8E6C9; }
.cockpit-hero-metric .delta.down { background: rgba(196, 123, 107, 0.3); color: #FFCDD2; }

.cockpit-hero-clock {
  flex-shrink: 0;
  text-align: right;
  z-index: 1;
}

.cockpit-hero-clock .time {
  font-size: 28px;
  font-weight: 700;
  color: #FAF6E9;
  font-family: 'SF Mono', Monaco, monospace;
  letter-spacing: 1px;
  line-height: 1;
}

.cockpit-hero-clock .date {
  font-size: 11px;
  color: rgba(250, 246, 233, 0.6);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* ==========================================================================
 * 3. 实时通知条
 * ========================================================================== */
.cockpit-notifications {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(196, 149, 106, 0.06);
}

.cockpit-notifications-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 14px 0;
  border-right: 1px solid var(--border-light);
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.cockpit-notifications-label .bell {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--danger) 0%, #B06A5A 100%);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.cockpit-notifications-label .bell::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #FF5252;
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

.cockpit-notifications-list {
  flex: 1;
  display: flex;
  gap: 0;
  overflow: hidden;
  padding: 14px 0;
}

.cockpit-notifications-list .item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-right: 1px dashed var(--border-light);
  font-size: 13px;
  color: var(--text-sub);
  white-space: nowrap;
  transition: all 0.2s;
  cursor: pointer;
}

.cockpit-notifications-list .item:hover {
  color: var(--primary-dark);
}

.cockpit-notifications-list .item:last-child { border-right: none; }

.cockpit-notifications-list .item .tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.cockpit-notifications-list .item .tag.urgent { background: rgba(196, 123, 107, 0.15); color: var(--danger); }
.cockpit-notifications-list .item .tag.normal { background: rgba(196, 149, 106, 0.15); color: var(--primary-dark); }
.cockpit-notifications-list .item .tag.info   { background: rgba(125, 155, 118, 0.15); color: var(--success); }

.cockpit-notifications-list .item .time {
  font-size: 11px;
  color: var(--text-light);
  margin-left: 4px;
}

/* ==========================================================================
 * 4. 订单状态分布环图
 * ========================================================================== */
.cockpit-donut {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(196, 149, 106, 0.06);
}

.cockpit-donut-chart {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.cockpit-donut-chart::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    #C4956A 0% 35%,       /* 生产中 - 金 35% */
    #D4A574 35% 60%,      /* 待确认 - 橙 25% */
    #7D9B76 60% 82%,      /* 已完成 - 绿 22% */
    #C47B6B 82% 92%,      /* 已取消 - 珊瑚 10% */
    #E8DCC4 92% 100%      /* 草稿 - 浅 8% */
  );
  mask: radial-gradient(circle, transparent 38%, black 39%, black 70%, transparent 71%);
  -webkit-mask: radial-gradient(circle, transparent 38%, black 39%, black 70%, transparent 71%);
  animation: donutSpin 1s ease-out;
}

@keyframes donutSpin {
  from { transform: rotate(-90deg) scale(0.8); opacity: 0; }
  to   { transform: rotate(0deg) scale(1); opacity: 1; }
}

.cockpit-donut-chart::after {
  content: '156';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-main);
  font-family: -apple-system, 'SF Pro Display', sans-serif;
  letter-spacing: -0.5px;
}

.cockpit-donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cockpit-donut-legend .item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-sub);
}

.cockpit-donut-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.cockpit-donut-legend .dot.producing { background: #C4956A; }
.cockpit-donut-legend .dot.pending    { background: #D4A574; }
.cockpit-donut-legend .dot.completed  { background: #7D9B76; }
.cockpit-donut-legend .dot.cancelled  { background: #C47B6B; }
.cockpit-donut-legend .dot.draft      { background: #E8DCC4; }

.cockpit-donut-legend .name {
  flex: 1;
  color: var(--text-sub);
}

.cockpit-donut-legend .count {
  font-weight: 700;
  color: var(--text-main);
  font-size: 14px;
}

.cockpit-donut-legend .pct {
  font-size: 12px;
  color: var(--text-light);
  min-width: 36px;
  text-align: right;
}

/* ==========================================================================
 * 5. 移动端适配
 * ========================================================================== */
@media (max-width: 1024px) {
  .cockpit-hero {
    flex-wrap: wrap;
  }
  .cockpit-hero-metrics {
    flex-wrap: wrap;
  }
  .cockpit-hero-metric {
    flex: 0 0 50%;
    padding: 8px 12px;
    border-right: none;
    border-bottom: 1px solid rgba(250,246,233,0.1);
  }
}

@media (max-width: 768px) {
  .cockpit-hero {
    padding: 14px 16px;
    border-radius: 10px;
  }
  .cockpit-hero-greeting h1 {
    font-size: 18px;
  }
  .cockpit-hero-clock .time {
    font-size: 22px;
  }
  .cockpit-hero-metric .value {
    font-size: 18px;
  }
  .cockpit-hero-metric .label {
    font-size: 10px;
  }

  .cockpit-notifications {
    padding: 0 12px;
    border-radius: 10px;
  }
  .cockpit-notifications-label {
    padding: 12px 12px 12px 0;
    font-size: 12px;
  }
  .cockpit-notifications-label .bell {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .cockpit-notifications-list .item {
    padding: 0 12px;
    font-size: 12px;
  }
  /* 通知条横向滚动 */
  .cockpit-notifications-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cockpit-donut {
    padding: 14px;
    gap: 16px;
  }
  .cockpit-donut-chart {
    width: 110px;
    height: 110px;
  }
  .cockpit-donut-chart::after {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .cockpit-hero-greeting h1 {
    font-size: 16px;
  }
  .cockpit-hero-metric {
    flex: 0 0 100%;
  }
  .cockpit-notifications-label .text {
    display: none;
  }
}