/* =========================================================================
   SPA 补充样式（精简版）
   原版 style.css 已作为 ground truth 加载（index.html 中在本文件之后引入），
   所有原版共享类（.top-nav / .nav-tab / .stat-card / .project-item / .badge /
   .filter-bar / .node-tree / .comment-* / .empty-state …）一律以 style.css 为准。
   本文件只负责：Element Plus 变量覆盖 + EP 组件微调 + 原 Vue SPA 独有类。
   ========================================================================= */

:root {
  /* Element Plus 变量覆盖为原品牌色（靛蓝→紫罗兰） */
  --el-color-primary: #6366f1;
  --el-color-primary-light-3: #818cf8;
  --el-color-primary-light-5: #a5b0f5;
  --el-color-primary-light-7: #c7cdf8;
  --el-color-primary-light-8: #d6dbfa;
  --el-color-primary-light-9: #eef0fd;
  --el-color-primary-dark-2: #4f46e5;
  --el-color-success: #16a34a;
  --el-color-warning: #d97706;
  --el-color-danger: #dc2626;
  --el-color-error: #dc2626;
  --el-color-info: #2563eb;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f0f2f5;
  --el-border-color: rgba(0, 0, 0, 0.1);
  --el-text-color-primary: #1a1d2e;
  --el-text-color-regular: #5c6078;
  --el-text-color-secondary: #8b8fa7;
  --el-fill-color-light: #f5f7fa;
  --el-border-radius-base: 8px;
  --el-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ===== 通用工具类（原版无对应，SPA 新增） ===== */
.text-muted { color: #8b8fa7; }
.text-secondary { color: #5c6078; }
.text-danger { color: #dc2626; }
.flex { display: flex; }
.flex-1 { flex: 1; min-width: 0; }
.items-center { align-items: center; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.w-full { width: 100%; }

/* ===== SPA 通用卡片/标题（原版用各自专用容器；此处给统一卡片外观） ===== */
.panel { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 24px; }
.section-title { font-size: 18px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }

/* ===== 全局上传进度遮罩（SPA 独有） ===== */
.upload-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 3000; display: flex; align-items: center; justify-content: center; }
.upload-box { background: #fff; border-radius: 16px; padding: 28px 32px; width: min(360px, 86vw); text-align: center; }
.upload-box .name { font-size: 14px; margin-bottom: 14px; word-break: break-all; }

/* ===== 灯箱（SPA 独有） ===== */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 3100; display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; }
.lightbox video { max-width: 92vw; max-height: 92vh; }
.lightbox .close-btn { position: absolute; top: 18px; right: 22px; color: #fff; font-size: 32px; cursor: pointer; }

/* ===== @提及下拉（SPA 独有） ===== */
.jr-dropdown { position: fixed; z-index: 2200; background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); max-height: 280px; overflow-y: auto; min-width: 220px; }
.jr-dropdown .jr-item { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.jr-dropdown .jr-item:hover, .jr-dropdown .jr-item.active { background: #edf0f5; }

/* ===== 目标高亮（跳转节点/评论） ===== */
.target-highlight { animation: targetFlash 2.6s ease; }
@keyframes targetFlash { 0%,100% { background: transparent; } 15%,60% { background: rgba(99,102,241,0.15); } }

/* ===== 日报行 / 两栏布局 / 列表项 / 权限项（SPA 独有容器） ===== */
.report-row { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.two-col-layout { display: flex; gap: 20px; align-items: flex-start; }
.two-col-layout .col-left { width: 360px; flex: 0 0 360px; }
.two-col-layout .col-right { flex: 1; min-width: 0; }
.list-item-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: all .25s; border: 1px solid transparent; }
.list-item-row:hover { background: #edf0f5; }
.list-item-row.active { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.2); }
.avatar-circle { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px; }
.perm-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; cursor: pointer; transition: all .25s; }
.perm-item:hover { background: #edf0f5; }
.perm-item.checked { background: rgba(99,102,241,0.06); border-color: #6366f1; }
.perm-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid rgba(0,0,0,0.1); flex: 0 0 18px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.perm-item.checked .perm-check { background: #6366f1; border-color: #6366f1; color: #fff; }

/* ===== Element Plus 表单覆盖：灰底输入框 + 焦点环（还原原风格） ===== */
.el-input__wrapper, .el-textarea__inner {
  background-color: #f5f7fa !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset !important;
  border-radius: 8px !important;
}
.el-input__wrapper.is-focus, .el-textarea__inner:focus {
  box-shadow: 0 0 0 1px rgba(99,102,241,0.5) inset, 0 0 0 3px rgba(99,102,241,0.2) !important;
}
.el-select__wrapper { background-color: #f5f7fa !important; border-radius: 8px !important; }
.el-form-item__label { font-size: 13px; font-weight: 500; color: #5c6078; }
/* 主按钮渐变（还原原 .btn-primary 风格，用于 EP 按钮加 btn-primary-grad 类时） */
.btn-primary-grad { background: linear-gradient(135deg, #6366f1, #7c3aed) !important; border: none !important; color: #fff !important; font-weight: 500; transition: all .25s; }
.btn-primary-grad:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99,102,241,0.4); filter: brightness(1.05); }

/* ===== 对话框：移动端底部抽屉（深度手机适配） ===== */
.el-dialog { border-radius: 16px; }
@media (max-width: 768px) {
  .el-overlay-dialog { display: flex !important; align-items: flex-end !important; }
  .el-dialog { width: 100% !important; margin: 0 !important; border-radius: 16px 16px 0 0 !important; }
  .el-dialog__header { padding: 16px var(--el-dialog-padding-primary); }
  .el-dialog__body { max-height: 64vh; overflow-y: auto; }
  .el-dialog__footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .el-message { min-width: auto !important; width: calc(100% - 32px) !important; max-width: 460px; }
  /* iOS 防缩放 */
  input, select, textarea { font-size: 16px !important; }
  .el-input__inner, .el-textarea__inner { font-size: 16px !important; }
  .two-col-layout { flex-direction: column; }
  .two-col-layout .col-left { width: 100%; flex-basis: auto; }
}

/* ===== 表格轻量化（无斑马纹，靛蓝 hover） ===== */
.el-table tr:hover > td { background-color: rgba(99,102,241,0.04) !important; }
.el-table th.el-table__cell { background: #fff !important; color: #5c6078; font-weight: 500; }
.el-tag { border-radius: 12px; }

/* ===== 备货管理（原 stock.html 内联样式，1:1 还原） ===== */
.stock-list { display: flex; flex-direction: column; gap: 6px; }
.stock-card { background: var(--bg-primary, #f0f2f5); border: 1px solid var(--border, rgba(0,0,0,0.1)); border-radius: 8px; padding: 10px 12px; border-left: 3px solid transparent; transition: background 0.15s; cursor: pointer; }
.stock-card:active { background: var(--bg-secondary, #fff); }
.stock-card.speed-fast { background-color: rgba(37, 99, 235, 0.06); border-left-color: #2563eb; }
.stock-card.speed-urgent { background-color: rgba(124, 58, 237, 0.07); border-left-color: #7c3aed; }
.stock-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.stock-card-top .project-link { color: var(--primary, #6366f1); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; cursor: pointer; }
.stock-card-top .project-link:hover { text-decoration: underline; }
.stock-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--text-secondary, #5c6078); line-height: 1.6; }
.stock-card-meta .meta-item { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.stock-card-meta .meta-label { color: var(--text-muted, #8b8fa7); }
.stock-days { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 11px; font-weight: 600; background: rgba(100,116,139,0.12); color: #475569; }
.stock-days.warning { background: rgba(245,158,11,0.15); color: #d97706; }
.stock-days.danger { background: rgba(239,68,68,0.15); color: #ef4444; }
.speed-select { appearance: none; -webkit-appearance: none; padding: 3px 22px 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; outline: none; transition: all 0.15s; flex-shrink: 0; background-repeat: no-repeat; background-position: right 6px center; background-size: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M3 5l3 3 3-3'/%3E%3C/svg%3E"); }
.speed-select.speed-normal { background-color: rgba(100,116,139,0.10); color: #475569; border: 1.5px solid rgba(100,116,139,0.28); }
.speed-select.speed-fast { background-color: rgba(37,99,235,0.12); color: #1d4ed8; border: 1.5px solid rgba(37,99,235,0.38); }
.speed-select.speed-urgent { background-color: rgba(124,58,237,0.13); color: #6d28d9; border: 1.5px solid rgba(124,58,237,0.42); }
.speed-select:focus { box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
.stock-empty { text-align: center; padding: 40px 20px; color: var(--text-muted, #8b8fa7); }
.stock-empty .empty-icon { font-size: 40px; margin-bottom: 8px; }
/* 备货页统计/区域紧凑（原 stock.html 内联覆盖） */
body.route-stock .stats-section { margin-bottom: 8px !important; }
body.route-stock .stats-grid { gap: 6px !important; }
body.route-stock .stat-card { padding: 8px 10px !important; }
body.route-stock .stat-value { font-size: 20px !important; }
body.route-stock .stat-label { font-size: 11px !important; }
body.route-stock .stat-icon { width: 32px !important; height: 32px !important; font-size: 16px !important; }
body.route-stock .projects-section { padding: 12px !important; }
body.route-stock .section-header { margin-bottom: 8px !important; }
body.route-stock .section-header h2 { font-size: 15px !important; }
body.route-stock .search-box input { padding: 6px 8px 6px 28px !important; font-size: 13px !important; }
@media (max-width: 640px) {
  body.route-stock .main-content { padding: 8px !important; }
  body.route-stock .stats-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }
  body.route-stock .stat-card { padding: 6px 8px !important; flex-direction: column; align-items: flex-start !important; }
  body.route-stock .stat-icon { display: none !important; }
  body.route-stock .stat-value { font-size: 18px !important; }
  body.route-stock .projects-section { padding: 8px !important; border-radius: 8px !important; }
  body.route-stock .stock-card { padding: 8px 10px; }
}