/* ============================================================
   管理后台 v2 外壳
   只作用于 #admin 作用域：不影响登录页与手机打卡端
   ============================================================ */

#admin{
  /* 品牌色：后台独立于打卡端，换成电蓝 */
  --primary:#3D5AFE;
  --primary-dark:#2F49DA;
  --primary-light:#EEF1FF;
  --v2-signal:#FF6B4A;

  --v2-bg:#F4F6FA;
  --v2-rail:#0D1424;
  --v2-rail-2:#182135;
  --v2-line:#E3E8F1;
  --v2-line-soft:#EDF1F7;
  --v2-ink:#0C1526;
  --v2-ink-2:#28324A;
  --v2-ink-3:#68768A;
  --v2-ink-4:#94A2B8;

  --radius:8px;
  --radius-lg:14px;
  --border:var(--v2-line);
  --bg:var(--v2-bg);
  --surface:#fff;
  --text:var(--v2-ink);
  --shadow:0 1px 2px rgba(13,20,36,.05);
  --shadow-md:0 4px 14px rgba(13,20,36,.07);
  --shadow-lg:0 12px 32px rgba(13,20,36,.10);
}

/* ---------- 三段式骨架 ---------- */
#admin.admin-app{
  display:flex;
  min-height:100vh;
  width:100%;
  background:var(--v2-bg);
  color:var(--v2-ink);
  font-feature-settings:"tnum" 1;
}

/* ---------- 64px 图标轨道 ---------- */
#admin .v2-rail{
  width:64px;min-width:64px;flex-shrink:0;
  background:var(--v2-rail);
  display:flex;flex-direction:column;align-items:center;
  padding:12px 0 10px;gap:4px;
  position:sticky;top:0;height:100vh;z-index:30;
}
#admin .v2-rail-brand{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#3D5AFE,#6E8BFF);
  color:#fff;margin-bottom:10px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(61,90,254,.35);
  position:relative;
}
#admin .v2-rail-brand::after{
  content:"安全履职平台";
  position:absolute;left:44px;top:50%;transform:translateY(-50%);
  background:#0D1424;color:#fff;font-size:12px;line-height:1;
  padding:6px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s;
  border:1px solid rgba(255,255,255,.12);z-index:60;
}
#admin .v2-rail-brand:hover::after{opacity:1}
#admin .v2-rail-brand svg{width:19px;height:19px}
#admin .v2-rail-btn{
  position:relative;
  width:44px;height:42px;border:0;border-radius:10px;
  background:transparent;color:rgba(255,255,255,.5);
  display:grid;place-items:center;cursor:pointer;
  transition:background .15s,color .15s;
}
#admin .v2-rail-btn svg{width:19px;height:19px}
#admin .v2-rail-btn:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
#admin .v2-rail-btn:focus-visible{outline:2px solid #6E8BFF;outline-offset:2px}
#admin .v2-rail-btn.active{background:#3D5AFE;color:#fff}
#admin .v2-rail-btn.active::before{
  content:"";position:absolute;left:-8px;top:11px;
  width:2px;height:20px;border-radius:0 2px 2px 0;background:#fff;
}
#admin .v2-rail-tip{
  position:absolute;left:52px;top:50%;transform:translateY(-50%);
  background:#0D1424;color:#fff;font-size:12px;line-height:1;
  padding:6px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s;
  border:1px solid rgba(255,255,255,.12);z-index:60;
}
#admin .v2-rail-btn:hover .v2-rail-tip{opacity:1}
#admin .v2-rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:4px}

/* ---------- 200px 二级面板 ---------- */
#admin .v2-panel{
  width:200px;min-width:200px;flex-shrink:0;
  background:#fff;border-right:1px solid var(--v2-line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:25;
}
#admin .v2-panel-head{padding:18px 16px 12px}
#admin .v2-panel-title{font-size:14px;font-weight:700;color:var(--v2-ink);letter-spacing:.2px}
#admin .v2-panel-sub{font-size:11px;color:var(--v2-ink-4);margin-top:3px}
#admin .v2-panel-list{
  flex:1;overflow-y:auto;padding:2px 8px 8px;
  display:flex;flex-direction:column;gap:1px;
}
#admin .v2-pitem{
  display:flex;align-items:center;width:100%;
  height:32px;padding:0 10px;box-sizing:border-box;
  border:0;border-radius:7px;background:transparent;
  color:var(--v2-ink-2);font-size:13px;line-height:1;
  text-align:left;cursor:pointer;
  transition:background .12s,color .12s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#admin .v2-pitem:hover{background:#F4F6FA;color:var(--v2-ink)}
#admin .v2-pitem:focus-visible{outline:2px solid #3D5AFE;outline-offset:-2px}
#admin .v2-pitem.active{background:var(--primary-light);color:var(--primary);font-weight:600}
#admin .v2-panel-foot{padding:10px 12px 14px;border-top:1px solid var(--v2-line-soft)}
#admin .v2-logout{
  width:100%;height:32px;border:1px solid var(--v2-line);border-radius:8px;
  background:#fff;color:var(--v2-ink-3);font-size:12px;cursor:pointer;
  transition:border-color .12s,color .12s;
}
#admin .v2-logout:hover{border-color:#F0B4A6;color:#C2452A}

