/* 设置类开关：iOS 滑动开关。表格批量勾选保持原生方形复选框。 */
:root{
  --switch-off:#e5e5ea;
  --switch-on:#4d7cff;
  --switch-text:#1d2129;
  --switch-knob:#fff;
  --switch-w:44px;
  --switch-h:24px;
  --switch-knob-size:20px;
}

label:has(> input[type="checkbox"]){
  display:inline-flex !important;
  align-items:center !important;
  flex-direction:row-reverse;
  justify-content:flex-end;
  width:auto !important;
  max-width:100%;
  height:auto !important;
  min-height:var(--switch-h) !important;
  margin:0 16px 8px 0 !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--switch-text) !important;
  -webkit-text-fill-color:var(--switch-text) !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:22px !important;
  cursor:pointer;
  box-sizing:border-box !important;
  gap:10px !important;
  column-gap:10px !important;
  row-gap:0 !important;
  vertical-align:middle;
  box-shadow:none !important;
  white-space:nowrap;
  word-spacing:0;
}
.layout .form-row label:has(> input[type="checkbox"]),
.form-row label:has(> input[type="checkbox"]),
.layout .form-row label:has(> input[type="checkbox"]) span,
.form-row label:has(> input[type="checkbox"]) span{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  color:var(--switch-text) !important;
  -webkit-text-fill-color:var(--switch-text) !important;
  font-size:14px !important;
  font-weight:600 !important;
  margin-bottom:8px !important;
  background:transparent !important;
}
label:has(> input[type="checkbox"]) span{
  color:var(--switch-text) !important;
  -webkit-text-fill-color:var(--switch-text) !important;
  font-weight:600 !important;
  font-size:14px !important;
}
label:has(> input[type="checkbox"]:disabled){
  opacity:.42;
  cursor:not-allowed;
}

input[type="checkbox"]{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  width:var(--switch-w) !important;
  height:var(--switch-h) !important;
  min-width:var(--switch-w) !important;
  max-width:var(--switch-w) !important;
  min-height:var(--switch-h) !important;
  max-height:var(--switch-h) !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background-color:var(--switch-off) !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:none !important;
  cursor:pointer;
  vertical-align:middle;
  flex:0 0 var(--switch-w) !important;
  display:inline-block !important;
  position:relative;
  box-sizing:border-box !important;
  overflow:hidden !important;
  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  transition:background-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
label:has(> input[type="checkbox"]) > input[type="checkbox"],
label:has(> input[type="checkbox"]:checked) > input[type="checkbox"]{
  background-color:var(--switch-off) !important;
  border-radius:999px !important;
}
input[type="checkbox"]::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  top:2px;
  left:2px;
  width:var(--switch-knob-size);
  height:var(--switch-knob-size);
  border-radius:50%;
  background:var(--switch-knob) !important;
  box-shadow:0 1px 3px rgba(15,23,42,.22);
  transform:translateX(0);
  transition:transform .2s ease;
  pointer-events:none;
}
input[type="checkbox"]:checked,
label:has(> input[type="checkbox"]) > input[type="checkbox"]:checked{
  background-color:var(--switch-on) !important;
}
input[type="checkbox"]:checked::after{
  content:"" !important;
  transform:translateX(20px);
}
input[type="checkbox"]:disabled{
  opacity:.42;
  cursor:not-allowed;
}
input[type="checkbox"]:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--switch-off) 45%, transparent) !important;
}
input[type="checkbox"]:checked:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--switch-on) 28%, transparent) !important;
}

.switch-btn .switch-ui{
  display:none !important;
}
.switch-btn .switch-txt{
  color:var(--switch-text) !important;
  -webkit-text-fill-color:var(--switch-text) !important;
  font-size:14px !important;
  font-weight:600 !important;
}

