/**
 * Desktop Layout — PC端布局与适配
 * 左侧固定导航 + 顶部状态栏 + 主内容区域
 *
 * 注意：不再根据屏幕宽度自动切换mobile/desktop。
 * 显示模式由URL决定：/ 或 /mobile 显示mobile，/desktop 显示desktop。
 */

/* 默认隐藏PC端元素，由JS根据URL控制是否显示 */
.desktop-only { display: none; }

/* PC端页面显隐：默认隐藏，active时显示 */
.pc-page { display: none !important; }
.pc-page.active { display: block !important; }

/* ========== PC端布局（>=1024px） ========== */
@media (min-width: 1024px) {
  body {
    max-width: none;
    margin: 0;
    padding-bottom: 0;
    background: var(--color-bg-page);
  }

  /* 整体布局容器 */
  .app-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
  }

  /* 主内容区 */
  .main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .main-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
  }

  /* PC端按钮按内容自适应宽度（.btn 默认 width:100% 是移动端整行设计，
     不重置会导致页头按钮堆叠/拉通栏、标题被挤换行） */
  .app-layout .btn { width: auto; }

  /* PC端首页驾驶舱 */
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-4);
    align-items: start;
  }

  .dashboard-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .dashboard-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: var(--space-4);
  }

  /* PC端经营指标横向排列 */
  .metrics-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  .metric-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
  }
  .metric-card.profit {
    border-color: var(--color-success);
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  }
  .metric-card .metric-value {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
  }
  .metric-card.profit .metric-value {
    color: var(--color-success);
    font-size: var(--font-3xl);
  }
  .metric-card .metric-label {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
  }

  /* PC端日历放大 */
  .calendar-card {
    padding: var(--space-5);
  }
  .calendar-cell {
    font-size: var(--font-md);
    border-radius: var(--radius-md);
  }

  /* PC端订单表格 */
  .order-table-wrapper {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
  }

  /* PC端车辆表格 */
  .vehicle-table-wrapper {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
  }

  /* PC端内容区域卡片 */
  .content-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    margin-bottom: var(--space-4);
  }

  /* PC端两栏布局（列表+详情） */
  .split-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--space-4);
    align-items: start;
  }

  .split-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .split-right {
    position: sticky;
    top: var(--space-4);
  }

  /* PC端浮动操作按钮 */
  .fab {
    bottom: var(--space-5);
    right: var(--space-5);
  }
}

/* ========== 大屏PC优化（>=1440px） ========== */
@media (min-width: 1440px) {
  .dashboard-grid {
    grid-template-columns: 1fr 440px;
  }
  .split-layout {
    grid-template-columns: 1fr 480px;
  }
}

/* ========== 经营工作台（PC 首页：调度月历主轴） ==========
   目标：现代经营控制台感 —— 轻卡片、细阴影、克制圆角、状态色统一、
   日历为视觉中心。全部类名以 .wb/.wbc 前缀隔离，不影响其他页面。 */

.wb {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ---- 头部 ---- */
.wb-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 2px;
}
.wb-header-left { display: flex; align-items: baseline; gap: 12px; }
.wb-title { font-size: var(--font-lg); font-weight: 700; color: var(--color-text-primary); }
.wb-date { font-size: var(--font-sm); color: var(--color-text-tertiary); }
.wb-global-alert {
  padding: 5px 12px;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-full);
  color: var(--color-danger);
  font-size: var(--font-sm);
  font-weight: 600;
}
.wb-quick { margin-left: auto; display: flex; gap: 8px; }
.wb-quick-btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all .15s;
}
.wb-quick-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.wb-quick-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.wb-quick-primary:hover { background: var(--color-primary-dark); color: #fff; }

/* ---- 卡片基座（CLEANITY：深色标题栏 + 白卡体） ---- */
.wb-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  padding: 0;
  overflow: hidden;
}
.wb-card-title {
  background: var(--color-panel-head-bg);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-sm);
  font-weight: 600;
  padding: 10px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wb-card-title .ic { color: var(--color-primary); }
.wb-card-title .wb-count { background: var(--color-primary-light); color: var(--color-primary); }
.wb-card-body { padding: 14px 16px; }
.wb-count {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  font-size: var(--font-xs);
  color: var(--color-text-secondary);
}
.wb-empty { padding: 18px 0; text-align: center; color: var(--color-text-tertiary); font-size: var(--font-sm); }

/* ---- 主区域：报价卡 + 日历 + 当日详情（P8 三列） ---- */
.wb-main {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: stretch;
}
.wb-cal-card .wb-card-body { padding: 12px 14px; }
.wb-day-card { display: flex; flex-direction: column; max-height: 560px; }
.wb-day-card .wb-card-body { overflow-y: auto; flex: 1; padding: 12px 14px; }
#wb-day-detail { min-height: 60px; }

/* 1024–1280px 降级：报价卡通栏，日历+详情两列 */
@media (min-width: 1024px) and (max-width: 1280px) {
  .wb-main { grid-template-columns: minmax(0, 1fr) 340px; }
  .wb-quote-card { grid-column: 1 / -1; }
}

/* ---- AI 快速报价常驻卡（P8） ---- */
.wb-quote-card { display: flex; flex-direction: column; max-height: 560px; }
.wb-quote-body { overflow-y: auto; flex: 1; padding: 12px 14px; }
.wb-quote-flash { animation: wbQuoteFlash 1s ease; }
@keyframes wbQuoteFlash {
  0%, 100% { outline: 2px solid transparent; }
  30% { outline: 2px solid var(--color-primary); outline-offset: 2px; }
}

