/*
 * B01 Task Page — 生产任务 / 配送任务 页面框架
 *
 * 生产任务页（bare）：无顶部标题卡、无外层白色容器，页面背景直接
 * 纵向排列订单列表同款卡片；配送任务页保持原有白卡片体系。
 */

.task-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ---- 顶部工具栏（sticky 固定，与订单页工具栏同一视觉） ---- */
.task-page-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 26px;
  padding: 16px 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  flex-shrink: 0;
  margin-bottom: 20px;
}

.task-page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #25372f;
  letter-spacing: 0.5px;
}

/* ---- 主体（白卡片体系，业务内容下一步填充） ---- */
.task-page-body {
  flex: 1;
  min-height: 0;
  background: #FFFFFF;
  border-radius: 26px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-page-empty {
  text-align: center;
  color: #aeaeb2;
  font-size: 14px;
  line-height: 1.8;
}

.task-page-empty strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #8e8e93;
  margin-bottom: 4px;
}

.task-page-empty-hint {
  color: #aeaeb2;
}

/* ===================================================================
   阶段二：生产任务真实列表（复用订单数据 + dispatch route）
   =================================================================== */

/* 主体从“居中占位”切换为“纵向任务列表” */
.task-page-body--list {
  align-items: stretch;
  justify-content: flex-start;
  padding: 22px;
  overflow-y: auto;
}

.task-list-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 100%;
}

/* 任务计数 */
.task-page-count {
  font-size: 13px;
  color: #8e8e93;
  background: #edf3ec;
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.5;
}

/* ---- 任务卡片 ---- */
.pt-card {
  background: #fff;
  border: 1px solid #e5ece4;
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.pt-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.pt-card-date {
  font-size: 14px;
  font-weight: 600;
  color: #25372f;
}

.pt-card-no {
  font-size: 13px;
  color: #8e8e93;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.3px;
}

/* 商品列表 */
.pt-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px dashed #e8e8ed;
}

.pt-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
}

.pt-item-name {
  color: #25372f;
  font-weight: 500;
}

.pt-item-spec {
  color: #8e8e93;
  font-size: 13px;
}

.pt-item-qty {
  color: #ff5a36;
  font-weight: 600;
  font-size: 14px;
}

/* 联系人 */
.pt-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 8px 0 4px;
  font-size: 13px;
  color: #455c4e;
}

/* 备注 / 交付 */
.pt-notes {
  margin-top: 4px;
}

.pt-note {
  font-size: 13px;
  line-height: 1.7;
}

.pt-note + .pt-note {
  margin-top: 4px;
}

.pt-note-label {
  color: #8e8e93;
}

.pt-note-value {
  color: #25372f;
}

.pt-note--em .pt-note-value {
  color: #ff5a36;
}

/* 卡片底部：状态 + 派发时间 */
.pt-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f3;
}

.pt-status {
  display: inline-block;
  background: #fff4e0;
  color: #b26a00;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
}

/* 配送任务状态变体：等待生产（蓝）/ 待交付（绿） */
.pt-status--wait-production {
  background: #e8f1ff;
  color: #1a66cc;
}

.pt-status--ready-delivery {
  background: #e8f7ef;
  color: #1a8a4d;
}

.pt-foot-time {
  font-size: 12px;
  color: #aeaeb2;
}

/* 列表态下的空状态居中 */
.task-page-body--list .task-page-empty {
  margin: auto;
}

/* ===================================================================
   阶段五：生产任务复用订单列表订单卡片
   生产卡片直接调用 OrdersPage.renderCard，样式来自 orders.css 的 .order-card；
   此处仅补充生产操作按钮（右侧动作区）视觉，保证四端视觉一致。
   =================================================================== */

/* 生产操作按钮：确认生产 / 生产完成
   与订单列表动作列按钮同宽（120px），沿用 .oc-btn 基础样式；
   黑底白字与订单列表「派发订单」按钮同一视觉（#25372f），
   确认生产 / 生产完成 两个状态统一黑色，不使用蓝色。 */
.oc-btn-prod {
  background: #355944;
  color: #fff;
  border: none;
  width: 120px;
  border-radius: 10px;
}

