/* create-user-ui.css — 「创建子账户」弹窗重新排版（2026-11-02 rev.c）
   约束：
   1) React 拥有的节点一律不搬家，只用 CSS Grid / 绝对定位重排 + 自己节点的补充工具栏
   2) 站点的主题变量是 hex（如 --border:#dde4f0），hsl(var(--x)) 会被浏览器判为非法而丢声明，
      因此这里统一用 var(--x) / color-mix()。 */

.create-user-modal{
  max-width:760px !important;
  width:min(760px, calc(100vw - 32px)) !important;
  padding:22px 24px 20px !important;
  gap:12px !important;
}

/* 标题副文案 */
.create-user-modal [data-slot="dialog-header"] h2::after{
  content:'配置登录信息、账号级别与可见界面';
  display:block;margin-top:3px;
  font-size:12px;font-weight:400;line-height:1.4;
  color:var(--muted-foreground);
}

/* 主体：左列账号信息（单列紧凑）/ 右列权限（绝对定位，不参与左列行高分配） */
.create-user-modal .cu-body{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,296px);
  grid-auto-rows:min-content;
  row-gap:14px;
  align-items:start;
  margin:4px 0 0 !important;
  max-height:calc(88vh - 190px);
  overflow-y:auto;overflow-x:hidden;
  border:0 !important;border-radius:0 !important;
  padding:0 2px 0 0 !important;
  scrollbar-gutter:stable;
}
/* Tailwind space-y-4 会给兄弟节点加 margin-bottom，和 row-gap 叠加，这里清零 */
.create-user-modal .cu-body > *{margin:0 !important}
.create-user-modal .cu-body > div:nth-child(1),
.create-user-modal .cu-body > div:nth-child(2),
.create-user-modal .cu-body > #urf-level-wrap,
.create-user-modal .cu-body > #urf-quota-wrap,
.create-user-modal .cu-body > div:last-child{grid-column:1 !important;grid-row:auto !important}

/* 权限面板 */
.create-user-modal .cu-body > #upf-perm-wrap{
  position:absolute;top:0;left:318px;right:0;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 14px 12px;
  background:color-mix(in srgb, var(--muted) 55%, var(--card));
  max-height:100%;
  overflow:auto;
}
.create-user-modal .cu-body > #upf-perm-wrap::-webkit-scrollbar{width:6px}
.create-user-modal .cu-body > #upf-perm-wrap::-webkit-scrollbar-thumb{
  background:var(--border);border-radius:3px;
}

/* 表单字 */
.create-user-modal .cu-body label.block{
  font-size:12px !important;font-weight:600;letter-spacing:.02em;
  margin-bottom:6px !important;
  color:var(--foreground);opacity:.72;
}
.create-user-modal .cu-body input[type="text"],
.create-user-modal .cu-body input[type="number"],
.create-user-modal .cu-body select{
  height:38px;border-radius:9px !important;padding:0 11px !important;
  background:var(--card);
  border-color:var(--border);
  transition:border-color .15s,box-shadow .15s;
}
.create-user-modal .cu-body input[type="text"]:hover,
.create-user-modal .cu-body input[type="number"]:hover,
.create-user-modal .cu-body select:hover,
.create-user-modal .cu-body input[type="password"]:hover{
  border-color:color-mix(in srgb, var(--primary) 35%, var(--border));
}
.create-user-modal .cu-body input:focus,
.create-user-modal .cu-body select:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 16%, transparent);
  outline:none !important;
}
.create-user-modal #urf-level{
  appearance:none;-webkit-appearance:none;
  padding-right:34px !important;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted-foreground) 50%),
                   linear-gradient(135deg,var(--muted-foreground) 50%,transparent 50%);
  background-position:calc(100% - 17px) 16px,calc(100% - 12px) 16px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.create-user-modal .cu-body p.text-xs{
  font-size:11px !important;line-height:1.5;margin-top:6px !important;opacity:.72;
}