/* ---- 次区域：待办 + 侧栏 ---- */
.wb-sub {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.wb-side { display: flex; flex-direction: column; gap: 14px; }

/* ---- 月历 ---- */
.wbc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wbc-month { font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); }
.wbc-nav {
  width: 30px; height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: 16px;
  cursor: pointer;
}
.wbc-nav:hover { border-color: var(--color-primary); color: var(--color-primary); }
.wbc-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: var(--font-xs);
  color: var(--color-text-tertiary);
  text-align: center;
  padding: 4px 0;
}
.wbc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.wbc-cell {
  min-height: 74px;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 5px 6px;
  cursor: pointer;
  background: var(--color-bg-card);
  transition: box-shadow .12s, border-color .12s;
  display: flex;
  flex-direction: column;
}
.wbc-cell:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.wbc-out { background: transparent; border-color: transparent; cursor: default; }
.wbc-out:hover { box-shadow: none; }
.wbc-num { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-secondary); display: flex; align-items: center; gap: 4px; }
.wbc-today-mark {
  font-size: 10px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 0 5px;
  font-weight: 600;
}
.wbc-selected { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.wbc-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.wbc-chip {
  font-size: 11px;
  line-height: 16px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}
.wbc-chip-danger { background: var(--color-danger-bg); color: var(--color-danger); font-weight: 700; }
.wbc-chip-warn { background: var(--color-warning-bg); color: var(--color-warning); font-weight: 600; }

/* 状态底色（克制的满格淡色，红色醒目但不刺眼） */
.wbc-red { background: var(--color-danger-bg); border-color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger); }
.wbc-red .wbc-num { color: var(--color-danger); font-weight: 700; }
.wbc-orange { background: var(--color-warning-bg); border-color: #fed7aa; }
.wbc-orange .wbc-num { color: var(--color-warning); }
.wbc-blue { background: var(--color-primary-light); border-color: #bfdbfe; }
.wbc-blue .wbc-num { color: var(--color-primary-dark); }
.wbc-green { background: var(--color-success-bg); border-color: #bbf7d0; }
.wbc-green .wbc-num { color: var(--color-success); }
.wbc-gray { background: var(--color-bg-card); }

.wbc-legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: var(--font-xs);
  color: var(--color-text-tertiary);
}
.wbc-legend span { display: inline-flex; align-items: center; gap: 4px; }
.wbc-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.wbc-dot-red { background: var(--color-danger); }
.wbc-dot-orange { background: var(--color-warning); }
.wbc-dot-blue { background: var(--color-primary); }
.wbc-dot-green { background: var(--color-success); }
.wbc-dot-gray { background: #d1d5db; }

/* ---- 当日详情 ---- */
.wb-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wb-day-title { font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); }
.wb-sev { font-size: var(--font-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); }
.wb-sev-red { background: var(--color-danger); color: #fff; }
.wb-sev-orange { background: var(--color-warning); color: #fff; }
.wb-sev-blue { background: var(--color-primary); color: #fff; }
.wb-sev-green { background: var(--color-success); color: #fff; }
.wb-anomaly {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: var(--font-sm);
  color: var(--color-danger);
}
.wb-order {
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.wb-order:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.wb-order-head { display: flex; align-items: baseline; gap: 8px; }
.wb-order-customer { font-weight: 700; font-size: var(--font-sm); color: var(--color-text-primary); }
.wb-order-no { font-size: var(--font-xs); color: var(--color-text-tertiary); }
.wb-order-route { font-size: var(--font-sm); color: var(--color-text-secondary); margin-top: 2px; }
.wb-order-meta { font-size: var(--font-xs); color: var(--color-text-tertiary); margin-top: 2px; }
.wb-order-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wb-tag { font-size: 11px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.wb-tag-ok { background: var(--color-success-bg); color: var(--color-success); font-weight: 600; }
.wb-tag-danger { background: var(--color-danger-bg); color: var(--color-danger); font-weight: 700; }
.wb-tag-warn { background: var(--color-warning-bg); color: var(--color-warning); font-weight: 600; }
.wb-tag-self { background: var(--color-primary-light); color: var(--color-primary-dark); }
.wb-tag-ext { background: var(--color-info-bg); color: var(--color-info); }
.wb-day-note { margin-top: 8px; font-size: var(--font-xs); color: var(--color-text-tertiary); }

/* ---- 待办/提醒条目 ---- */
.wb-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.wb-action:hover { background: var(--color-bg-subtle); border-color: var(--color-border); }
.wb-action + .wb-action { border-top: 1px solid var(--color-border-light); border-radius: 0; }
.wb-action-urgent { background: var(--color-danger-bg); }
.wb-action-urgent:hover { border-color: var(--color-danger-border); }
.wb-action-icon { font-size: 16px; }
.wb-action-body { flex: 1; min-width: 0; }
.wb-action-title { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); }
.wb-action-desc { font-size: var(--font-xs); color: var(--color-text-tertiary); margin-top: 1px; }
.wb-action-arrow { color: var(--color-text-tertiary); font-size: 16px; }

/* ---- 概览统计 ---- */
.wb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wb-stat { text-align: center; padding: 8px 0; }
.wb-stat-num { font-size: var(--font-xl); font-weight: 700; color: var(--color-text-primary); }
.wb-stat-label { font-size: var(--font-xs); color: var(--color-text-tertiary); margin-top: 2px; }
.wb-num-danger { color: var(--color-danger); }