.oc-btn-prod:hover {
  background: #455c4e;
}

.oc-btn-prod:active {
  opacity: 0.85;
}

/* 生产按钮状态区分：确认生产(黑色，默认继承) / 生产完成(蓝色) */
.oc-btn-prod--complete {
  background: #4A90E2;
}

.oc-btn-prod--complete:hover {
  background: #3a7bc8;
}

/* ===================================================================
   阶段六：生产任务页 bare 结构
   取消顶部标题卡与外层白色容器；.task-page 本身即页面滚动容器
   （overflow-y: auto），订单卡片直接排列在页面背景上（与订单列表
   左侧卡片列一致：独立卡片 + 16px 间距 + 页面级滚动）。
   =================================================================== */

/* 生产任务页容器撑满内容区高度（与订单列表 .admin-orders-container 一致），
   使 .task-page--bare 成为真正的页面级滚动容器，多任务时鼠标滚轮上下滚动。 */
#adminPageProductionTasks,
#adminPageDeliveryTasks {
  height: 100%;
  min-height: 0;
}

/* 配送任务右侧业务操作区（复用订单卡片右侧 .oc-action-area）：
   完成交付：黑色操作按钮（与生产端确认生产/生产完成同一视觉 #25372f）；
   完成交付（已交付）：黑色禁用按钮（交付成功后原地替换，不可再次点击，不能重复完成）；
   完成交付（生产未完成）：灰色禁用按钮（production_delivery 生产未完成，不可提前交付）。 */
.oc-btn-delivery {
  background: #355944;
  color: #fff;
  border: none;
  width: 120px;
  border-radius: 10px;
}

.oc-btn-delivery:hover {
  background: #455c4e;
}

.oc-btn-delivery:active {
  opacity: 0.85;
}

.oc-btn-delivery:disabled,
.oc-btn-delivery:disabled:hover {
  background: #355944;
  color: #fff;
  cursor: default;
  opacity: 0.7;
}

.oc-btn-delivery--wait,
.oc-btn-delivery--wait:hover,
.oc-btn-delivery--wait:disabled,
.oc-btn-delivery--wait:disabled:hover {
  width: 120px;
  background: #edf3ec;
  color: #8e8e93;
  border: 1px solid #d1d1d6;
  cursor: default;
  opacity: 1;
}

/* 已交付：白底黑框黑字禁用「完成交付」（已闭环，不可再次执行，可继续打印核对） */
.oc-btn-delivery--done,
.oc-btn-delivery--done:hover,
.oc-btn-delivery--done:disabled,
.oc-btn-delivery--done:disabled:hover {
  width: 120px;
  background: #ffffff;
  color: #25372f;
  border: 1px solid #25372f;
  cursor: default;
  opacity: 1;
}

/* 空状态在 bare 页面中垂直居中（撑满 task-list-area） */
.task-page--bare .task-page-empty {
  margin: auto;
}

/* ===================================================================
   配送任务页顶部筛选（待交付 / 已完成 / 全部）
   - 独立白色圆角容器，sticky 固定于页面顶部，滚动时始终可见
   - 三个按钮尺寸统一（等宽等高）；选中黑底白字，未选中白底浅灰边框深色字
   - 筛选容器与下方订单卡片之间保留明显间距（margin-bottom: 20px）
   =================================================================== */
.task-filter-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 26px;
  padding: 14px 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  margin-bottom: 20px;
}

.task-filter-btn {
  flex: 1;
  height: 40px;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  background: #fff;
  color: #455c4e;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.task-filter-btn:hover {
  border-color: #c7c7cc;
}

.task-filter-btn--active,
.task-filter-btn--active:hover {
  background: #355944;
  border-color: #355944;
  color: #fff;
}

/* 配送任务筛选卡片（配送 / 自提 / 快递）：独立白色卡片，位于日期标题卡片与第一张订单卡片之间 */
.delivery-filter-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 26px;
  padding: 12px 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  margin-bottom: 16px;
}

.delivery-filter-btn {
  padding: 8px 20px;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  background: #fff;
  color: #455c4e;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.delivery-filter-btn:hover {
  border-color: #c7c7cc;
}

