/* ====================================================
 * 配送员手持工作台样式（G4 配送员手持端）
 * - 手机优先：单列卡片布局、大触摸热区
 * - PC 端自适应：全宽展示（v20260926bd）——
 *   原 720px 限宽导致电脑全屏时「订单明细」11 列表格
 *   被压在中间窄条里（客户名竖排、右侧列截断），已去除限宽，
 *   与首页「最近订单」等其它模块页面观感一致
 * - 版本：v20260926bd
 * ==================================================== */

.driver-page {
  /* v20260926bd：不限宽，PC 全屏铺满；手机端本就不足 720px，不受影响 */
}

.driver-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.driver-tab {
  padding: 8px 14px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s;
}
.driver-tab:hover { border-color: #40a9ff; color: #40a9ff; }
.driver-tab.active {
  background: linear-gradient(135deg, #409eff 0%, #2d7dd2 100%);
  color: #fff;
  border-color: #409eff;
  box-shadow: 0 2px 6px rgba(64,158,255,0.25);
}
.driver-search {
  padding: 7px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  width: 180px;
  min-width: 120px;
}

.driver-card-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.driver-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow .2s, transform .2s;
}
.driver-card:hover {
  box-shadow: 0 4px 14px rgba(64,158,255,0.12);
  transform: translateY(-1px);
}
.driver-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.driver-card-no {
  font-weight: 600;
  color: #1f3a5f;
  font-size: 15px;
}
.driver-card-time {
  margin-left: auto;
  color: #888;
  font-size: 13px;
}
.driver-card-unit {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 4px 0;
}
.driver-card-addr {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
  word-break: break-all;
}
.driver-card-items {
  color: #888;
  font-size: 13px;
  padding: 6px 10px;
  background: #fafafa;
  border-radius: 6px;
  margin-bottom: 8px;
  border-left: 3px solid #409eff;
}
.driver-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.driver-card-actions .btn {
  flex: 1;
  min-width: 80px;
  padding: 7px 10px;
  font-size: 13px;
}

/* 签收照片缩略图 */
.driver-photo-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.driver-photo-thumb {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #eee;
  cursor: pointer;
}

/* 签收徽章 */
.badge-pending   { background: #f4f4f5; color: #909399; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.badge-completed { background: #f0f9eb; color: #67c23a; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.badge-cancelled { background: #fef0f0; color: #f56c6c; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.badge-warning   { background: #fdf6ec; color: #e6a23c; padding: 2px 8px; border-radius: 4px; font-size: 12px; }

/* ===== PC 端全宽布局（v20260926bd：订单明细表格不再截断）===== */
/* 任务卡片流：宽屏改多列网格，避免单张任务卡被拉满整行 */
@media (min-width: 769px) {
  .driver-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    align-items: start;
  }
}

/* 订单明细表：首页「最近订单」同款风格（灰表头/行 hover/单行） */
/* .table-container 基础样式是 overflow:hidden，PC 上 nowrap 超宽会被截死 —— 必须放开横向滚动 */
.driver-page .table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.driver-page .table-container th,
.driver-page .table-container td {
  white-space: nowrap;
}

/* 手机端微调 */
@media (max-width: 768px) {
  .driver-page {
    padding: 0 8px;
  }
  .driver-card {
    padding: 12px 14px;
  }
  .driver-card-no { font-size: 14px; }
  .driver-card-unit { font-size: 15px; }
  .driver-search {
    width: 100%;
    margin-top: 6px;
  }
}

/* ====================================================
 * v20261007a 配送查询明细表（driver.js「🔍 配送查询」子页签）
 * 结构：#dqFilterWrap（筛选条）/ #dqSummaryWrap（汇总条）/ #dqTableWrap（明细表）
 * ==================================================== */
.dq-filter {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dq-label {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}
.dq-date {
  padding: 6px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #333;
  background: #fff;
}
.dq-tilde { color: #bbb; }
.dq-quick { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dq-chip {
  padding: 5px 11px;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  background: #fafafa;
  font-size: 12.5px;
  color: #555;
  cursor: pointer;
  line-height: 1.4;
  transition: all .18s;
}
.dq-chip:hover { border-color: #40a9ff; color: #40a9ff; background: #fff; }
.dq-sel {
  padding: 6px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: #333;
  max-width: 170px;
  font-family: inherit;
}
.dq-kw { min-width: 200px; flex: 1 1 200px; }

.dq-summary {
  margin-top: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #555;
}
.dq-summary .dq-total b { color: #0958d9; font-size: 15px; }
.dq-summary .dq-kpi { color: #8c8c8c; }
.dq-summary .dq-kpi b { font-size: 14px; font-weight: 600; }
.dq-summary .c-blue b   { color: #0958d9; }
.dq-summary .c-green b  { color: #389e0d; }
.dq-summary .c-orange b { color: #d46b08; }
.dq-summary .c-grey b   { color: #595959; }

.dq-more {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff7e6;
  border: 1px solid #ffe7ba;
  color: #d46b08;
  font-size: 12.5px;
}
.dq-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}
/* ★ 13 列宽表：把「操作」列吸附在右侧 —— 1366 视口下不横向滚动也够得到「📄 详情」 */
/*   （不然 13 列 must-scroll，最右的操作列用户根本看不见） */
.driver-page .dq-table th:last-child,
.driver-page .dq-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.12);
}
.driver-page .dq-table thead th:last-child { background: #fafafa; }
.driver-page .dq-table tbody td:last-child { background: #fff; }
/* 行 hover 背景 #f5f7fa（style.css tr:hover td）—— 吸顶单元格必须同步，否则吸顶块不跟着高亮 */
.driver-page .dq-table tbody tr:hover td:last-child { background: #f5f7fa; }

/* 明细表「类型」小标（团餐 / 外卖），跟在订单号后面 */
.dq-kind {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 11px;
  font-family: inherit;
  vertical-align: middle;
}
.dq-kind.t { background: #e6f4ff; color: #0958d9; }
.dq-kind.w { background: #fff7e6; color: #d46b08; }

/* 联查详情弹窗 */
.dq-detail { padding: 2px; }
.dq-sec { margin-bottom: 14px; }
.dq-sec h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #1f1f1f;
  padding-bottom: 5px;
  border-bottom: 1px solid #f0f0f0;
}
.dq-kvs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.dq-kv {
  display: flex;
  gap: 6px;
  font-size: 13px;
  min-width: 210px;
  line-height: 1.6;
}
.dq-k { color: #8c8c8c; flex: 0 0 auto; }
.dq-v { color: #1f1f1f; word-break: break-all; }
.dq-note {
  margin-top: 6px;
  font-size: 13px;
  color: #444;
  background: #fafafa;
  border-radius: 6px;
  padding: 7px 9px;
  line-height: 1.6;
}
.dq-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed #e8e8e8;
}

@media (max-width: 768px) {
  .dq-filter { padding: 10px 12px; }
  .dq-kv { min-width: 100%; }
  .dq-date { flex: 1 1 40%; }
  .dq-sel { max-width: 100%; flex: 1 1 40%; }
  .dq-kw { flex: 1 1 100%; margin-top: 0; }
  .dq-summary { gap: 12px; font-size: 12.5px; }
  .dq-row .btn { flex: 1 1 auto; }
  /* ★ 手机端取消「操作列吸附右」—— 390 宽的表格横向空间太窄，吸附列会盖住「客户」列，
     看起来像渲染错位；手机端一律靠横向滑动取操作列（与既有「订单明细」页签行为一致）。
     配送员在手机上的日常入口是上方「今日/明日」卡片，本页签主要供管理端桌面查询。 */
  .driver-page .dq-table th:last-child,
  .driver-page .dq-table td:last-child {
    position: static;
    box-shadow: none;
    z-index: auto;
  }
}