/* ===== 项目费用分析模块样式（独立 fe 前缀，不影响其他模块） ===== */

/* ---- 统计卡 ---- */
.fe-stats-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.fe-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-xs);
}
.fe-stat-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.fe-stat-icon svg { width: 22px; height: 22px; }
.fe-stat-info { min-width: 0; }
.fe-stat-value {
  display: block;
  font-size: 20px; font-weight: 700; color: var(--text);
  line-height: 1.2; white-space: nowrap;
}
.fe-stat-label {
  display: block;
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.fe-stat-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; margin-left: 6px;
}
.fe-delta-up { color: var(--danger); }
.fe-delta-down { color: var(--success); }
.fe-delta-flat { color: var(--text-muted); }

/* ---- 图表网格与卡片 ---- */
.fe-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.fe-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-xs);
  min-width: 0;
}
.fe-chart-wide { grid-column: 1 / -1; }
.fe-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.fe-chart-header h3 {
  font-size: 14px; font-weight: 600; color: var(--text); margin: 0;
}
.fe-chart-filters select,
.fe-chart-filters .input-group { margin: 0; }

/* ---- 通用卡片 ---- */
.fe-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 16px;
}
.fe-card-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
/* 卡片头图标：与「磅单·基础数据」的 .basic-icon 同规格（外框 24×24、内部 svg 22×22）。
   ⚠️ 2026-09 补齐：原先费用页的卡片头只有标题 + 计数、**没有任何图标**，
   而磅单/水电的同款卡片都带一个彩色图标。 */
.fe-card-header .fe-icon { width: 24px; height: 24px; display: flex; align-items: center; flex-shrink: 0; }
.fe-card-header .fe-icon svg { width: 22px; height: 22px; }
.fe-card-header h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; flex: 1; }
.fe-count {
  font-size: 12px; color: var(--text-muted);
  background: var(--border-light);
  padding: 2px 10px; border-radius: 999px;
}

/* ---- 表格 ---- */
.fe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fe-table th {
  text-align: center; font-weight: 600; color: var(--text-muted);
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--border-light);
}
.fe-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border-light);
  color: var(--text); vertical-align: middle;
}
.fe-table tbody tr:hover { background: #f8fafc; }
.fe-table .fe-num { text-align: right; font-variant-numeric: tabular-nums; }
.fe-table .fe-amount { color: #dc2626; font-weight: 600; }
.fe-table .fe-total-row td {
  font-weight: 700; border-top: 2px solid var(--border); background: var(--border-light);
}

/* ---- 操作按钮 ---- */
.fe-op-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  margin-right: 6px;
  transition: all .15s;
}
.fe-op-btn:hover { border-color: var(--primary); color: var(--primary); }
.fe-op-btn.fe-del { border-color: var(--danger); color: var(--danger); }
.fe-op-btn.fe-del:hover { border-color: var(--danger); background: var(--danger-light); }

/* ---- 下拉菜单（导入导出/删除） ---- */
.fe-io-drop { position: relative; }
.fe-io-menu {
  position: absolute;
  top: calc(100% + 4px); right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  min-width: 168px;
  padding: 4px;
}
.fe-io-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none; background: transparent;
  border-radius: 7px;
  font-size: 13px; color: var(--text);
  cursor: pointer; text-align: left;
}
.fe-io-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.fe-io-item:hover { background: var(--primary-light); color: var(--primary); }
.fe-io-item.fe-del-item:hover { background: var(--danger-light); color: var(--danger); }

/* ---- 录入表单 ---- */
.fe-input-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 16px;
}
.fe-input-form {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.fe-input-form .input-group { margin-bottom: 0; }
.fe-input-form .input-group input[type="text"],
.fe-input-form .input-group input[type="number"],
.fe-input-form .input-group input[type="date"],
.fe-input-form .input-group select {
  width: 150px;
}
.fe-input-form .input-group input[type="text"] { width: 190px; }
.fe-hint {
  margin-top: 10px;
  font-size: 12px; color: var(--text-muted);
}

/* ===== 车辆档案弹窗：内容自适应容器宽度，避免横向滚动条 ===== */
.fu-modal-wrap{width:100%;max-width:100%;box-sizing:border-box;text-align:left}
/* 车辆档案这类宽表单弹窗，容器适度加宽（不支持 :has 的浏览器降级为默认 680px，同样不溢出） */
.modal:has(.fu-modal-wrap){max-width:720px}
.modal:has(.fu-veh-form){max-width:780px}

/* ===== 车辆档案编辑弹窗：两列网格 + 标签右对齐，排版整齐 ===== */
.fu-veh-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;align-items:center}
.fu-form-sec{grid-column:1 / -1;font-size:.74rem;font-weight:700;color:var(--text-muted);letter-spacing:.04em;
  border-bottom:1px solid var(--border-light);padding-bottom:5px;margin-top:2px}
