/* ============ 全局 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #f0f2f5;
  color: #333;
}
a { text-decoration: none; color: #1890ff; }
ul, li { list-style: none; }

/* ============ 侧边栏 ============ */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 220px;
  background: #1565c0; color: #fff; overflow-y: auto; z-index: 100;
}
.sidebar .logo {
  height: 64px; line-height: 64px; text-align: center;
  font-size: 18px; font-weight: bold; color: #fff;
  border-bottom: 1px solid #0d47a1;
}
.sidebar .menu-group { padding: 12px 0; }
.sidebar .menu-item,
.sidebar .menu-group-title {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px; color: rgba(255,255,255,0.95);
  cursor: pointer; transition: all .2s;
  font-size: 15px;
  box-sizing: border-box;
}
.sidebar .menu-item:hover,
.sidebar .menu-group-title:hover { background: #115293; color: #fff; }
.sidebar .menu-item.active { background: #0d47a1; color: #fff; }
.sidebar .menu-item .icon,
.sidebar .menu-group-title .icon { font-size: 18px; width: 22px; text-align: center; }

/* ============ 侧边栏分组折叠 ============ */
.sidebar .menu-group-item { user-select: none; }
.sidebar .menu-group-item.open .menu-group-title { color: #fff; }
.sidebar .menu-group-title .arrow {
  margin-left: auto; font-size: 12px; transition: transform .2s; transform: rotate(0deg);
  width: 16px; text-align: center; color: rgba(255,255,255,0.9);
}
.sidebar .menu-group-item.open .menu-group-title .arrow { transform: rotate(90deg); }
.sidebar .sub-menu { display: none; }
.sidebar .menu-group-item.open .sub-menu { display: block; }
.sidebar .sub-menu .menu-item { padding-left: calc(56px - 1.5em); font-size: 15px; }
.sidebar .sub-menu .menu-item .icon { visibility: hidden; }
.sidebar .sub-menu .menu-item.active { background: #0d47a1; }

/* 侧边栏菜单角标（待审批数量） */
.sidebar .menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  background: #ff4d4f;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  border-radius: 9px;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}

/* ============ 主区域 ============ */
.main-wrap { margin-left: 220px; min-height: 100vh; }
.top-bar {
  height: 64px; background: #fff; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0,21,41,.08); position: sticky; top: 0; z-index: 50;
}
.top-bar .title { font-size: 18px; font-weight: 600; }
.top-bar .user-area { display: flex; align-items: center; gap: 12px; }

/* ============ 顶栏用户下拉菜单 ============ */
.top-bar .user-menu { position: relative; }
.top-bar .user-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: #333; cursor: pointer; user-select: none;
  padding: 6px 10px; border-radius: 6px; transition: background .15s, color .15s;
}
.top-bar .user-name:hover { background: #f5f7fa; color: #1890ff; }
.top-bar .user-caret { font-size: 10px; color: #999; transition: transform .15s; }
.top-bar .user-menu.open .user-caret { transform: rotate(180deg); }
.top-bar .user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 132px;
  background: #fff; border: 1px solid #f0f0f0; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,21,41,.12); padding: 6px; z-index: 100;
}
.top-bar .user-dropdown-item {
  display: block; padding: 9px 12px; font-size: 14px; color: #333;
  border-radius: 6px; text-decoration: none; white-space: nowrap;
}
.top-bar .user-dropdown-item:hover { background: #f5f7fa; color: #1890ff; }

.content { padding: 24px 24px 56px; }

/* ============ 卡片 ============ */
.card {
  background: #fff; border-radius: 8px; padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 24px;
}
.card-title {
  font-size: 16px; font-weight: 600; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid #f0f0f0;
  display: flex; align-items: center; justify-content: space-between;
}

/* ============ 统计卡片 ============ */
/* 自适应列数：卡片数 < 4 时不再留空列（2026-09-19 工作台「订单数」并入状态分布后顶部只剩 3 卡）；
   宽屏 4 卡仍是 4 列，窄屏由下方媒体查询接管 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 24px; }
.stat-card {
  background: #fff; border-radius: 8px; padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: flex; flex-direction: column; gap: 8px;
}
.stat-card .stat-value { font-size: 28px; font-weight: 700; }
.stat-card .stat-label { font-size: 14px; color: #8c8c8c; }
.stat-card.blue .stat-value { color: #1890ff; }
.stat-card.green .stat-value { color: #52c41a; }
.stat-card.orange .stat-value { color: #fa8c16; }
.stat-card.red .stat-value { color: #f5222d; }

/* ============ 表格 ============ */
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th, table.data-table td {
  padding: 12px 8px; text-align: left; border-bottom: 1px solid #f0f0f0;
  font-size: 14px; white-space: nowrap;
}
table.data-table th { background: #fafafa; font-weight: 600; color: #595959; }
table.data-table tr:hover td { background: #fafafa; }

/* ============ 标记徽章 ============ */
.badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 12px; line-height: 18px; font-weight: 500; vertical-align: middle;
}
.badge-default {
  background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff;
}

/* ============ 按钮 ============ */
.btn {
  display: inline-block; padding: 6px 16px; border-radius: 4px;
  border: 1px solid #d9d9d9; background: #fff; color: #595959;
  cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; transition: all .2s; text-decoration: none;
}
.btn:hover { color: #1890ff; border-color: #1890ff; }
.btn-primary { background: #1890ff; border-color: #1890ff; color: #fff; }
.btn-primary:hover { background: #40a9ff; border-color: #40a9ff; color: #fff; }
.btn-success { background: #52c41a; border-color: #52c41a; color: #fff; }
.btn-danger { background: #f5222d; border-color: #f5222d; color: #fff; }
.btn-sm { padding: 3px 8px; font-size: 12px; }

/* ============ 表单 ============ */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px;
  font-size: 14px; transition: border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: #1890ff; outline: none;
}

/* ============ 标签 ============ */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 12px; line-height: 20px;
}
.tag-gray { background: #f5f5f5; color: #8c8c8c; }
.tag-blue { background: #e6f7ff; color: #1890ff; }
.tag-green { background: #f6ffed; color: #52c41a; }
.tag-orange { background: #fff7e6; color: #fa8c16; }
.tag-red { background: #fff1f0; color: #f5222d; }
.tag-purple { background: #f9f0ff; color: #722ed1; }

/* ============ 派单待确认看板 ============ */
.dispatch-panel { margin-bottom: 16px; border: 1px solid #b37feb; background: #fcf8ff; border-radius: 8px; padding: 14px 16px; }
.dp-title { font-weight: 600; color: #722ed1; margin-bottom: 10px; }
.dp-item { padding: 10px 0; border-top: 1px dashed #e8d6f5; }
.dp-item:first-of-type { border-top: none; }
.dp-item .dp-actions { margin-top: 8px; display: flex; gap: 8px; }

.btn-xs { padding: 2px 10px; font-size: 12px; line-height: 1.5; }

/* ============ 卡片内 tab（待办工单等） ============ */
/* 与移动端「待办」页 todo-tabs 视觉对齐：胶囊底 + 选中填充主色，角标红点带计数 */
.todo-tabs {
  display: flex; gap: 8px; margin-bottom: 12px;
  background: #f5f7fa; border-radius: 8px; padding: 4px;
}
.todo-tabs .todo-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 20px; font-size: 14px; color: #595959;
  border-radius: 6px; cursor: pointer; user-select: none; transition: all .2s;
}
.todo-tabs .todo-tab:hover { color: #1890ff; }
.todo-tabs .todo-tab.active { background: #1890ff; color: #fff; font-weight: 600; }
.todo-tabs .todo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px;
  border-radius: 10px; background: #f5222d; color: #fff;
  font-size: 12px; font-weight: 500; box-sizing: border-box;
}
/* 选中态角标反色：红底白字压在蓝底上会糊，改白底蓝字 */
.todo-tabs .todo-tab.active .todo-badge { background: #fff; color: #1890ff; }

/* ============ 分页 ============
   2026-09-19：从 admin/orders.php 的页内 <style> 提到这里共用（工作台「待办工单」卡也要用）。
   保留原类名 .pg-left/.pg-size/.pg-center/.pg-right/.pg-jump 与 .pg-current，orders.php 视觉零变化。
   注：orders.php 页内那份已删除，改这里的样式会同时影响 orders.php 与 index.php。 */
.pagination {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 16px; padding: 12px 16px; border-top: 1px solid #e8e8e8;
  font-size: 13px; color: #595959;
}
.pg-left { display: flex; align-items: center; gap: 12px; }
.pg-size { padding: 5px 8px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; }
.pg-center { display: flex; align-items: center; gap: 6px; }
.pg-center button { min-width: 28px; padding: 5px 10px; }
.pg-center button:disabled { opacity: 0.45; cursor: not-allowed; }
.pg-center .pg-current { background: #1890ff; color: #fff; border-color: #1890ff; }
.pg-right { display: flex; align-items: center; gap: 6px; }
.pg-jump { width: 48px; padding: 5px 8px; border: 1px solid #d9d9d9; border-radius: 4px; text-align: center; }
/* 卡片内分页（待办工单）：表格本身没有左右 padding，分页条不再重复加 */
.card .pagination.in-card { padding: 12px 0 0; }

/* ============ 弹窗 ============ */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
}
.modal {
  background: #fff; border-radius: 8px; padding: 24px;
  min-width: 480px; max-width: 90vw; max-height: 80vh; overflow-y: auto;
  margin: auto;
}
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ============ 地图容器 ============ */
#map-container { width: 100%; height: 600px; border-radius: 8px; overflow: hidden; }
.map-info-panel {
  position: absolute; top: 10px; left: 10px; z-index: 10;
  background: rgba(255,255,255,.95); border-radius: 8px; padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); max-width: 320px;
}
.map-info-panel .info-item { margin-bottom: 8px; font-size: 14px; }
.map-info-panel .info-label { color: #8c8c8c; }
.map-info-panel .info-value { font-weight: 600; }

/* ============ 复选框 ============ */
.checkbox-wrap { display: flex; align-items: center; gap: 6px; }
input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* ============ 响应式 ============ */
@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ 表格横向滚动 + 操作列冻结（Excel风格） ============ */
.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}
/* 表格设最小宽度，确保可横向滚动 */
table.data-table.excel-mode { min-width: 1600px; }
table.data-table.excel-mode th, table.data-table.excel-mode td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 冻结列（操作列） - 类似Excel冻结窗格 */
table.data-table th.frozen-col, table.data-table td.frozen-col {
  position: sticky;
  right: 0;
  z-index: 10;
  background: #fff;
  border-left: 2px solid #d9d9d9;
  box-shadow: -3px 0 6px rgba(0,0,0,.08);
  width: 1px;
  white-space: nowrap;
}
table.data-table th.frozen-col {
  background: #fafafa;
  z-index: 12;
}
table.data-table tr:hover td.frozen-col { background: #f0f7ff; }

/* 订单管理操作列紧凑布局 */
table.data-table td.action-cell { white-space: nowrap; }
table.data-table td.action-cell .btn { margin-right: 4px; }
table.data-table td.action-cell .btn:last-child { margin-right: 0; }

/* 列宽调整手柄 */
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 5;
}
.col-resizer:hover, .col-resizer.dragging {
  background: #1890ff;
  opacity: 0.6;
}
/* 拖拽时整列高亮 */
th.resizing { background: #e6f7ff !important; }

/* 兼容旧的 sticky-col 类名 */
table.data-table th.sticky-col, table.data-table td.sticky-col {
  position: sticky;
  right: 0;
  z-index: 10;
  background: #fff;
  border-left: 2px solid #d9d9d9;
  box-shadow: -3px 0 6px rgba(0,0,0,.08);
}
table.data-table th.sticky-col { background: #fafafa; z-index: 12; }
table.data-table tr:hover td.sticky-col { background: #f0f7ff; }

/* ============ 快捷按钮选中态 ============ */
.quick-btn.active, .quick-btn.btn-primary {
  background: #1890ff; border-color: #1890ff; color: #fff;
}

/* ============ 版本信息栏 ============ */
.app-version-bar {
  position: fixed;
  left: 220px;
  right: 0;
  bottom: 0;
  z-index: 40;
  text-align: center;
  font-size: 12px;
  color: #999;
  background: #f6f8fa;
  border-top: 1px solid #e8e8e8;
  height: 40px;
  line-height: 40px;
  letter-spacing: .5px;
}

/* ============ APP 下载弹窗 ============ */
.btn-download {
  background: #1890ff;
  color: #fff !important;
  border-color: #1890ff;
}
.btn-download:hover {
  background: #40a9ff;
  border-color: #40a9ff;
}
.modal-download {
  width: 380px;
  max-width: 92vw;
  padding: 16px 20px;
}
.modal-download .modal-title { margin-bottom: 10px; }
.modal-sub {
  font-size: 11px;
  color: #8c8c8c;
  font-weight: 400;
  margin-left: 8px;
}
.download-grid {
  display: flex;
  gap: 12px;
  padding: 4px 0 8px;
}
.download-grid.single {
  justify-content: center;
}
.download-grid.single .download-cell {
  flex: 0 0 220px;
  max-width: 260px;
}
.download-cell {
  flex: 1;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 200px;
  position: relative;
}
.platform-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}
.tag-android { background: #e6f7ff; color: #1890ff; }
.tag-ios     { background: #fff7e6; color: #fa8c16; }
.qrcode-box {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 8px;
  padding: 4px;
  box-sizing: border-box;
}
.qrcode-box img,
.qrcode-box canvas { display: block; width: 100%; height: 100%; }
.download-meta {
  font-size: 11px;
  color: #595959;
  width: 100%;
  margin-bottom: 4px;
}
.version-line, .size-line { margin: 2px 0; }
.download-link {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  background: #1890ff;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 11px;
}
.download-link:hover { background: #40a9ff; color: #fff; }
.download-empty {
  position: absolute;
  inset: 50px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #bfbfbf;
  font-size: 11px;
  background: #fafafa;
}
.download-empty .empty-icon { font-size: 22px; margin-bottom: 4px; opacity: 0.6; }

.upload-panel {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}
.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 12px;
}
.upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.upload-row label {
  font-size: 13px;
  color: #595959;
  min-width: 56px;
  text-align: right;
}
.upload-row select,
.upload-row input[type=text] {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}
.upload-row input[type=file] {
  font-size: 13px;
}
/* 操作区与安装包同行：上传按钮起点对齐上方「备注」label 左端
   标签(56) + gap(12) = 68px；input file 固定 322px → 操作区起点 = 68 + 322 = 390px ≈ 备注 label 起点 */
.upload-row .upload-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.upload-force {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #595959;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.upload-force input[type=checkbox] {
  width: auto;
  margin: 0;
}
.upload-tip {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 4px;
}
.history-list { margin-top: 16px; }
.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}
.mini-table th,
.mini-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}
.mini-table th {
  background: #fafafa;
  color: #595959;
  font-weight: 600;
}
.mini-table .text-center { text-align: center; color: #8c8c8c; }
.mini-table .status-active {
  display: inline-block;
  padding: 2px 8px;
  background: #f6ffed;
  color: #52c41a;
  border-radius: 4px;
  font-size: 11px;
}
.mini-table .status-inactive {
  display: inline-block;
  padding: 2px 8px;
  background: #f5f5f5;
  color: #8c8c8c;
  border-radius: 4px;
  font-size: 11px;
}
.mini-table .op-btn {
  cursor: pointer;
  color: #1890ff;
  margin-right: 8px;
  text-decoration: none;
}
.mini-table .op-btn:hover { text-decoration: underline; }
.mini-table .op-btn.danger { color: #f5222d; }
.mini-table .op-btn[disabled] { color: #bfbfbf; cursor: not-allowed; }

/* ============ APP 上传按钮（绿色）与上传弹窗 ============ */
.btn-upload {
  background: #52c41a;
  color: #fff !important;
  border-color: #52c41a;
}
.btn-upload:hover {
  background: #73d13d;
  border-color: #73d13d;
}
.modal-upload {
  width: 880px;
  max-width: 92vw;
}

/* ============ 下载弹窗 选项卡片三态（hint / content / empty） ============ */
.download-hint {
  padding: 60px 0 40px;
  color: #8c8c8c;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.download-hint .hint-icon { font-size: 48px; opacity: 0.55; }
.download-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.download-cell.disabled { cursor: not-allowed; opacity: 0.7; }
.download-cell:not(.disabled) {
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.download-cell:not(.disabled):hover {
  border-color: #1890ff;
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.08);
}

/* ============ 窄屏适配（手机用 ?pc=1 切到「电脑版」时） ============ */
@media (max-width: 768px) {
  /* 侧边栏收窄为图标条 */
  .sidebar { width: 56px; }
  .sidebar .logo { font-size: 0; padding: 0; line-height: 64px; }
  .sidebar .logo::before { content: "🚚"; font-size: 22px; }
  .sidebar .menu-item,
  .sidebar .menu-group-title { padding: 12px 0; justify-content: center; gap: 0; }
  .sidebar .menu-item .label,
  .sidebar .menu-group-title .label,
  .sidebar .menu-group-title .arrow,
  .sidebar .menu-badge { display: none !important; }
  .sidebar .menu-item .icon,
  .sidebar .menu-group-title .icon { width: auto; font-size: 20px; }
  /* 二级菜单：隐藏左侧缩进、居中显示 */
  .sidebar .sub-menu .menu-item { padding-left: 0; font-size: 14px; }
  .sidebar .sub-menu .menu-item .icon { visibility: visible; }
  /* 主区占满剩余宽度 */
  .main-wrap { margin-left: 56px; }
  .content { padding: 12px 12px 40px; }
  .top-bar { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .top-bar .title { font-size: 16px; }
  /* 卡片与栅格：单列/双列自适应，保留可读 */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 12px; }
  .stat-card .stat-value { font-size: 22px; }
  .card { padding: 12px; }
  .card-title { font-size: 14px; }
  /* 表格：横向滚动保留列对齐 */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }
  /* 弹窗居中且不溢出 */
  .modal { max-width: 95vw; margin: 12px; }
}