/* ============================================================
   SDK 中台 —— 兼容层样式
   ------------------------------------------------------------
   视觉系统 100% 沿用 /assets/style.css（对齐 hemasdk 后台）。
   本文件只做一件事：把中台既有视图用到的类名，
   映射到 style.css 的设计变量上，保证视图不改也有同一套皮。
   注意：本文件必须在 style.css 之后加载。
   ============================================================ */

:root{
  /* 历史视图行内样式里引用的变量（保留，保证 var(--muted) 之类仍生效） */
  --text:#0F172A; --muted:#94A3B8; --line:#E2E8F0; --bg:#F1F5F9;
  --primary:#059669; --primary-soft:rgba(5,150,105,.08);
  --ok:#059669; --ok-soft:rgba(5,150,105,.08);
  --warn:#D97706; --warn-soft:rgba(217,119,6,.08);
  --danger:#DC2626; --danger-soft:rgba(220,38,38,.06);
}

a{text-decoration:none}

/* ---------- 页面标题（.page-head） ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.page-head h1{margin:0;font-size:17px;font-weight:600;color:var(--color-text)}
.page-head .sub{color:var(--color-text-muted);font-size:13px;margin-top:4px;line-height:1.6}

/* 顶部头部的页面标题 */
.ph-title{font-size:16px;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 卡片：中台视图把内容直接写在 .card 里 ---------- */
.card{padding:18px 20px}
/* 自带 card-header / card-body 结构的卡片（hemasdk 列表页写法）不再重复加内边距 */
.card:has(> .card-header),
.card:has(> .card-body){padding:0}

/* ---------- 表格（table.list） ---------- */
table.list{width:100%;border-collapse:collapse;font-size:13px;font-family:var(--font-family)}
table.list th,table.list td{padding:9px 12px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--color-border-light)}
table.list th{background:#F8FAFC;color:var(--color-text-secondary);font-weight:600;white-space:nowrap;border-bottom:1px solid var(--color-border)}
table.list tr:hover td{background:#F8FAFC}
.empty{color:var(--color-text-muted);text-align:center;padding:26px 0}
/* 表格内空态（hemasdk 写法：整行居中留白） */
.tbl-empty{padding:48px 0;text-align:center;color:var(--color-text-muted)}

/* ---------- 表单 ---------- */
label.fld{display:block;margin-bottom:12px}
label.fld > span{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:var(--color-text-secondary)}

/* ---------- 按钮：.btn=主色实心，.ghost=描边，.danger=危险描边 ---------- */
.btn{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff;text-decoration:none}
.btn.ghost{background:var(--color-surface);color:var(--color-text-secondary);border-color:var(--color-border)}
.btn.ghost:hover{background:var(--color-primary-bg);border-color:var(--color-primary);color:var(--color-primary)}
.btn.danger{background:var(--color-surface);color:var(--color-danger);border-color:#FECACA}
.btn.danger:hover{background:#FEF2F2;border-color:var(--color-danger);color:var(--color-danger)}
.btn.sm{padding:5px 12px;font-size:12px}

/* ---------- 提示块（.tip） ---------- */
.tip{border-radius:var(--radius);padding:11px 14px;margin:10px 0;font-size:13px;border:1px solid transparent;line-height:1.7}
.tip.info{background:var(--color-info-bg);border-color:#BFDBFE;color:#1E40AF}
.tip.ok{background:var(--color-success-bg);border-color:#A7F3D0;color:#065F46}
.tip.warn{background:var(--color-warning-bg);border-color:#FDE68A;color:#92400E}
.tip.danger{background:var(--color-danger-bg);border-color:#FECACA;color:#991B1B}

/* ---------- 状态标签：中台写 .tag ok/warn/danger，对齐 style.css 的 .tag-success 等 ---------- */
.tag.ok{background:var(--color-success-bg);color:var(--color-success)}
.tag.ok::before{background:var(--color-success)}
.tag.warn{background:var(--color-warning-bg);color:var(--color-warning)}
.tag.warn::before{background:var(--color-warning)}
.tag.danger{background:var(--color-danger-bg);color:var(--color-danger)}
.tag.danger::before{background:var(--color-danger)}

/* ---------- 键值行（.kv） ---------- */
.kv{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--color-border-light);font-size:13px}
.kv:last-child{border-bottom:none}
.kv .k{flex:0 0 190px;color:var(--color-text-muted)}
.kv .v{flex:1;min-width:0;word-break:break-all}

/* ---------- 工具类 ---------- */
.muted{color:var(--color-text-muted)}
.nowrap{white-space:nowrap}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mt0{margin-top:0}
.center-box{max-width:900px;margin:24px auto;padding:0 16px}

/* ============================================================
   通用组件（后台表单页共用）
   ============================================================ */

/* 字段下方的小提示 / 必填或慎改标记 */
.fld-hint{font-size:11.5px;color:var(--color-text-muted);margin-top:4px;line-height:1.55}
.fld-req{color:var(--color-danger);font-weight:500}

/* 卡片式单选 / 多选：把 radio/checkbox 藏起来，整张卡片可点，选中高亮 */
.pick-grid{display:grid;gap:14px}
.pick-card{
  position:relative;display:block;cursor:pointer;
  border:1px solid var(--color-border);border-radius:var(--radius,10px);
  padding:14px 16px;background:var(--color-surface);
  transition:border-color .15s,box-shadow .15s;
}
.pick-card:hover{box-shadow:var(--shadow-sm)}
.pick-card input{position:absolute;opacity:0;pointer-events:none}
.pick-card:has(input:checked){border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-bg)}
.pick-card:has(input:checked)::after{
  content:'已选';position:absolute;top:-1px;right:-1px;
  background:var(--color-primary);color:#fff;font-size:10px;padding:2px 8px;border-radius:0 9px 0 9px;
}
.pick-card.is-disabled{opacity:.55;cursor:not-allowed}
.pick-title{font-size:13.5px;font-weight:600;color:var(--color-text)}
.pick-note{font-size:11.5px;color:var(--color-text-muted);line-height:1.55;margin-top:6px}