.fu-row{display:flex;align-items:center;gap:10px;min-width:0}
.fu-row>label{flex:0 0 74px;text-align:right;font-size:.78rem;font-weight:600;color:var(--text-muted);white-space:nowrap}
.fu-row>input,.fu-row>select{flex:1;min-width:0;width:100%;padding:7px 10px;border:1px solid var(--border);
  border-radius:8px;font-size:.83rem;background:var(--bg-card);color:var(--text);box-sizing:border-box;outline:none}
.fu-row>input:focus,.fu-row>select:focus{border-color:var(--primary)}
.fu-row>input:disabled{background:var(--border-light);color:var(--text-muted);cursor:not-allowed}
/* 行内组合：用 stretch 让快捷按钮自动与输入框等高（不受外部 height 规则影响） */
.fu-inline{display:flex;align-items:stretch;gap:8px;flex:1;min-width:0}
.fu-inline>input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--border);border-radius:8px;
  font-size:.83rem;background:var(--bg-card);color:var(--text);box-sizing:border-box;outline:none}
.fu-inline>input:focus{border-color:var(--primary)}
/* 行内快捷按钮（如「同交强险」）：与输入框等高、清晰可点 */
.fu-inline>button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:0 16px;font-size:.82rem;font-weight:600;white-space:nowrap;cursor:pointer;
  border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text);
  box-sizing:border-box;transition:all .15s}
.fu-inline>button:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.fu-full{grid-column:1 / -1}
@media (max-width:560px){.fu-veh-form{grid-template-columns:1fr}.fu-row>label{flex:0 0 66px}}

/* ---- 管理页 ---- */
.fe-manage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
/* ===== 添加/搜索控件：与「磅单·基础数据」「水电·片区场所管理」保持同一规格 =====
   2026-09 统一。原先这里的问题是：
   ① `.fe-search` 里的输入框**没有任何宽度规则**，而 `.fe-card` 是普通块级容器
      （不像 `.basic-card` 是 flex 列、子元素会自动撑满）—— 于是它只有浏览器默认的
      固有宽度，实测 165px，而同页添加输入框是 462px，看起来像"没做完"。
   ② 输入框带 type="text"，会命中 style.css 那条全局规则
      `input[type=text],…{padding:9px 14px;border-radius:8px;font-size:.875rem;min-height:40px}`
      → 高 40px、字号 13.1px，比基础数据页那套（30px / 12px / 圆角 6px）大一圈。
   这里统一到与基础数据页完全相同的规格（高度用 32px 布局像素 ≈ 视觉 30px，
   原因见 style.css 里 .basic-add 的注释：主站 body 上有 autoZoom()，布局像素才是恒定的）。 */
.fe-add-row { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; }
.fe-add-row input,
.fe-search input {
  height: 32px;
  min-height: 0;              /* 必须：压过全局 input[type=text]{min-height:40px} */
  padding: 0 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: .8rem;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text);
  cursor: text;               /* 全局规则给文本输入框设的是 pointer，这里纠正回来 */
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.fe-add-row input { flex: 1; min-width: 0; }
.fe-search input { display: block; width: 100%; }
.fe-add-row input:focus,
.fe-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.fe-add-row .btn { height: 32px; min-height: 0; padding: 0 14px; font-size: .8rem; border-radius: 6px; flex-shrink: 0; }
.fe-search { margin-bottom: 10px; }
.fe-list {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fe-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px; color: var(--text);
}
.fe-list-item:last-child { border-bottom: none; }
/* 删除按钮的外观见 style.css 的 `.del-btn`（通用类：红色 ×、圆角、悬停高亮）。
   ⚠️ 2026-09：原先这里写 `visibility:hidden` + 悬停才显示，而磅单/水电的同款按钮是
   **一直显示**的 —— 同一套卡片两种行为。现改为与它们一致：一直显示。 */
.fe-empty {
  padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px;
}

/* ---- 空态 ---- */
.fe-empty-tip {
  padding: 30px; text-align: center; color: var(--text-muted); font-size: 13px;
}

@media (max-width: 1200px) {
  .fe-chart-grid, .fe-manage-grid { grid-template-columns: 1fr; }
}

/* 手机端：.fe-stats-bar 原本固定 5 列且没有任何降列规则，
   393px 下每列仅约 60px，卡片里的数字/文字会被挤到换行错乱。 */
