/* 系统后台（只有总经理能进）
 *
 * 和别的模块不同，这里管的是「账号和名称」这种系统级东西，
 * 所以视觉上故意做得比业务页更密、更像表格 —— 后台不需要好看，
 * 需要一眼扫完一屏人。 */

.cs-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line,#e6e8ec);padding-bottom:0}
.cs-tab{background:none;border:none;border-bottom:2px solid transparent;
  padding:9px 14px;font-size:13px;color:var(--txt-2,#5b6472);cursor:pointer;
  font-weight:500;margin-bottom:-1px;border-radius:6px 6px 0 0}
.cs-tab:hover{background:var(--hover,#f4f6f8);color:var(--txt,#1f2430)}
.cs-tab.active{color:var(--brand,#2b6cf6);border-bottom-color:var(--brand,#2b6cf6);font-weight:600}

.cs-pane{min-width:0}

.cs-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cs-search{flex:1 1 220px;min-width:0;max-width:340px}
.cs-select{flex:0 0 auto}

/* 表格要能横向滚。账号列表的列不算多，但窄屏下「团队」和「操作」两列
   一定会挤 —— 让它滚，比让它换行把一行撑成三层要好读得多。 */
.cs-table-wrap{overflow-x:auto;border:1px solid var(--line,#e6e8ec);border-radius:10px;
  background:#fff}
.cs-table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.cs-table th{text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.04em;
  color:var(--txt-3,#9aa1ab);padding:10px 12px;background:var(--thead,#fafbfc);
  border-bottom:1px solid var(--line,#e6e8ec);white-space:nowrap;
  position:sticky;top:0;z-index:1}
.cs-table td{padding:10px 12px;border-bottom:1px solid var(--line-soft,#f0f2f5);
  vertical-align:middle}
.cs-table tr:last-child td{border-bottom:none}
.cs-table tbody tr:hover{background:var(--hover,#f7f9fb)}
.cs-table .ta-r{text-align:right}
.cs-table .who{font-weight:500;color:var(--txt,#1f2430)}
/* 职务：挂在姓名下方的第二行小字。
 * 灰色、小一号、不加粗 —— 它是名片上的补充信息，
 * 不该和姓名抢视觉重量，也不该被当成岗位。 */
.cs-table .utitle{font-weight:400;font-size:11.5px;color:var(--txt-3,#9aa1ab);
  margin-top:1px;line-height:1.3;max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cs-table .un{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--txt-2,#5b6472)}
.cs-table .teams{font-size:12px;color:var(--txt-2,#5b6472);max-width:200px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-table .teams .none{color:var(--txt-3,#9aa1ab)}
.cs-table tr.off td{opacity:.55}
.cs-table tr.off .who{text-decoration:line-through;text-decoration-color:var(--txt-3,#9aa1ab)}

/* 操作按钮组。类名是 .ops（和 HTML 里写的保持一致）——
 * 写成 .cs-ops 的话选择器对不上，按钮会退回 .btn 的默认尺寸，
 * 一行五个撑到 39px 高，表格立刻变得又松又长。 */
.ops{display:flex;gap:5px;justify-content:flex-end;flex-wrap:nowrap}
.ops .btn{padding:3px 8px;font-size:12px;line-height:1.5;white-space:nowrap;
  border-radius:6px;height:auto;min-height:0}
.ops .btn[disabled]{opacity:.4;cursor:not-allowed}

.cs-note{font-size:12.5px;line-height:1.7;color:var(--txt-2,#5b6472);
  background:#fff;border:1px solid var(--line,#e6e8ec);border-left:3px solid var(--brand,#2b6cf6);
  border-radius:8px;padding:11px 14px;margin:0 0 14px}
.cs-note b{color:var(--txt,#1f2430)}

.cs-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:900px){.cs-two{grid-template-columns:minmax(0,1fr)}}

.cs-label-list{display:flex;flex-direction:column;gap:2px}
.cs-label-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;
  align-items:center;gap:10px;padding:7px 2px;
  border-bottom:1px solid var(--line-soft,#f0f2f5)}
.cs-label-row:last-child{border-bottom:none}
.cs-label-row .def{font-size:12px;color:var(--txt-3,#9aa1ab);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-label-row .act{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.cs-label-row input{width:100%;min-width:0}
.cs-label-row .cnt{font-size:11px;color:var(--txt-3,#9aa1ab);white-space:nowrap}
.cs-label-row.changed input{border-color:var(--brand,#2b6cf6);background:#f7faff}
.cs-label-row .revert{background:none;border:none;color:var(--brand,#2b6cf6);
  font-size:11.5px;cursor:pointer;padding:2px 4px;white-space:nowrap}
.cs-label-row .revert[disabled]{color:var(--txt-3,#9aa1ab);cursor:default}
/* 窄屏把「默认名 / 输入框 / 恢复」从三列改成两行。
   三列挤在 309px 里时，默认名列只剩 115px，「总经理 1 人」会被省略号截掉，
   而未改名的岗位恰好整行都是灰的、看不出截了什么。改成上下两层就没这问题。 */
@media (max-width:600px){
  .cs-label-row{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"def def" "inp act";row-gap:6px}
  .cs-label-row .def{grid-area:def}
  .cs-label-row input{grid-area:inp}
  .cs-label-row .act{grid-area:act}
}

.cs-actions{margin-top:12px;display:flex;gap:8px}
.cs-savebar{display:flex;align-items:center;gap:12px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line,#e6e8ec)}

.cs-health{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.cs-card{background:#fff;border:1px solid var(--line,#e6e8ec);border-radius:10px;
  padding:14px 16px;min-width:0}
.cs-card .k{font-size:11.5px;color:var(--txt-3,#9aa1ab);letter-spacing:.04em;margin-bottom:6px}
.cs-card .v{font-size:22px;font-weight:600;color:var(--txt,#1f2430);line-height:1.2}
.cs-card .sub{font-size:12px;color:var(--txt-2,#5b6472);margin-top:6px;line-height:1.6}
.cs-card.warn{border-color:#f2c9a0;background:#fffaf4}
.cs-card.warn .v{color:#b45f16}
.cs-card.ok .v{color:#128a5b}
/* 名单是 #csHealth 这个 grid 的子元素，所以必须显式跨满整行。
   不写 grid-column:1/-1 的话它会被当成第 5 个格子，挤进 220px 那一列，
   15 个账号竖着排成一条高瘦的窄柱 —— 四个统计卡片旁边挂一根麻杆。 */
.cs-health-list{grid-column:1/-1;margin-top:2px;background:#fff;
  border:1px solid var(--line,#e6e8ec);border-radius:10px;padding:14px 16px}
.cs-health-list h4{margin:0 0 10px;font-size:13px}
/* 15 个账号竖着排要 575px 高，横排 1120px 宽里每行只用到一半 —— 两列就够。
   用 column-count 而不是 grid，是因为行数不固定，grid 会把最后一行
   的空位留成窟窿。窄屏由媒体查询退回一列。 */
@media (min-width:900px){
  .cs-health-list{column-count:2;column-gap:26px}
  .cs-health-list h4{column-span:all}
}
.cs-health-list .row{display:flex;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line-soft,#f0f2f5);font-size:12.5px;
  break-inside:avoid}
.cs-health-list .row:last-child{border-bottom:none}
.cs-health-list .row .n{font-weight:500}
.cs-health-list .row .u{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--txt-2,#5b6472);font-size:12px}

.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* 后台的表单弹层里字段比较多，给个两列排布 */
.cs-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.cs-form .full{grid-column:1/-1}
.cs-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;
  color:var(--txt-2,#5b6472);min-width:0}
.cs-form label span{font-weight:500;color:var(--txt,#1f2430)}
@media (max-width:600px){.cs-form{grid-template-columns:minmax(0,1fr)}}
.cs-form .hintline{grid-column:1/-1;font-size:12px;color:var(--txt-2,#5b6472);
  line-height:1.6;margin-top:-2px}
.cs-checks{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:160px;overflow-y:auto;
  border:1px solid var(--line,#e6e8ec);border-radius:8px;padding:9px 11px;background:#fff}
.cs-checks label{flex-direction:row;align-items:center;gap:6px;font-size:12.5px;
  color:var(--txt,#1f2430);cursor:pointer}
.cs-pwbox{display:flex;gap:8px;align-items:center}
.cs-pwbox input{flex:1 1 auto;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.cs-flabel{font-weight:500;color:var(--txt,#1f2430);font-size:12.5px;margin-bottom:5px;
  display:block}

.empty-cell{text-align:center;color:var(--txt-3,#9aa1ab);font-size:13px;padding:32px 12px}

/* ---------- 登录锁定 ---------- */

/* 单独一块，和下面的体检统计隔开。两者时效性差别很大：「锁定」是
   此刻的状态，看到就要处理；体检是长期数字，可以慢慢看。混在一起
   容易被当成同一类信息一扫而过。 */
.cs-health-block{
  border:1px solid var(--line,#e6e8ec);border-radius:10px;
  padding:12px 14px;margin-bottom:14px;background:var(--panel,#fff);
}

.cs-health-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--line-2,#eef0f3);
}
.cs-health-head strong{font-size:13.5px;color:var(--txt,#1f2430)}

.cs-locks{display:flex;flex-direction:column;gap:8px}

.cs-lock-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 11px;border:1px solid #f3d9d9;border-radius:8px;background:#fff8f8;
}
.cs-lock-main{min-width:0;flex:1 1 auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cs-lock-main strong{font-size:13px;color:var(--txt,#1f2430);word-break:break-word}
.cs-lock-sub{font-size:12px;color:#b4423a;flex:0 0 auto}

@media (max-width:520px){
  /* 窄屏：名字和「还有几分钟」各占一行，按钮撑满整行好点。 */
  .cs-lock-row{flex-direction:column;align-items:stretch;gap:7px}
  .cs-lock-row .btn{width:100%}
}


/* 团队树缩进标记。
 * 用 U+2514（└）而不是给整行加边框 —— 边框在窄屏折行时会画歪，
 * 而这个表格在手机上本来就会横向滚动。 */
.cs-tree-mark{display:inline-block;color:var(--txt-3,#9aa1ab);margin-right:4px;font-family:monospace}
#cs-pane-teams .cs-table td:first-child{min-width:180px}