/* ============================================================
 * wb-query-v11.css —— v11 查询区布局（左小右两行）
 * 仅作用于 4 个目标页（运单管理/运单轨迹/运单资料/纯利统计）的查询条件区。
 * 不改动任何批量操作/工具栏/其他筛选字段的功能，仅重排视觉结构。
 * 变量均取自项目已定义的 :root 令牌（--primary / --border-color / 等）。
 * ============================================================ */

/* 查询体：左列（统一单号区） + 右列（2 行筛选网格） */
.wb-v11-query-body {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* 左侧：运单号 / 转单号 / 客户订单号 统一单号区（小框，支持批量） */
.wb-v11-billno-col {
  width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wb-v11-billno-col label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.wb-v11-billno-col textarea {
  flex: 1;
  min-height: 70px;
  height: auto;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
  background: #fff;
  color: var(--text-primary);
}
.wb-v11-billno-col textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(51, 102, 255, .15);
}
.wb-v11-hint {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* 右侧筛选区 */
.wb-v11-filters-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.wb-v11-grid {
  display: grid;
  gap: 10px 14px;
}
.wb-v11-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.wb-v11-grid.c5 { grid-template-columns: repeat(5, 1fr); }
.wb-v11-grid .wb-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wb-v11-grid .wb-field label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  font-weight: 500;
}
.wb-v11-grid .wb-field input,
.wb-v11-grid .wb-field select {
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 12px;
  outline: none;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  color: var(--text-primary);
}
.wb-v11-grid .wb-field input:focus,
.wb-v11-grid .wb-field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(51, 102, 255, .15);
}

/* 日期范围占满整行，按钮放在同一行最右侧 */
.wb-v11-grid .wb-date-group.wb-v11-date-full {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-2, #f6f8fc);
  flex-wrap: wrap;
}
.wb-v11-grid .wb-date-group.wb-v11-date-full .wb-date-range input[type=date] {
  min-width: auto;
}
.wb-v11-grid .wb-date-group.wb-v11-date-full .wb-search-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

/* 操作按钮：右对齐（查询 / 重置） */
.wb-v11-filters-col .wb-search-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  margin-top: 6px;
}

/* 与 grid 字段同行的按钮组（如纯利统计代理名称后） */
.wb-v11-grid .wb-search-actions-inline {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.wb-v11-grid .wb-search-actions-inline button {
  height: 32px;
}

/* ---------- 响应式（优先保证 ≥1280px 大屏） ---------- */
@media (max-width: 1280px) {
  .wb-v11-grid.c4,
  .wb-v11-grid.c5 { grid-template-columns: repeat(3, 1fr); }
  .wb-v11-billno-col { width: 260px; }
}
@media (max-width: 1024px) {
  .wb-v11-billno-col { width: 220px; }
}
@media (max-width: 900px) {
  .wb-v11-query-body { flex-direction: column; }
  .wb-v11-billno-col { width: 100%; }
  .wb-v11-billno-col textarea { height: 60px; min-height: 60px; }
}