@media (max-width: 768px) {
  .fe-stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .fe-stats-bar { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 图表高度（Chart.js maintainAspectRatio:false 依赖容器高度） ---- */
.fe-chart-card canvas { height: 280px !important; width: 100% !important; }
.fe-chart-card.fe-chart-wide canvas { height: 260px !important; }

/* ---- 提示配色 ---- */
.fe-hint.success { color: var(--success); }
.fe-hint.error { color: var(--danger); }

/* ===== 费用看板深色主题（仅作用在看板内，不影响其他页面） ===== */
#tab-fee-dashboard.fe-dark{background:transparent;border-radius:0;padding:0}
#tab-fee-dashboard.fe-dark .panel-header h2{color:#f8fafc}
#tab-fee-dashboard.fe-dark .panel-desc{color:#94a3b8}
#tab-fee-dashboard.fe-dark .fe-stat,
#tab-fee-dashboard.fe-dark .fe-chart-card{background:#111827;border-color:#1f2937;box-shadow:none}
#tab-fee-dashboard.fe-dark .fe-stat-value{color:#f8fafc}
#tab-fee-dashboard.fe-dark .fe-stat-label{color:#94a3b8}
#tab-fee-dashboard.fe-dark .fe-stat-delta.fe-delta-up{color:#f87171}
#tab-fee-dashboard.fe-dark .fe-stat-delta.fe-delta-down{color:#34d399}
#tab-fee-dashboard.fe-dark .fe-chart-header h3{color:#e5e7eb}
#tab-fee-dashboard.fe-dark .fe-chart-filters select,
#tab-fee-dashboard.fe-dark .input-group input,
#tab-fee-dashboard.fe-dark .input-group select{background:#1f2937;color:#e5e7eb;border-color:#374151}
#tab-fee-dashboard.fe-dark .fe-io-menu{background:#1f2937;border-color:#374151}
#tab-fee-dashboard.fe-dark .fe-io-item{color:#e5e7eb}
#tab-fee-dashboard.fe-dark .fe-io-item:hover{background:#0f172a;color:#60a5fa}
#tab-fee-dashboard.fe-dark .fe-empty-tip{color:#94a3b8}

/* ---- 对齐水电：编辑按钮蓝色 / 顶部删除按钮红色 ---- */
.fe-op-btn[data-act="edit"] { border-color: var(--primary); color: var(--primary); }
.fe-op-btn[data-act="edit"]:hover { background: var(--primary-light); }

/* ===== 油耗模块：表头固定（表格容器内部滚动时表头悬浮） ===== */
/* border-collapse:collapse 与 sticky 表头不兼容，会在表头上下缘留出 1px 细缝；改用 separate 根治 */
#tab-fuel-monthly .fe-table,
#tab-fuel-records .fe-table,
#tab-fuel-vehicles .fe-table,
#tab-fuel-compare .fe-table {
  border-collapse: separate;
  border-spacing: 0;
}
#tab-fuel-monthly .fe-table thead th,
#tab-fuel-records .fe-table thead th,
#tab-fuel-vehicles .fe-table thead th,
#tab-fuel-compare .fe-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--border-light);
  /* 底部分隔线跟随吸附移动，避免表头与内容间出现漏光的细缝 */
  box-shadow: 0 1px 0 var(--border);
  background-clip: padding-box;
}
/* 油耗加油记录管理：表头/单元格内容居中 */
#tab-fuel-records .fe-table thead th,
#tab-fuel-records .fe-table td { text-align: center; }

/* ===== 费用模块：表头固定 + separate（表格仅下边框，separate 无副作用，消除细缝） ===== */
#tab-fee-input .fe-table { border-collapse: separate; border-spacing: 0; }

/* ===== 油耗「数据精灵报告」按钮（科技感） ===== */
.fu-ai-btn{display:inline-flex;align-items:center;gap:6px;height:40px;box-sizing:border-box;padding:0 14px;background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(34,211,238,.08));border:1px solid rgba(56,189,248,.5);color:#7dd3fc;border-radius:10px;font-size:.82rem;font-weight:600;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 0 12px rgba(56,189,248,.18),inset 0 0 8px rgba(56,189,248,.08);transition:box-shadow .2s,transform .2s}
.fu-ai-btn svg{width:15px;height:15px;flex-shrink:0}
.fu-ai-btn:hover{box-shadow:0 0 20px rgba(56,189,248,.5),inset 0 0 12px rgba(56,189,248,.16);transform:translateY(-1px)}
.fu-ai-btn::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);animation:fuShine 3.2s linear infinite}
@keyframes fuShine{0%{left:-60%}60%,100%{left:130%}}

/* ===== 对比涨跌：主题感知颜色（浅色深红/深绿，深色亮红/亮绿），用 !important 压过全局深色白字规则 ===== */
.fu-chg{font-weight:600}
.fu-chg.fu-up{color:#dc2626!important}
.fu-chg.fu-down{color:#16a34a!important}
html.theme-dark .fu-chg.fu-up{color:#f87171!important}
html.theme-dark .fu-chg.fu-down{color:#4ade80!important}