/* 页面专属样式（03 §2.1）：空间与母号 .pg-workspaces、空间详情 .pg-workspace、母号详情 .pg-main-account、付款账户与卡 .pg-funding、
   资金账户详情 .pg-funding-account、卡详情 .pg-card，以及空间 / 母号 / 资金弹窗内容 .dlg-res（弹窗渲染在页面根元素之外，所以用弹窗内容
   自己的根类）。归属 WP-F6。只用令牌变量；不写颜色值；不写 prefers-color-scheme（主题只由令牌切换）。 */

/* ================================================================ Element Plus 的 error 浅色变量（ep-theme.css 只映射了 danger；el-alert type=error 读
   --el-color-error-light-*，深色模式下会落回 EP 默认的浅粉色）。在本组页面与弹窗内按令牌补齐，已请 WP-F1 在 ep-theme.css 全局补上。 */
.pg-workspaces, .pg-workspace, .pg-main-account, .pg-funding, .pg-funding-account, .pg-card, .dlg-res {
  --el-color-error-light-8: color-mix(in srgb, var(--c-danger) 20%, var(--c-surface));
  --el-color-error-light-9: var(--c-danger-soft);
}

/* ================================================================ 空间与母号：席位格看板 */
.pg-workspaces .ws-board-meta {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--c-border);
}
.pg-workspaces .ws-group { overflow: hidden; }
.pg-workspaces .ws-group + .ws-group { margin-top: 0; }
.pg-workspaces .ws-group-head {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2);
}
.pg-workspaces .ws-group-danger .ws-group-head { box-shadow: inset 3px 0 0 var(--c-danger); }
.pg-workspaces .ws-group-alert {
  padding: 6px 16px; background: var(--c-danger-soft); color: var(--c-danger-ink); border-bottom: 1px solid var(--c-border);
}
.pg-workspaces .ws-group-actions { margin-left: auto; }
.pg-workspaces .ws-toggle {
  border: 0; background: none; padding: 0; margin: 0; width: 22px; height: 22px; flex-shrink: 0;
  display: inline-grid; place-items: center; border-radius: var(--r-sm); color: var(--c-text-3); cursor: pointer;
}
.pg-workspaces .ws-toggle:hover { color: var(--c-text); background: var(--c-surface-3); }
.pg-workspaces .ws-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pg-workspaces .ws-grid { padding: 16px; }
.pg-workspaces .ws-card { min-width: 0; }
.pg-workspaces .ws-card .ws-name a { color: var(--c-text); }
.pg-workspaces .ws-card .ws-name a:hover { color: var(--c-brand); }
.pg-workspaces .ws-card .ws-name a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.pg-workspaces .ws-card .ws-tags { justify-content: flex-end; max-width: 50%; }
.pg-workspaces .ws-card .ws-foot { flex-wrap: wrap; row-gap: var(--sp-1); }
.pg-workspaces .ws-card .ws-foot-end { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); }
.pg-workspaces .ws-card .ws-foot .el-button { margin-left: 0; height: 22px; padding: 0 4px; }
.pg-workspaces .ws-card-muted { opacity: .7; }
.pg-workspaces .ws-card-muted:hover { opacity: 1; }

/* 窄屏：page-head 的标题块是 .grow（flex-basis 0），按钮组需独占一行，否则标题被挤成一字一行、按钮组撑出页面宽度 */
@media (max-width: 900px) {
  .pg-workspaces .page-head .actions, .pg-funding .page-head .actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .pg-workspaces .page-head .actions .el-button + .el-button, .pg-funding .page-head .actions .el-button + .el-button { margin-left: 0; }
}

/* 更换母号核对：长邮箱在手机上完整换行，卡片操作仍在可见区域。 */
.dlg-ws-main-account .mono, .ws-main-account-preview .mono { overflow-wrap: anywhere; min-width: 0; }
.pg-workspaces .ws-card .ws-foot-end { flex-wrap: wrap; justify-content: flex-end; }
.dlg-ws-add-seats .form-grid, .ws-seat-expansion-preview .ws-expansion-formula { min-width: 0; }
.ws-seat-expansion-preview .ws-expansion-formula { overflow-wrap: anywhere; line-height: 1.8; }

/* 页头按钮组的间距只由 gap 决定（抵消 EP 的 .el-button + .el-button 左边距，否则换行后首个按钮缩进、间距不一） */
.pg-workspace .detail-actions .el-button + .el-button, .pg-main-account .detail-actions .el-button + .el-button,
.pg-funding-account .detail-actions .el-button + .el-button, .pg-card .detail-actions .el-button + .el-button { margin-left: 0; }

/* 03 §4.9.1：卡片网格 <1100px 两列、<900px 单列 */
@media (max-width: 1100px) {
  .pg-workspaces .ws-grid.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pg-workspaces .ws-grid.grid-3 { grid-template-columns: minmax(0, 1fr); }
  .pg-workspaces .ws-grid { padding: 12px; }
  .pg-workspaces .ws-group-head { padding: 10px 12px; }
  .pg-workspaces .ws-group-actions { margin-left: 0; width: 100%; }
  .pg-workspaces .ws-board-meta { padding: 8px 12px; }
}

