/* ===== wb_settings_redesign.css · 20261004b · 基础数据管理重设计 =====
   回滚：index.html 删除本文件的 <link> 行即可。
   v2：全部规则加 :root[data-theme="green"] #app 前缀（压过 wb_theme 内同类超高特异性规则）
      FA 字体族改 6.x（页面 vendor 为 FA 6.4.0）；网格固定 4 列 + 响应式断点。 */

/* ---------- 1. 网格：固定 4 列 + 响应式 ---------- */
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
}
@media (max-width:1500px){
  :root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:1100px){
  :root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:680px){
  :root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid{grid-template-columns:1fr!important}
}

/* ---------- 2. 卡片 ---------- */
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card{
  background:#fff!important;
  border:1px solid #e3ebe8!important;
  border-radius:12px!important;
  padding:18px!important;
  box-shadow:0 1px 3px rgba(15,43,38,.04)!important;
  transition:box-shadow .25s,transform .25s!important;
  display:flex!important;
  flex-direction:column!important;
}
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card:hover{
  box-shadow:0 6px 18px rgba(0,149,128,.10)!important;
  transform:translateY(-2px)!important;
}

/* ---------- 3. 卡片标题 + 语义图标 ---------- */
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card h3{
  display:flex!important;align-items:center!important;gap:9px!important;
  font-size:15px!important;font-weight:600!important;color:#1f2d2b!important;
  margin:0 0 14px!important;padding-bottom:12px!important;
  border-bottom:1px dashed #e3ebe8!important;
}
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card h3::before{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900;
  content:"\f0c9";
  width:26px;height:26px;border-radius:7px;background:#e6f4f1;color:#009580;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;flex:none;
}
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card:nth-child(1) h3::before{content:"\f073"}
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card:nth-child(2) h3::before{content:"\f005"}
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card:nth-child(3) h3::before{content:"\f007"}
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card:nth-child(4) h3::before{content:"\f02b"}
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card:nth-child(5) h3::before{content:"\f573"}
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card:nth-child(6) h3::before{content:"\f09d"}
:root[data-theme="green"] #app .settings-container .setting-page .basic-data-grid .data-card:nth-child(7) h3::before{content:"\f46c"}

/* ---------- 4. 添加行 ---------- */
:root[data-theme="green"] #app .settings-container .setting-page .data-input-group{gap:8px!important;margin-bottom:8px!important}
:root[data-theme="green"] #app .settings-container .setting-page .data-input-group .form-input-sm{
  flex:1!important;height:34px!important;border:1px solid #dce7e4!important;border-radius:8px!important;
  padding:0 10px!important;font-size:13px!important;color:#1f2d2b!important;background:#fafbfb!important;
  transition:border-color .2s,box-shadow .2s!important;min-width:0!important;
}
:root[data-theme="green"] #app .settings-container .setting-page .data-input-group .form-input-sm::placeholder{color:#9db1ac!important}
:root[data-theme="green"] #app .settings-container .setting-page .data-input-group .form-input-sm:focus{
  outline:none!important;border-color:#009580!important;box-shadow:0 0 0 3px rgba(0,149,128,.10)!important;background:#fff!important;
}
:root[data-theme="green"] #app .settings-container .setting-page .data-input-group .btn.btn-primary.btn-sm{
  height:34px!important;padding:0 14px!important;border-radius:8px!important;
  background:#009580!important;border:none!important;color:#fff!important;
  font-size:13px!important;font-weight:500!important;flex:none!important;
  transition:background .2s!important;
}
:root[data-theme="green"] #app .settings-container .setting-page .data-input-group .btn.btn-primary.btn-sm:hover{background:#007e6b!important}

/* ---------- 5. 列表与滚动条 ---------- */
:root[data-theme="green"] #app .settings-container .setting-page .data-card .data-list{
  max-height:218px!important;overflow-y:auto!important;border-top:none!important;
  margin-top:4px!important;padding-right:2px!important;
}
:root[data-theme="green"] #app .settings-container .setting-page .data-card .data-list::-webkit-scrollbar{width:5px}
:root[data-theme="green"] #app .settings-container .setting-page .data-card .data-list::-webkit-scrollbar-thumb{background:#d5e5e0;border-radius:4px}
:root[data-theme="green"] #app .settings-container .setting-page .data-card .data-list::-webkit-scrollbar-track{background:transparent}

/* ---------- 6. 列表行 ---------- */
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item{
  padding:7px 6px!important;border-bottom:none!important;border-radius:8px!important;
  transition:background .2s!important;
}
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item + .data-list-item{border-top:1px dashed #edf3f1!important}
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item:hover{background:#f2faf8!important}
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item span{
  color:#1f2d2b!important;font-size:13.5px!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}

/* ---------- 7. 编辑/删除 → 圆形图标钮 ---------- */
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item .btn-edit,
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item .btn-delete{
  width:26px!important;height:26px!important;padding:0!important;border-radius:50%!important;
  font-size:0!important;line-height:1!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;flex:none!important;
  margin-left:6px!important;cursor:pointer!important;transition:all .2s!important;
}
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item .btn-edit::before,
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item .btn-delete::before{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900;font-size:12px!important;
  display:inline;
}
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item .btn-edit{
  background:#f0faf8!important;border:1px solid #cfe8e2!important;color:#009580!important;
}
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item .btn-edit::before{content:"\f044"}
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item .btn-edit:hover{background:#009580!important;border-color:#009580!important;color:#fff!important}
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item .btn-delete{
  background:#fef2f2!important;border:1px solid #f5c9c9!important;color:#dc3838!important;
}
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item .btn-delete::before{content:"\f2ed"}
:root[data-theme="green"] #app .settings-container .setting-page .data-list-item .btn-delete:hover{background:#dc3838!important;border-color:#dc3838!important;color:#fff!important}

/* ---------- 8. 用户管理：列表行高 30px / 文字 12px（裸 class，不带 scoped hash） ---------- */
:root[data-theme="green"] #app .user-table tbody tr{height:30px!important}
:root[data-theme="green"] #app .user-table td{
  height:30px!important;padding:0 14px!important;font-size:12px!important;line-height:30px!important;
}
:root[data-theme="green"] #app .user-table td *{font-size:12px!important;line-height:1.2!important}
:root[data-theme="green"] #app .user-table th{
  height:30px!important;padding:0 14px!important;font-size:12px!important;line-height:30px!important;
}