/* ============================================================
   card.css — 角色页统一卡片设计语言（qc / my / install）
   作用：根治"卡片拼凑感"——统一容器、标题层级、说明文字、
         列表子项、工厂提示框、状态徽标。
   加载顺序：必须在本页其余 css 之后引入，确保统一覆盖生效。
   复用 main.css 的设计令牌（--card-bg / --card-border / --primary 等），
   仅补充本系统所需的 --surface-2 / --radius-card。
   ============================================================ */
:root{
  --surface-2: #1A1A24;   /* 卡片内嵌子块的表面，与卡片表面拉开层次 */
  --radius-card: 16px;
  --card-pad: 16px;
  /* Logo 尺寸令牌：全站厂商品牌 Logo 统一来源，改一处即全站生效 */
  --logo-xs: 28px;   /* 弹窗结果行内 */
  --logo-sm: 40px;   /* 弹窗品牌选项 */
  --logo-md: 56px;   /* 卡片预览（注册 / 品牌信息卡 / hero 头像，统一） */
  --logo-lg: 80px;   /* 品牌 hero 预留 */
}

/* ---------- 统一卡片容器 ---------- */
.material-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  margin: 12px 14px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  /* 边框高亮 / 发光 / 微浮动的平滑过渡（点击 / 聚焦 / 填写时才动，平时静止） */
  transition: border-color .25s cubic-bezier(.4,0,.2,1),
              box-shadow   .25s cubic-bezier(.4,0,.2,1),
              transform    .25s cubic-bezier(.4,0,.2,1);
}
/* 边框高亮仅在交互时出现（点击 / 聚焦 / 填写），平时静态 —— 符合"点了才高亮"。
   同时卡片微上浮 1px，强化"正在操作这张卡"的反馈感（克制动效，B 端适用） */
.material-card:focus-within{
  border-color: var(--primary-light);
  /* 高亮发光收敛：模糊 22→14px、透明度 .30→.20，强度更克制（不改动全局 --glow，vendor-dash 静态发光保持） */
  box-shadow: 0 4px 14px rgba(139,124,246,.20), inset 0 1px 0 rgba(255,255,255,.05);
  transform: translateY(-1px);
}
/* 尊重系统"减少动态效果"偏好：关闭浮动与缓动，仅保留即时高亮 */
@media (prefers-reduced-motion: reduce){
  .material-card{ transition: border-color .01ms, box-shadow .01ms, transform .01ms; }
  .material-card:focus-within{ transform: none; }
}
/* 工厂资料卡（过审必填）边框加宽，突出其重要性 */
.material-card#regVendorFactoryTip{
  border-width: 2px;
}
/* 厂商注册卡组与上方 4 个身份 Tab 左右对齐：抵消 material-card 默认 14px 左右缩进，
   使卡片左缘对齐最左「销售顾问」tab、右缘对齐最右「业主/客户」tab（上下 12px 间距保留） */
#regVendor .material-card{
  margin-left: 0;
  margin-right: 0;
}

/* ---------- 卡片标题：拉开层级（原仅 12px，与正文同大） ---------- */
.material-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .2px;
}

/* ---------- 卡片说明文字：统一（覆盖各处内联硬编码漂移） ---------- */
.material-card p{
  font-size: 12.5px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
}

/* ---------- 卡片内子项（列表行 → 统一 inset 块，纵向堆叠） ---------- */
.material-card .admin-row{
  display: block !important;
  padding: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  background: var(--surface-2) !important;
}
.material-card .admin-row:last-child{ margin-bottom: 0 !important; }

/* ---------- 工厂资料提示框 ---------- */
.notice-box{
  margin: 14px 0 4px;
  padding: 14px;
  border: 1px dashed var(--primary-light);
  background: rgba(139,124,246,.06);
  border-radius: 14px;
}
.notice-box .form-group:last-child{ margin-bottom: 0; }

/* ---------- 状态徽标：统一 pill 系统（替代散落的 #16161F3e0 / 绿 / 橙） ---------- */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill--success{ background: rgba(52,211,153,.14);  color: #34D399; }
.pill--pending{ background: rgba(251,191,36,.16);  color: #FBBF24; }
.pill--info{    background: var(--primary-soft);   color: var(--primary-light); }
.pill--danger{  background: rgba(248,113,113,.14); color: #F87171; }

/* ---------- 卡片可折叠（原生 details/summary，零 JS，文档流天然不重叠） ----------
   规则：把任意 .material-card 改为 <details class="material-card" open>，
         其首个子元素 .material-title 改为 <summary class="material-title">。
         折叠时浏览器自动隐藏主体，卡片高度收起，绝不覆盖相邻卡片。           */
details.material-card{ overflow: hidden; }   /* 折叠动画收边，防内容溢出 */
details.material-card > summary.material-title{
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;            /* 折叠态标题下不留白 */
  padding-right: 22px;
  position: relative;
}
details.material-card > summary.material-title::-webkit-details-marker{ display: none; }
details.material-card > summary.material-title::after{
  content: '';
  position: absolute;
  right: 2px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
details.material-card:not([open]) > summary.material-title::after{
  transform: translateY(-30%) rotate(-45deg);   /* 折叠：箭头朝右 */
}
details.material-card[open] > summary.material-title{ margin-bottom: 10px; }
details.material-card > summary.material-title:hover{ color: var(--primary-light); }
details.material-card > summary.material-title:focus-visible{
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce){
  details.material-card > summary.material-title::after{ transition: none; }
}