/* ============================================================
   关澜ERP v2 · 报价计算 专属样式（第 28 轮）

   基底色板沿用 style.css，本文件只承载报价页专属组件：
   类型切换标签 / 参数网格 / 结果卡 / 利润盒 / 报价单历史表。
   ============================================================ */

/* ---------- 预选客户提示条 ---------- */
.q-preset {
  background: var(--ok-soft); border: 1px solid #A7F3D0;
  border-radius: var(--radius); padding: 10px 15px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px; font-size: 13px;
}
.q-preset-label { font-size: 12px; color: #047857; font-weight: 600; }
.q-preset b { color: var(--text); font-weight: 700; }
.q-preset-note { font-size: 11.5px; color: #059669; }

/* ---------- 两栏布局 ---------- */
.q-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

/* ---------- 类型切换标签 ---------- */
.q-type-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.q-type-tab {
  padding: 7px 12px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius-btn); cursor: pointer; font-size: 12.5px;
  font-family: inherit; color: var(--muted); display: inline-flex;
  align-items: center; gap: 6px; transition: all .15s;
}
.q-type-tab:hover { border-color: var(--primary); color: var(--primary); }
.q-type-tab.active {
  background: var(--primary); border-color: var(--primary);
  color: #fff; font-weight: 600;
}
.q-type-n {
  font-size: 10.5px; background: rgba(0,0,0,.07); border-radius: 8px;
  padding: 0 5px; font-weight: 600;
}
.q-type-tab.active .q-type-n { background: rgba(255,255,255,.25); }

/* ---------- 计价场景（家装 / 工程） ---------- */
.q-scene-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-scene-btn {
  padding: 6px 18px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius-btn); cursor: pointer; font-size: 13px;
  color: var(--muted); font-family: inherit; transition: all .12s;
}
.q-scene-btn:hover { border-color: var(--primary); color: var(--primary); }
.q-scene-btn.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
  font-weight: 600;
}
/* 工程折扣输入：夹在「×」和「折扣」之间 */
.q-scene-factor {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; background: var(--primary-soft);
  border: 1px solid #BFDBFE; border-radius: var(--radius-btn);
}
.q-scene-x { color: var(--primary-d); font-weight: 600; font-size: 13px; }
.q-scene-factor input {
  width: 62px; height: 24px; padding: 0 6px; text-align: center;
  border: 1px solid #BFDBFE; border-radius: 4px; font-size: 13px;
  font-family: inherit; color: var(--primary-d); font-weight: 600;
}
.q-scene-factor input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.q-scene-pct { color: var(--primary-d); font-size: 12px; }

/* ---------- 档位下拉 + 自定义输入（并排常驻） ----------
   两个控件始终同时可见：
   · 左边下拉选标准档位
   · 右边输入框随时可填任意内径（走定制公式）
   不做"选中自定义才显示输入框"的切换 —— 那会导致输入框找不到。 */
.q-dia-row { display: flex; align-items: center; gap: 6px; }
.q-dia-row select, .q-dia-row input { flex: 1; min-width: 0; }
.q-dia-select { flex: 0 0 46% !important; }
.q-dia-input  { flex: 1 1 54% !important; }
/* 输入框用虚线描边，暗示"这是可自由填写的输入位" */
.q-dia-input {
  border: 1px dashed var(--line-strong, #D4D4D8);
  background: #FCFCFD;
}
.q-dia-input:focus {
  outline: none; border-color: var(--primary); border-style: solid;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.q-dia-input::placeholder { color: var(--sub); font-size: 12px; }

/* ---------- 参数网格 ---------- */
.q-param-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; }
.q-param { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.q-param-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.q-param-label i { font-style: normal; color: var(--sub); font-size: 11px; }
.q-param input, .q-param select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-btn);
  font-size: 13px; font-family: inherit; width: 100%; background: #fff; color: var(--text);
}
.q-param input:focus, .q-param select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.q-param-hint { font-size: 11px; color: var(--sub); line-height: 1.5; }

/* ---------- 结果卡 ---------- */
.q-result-name { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.q-result-hero {
  background: linear-gradient(135deg, #0E1A24 0%, #101C2B 100%);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px;
}
.q-hero-label { font-size: 11.5px; color: #A7B8CC; letter-spacing: .3px; }
.q-hero-value {
  font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -.6px;
  margin: 5px 0 4px; font-variant-numeric: tabular-nums;
}
.q-hero-sub { font-size: 11.5px; color: #8FA3B8; }

/* ---------- 利润盒 ---------- */
.q-profit-box {
  background: var(--ok-soft); border: 1px solid #A7F3D0;
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
}
.q-profit-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0; font-size: 12.5px; color: var(--muted);
}
.q-profit-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.q-profit-row b.ok { color: #047857; }
.q-profit-row.total {
  border-top: 1px dashed #A7F3D0; margin-top: 4px; padding-top: 8px;
  font-weight: 600; color: var(--text);
}
.q-profit-row.total b { font-size: 15px; }

.q-tip-box {
  background: var(--primary-soft); border: 1px solid #BFDBFE;
  border-radius: var(--radius-btn); padding: 9px 12px; margin-bottom: 12px;
  font-size: 12px; color: var(--primary-d);
}

/* ---------- 计算明细 ---------- */
.q-detail { border-top: 1px solid var(--line-soft); padding-top: 6px; }
.q-detail-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0; font-size: 12.5px; color: var(--muted);
  border-bottom: 1px dashed var(--line-soft);
}
.q-detail-row:last-child { border-bottom: none; }
.q-detail-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 空状态 ---------- */
.q-empty { text-align: center; padding: 30px 16px; }
.q-empty-icon {
  width: 48px; height: 48px; border-radius: 14px; background: var(--primary-soft);
  color: var(--primary); display: inline-flex; align-items: center;
  justify-content: center; font-size: 22px; font-weight: 700; margin-bottom: 11px;
}
.q-empty-title { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.q-empty-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* ---------- 窄屏 ---------- */
@media (max-width: 1100px) {
  .q-layout { grid-template-columns: 1fr; }
  .q-param-grid { grid-template-columns: 1fr; }
}

/* ---------- 报价单价设置（admin 后台） ---------- */
.q-ps-note {
  padding: 10px 12px; margin-bottom: 16px;
  background: var(--primary-soft); border: 1px solid #BFDBFE;
  border-radius: 6px; font-size: 12.5px; color: #1E40AF; line-height: 1.7;
}
.q-ps-group { margin-bottom: 22px; }
.q-ps-group-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.q-ps-table { font-size: 13px; }
.q-ps-table td { vertical-align: middle; }
.q-ps-input {
  width: 100%; height: 28px; padding: 0 8px; text-align: right;
  border: 1px solid var(--line); border-radius: 4px;
  font-size: 13px; font-family: inherit;
}
.q-ps-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
/* 被调整过的行：淡黄底，肉眼能扫出"哪些单价改过" */
.q-ps-row-adjusted { background: #FFFBEB; }
.q-ps-row-adjusted .q-ps-current { color: #B45309; }