.delivery-filter-btn--active,
.delivery-filter-btn--active:hover {
  background: #355944;
  border-color: #355944;
  color: #fff;
}

/* 生产任务页复用订单卡片：卡片本身不可点击（不进入详情），仅操作按钮可点 */
.task-list-area .order-card {
  cursor: default;
}

.task-list-area .order-card:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.task-list-area .order-card--closed:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* 生产任务中“派发日=今天且需求日=今天”的待确认订单：置顶由 JS 排序，
   此处只提供明确但克制的高亮与标记，不影响订单卡片结构。 */
#adminPageProductionTasks .order-card.production-task--today-new {
  border-color: #c24b2c;
  box-shadow: 0 0 0 2px rgba(194, 75, 44, 0.1);
}

#adminPageProductionTasks .production-task-today-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: #c24b2c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

/* ===================================================================
   生产任务工作台（左右两栏）
   - 左侧固定宽度「生产任务概览」：按需求日期聚合显示已下发生产订单数
   - 右侧订单列表区域：显示当前选中需求日期下的全部已下发生产订单
   - 卡片结构/字段/操作逻辑不变，仅调整组织方式与滚动
   =================================================================== */

/* 左右两栏：覆盖 .task-page 默认纵向布局，页面整体不滚动，左右各自滚动 */
.task-page--prod {
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  overflow: hidden;
}

/* ---- 左侧：生产任务概览（固定宽度）---- */
.prod-overview {
  width: 280px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  padding: 20px 16px;
  overflow-y: auto;
}

.prod-overview-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: #25372f;
  letter-spacing: 0.5px;
}

/* 配送任务标题右侧「未交付 X单」辅助文字（弱一级） */
.prod-overview-sub {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #8e8e93;
  letter-spacing: 0;
}

.prod-date-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prod-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: #25372f;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.prod-date-item:hover {
  background: #edf3ec;
}

.prod-date-item--active,
.prod-date-item--active:hover {
  background: #355944;
  color: #fff;
}

.prod-date-count {
  font-size: 12px;
  color: #8e8e93;
  font-variant-numeric: tabular-nums;
}

.prod-date-item--active .prod-date-count {
  color: rgba(255, 255, 255, 0.85);
}

.prod-overview-empty {
  padding: 24px 8px;
  text-align: center;
  color: #aeaeb2;
  font-size: 13px;
}

/* ---- 右侧：订单列表区域 ---- */
.prod-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.prod-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border-radius: 26px;
  padding: 14px 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  margin-bottom: 16px;
}

.prod-detail-date {
  font-size: 16px;
  font-weight: 600;
  color: #25372f;
  letter-spacing: 0.3px;
}

/* 右侧列表区独立滚动（覆盖 .task-list-area 的 min-height:100%） */
.prod-detail .task-list-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ---- 生产状态表头颜色（覆盖订单列表未读/已读灰）---- */
.task-list-area .order-card .oc-header--prod-pending {
  background: #FBFDEB;
}

.task-list-area .order-card .oc-header--prod-producing {
  background: #F4F0FF;
}

.task-list-area .order-card .oc-header--prod-completed {
  background: #CCCCCC;
}

/* ---- 配送任务表头颜色（覆盖订单列表未读/已读灰，由配送状态决定）----
   待生产 → 浅绿色（复用生产端未读浅绿 #FAFDEB，表示已收到、等待生产）
   待交付 → 浅暖黄 #FFF2CE（可执行交付）
   已交付 → 灰色 #F1F1F3（已完成交付，低强调） */
.task-list-area .order-card .oc-header--del-wait-prod {
  background: #FAFDEB;
}

.task-list-area .order-card .oc-header--del-deliver {
  background: #FFF2CE;
}

.task-list-area .order-card .oc-header--del-done {
  background: #F1F1F3;
}

/* ---- 已完成：禁用「完成」按钮（已闭环，不可再操作）---- */
.oc-btn-prod--done,
.oc-btn-prod--done:hover,
.oc-btn-prod--done:disabled,
.oc-btn-prod--done:disabled:hover {
  background: #edf3ec;
  color: #8e8e93;
  border: 1px solid #d1d1d6;
  cursor: default;
  opacity: 1;
}