/* views/groups.css — 「分组」视图(FU-GROUP-COMPOSITE)。owner: groups 视图。
   全部走 tokens.css 的 var(--*);零硬编码色/距/角。 */

/* —— 「成员 / IdP 同步」tab 壳(FU-GROUPS-IDP-MERGE,§9d 鎏金活动态:一区一道细金线) ——
   不撞 §0.10 冻结类(.v-groups-tab* 为本视图自有);活动态走 --color-rail-active-bar(现为正橙,
   值随主题走)+ --color-accent 文字,与表格基线/区块 tab marker 同一活动态语言。 */
.v-groups-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.v-groups-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent; /* 活动态金线落此 */
  margin-bottom: -1px;                  /* 压住容器底边,金线与分隔线重合 */
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.v-groups-tab:hover { color: var(--color-text); }
.v-groups-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.v-groups-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-rail-active-bar);
}

/* 操作列不许折行(2026-07-14 行高修复:说明列撑爆表宽时按钮曾被挤成竖排) */
.v-grp-actions { display: flex; gap: var(--space-2); flex-wrap: nowrap; }
.v-grp-pager { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; }
/* 说明列单行截断(完整文本入 title),长说明不再把行撑高/表撑宽 */
.v-grp-desc-cell {
  color: var(--color-text-secondary);
  font-size: 13px;
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* —— 表单 —— */
.v-grp-desc { width: 100%; resize: vertical; min-height: 48px; font-family: inherit; }
.v-grp-replace-note { color: var(--color-text-secondary); font-size: 12px; margin: 0; }
.v-grp-form-err { color: var(--color-danger); font-size: 13px; }
.v-grp-trace { color: var(--color-text-secondary); }

/* —— 成员管理面(modal 内) —— */
.v-grp-members { display: flex; flex-direction: column; gap: var(--space-3); min-width: 420px; max-width: 560px; }
.v-grp-members-note { color: var(--color-text-secondary); font-size: 12px; margin: 0; }
.v-grp-add { display: flex; gap: var(--space-2); align-items: center; }
.v-grp-emp-sel { flex: 1 1 auto; min-width: 0; }
.v-grp-empty { font-size: 13px; padding: var(--space-2) 0; }
.v-grp-list { display: flex; flex-direction: column; gap: var(--space-1); max-height: 48vh; overflow-y: auto; }
.v-grp-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}
.v-grp-member-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-grp-member-name { font-size: 13px; color: var(--color-text); }
.v-grp-member-id { font-size: 12px; }

/* ---- 白画布 + 版头(§9g,2026-07-14 冲刺):tab 条居左、活动 tab 动作居右 ---- */
.v-groups-canvas {
  background: var(--color-surface);
  border-radius: 24px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.v-groups-canvas .section { margin-bottom: 0; }
.v-groups-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.v-groups-actions { display: flex; gap: var(--space-2); }
.v-groups-canvas .table th,
.v-groups-canvas .table td { white-space: nowrap; } /* 基础排版:不竖排 */

/* ---- 2026-07-14 表格视觉升级:56px 行高(与部门/员工表一致)/ 首字圆标 ---- */
.v-groups-canvas .table td { height: 56px; vertical-align: middle; }
.v-grp-namecell { display: inline-flex; align-items: center; gap: var(--space-2); }
.v-grp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex: none;
  background: rgba(14, 138, 108, 0.12); /* 浅绿底绿字(openai 品牌绿同族) */
  color: var(--color-prov-openai);
}

/* 2026-07-14 组织策略规格:成员 tab 名称筛选 + 长说明 ⓘ */
.v-grp-filters { margin-bottom: var(--space-3); }
.v-grp-q { min-width: 220px; }
.v-groups-tabwrap { display: flex; align-items: center; gap: var(--space-2); }
.v-groups-info { display: inline-flex; color: var(--color-text-muted); cursor: help; }
.v-groups-info:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }