/* ==========================================================================
 * wb_customer_ui.css   @@ wb-cust-light-12px 20261004 @@
 *
 * 目标：客户管理「新增客户 / 编辑客户 / 查看客户」三个弹窗
 *       ① 配色改成浅色（白底 + 深字 + 浅灰边）
 *       ② 弹窗内文字统一 12px（与列表一致）
 *
 * 作用范围：仅 .modal-overlay 浮层。其它页面 / 其它模块一律不动。
 *
 * ── 为什么不用带 data-v-xxxx hash 的选择器 ──────────────────────────────
 * 实测确认：动态渲染出来的 .modal-container 上没有 Vue scoped 属性
 * （打包产物里它是模块级常量对象 ae={class:'modal-container'}，编译期加不上
 *  scopeId、运行时也不补）。带 hash 的选择器会整片静默失效 —— 表现就是
 * 「文件改了、HTTP 也是新的、页面纹丝不动」。所以这里全部使用裸 class。
 *
 * ── 为什么要 !important ────────────────────────────────────────────────
 * 站内主包 (/assets/index-Dr-ADDq_.css) 有这些规则：
 *   .form-label{color:var(--text-secondary)}         -> 浅灰字，浅底上看不清
 *   .form-input{color:var(--text-primary);
 *               background-color:#0f172a80}          -> 深底白字
 * 构建产物 (CustomerList-5e0204d3.css) 有：
 *   .modal-container[data-v-fd242fcd]{background:#1e293b}
 *   .btn-secondary[data-v-fd242fcd]{color:#94a3b8;background:#1e293bcc}
 * 这些特异性高于裸 class，必须 !important 才压得住。
 *
 * 回滚：删掉 index.html 里 <link ... /wb_customer_ui.css ...> 那一行即可；
 *       或者用同目录的 .bak_modal12_20261004_153458 覆盖回来。
 * ========================================================================== */

/* ─────────── 1. 弹窗容器：深底 -> 白底 ─────────── */
.modal-container {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, .18) !important;
}

/* 头部 / 底部分隔线：白透明 -> 浅灰 */
.modal-header,
.modal-footer {
  border-color: #e8edf3 !important;
  background: #f8fafc !important;
}

/* 标题：白字 -> 深字 */
.modal-header h3 {
  color: #1e293b !important;
}

/* 关闭按钮：浅灰 -> 中灰 -> hover 深 */
.modal-container .btn-close {
  color: #94a3b8 !important;
  font-size: 20px !important;
}
.modal-container .btn-close:hover {
  color: #334155 !important;
}

/* ─────────── 2. 表单：label / input / select / textarea ─────────── */
.modal-container .form-label {
  color: #475569 !important;
  font-weight: 500 !important;
}

.modal-container .form-input,
.modal-container select.form-input,
.modal-container textarea.form-input {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #d1d5db !important;
}

.modal-container .form-input::placeholder {
  color: #9aa7b8 !important;
}

.modal-container .form-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12) !important;
  outline: none !important;
}

/* 只读 / 查看态：浅灰底，仍可读 */
.modal-container .form-input:disabled,
.modal-container .form-input[disabled] {
  background: #f1f5f9 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  opacity: 1 !important;
  cursor: default !important;
}

/* select 下拉箭头在浅底上要看得见 */
.modal-container select.form-input {
  background-image: none !important;
}
.modal-container select.form-input option {
  background: #ffffff;
  color: #1e293b;
}

/* 必填星号：浅底上仍要显眼 */
.modal-container .required {
  color: #ef4444 !important;
}

/* ─────────── 3. 按钮：取消(次要) 改浅色 ─────────── */
.modal-container .btn-secondary {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #dbe2ea !important;
}
.modal-container .btn-secondary:hover {
  background: #e6ecf3 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}
/* 主按钮保持蓝色（浅底上更醒目） */
.modal-container .btn-primary {
  background: #3b82f6 !important;
  color: #fff !important;
  border: 1px solid #3b82f6 !important;
}
.modal-container .btn-primary:hover {
  background: #2563eb !important;
}

/* ─────────── 4. 弹窗内文字统一 12px（含标题外的一切） ─────────── */
.modal-container,
.modal-container .form-label,
.modal-container .form-input,
.modal-container .form-group,
.modal-container .form-grid,
.modal-container .form-row-combined,
.modal-container span:not(.required),
.modal-container label,
.modal-container p,
.modal-container td,
.modal-container th,
.modal-container li,
.modal-container .btn-primary,
.modal-container .btn-secondary {
  font-size: 14px !important;
}
/* 标题略大，保持层级 */
.modal-container h3 {
  font-size: 17px !important;
}
/* 图标字体不受 12px 影响 */
.modal-container i,
.modal-container svg {
  font-size: inherit;
}

/* ─────────── 5. 遮罩保留（本来该深） ─────────── */
.modal-overlay {
  background: rgba(15, 23, 42, .55) !important;
}

/* ===== end wb-cust-light-12px 20261004 ===== */

/* ─────────── 6. 上传区 / 附件条 浅色化（20261004 M 补丁，字号 N 段） ───────────
 * 截图反馈：弹窗白了，但「营业执照/其他资料上传」两个框还是灰块、文字看不清。
 * 深色来自 CustomerList-5e0204d3.css：
 *   .upload-placeholder{background:#1e293b66;color:#94a3b8;border:1px dashed #fff3}
 *   .attachment-bar{background:#1e293b99;color:#94a3b8}  */
.modal-container .upload-placeholder {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px dashed #cbd5e1 !important;
}
.modal-container .upload-placeholder:hover:not(.disabled) {
  color: #3b82f6 !important;
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
}
.modal-container .upload-placeholder.disabled {
  opacity: .6 !important;
}
.modal-container .attachment-bar {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #bfdbfe !important;
}
.modal-container .attachment-bar:hover {
  color: #2563eb !important;
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
}
.modal-container .attachment-bar i:first-child {
  color: #3b82f6 !important;
}
.modal-container .remove-attachment {
  color: #64748b !important;
}
.modal-container .remove-attachment:hover {
  color: #ef4444 !important;
  background: #fee2e2 !important;
}
/* ===== end 20261004 M 补丁 ===== */

/* ─────────── 7. 字号 +2 号收口（20261004 N） ───────────
 * 组件自带 .upload-placeholder span{font-size:13px}、
 * .attachment-name{font-size:13px}、.btn-close{24px}、
 * .remove-attachment{12px}，这些特异性高于第4段的 span 选择器，需单独压。 */
.modal-container .upload-placeholder span,
.modal-container .attachment-name,
.modal-container .attachment-bar span {
  font-size: 14px !important;
}
.modal-container .remove-attachment {
  font-size: 14px !important;
}
.modal-container .btn-close {
  font-size: 24px !important;
}
.modal-container .form-input {
  font-size: 14px !important;
  padding: 10px 14px !important;
}
/* ===== end 20261004 N ===== */