/* CL-ADMIN-UI：统一外观皮肤。
   目标是用自绘样式替换浏览器原生控件外观（下拉、输入、勾选、单选、按钮、分页、滚动条），
   不改变任何表单语义：原生 <select>/<input> 仍是取值来源，本文件只覆盖视觉呈现。 */
:root{
  --ui-radius:10px;
  --ui-radius-sm:8px;
  --ui-field-h:40px;
  --ui-border:#d7dee6;
  --ui-border-strong:#c3ccd7;
  --ui-field-bg:#fff;
  --ui-field-color:#2b3946;
  --ui-placeholder:#98a2ad;
  --ui-focus-ring:rgba(45,99,214,.16);
  --ui-focus-border:#8aa9ea;
  --ui-scroll-thumb:#c4ccd6;
}

/* 滚动条：自绘轨道与滑块，避免 Windows 原生立体滚动条。 */
html{scrollbar-width:thin;scrollbar-color:var(--ui-scroll-thumb) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--ui-scroll-thumb);background-clip:content-box;border:2px solid transparent;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:#a8b4c1;background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}

/* 文本类输入：统一高度、圆角、边框与聚焦环。 */
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
textarea{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-sm);
  background:var(--ui-field-bg);
  color:var(--ui-field-color);
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
input[type="number"]{appearance:textfield;-moz-appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input:focus-visible,
textarea:focus-visible,
select:focus-visible{outline:0;border-color:var(--ui-focus-border);box-shadow:0 0 0 3px var(--ui-focus-ring)}
::placeholder{color:var(--ui-placeholder)}

/* 日期控件的原生图标换成自绘日历图标。 */
input[type="date"]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f6d7b' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;position:absolute;right:0;width:34px;height:100%}

/* 下拉框：去掉原生外观，改用自绘箭头。原生列表仍由浏览器给出，出处与取值不变。 */
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-sm);
  background-color:var(--ui-field-bg);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f6d7b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  color:var(--ui-field-color);
  padding-right:30px;
  text-overflow:ellipsis;
}
select:disabled{background-color:#f4f6f8;color:#84909b;border-color:#e2e8ed;cursor:not-allowed}
/* 设备编辑等已使用自绘下拉组件时，隐藏的原生 select 不参与绘制。 */
select.ui-select-native{background-image:none;padding:0}

/* 勾选框：自绘方框与对勾。 */
input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin:0;
  border:1.5px solid var(--ui-border-strong);
  border-radius:6px;
  background:#fff;
  display:inline-grid;
  place-content:center;
  cursor:pointer;
  transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease;
}
input[type="checkbox"]:hover{border-color:#9fb0c3}
input[type="checkbox"]::before{
  content:"";
  width:10px;
  height:10px;
  transform:scale(0);
  transition:transform .12s ease;
  clip-path:polygon(14% 44%,0 65%,38% 100%,100% 16%,80% 0%,36% 62%);
  background:#fff;
}
input[type="checkbox"]:checked{background:var(--blue,#2d63d6);border-color:var(--blue,#2d63d6)}
input[type="checkbox"]:checked::before{transform:scale(1)}
input[type="checkbox"]:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ui-focus-ring)}
input[type="checkbox"]:disabled{border-color:#e2e8ed;background:#f4f6f8;cursor:not-allowed}

/* 单选框：自绘圆点。 */
input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin:0;
  border:1.5px solid var(--ui-border-strong);
  border-radius:50%;
  background:#fff;
  display:inline-grid;
  place-content:center;
  cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease;
}
input[type="radio"]:hover{border-color:#9fb0c3}
input[type="radio"]::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue,#2d63d6);
  transform:scale(0);
  transition:transform .12s ease;
}
input[type="radio"]:checked{border-color:var(--blue,#2d63d6)}
input[type="radio"]:checked::before{transform:scale(1)}
input[type="radio"]:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ui-focus-ring)}
input[type="radio"]:disabled{border-color:#e2e8ed;background:#f4f6f8;cursor:not-allowed}

/* 文件选择：原生按钮改为自绘按钮。 */
input[type="file"]{border:0;background:transparent;padding:0;font-size:12px;color:#687784}
input[type="file"]::file-selector-button{min-height:34px;margin-right:10px;padding:0 14px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:#f5f7fa;color:#33424d;font:inherit;font-weight:650;cursor:pointer;transition:background-color .16s ease,border-color .16s ease}
input[type="file"]::file-selector-button:hover{background:#edf2f8;border-color:var(--ui-border-strong)}

/* 按钮：统一圆角与交互反馈，抹掉浏览器默认立体感。 */
button{font:inherit;-webkit-appearance:none;appearance:none}
.primary-button,.secondary-button,.danger-button{border-radius:var(--ui-radius-sm)}
.primary-button:focus-visible,.secondary-button:focus-visible,.danger-button:focus-visible,
.icon-button:focus-visible,.user-action:focus-visible,.text-action:focus-visible{outline:2px solid var(--ui-focus-border);outline-offset:2px}
.secondary-button:hover{border-color:var(--ui-border-strong);background:#f5f8fb}
.icon-button{transition:border-color .16s ease,color .16s ease,background-color .16s ease}

/* 分页：自绘页码与导航按钮。 */
.pager-controls{gap:4px}
.pager button{min-height:34px;border-radius:var(--ui-radius-sm);border-color:var(--ui-border);color:#4d5c67;transition:border-color .16s ease,background-color .16s ease,color .16s ease}
.pager button:hover:not(:disabled){border-color:var(--ui-focus-border);color:var(--blue,#2d63d6);background:#f5f8ff}
.pager button:focus-visible{outline:2px solid var(--ui-focus-border);outline-offset:2px}
.pager .page-number{border-radius:7px}
.pager .page-number.active{border-color:var(--blue,#2d63d6);background:var(--blue,#2d63d6);color:#fff}

/* 设备筛选的多选下拉：并进同一套控件外观。
   summary 同时包含标题与值框，外观只作用于值框 b，避免整块边框包住标题导致与相邻筛选错位。 */
details.filter-multiselect summary{border:0;border-radius:0;background:transparent}
details.filter-multiselect summary b{border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-field-bg)}
details.filter-multiselect[open] summary b{border-color:var(--ui-focus-border);box-shadow:0 0 0 3px var(--ui-focus-ring)}

@media(prefers-reduced-motion:reduce){
  input[type="checkbox"],input[type="radio"],input[type="checkbox"]::before,input[type="radio"]::before,
  .icon-button,.pager button,select{transition:none}
}