/**
 * org-self-service.css
 * B4 控制台自助组织管理 — 三 Tab 增强
 * 增强 console/org-members.html
 *
 * 间距规范（2026-09 重写）：
 *   面板间距 20px / 面板内边距 20px / 标题与内容 16px
 *   表单项间距 14px / 表格单元格 12px 16px / 卡片内边距 18px
 */

/* ── Tab 切换栏 ── */
.oss-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line);
  margin-bottom: 20px;
}
.oss-tab-btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}
.oss-tab-btn:hover { color: var(--brand); }
.oss-tab-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.oss-tab-btn .tab-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}
.oss-tab-btn.active .tab-count {
  background: #f0fdfa;
  color: var(--brand);
}

/* ── Tab 内容区 ── */
.oss-tab-content { display: none; }
.oss-tab-content.active { display: block; }

/* ── 角色卡片 ── */
.oss-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.oss-role-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.oss-role-card.highlight {
  border-color: #e7ebf0;
  background: var(--surface);
}
.oss-role-card:hover { border-color: rgba(15,118,110,.45); }
.oss-role-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oss-role-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.oss-role-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  font-weight: 800;
}
.oss-role-icon.admin { background: #0f766e; }
.oss-role-icon.dev { background: #0284c7; }
.oss-role-icon.member { background: #64748b; }
.oss-role-icon.readonly { background: #6b7280; }
.oss-role-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-soft);
  padding: 4px 10px;
  border-radius: 6px;
}
.oss-role-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.oss-perm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.oss-perm-list li {
  font-size: 12px;
  color: var(--text);
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.oss-perm-list li::before {
  content: '✓';
  color: #0f766e;
  font-weight: 800;
  font-size: 11px;
}
.oss-perm-list li.denied::before {
  content: '✕';
  color: #66748b;
}
.oss-perm-list li.denied { color: #66748b; }
.oss-menu-visible {
  font-size: 11px;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.oss-menu-visible strong {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  color: var(--subtle);
}
.oss-menu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.oss-menu-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f0fdfa;
  color: #0f766e;
  font-weight: 600;
}
.oss-menu-chip.hidden {
  background: #f1f5f9;
  color: #64748b;
  text-decoration: line-through;
}
.oss-role-foot {
  margin-top: auto;
  padding-top: 12px;
}
.oss-role-foot .btn {
  width: auto;
  font-size: 12px;
  padding: 7px 14px;
}

/* ── 组织设置 ── */
.oss-settings-grid {
  display: grid;
  gap: 20px;
}
.oss-settings-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 18px 20px;
}
.oss-settings-card h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.oss-settings-card h3 + p,
.oss-settings-card .member-summary {
  margin: 0 0 16px;
}
.oss-settings-card h3 .card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f0fdfa;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.oss-form-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.oss-form-row label {
  font-size: 13px;
  font-weight: 700;
  color: #475467;
  text-align: right;
}
.oss-form-row .control {
  font-size: 13px;
}
.oss-form-row .readonly-value {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  /* 与 .control 输入框视觉统一的只读态 */
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #f8fafc;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

/* 表单操作按钮：与输入框列对齐（88px 标签 + 12px gap） */
.oss-form-actions {
  margin-left: 100px;
  margin-top: 4px;
}
.oss-form-actions .btn {
  min-width: 120px;
}

/* ── 模块可见开关 ── */
/* ── 模块可见性：按导航分组的卡片网格（开关控件复用 oss-module-switch/slider） ── */
.oss-mod-groups {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}
.oss-mod-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
}
.oss-mod-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text);
}
.oss-mod-group-count {
  font-size: 11px;
  color: var(--muted);
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 10px;
}
.oss-mod-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.oss-mod-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
}
.oss-mod-chip-icon {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.oss-mod-chip-text { flex: 1; min-width: 0; }
.oss-mod-chip-text .oss-module-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1200px) {
  .oss-mod-groups { grid-template-columns: 1fr; }
}
.oss-module-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--brand);
  flex-shrink: 0;
}
.oss-module-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.oss-module-desc {
  font-size: 11px;
  color: var(--muted);
}
.oss-module-switch {
  position: relative;
  width: 42px;
  height: 24px;
}
.oss-module-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.oss-module-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 24px;
  transition: 0.2s;
}
.oss-module-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.oss-module-switch input:checked + .oss-module-slider {
  background: var(--brand);
}
.oss-module-switch input:checked + .oss-module-slider::before {
  transform: translateX(18px);
}
.oss-module-switch input:disabled + .oss-module-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── 席位额度：4 统计卡 + 分段进度条 ── */
.oss-seat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.oss-seat-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafbfc;
  padding: 14px 16px;
}
.oss-seat-card-label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.oss-seat-card-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  margin-top: 6px;
  line-height: 1;
}
.oss-seat-card-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 3px;
}
.oss-seat-card.primary .oss-seat-card-value { color: #0f766e; }
.oss-seat-card.amber .oss-seat-card-value { color: #d9941a; }
.oss-seat-card.full {
  border-color: #e7b4b5;
  background: #fdf3f3;
}
.oss-seat-card.full .oss-seat-card-value { color: #c4494b; }
.oss-seat-card-badge {
  background: #c4494b;
  color: #fff;
  font-size: 10px;
  border-radius: 999px;
  padding: 1px 8px;
}
.oss-seat-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #eef1f4;
  margin-top: 16px;
}
.oss-seat-bar i { display: block; height: 100%; }
.oss-seat-bar .seg-active { background: #0f766e; }
.oss-seat-bar .seg-pending { background: #d9941a; }
.oss-seat-bar .seg-free { background: #eef1f4; }
.oss-seat-bar.full .seg-active,
.oss-seat-bar.full .seg-pending { background: #c4494b; }
.oss-seat-legend {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}
.oss-seat-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.oss-seat-legend .dot.seg-active { background: #0f766e; }
.oss-seat-legend .dot.seg-pending { background: #d9941a; }
.oss-seat-legend .dot.seg-free { background: #e2e8f0; }
.oss-seat-unlimited-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
}
.oss-seat-foot {
  font-size: 11px;
  color: var(--muted);
  margin: 12px 0 0;
}
@media (max-width: 1200px) {
  .oss-seat-cards { grid-template-columns: 1fr 1fr; }
}

/* ── 变更角色确认弹窗 ── */
.oss-role-change-box {
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.oss-role-change-box strong {
  display: block;
  font-size: 12px;
  color: #854d0e;
  margin-bottom: 6px;
}
.oss-role-change-box p {
  font-size: 11px;
  color: #713f12;
  line-height: 1.7;
  margin: 0;
}
.oss-role-before-after {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 13px;
}
.oss-role-before-after .role-badge {
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
}
.oss-role-before-after .role-before { background: #f3f4f6; color: #4b5563; }
.oss-role-before-after .role-after { background: #dbeafe; color: #1e40af; }
.oss-role-before-after .arrow { color: var(--muted); font-size: 16px; }

/* ── 五终点覆盖层 ── */
.oss-state-overlay {
  padding: 60px 20px;
  text-align: center;
}
.oss-state-overlay .oss-icon { font-size: 48px; margin-bottom: 16px; }
.oss-state-overlay strong {
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
}
.oss-state-overlay p {
  font-size: 13px;
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto 16px;
  line-height: 1.7;
}

/* ── 终点切换栏（默认隐藏，仅 ?omdebug=1 时注入） ── */
.oss-endpoint-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.oss-endpoint-bar .oss-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.oss-endpoint-btn {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.oss-endpoint-btn:hover { border-color: var(--brand); color: var(--brand); }
.oss-endpoint-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── 审计提示 ── */
.oss-audit-hint {
  font-size: 11px;
  color: #667085;
  margin-top: 10px;
  font-style: italic;
}

/* ── 成员操作列增强 ── */
.oss-change-role-btn {
  color: #0f766e;
  font-weight: 700;
}
.oss-change-role-btn:hover { text-decoration: underline; }

/* ── 无权限（只读成员）非遮挡提示条：不盖成员表，仅置于成员 Tab 顶部 ── */
.oss-noperm-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.6;
}
.oss-noperm-banner .oss-noperm-lock { font-size: 16px; flex-shrink: 0; }
.oss-noperm-banner .oss-noperm-text { flex: 1; }
.oss-noperm-banner .btn {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #f59e0b;
  color: #92400e;
}
.oss-noperm-banner .btn:hover { background: #fef3c7; }

/* ===== I06 组织管理页审美修复 ===== */
/* P1-1 empty/error 隐藏数据块，仅留状态覆盖层；I07 新 DOM（om-statbar/member-tabs/member-pane/org-stack 直接子元素）下用通配兜底，仅保留状态层 */
.oss-tab-content.oss-hide-data > *:not(.oss-state-overlay) { display: none !important; }

/* P1-2 管理员徽章收敛为 teal 浅底深字（仅本页表格作用域） */
#membersTable .status.info, #invitesTable .status.info { background: #f0fdfa; color: #0f766e; border-color: #ccfbf1; }

/* P2-1 席位卡待接受 0 值中性化 */
.oss-seat-card.amber .oss-seat-card-value { color: #111827; }
.oss-seat-card.amber.has-value .oss-seat-card-value { color: #b45309; }

/* P2-3 邀请弹窗 fieldset 去原生 groove */
#inviteForm fieldset, #editMemberForm fieldset { border: 1px solid #e7ebf0; border-radius: 10px; padding: 12px 14px; margin: 0; }
#inviteForm legend, #editMemberForm legend { font-size: 12px; color: #667085; padding: 0 4px; }

/* P2-4 统一 teal 焦点环 */
.org-stack .btn:focus-visible, .oss-tab-btn:focus-visible, .member-tab:focus-visible,
#inviteForm .control:focus-visible, #editMemberForm .control:focus-visible,
.oss-module-switch:focus-within { outline: none; box-shadow: 0 0 0 3px rgba(15,118,110,.18); }

/* P3-7 组织 ID 只读值加锁标识 */
.oss-form-row .readonly-value::after { content: '🔒'; margin-left: 8px; font-size: 11px; }

/* P2-2 移动端表格横滑提示（装饰层由脚本/纯 CSS 渐变） */
.table-wrap { position: relative; }
@media (max-width: 720px) {
  .table-wrap { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
}

/* I06 补全：席位条去重 + 横滑文字提示 */
.seat-quota-plain { font-size: 12px; color: #667085; font-weight: 400; }
.seat-upgrade-link { font-size: 12px; color: #0f766e; text-decoration: none; }
.seat-upgrade-link:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .table-wrap::after {
    content: '← 左右滑动查看更多';
    position: sticky;
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #667085;
    text-align: left;
  }
  .table-wrap.scrolled-end::after { content: ''; }
}

/* I06 焦点环补全：覆盖 .org-stack 外的本页元素（页头/覆盖层/noperm/各弹窗） */
#inviteMemberBtn:focus-visible,
.oss-state-overlay .btn:focus-visible,
.oss-noperm-banner .btn:focus-visible,
#codeResultMask .btn:focus-visible,
#inviteMask .btn:focus-visible,
#editMemberMask .btn:focus-visible,
#orgConfirmMask .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15,118,110,.18); }

/* I06：本页 signal-dot 收敛为 teal（不改全局 styles.css） */
.oss-tab-panel .panel-note .signal-dot,
#membersTablePanel .panel-note .signal-dot,
.oss-role-card .signal-dot,
.panel .panel-note .signal-dot { background: #0f766e !important; box-shadow: 0 0 0 4px #ccfbf1; }
.panel .panel-note { color: #667085; }

/* I06 收尾：邀请弹窗原生 radio 选中点统一品牌 teal（原为浏览器默认蓝） */
.radio-line input[type="radio"] { accent-color: var(--brand); width: 15px; height: 15px; flex: none; }

/* ===== I07 版式重排：成员 Tab 内联统计条 + 四段分段容器 ===== */
.om-statbar { display:flex; flex-wrap:wrap; align-items:center; gap:0; border:1px solid var(--border,#e7ebf0); border-radius:10px; background:#fafbfc; padding:12px 18px; margin:0 0 16px; }
.om-statbar .om-stat { display:flex; flex-direction:column; gap:2px; padding:0 22px; border-right:1px solid var(--border,#e7ebf0); }
.om-statbar .om-stat:first-child { padding-left:0; }
.om-statbar .om-stat:last-child { border-right:0; }
.om-statbar small { font-size:11px; color:#667085; }
.om-statbar strong { font-size:16px; color:#111827; font-variant-numeric:tabular-nums; }
.member-tab .mt-count { display:inline-block; margin-left:6px; min-width:20px; padding:1px 7px; border-radius:999px; background:#f1f5f9; color:#64748b; font-size:11px; font-weight:600; text-align:center; }
.member-tab.active .mt-count { background:#f0fdfa; color:#0f766e; }
.member-pane .seat-strip { margin-top:4px; }
.member-pane > .member-summary { display:block; margin:2px 0 10px; }
@media (max-width:720px){
  .om-statbar { gap:10px 0; }
  .om-statbar .om-stat { padding:4px 16px 4px 0; }
}

/* I07：角色 Tab 紧凑摘要条 + 权限对照矩阵 */
.oss-rolebars { display:flex; flex-direction:column; gap:10px; margin:4px 0 18px; }
.oss-rolebar { display:flex; align-items:center; gap:12px; border:1px solid var(--border,#e7ebf0); border-radius:10px; padding:12px 16px; background:#fafbfc; }
.oss-rolebar-main { flex:1; display:flex; flex-direction:column; }
.oss-rolebar-main strong { font-size:14px; }
.oss-rolebar-link { font-size:12px; color:#0f766e; text-decoration:none; white-space:nowrap; }
.oss-rolebar-link:hover { text-decoration:underline; }
table.oss-matrix { width:100%; border-collapse:collapse; font-size:13px; }
table.oss-matrix th { text-align:left; padding:8px 12px; background:#f8fafc; color:#667085; font-weight:600; border-bottom:1px solid var(--border,#e7ebf0); }
table.oss-matrix td { padding:9px 12px; border-bottom:1px solid #eef1f4; }
table.oss-matrix td.mc-cell { text-align:center; }
table.oss-matrix .mc-yes { color:#0f766e; font-weight:700; }
table.oss-matrix .mc-no { color:#66748b; }

/* I07：设置 Tab 左锚点导航 + 右分区 */
.oss-settings-layout { display:flex; gap:20px; align-items:flex-start; }
.oss-anchor-nav { position:sticky; top:16px; width:168px; flex:none; display:flex; flex-direction:column; gap:2px; }
.oss-anchor { padding:9px 14px; border-radius:8px; font-size:13px; color:#667085; text-decoration:none; border-left:2px solid transparent; }
.oss-anchor:hover { background:#f8fafc; }
.oss-anchor.active { color:#0f766e; background:#f0fdfa; border-left-color:#0f766e; font-weight:600; }
.oss-settings-body { flex:1; min-width:0; }
@media (max-width:1080px){
  .oss-settings-layout { flex-direction:column; }
  .oss-anchor-nav { position:static; width:auto; flex-direction:row; overflow-x:auto; }
  .oss-anchor { white-space:nowrap; border-left:0; border-bottom:2px solid transparent; }
  .oss-anchor.active { border-left:0; border-bottom-color:#0f766e; }
}
table.oss-matrix td.mc-group { background:#f8fafc; color:#667085; font-size:12px; font-weight:600; padding:7px 12px; }