/* ================================================================ 分段按钮不折字；窄屏时分段条横向滚动（筛选条、页头视图切换、占用筛选） */
.pg-workspaces .seg, .pg-workspace .seg, .pg-main-account .seg, .pg-funding .seg, .pg-funding-account .seg, .pg-card .seg {
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.pg-workspaces .seg::-webkit-scrollbar, .pg-workspace .seg::-webkit-scrollbar, .pg-main-account .seg::-webkit-scrollbar,
.pg-funding .seg::-webkit-scrollbar, .pg-funding-account .seg::-webkit-scrollbar, .pg-card .seg::-webkit-scrollbar { display: none; }
.pg-workspaces .seg button, .pg-workspace .seg button, .pg-main-account .seg button,
.pg-funding .seg button, .pg-funding-account .seg button, .pg-card .seg button { white-space: nowrap; flex-shrink: 0; }

/* 卡片标题不折字；窄屏时标题行可换行（右侧的图例 / 按钮落到下一行） */
.pg-workspace .card-head h3, .pg-main-account .card-head h3, .pg-funding-account .card-head h3, .pg-card .card-head h3 { white-space: nowrap; }
@media (max-width: 900px) {
  .pg-workspace .card-head, .pg-main-account .card-head, .pg-funding-account .card-head, .pg-card .card-head { flex-wrap: wrap; }
  .pg-workspace .kpis .kpi-value, .pg-card .kpis .kpi-value { overflow-wrap: anywhere; }
}

/* ================================================================ 布局：网格 / 纵向容器里的卡片间距只由 gap 决定（抵消 .card + .card 的上边距） */
.pg-workspaces .grid > .card + .card, .pg-workspaces .flex-col > .card + .card,
.pg-workspace .grid > .card + .card, .pg-workspace .flex-col > .card + .card,
.pg-main-account .grid > .card + .card, .pg-main-account .flex-col > .card + .card,
.pg-funding .grid > .card + .card, .pg-funding .flex-col > .card + .card,
.pg-funding-account .grid > .card + .card, .pg-funding-account .flex-col > .card + .card,
.pg-card .grid > .card + .card, .pg-card .flex-col > .card + .card { margin-top: 0; }

/* ================================================================ 表格内的操作列与单元格（列表、详情共用） */
.pg-workspaces .res-actions, .pg-workspace .res-actions, .pg-main-account .res-actions,
.pg-funding .res-actions, .pg-funding-account .res-actions, .pg-card .res-actions { justify-content: flex-end; flex-wrap: nowrap; }
.pg-funding .res-end, .pg-funding-account .res-end, .pg-card .res-end { align-items: flex-end; }

/* ================================================================ 空间详情 */
.pg-workspace .res-kv { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pg-workspace .res-kv .el-button { margin-left: 0; }
.pg-workspace .kpis .kpi-sub .c-money { font-size: inherit; color: inherit; }

/* ================================================================ 母号详情 */
.pg-main-account .c-secret-reveal { min-width: 0; }

/* ================================================================ 卡详情 */
/* 页头「查看卡号」与其他页头按钮同高；明文展开后作为浮层卡片显示在按钮位置 */
.pg-card .detail-actions .c-secret-reveal { display: flex; align-items: center; }
.pg-card .detail-actions .c-secret-reveal > .el-button { height: 32px; padding: 8px 15px; font-size: var(--fs-md); }
.pg-card .detail-actions .c-secret-reveal [role="region"] {
  padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow-1);
}
.pg-card .res-pre { margin: 0; max-height: 320px; overflow: auto; white-space: pre-wrap; }

/* ================================================================ 提示条里的行内按钮（标题与按钮同一行，不改变提示条字号） */
.pg-workspace .res-alert-title, .pg-card .res-alert-title, .pg-funding-account .res-alert-title {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.pg-workspace .res-alert-title .el-button, .pg-card .res-alert-title .el-button, .pg-funding-account .res-alert-title .el-button { margin-left: 0; }

/* 表格单元格里的纵向内容可收缩（配合 .ellipsis 截断） */
.pg-workspaces .res-cell, .pg-workspace .res-cell, .pg-funding-account .res-cell, .pg-card .res-cell { min-width: 0; max-width: 100%; }

/* ================================================================ 弹窗内容（.dlg-res） */
/* el-form-item 的内容区是可换行的 flex：说明文字、行内控件组独占一行，不挤在输入框右侧 */
.dlg-res .el-form-item__content > .form-hint,
.dlg-res .el-form-item__content > .field-inline { flex-basis: 100%; }
.dlg-res .res-radios { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.dlg-res .res-radios .el-radio { height: auto; min-height: 24px; margin-right: 0; white-space: normal; align-items: flex-start; }
.dlg-res .res-radios .el-radio__label { line-height: 1.5; }
.dlg-res .res-cb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dlg-res .res-exp .el-select { width: 96px; }
.dlg-res .el-input-number { max-width: 100%; }
.dlg-res .el-date-editor.w-full, .dlg-res .el-select.w-full { width: 100%; }

@media (max-width: 900px) {
  .dlg-res .form-grid, .dlg-res .res-cb-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-card .detail-actions .c-secret-reveal { width: 100%; }
}