/* REQ-USR-001 / REQ-USR-002: 用户单据页 scoped 样式。
   语义色只用 var(--color-*)；工具栏深色底为页面局部装饰（非语义 token，D10，与 FE-02/FE-03 一致）。 */

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-base);
}

/* === 工具栏：深色底为页面局部装饰（D10） === */
.toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #2c2f36;
}

.toolbarSpacer {
  flex: 1 1 auto;
}

.toolbar :global(.ant-btn) {
  color: #ffffff;
}

.toolbar :global(.ant-btn-primary) {
  color: #ffffff;
}

.gear {
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  padding: 0 8px;
}

/* === 表单网格：3 列白底 === */
.formGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 16px;
  padding: 16px 12px;
  background: var(--color-form-bg-edit);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-form-fg);
}

.readonlyField {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  background: var(--color-form-bg-readonly);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-form-fg);
}

.formGrid :global(.ant-form-item-label > label) {
  color: var(--color-text);
}

/* === 权限页签条 === */
.permTabs {
  background: var(--color-form-bg-edit);
  border-bottom: 1px solid var(--color-border);
}

.permTabs :global(.ant-tabs-tab) {
  color: var(--color-text);
}

.permTabs :global(.ant-tabs-tab-disabled) {
  color: var(--color-text-secondary);
}

.permTabs :global(.ant-tabs-ink-bar) {
  background: var(--color-primary);
}

/* === 权限分类勾选列表 === */
.permList {
  flex: 1 1 auto;
  overflow: auto;
  background: var(--color-form-bg-edit);
}

.permHead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-table-header-bg);
  color: var(--color-table-header-fg);
  border-bottom: 1px solid var(--color-border);
}

.permHeadSort {
  margin-left: auto;
  color: var(--color-text-secondary);
}

.permRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.permRow:hover {
  background: var(--color-table-row-bg-hover);
}

.permEmpty {
  padding: 24px 12px;
  color: var(--color-text-secondary);
  text-align: center;
}

/* === 取数失败占位 === */
.loadError {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 0;
  color: var(--color-text-secondary);
}

.loadErrorText {
  color: var(--color-error);
}