/* 权限网格 */
.create-user-modal .upf-grid{
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  border:0 !important;padding:0 !important;
  max-height:none !important;overflow:visible !important;
}
.create-user-modal .upf-p{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--card);
  font-size:12.5px !important;line-height:1.2;
  color:var(--foreground) !important;
  cursor:pointer;user-select:none;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.create-user-modal .upf-p:hover{
  border-color:color-mix(in srgb, var(--primary) 40%, var(--border));
  background:color-mix(in srgb, var(--primary) 4%, var(--card));
}
.create-user-modal .upf-p:has(input:checked){
  border-color:color-mix(in srgb, var(--primary) 50%, var(--border));
  background:color-mix(in srgb, var(--primary) 8%, var(--card));
  font-weight:600;
}
.create-user-modal .upf-p input{
  width:15px;height:15px;flex:none;margin:0;
  accent-color:var(--primary);cursor:pointer;
}

/* 权限工具条（本脚本自建节点） */
.cu-tools{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.cu-count{font-size:11px;font-weight:600;color:var(--muted-foreground)}
.cu-t{
  height:24px;padding:0 10px;border-radius:7px;
  border:1px solid var(--border);background:transparent;
  color:var(--muted-foreground);font-size:11px;cursor:pointer;transition:.15s;
}
.cu-t:hover{color:var(--foreground);border-color:var(--muted-foreground);background:var(--card)}
.cu-t[data-cu="all"]{margin-left:auto}

/* 有效期：3 / 30 / 自定义 */
.create-user-modal .cu-body > div:last-child .flex.gap-2{
  display:grid !important;
  grid-template-columns:1fr 1fr 1.55fr;
  gap:8px !important;
}
.create-user-modal .cu-body > div:last-child button{
  height:38px !important;border-radius:9px !important;padding:0 4px !important;
  font-size:12.5px !important;font-weight:600;
  color:var(--muted-foreground);
  border-color:var(--border);
  background:var(--card);
}
.create-user-modal .cu-body > div:last-child button:hover{
  color:var(--foreground);
  border-color:color-mix(in srgb, var(--primary) 40%, var(--border));
}
.create-user-modal .cu-body > div:last-child button.text-red-400{
  color:var(--primary) !important;
  border-color:color-mix(in srgb, var(--primary) 55%, var(--border)) !important;
  background:color-mix(in srgb, var(--primary) 8%, var(--card)) !important;
}
.create-user-modal .cu-body > div:last-child .flex.items-center.gap-1{
  height:38px;border-radius:9px !important;
  padding:0 10px !important;gap:6px !important;
  background:var(--card);
  transition:border-color .15s,box-shadow .15s;
}
.create-user-modal .cu-body > div:last-child .flex.items-center.gap-1:focus-within{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 16%, transparent);
}
.create-user-modal .cu-body > div:last-child .flex.items-center.gap-1 input{
  font-size:12px !important;flex:1 1 auto;width:100%;min-width:0;
  border:0 !important;background:transparent;
}
.create-user-modal .cu-body > div:last-child .flex.items-center.gap-1 input::placeholder{
  color:var(--muted-foreground);opacity:.8;
}
.create-user-modal .cu-body > div:last-child .flex.items-center.gap-1 span{
  font-size:11px !important;color:var(--muted-foreground);
}

/* 深色：标题与头部描边跟随主题（站点部分样式是硬编码的浅色） */
.dark .create-user-modal [data-slot="dialog-header"]{
  border-color:var(--border) !important;
}
.dark .create-user-modal [data-slot="dialog-header"] h2{
  color:var(--foreground) !important;
}

/* 底部 */
.create-user-modal [data-slot="dialog-footer"]{
  margin-top:12px !important;padding-top:12px;
  border-top:1px solid var(--border);
  border-radius:0 !important;
}
.create-user-modal [data-slot="dialog-footer"] button{
  height:38px !important;border-radius:9px !important;padding:0 18px !important;
}

/* 窄屏回单列 */
@media (max-width:820px){
  .create-user-modal .cu-body{grid-template-columns:1fr;max-height:calc(88vh - 176px)}
  .create-user-modal .cu-body > *{grid-column:1 !important;grid-row:auto !important}
  .create-user-modal .cu-body > #upf-perm-wrap{
    position:static;max-height:none;overflow:visible;margin-top:2px !important;
    order:99; /* 窄屏时权限块排到表单字段之后 */
  }
  .create-user-modal .cu-body > div:last-child .flex.gap-2{grid-template-columns:1fr 1fr 1.4fr}
}