.switch-stack{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:640px;
  background:#fff;
}
.switch-stack label:has(> input[type="checkbox"]){
  display:flex !important;
  justify-content:space-between !important;
  flex-direction:row-reverse;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:14px 0 !important;
  border-bottom:1px solid #f0f2f5;
  font-size:15px !important;
  font-weight:600 !important;
  color:#1d2129 !important;
  -webkit-text-fill-color:#1d2129 !important;
  white-space:nowrap;
}
.switch-stack label:has(> input[type="checkbox"]):last-child{
  border-bottom:0;
}
label.switch-only{
  flex-direction:row !important;
  justify-content:flex-start !important;
  gap:0 !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  height:var(--switch-h) !important;
  min-height:var(--switch-h) !important;
  font-size:0 !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

/* 权限勾选、列表批量、删除图片：还原方形复选框，不做成滑动开关 */
.role-perm-list label:has(> input[type="checkbox"]),
.table label:has(> input[type="checkbox"]),
label:has(> input[name^="remove_"]),
label:has(> input[name="perms[]"]){
  background:transparent !important;
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  height:auto !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  gap:6px !important;
  flex-direction:row !important;
  justify-content:flex-start !important;
}
.role-perm-list label:has(> input[type="checkbox"]) span,
.table label:has(> input[type="checkbox"]) span,
label:has(> input[name^="remove_"]) span,
label:has(> input[name="perms[]"]) span{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  font-weight:inherit !important;
  font-size:inherit !important;
}

.role-perm-list input[type="checkbox"],
.table input[type="checkbox"],
.table th input[type="checkbox"],
.table td input[type="checkbox"],
input[name^="remove_"],
input[name="perms[]"]{
  -webkit-appearance:checkbox !important;
  -moz-appearance:checkbox !important;
  appearance:auto !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  min-height:16px !important;
  max-height:16px !important;
  margin:0 4px 0 0 !important;
  padding:0 !important;
  border:initial !important;
  border-radius:0 !important;
  background:initial !important;
  background-image:none !important;
  background-color:initial !important;
  background-size:auto !important;
  background-position:initial !important;
  box-shadow:none !important;
  flex:none !important;
  display:inline-block !important;
  position:static !important;
  overflow:visible !important;
  font-size:inherit !important;
  line-height:normal !important;
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  accent-color:#4d7cff;
  cursor:pointer;
  vertical-align:middle;
  transition:none;
}
.role-perm-list input[type="checkbox"]::after,
.table input[type="checkbox"]::after,
.table th input[type="checkbox"]::after,
.table td input[type="checkbox"]::after,
input[name^="remove_"]::after,
input[name="perms[]"]::after{
  content:none !important;
  display:none !important;
}
.role-perm-list input[type="checkbox"]:checked,
.table input[type="checkbox"]:checked,
.table th input[type="checkbox"]:checked,
.table td input[type="checkbox"]:checked,
input[name^="remove_"]:checked,
input[name="perms[]"]:checked{
  background-color:initial !important;
  background-image:none !important;
}
.role-perm-list input[type="checkbox"]:focus-visible,
.table input[type="checkbox"]:focus-visible,
.table th input[type="checkbox"]:focus-visible,
.table td input[type="checkbox"]:focus-visible,
input[name^="remove_"]:focus-visible,
input[name="perms[]"]:focus-visible{
  box-shadow:none !important;
  outline:2px solid #4d7cff;
  outline-offset:1px;
}
.tpl-card input[type="checkbox"],
.tpl-check{
  -webkit-appearance:checkbox !important;
  -moz-appearance:checkbox !important;
  appearance:auto !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  min-height:18px !important;
  max-height:18px !important;
  margin:0 !important;
  padding:0 !important;
  border:initial !important;
  border-radius:4px !important;
  background:initial !important;
  background-image:none !important;
  background-color:#fff !important;
  flex:none !important;
  display:inline-block !important;
  position:absolute !important;
  overflow:visible !important;
  font-size:inherit !important;
  line-height:normal !important;
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  accent-color:#4d7cff;
}
.tpl-card input[type="checkbox"]::after,
.tpl-check::after{
  content:none !important;
  display:none !important;
}