/* ---------- 内容区 ---------- */
#admin .admin-body{flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh;background:var(--v2-bg)}
#admin .admin-top{
  background:#fff;border-bottom:1px solid var(--v2-line);
  padding:13px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  box-shadow:none;position:sticky;top:0;z-index:20;
}
#admin .v2-crumb{display:flex;align-items:center;gap:7px;min-width:0}
#admin .v2-crumb-home{font-size:12px;color:var(--v2-ink-4)}
#admin .v2-crumb-sep{font-size:12px;color:#C7D0DE}
#admin #adminCrumbGroup{font-size:12px;color:var(--v2-ink-3)}
#admin .admin-top h1{
  margin:0;font-size:18px;font-weight:700;letter-spacing:-.2px;color:var(--v2-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#admin .admin-top-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
#admin .admin-user-pill{
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 11px;border-radius:8px;
  background:var(--v2-bg);border:1px solid var(--v2-line);
  font-size:12px;color:var(--v2-ink-3);max-width:260px;
}
#admin .admin-user-pill #adminWhoText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#admin .admin-user-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0}
#admin .btn-help{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--v2-line);
  background:#fff;color:var(--v2-ink-4);font-size:13px;cursor:pointer;
}
#admin .btn-help:hover{border-color:#C7D0DE;color:var(--v2-ink-2)}
#admin .btn-admin-logout{
  height:30px;padding:0 12px;border-radius:8px;
  border:1px solid var(--v2-line);background:#fff;
  color:var(--v2-ink-3);font-size:12px;cursor:pointer;
}
#admin .btn-admin-logout:hover{border-color:#C7D0DE;color:var(--v2-ink)}
#admin .admin-main{flex:1;padding:20px 26px 28px;overflow:auto}

/* 看板 iframe 容器适配新外壳高度（原值按旧顶栏 72px 调过） */
#admin .embedded-dashboard-shell{
  height:calc(100vh - 102px);
  min-height:560px;
  margin:-20px -26px;
}
/* 支持 :has 的浏览器直接撑满可用空间，不依赖顶栏具体高度 */
#admin .admin-main:has(> .embedded-dashboard-shell){
  display:flex;flex-direction:column;overflow:hidden;
}
#admin .admin-main:has(> .embedded-dashboard-shell) > .embedded-dashboard-shell{
  flex:1 1 auto;height:auto;margin:-20px -26px -28px;
}

/* ---------- 内容卡片统一到 v2 质感 ---------- */
#admin .panel{
  background:#fff;border:1px solid var(--v2-line);border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(13,20,36,.04);
  overflow:hidden;
}
#admin .panel-head{padding:13px 18px;border-bottom:1px solid var(--v2-line-soft);background:#fff}
#admin .panel-head h3{font-size:14px;font-weight:700;color:var(--v2-ink);letter-spacing:-.1px}
#admin .panel-body{padding:16px 18px}

/* 表格 */
#admin .tbl{border-collapse:separate;border-spacing:0;font-size:13px}
#admin .tbl thead th{
  background:#F7F9FC;color:var(--v2-ink-3);font-size:11.5px;font-weight:600;
  letter-spacing:.3px;text-transform:none;
  border-bottom:1px solid var(--v2-line);padding:9px 12px;
  position:sticky;top:0;z-index:2;
}
#admin .tbl tbody td{padding:9px 12px;border-bottom:1px solid var(--v2-line-soft);color:var(--v2-ink-2)}
#admin .tbl tbody tr:hover td{background:#FAFBFD}
#admin .tbl tbody tr:last-child td{border-bottom:0}

/* 按钮对齐 v2 圆角与主色 */
#admin .btn-primary{border-radius:8px;box-shadow:0 1px 2px rgba(61,90,254,.25)}
#admin .btn-ghost,#admin .btn-sm{border-radius:8px}

/* ---------- 遮罩（窄屏面板浮层） ---------- */
#admin .v2-scrim{
  display:none;position:fixed;inset:0;background:rgba(13,20,36,.42);z-index:24;
}
#admin .v2-scrim.show{display:block}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  #admin .v2-panel{
    position:fixed;left:64px;top:0;
    transform:translateX(-104%);transition:transform .2s ease;
    box-shadow:0 12px 40px rgba(13,20,36,.18);
  }
  #admin .v2-panel.open{transform:translateX(0)}
  #admin .admin-main{padding:16px 18px 24px}
  #admin .admin-top{padding:12px 18px}
}
@media (max-width:720px){
  #admin .v2-rail{width:56px;min-width:56px}
  #admin .v2-rail-btn{width:40px;height:40px}
  #admin .v2-panel{left:56px;width:190px;min-width:190px}
  #admin .admin-top .admin-user-pill{display:none}
  #admin .admin-top h1{font-size:16px}
  #admin .v2-crumb-home,#admin .v2-crumb-sep{display:none}
  #admin .admin-main{padding:12px 12px 22px}
  #admin .panel-body{padding:12px}
}