/* app.css —— 浅色扁平主题（覆盖 Bootstrap 5.3 的默认观感）
   原则：去阴影、去渐变；只用 1px 边框 + 极浅背景分层；圆角统一 8px */
:root{
  --brand:#3b5bdb;          /* 主色（靛蓝） */
  --brand-dark:#2f49b0;
  --brand-soft:#eef1fd;
  --ink:#1f2430;            /* 主文字 */
  --ink-2:#5b6472;          /* 次文字 */
  --ink-3:#8b93a1;          /* 弱文字 */
  --line:#e6e8ee;
  --bg:#f7f8fa;
  --card:#ffffff;
  --ok:#1e7a45;   --ok-bg:#e7f5ec;
  --warn:#a35b00; --warn-bg:#fff4e5;
  --bad:#b3261e;  --bad-bg:#fdecec;
  --sidebar:#1b1f2a;
  --sidebar-2:#2b3040;
  --radius:8px;
}
*{ -webkit-font-smoothing:antialiased; }
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.55 -apple-system,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-dark); }

/* ---------------- 布局 ---------------- */
.side{
  position:fixed; left:0; top:0; bottom:0; width:220px;
  background:var(--sidebar); color:#a8b0c0; padding:14px 0;
  display:flex; flex-direction:column;
}
.side .brand{
  color:#fff; font-weight:600; font-size:15px; padding:6px 20px 16px;
  letter-spacing:.3px;
}
.side .brand small{ display:block; color:#6d7688; font-weight:400; font-size:11px; margin-top:2px; }
.side a{
  display:flex; align-items:center; gap:10px;
  padding:9px 20px; color:#a8b0c0; font-size:13.5px;
  border-left:3px solid transparent;
}
.side a:hover{ background:var(--sidebar-2); color:#e8ebf2; }
.side a.on{ background:var(--sidebar-2); color:#fff; border-left-color:var(--brand); }
.side a .ico{ width:16px; text-align:center; opacity:.9; }
.side .foot{ margin-top:auto; padding:12px 20px; font-size:11px; color:#5b6472; }

.main{ margin-left:220px; min-height:100vh; }
.top{
  height:56px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 22px; gap:14px;
  position:sticky; top:0; z-index:10;
}
.top h1{ font-size:16px; font-weight:600; margin:0; }
.top .sp{ flex:1; }
.top .who{ font-size:12.5px; color:var(--ink-2); }
.wrap{ padding:20px 22px 40px; }

/* ---------------- 卡片/表格 ---------------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:none;
  overflow-x:auto;          /* 列多的表格（如换绑）在窄屏上横向滚动，而不是被裁掉 */
}
.card + .card{ margin-top:16px; }
.card h2{ font-size:14.5px; font-weight:600; margin:0 0 12px; }
.card .sub{ font-size:12px; color:var(--ink-3); margin:-8px 0 12px; }

.stat{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.stat .k{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
}
.stat .k .n{ font-size:26px; font-weight:600; letter-spacing:-.5px; line-height:1.2; }
.stat .k .l{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.stat .k .d{ font-size:11.5px; color:var(--ink-3); margin-top:8px; }

table.t{ width:100%; border-collapse:collapse; font-size:13px; }
table.t th{
  text-align:left; font-weight:600; color:var(--ink-2); background:#f7f8fa;
  padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.t td{ padding:10px; border-bottom:1px solid #eef0f4; vertical-align:middle; }
table.t tr:hover td{ background:#fafbfd; }
table.t td.num{ font-variant-numeric:tabular-nums; }
.mono{ font-family:ui-monospace,Consolas,monospace; font-size:12px; color:var(--ink-2); }

.tag{
  display:inline-block; padding:1px 8px; border-radius:20px; font-size:11.5px; line-height:18px;
  background:#f1f3f7; color:var(--ink-2);
}
.tag.ok{ background:var(--ok-bg); color:var(--ok); }
.tag.warn{ background:var(--warn-bg); color:var(--warn); }
.tag.bad{ background:var(--bad-bg); color:var(--bad); }
.tag.brand{ background:var(--brand-soft); color:var(--brand); }

/* ---------------- 表单/按钮 ---------------- */
.form-control,.form-select{
  border:1px solid var(--line); border-radius:6px; font-size:13.5px; padding:7px 10px;
  box-shadow:none!important;
}
.form-control:focus,.form-select:focus{ border-color:var(--brand); outline:none; }
.form-label{ font-size:12.5px; color:var(--ink-2); margin-bottom:4px; }
.btn{ border-radius:6px; font-size:13px; padding:6px 14px; box-shadow:none!important; }
.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
.btn-outline-secondary{ border-color:var(--line); color:var(--ink-2); }
.btn-outline-secondary:hover{ background:#f1f3f7; color:var(--ink); border-color:var(--line); }
.btn-sm{ font-size:12px; padding:4px 10px; }
.btn-link{ font-size:12.5px; padding:0; }

/* ---------------- 登录页 ---------------- */
.login-wrap{ min-height:100vh; display:grid; place-items:center; background:var(--bg); }
.login-box{
  width:340px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px 24px;
}
.login-box h1{ font-size:17px; font-weight:600; margin:0 0 4px; }
.login-box p{ font-size:12.5px; color:var(--ink-3); margin:0 0 18px; }

.flash{ padding:9px 12px; border-radius:6px; font-size:13px; margin-bottom:14px; }
.flash.ok{ background:var(--ok-bg); color:var(--ok); }
.flash.bad{ background:var(--bad-bg); color:var(--bad); }

.empty{ text-align:center; color:var(--ink-3); font-size:13px; padding:26px 0; }
.pagination{ font-size:12.5px; }
/* ---------------- 分裂按钮：视觉一体化，实际两段 ----------------
   目标：看起来是"一整颗按钮"，但左边点=单个签发、右边点=展开菜单。
   做法：圆角只留给最外侧；中间用一条半透明白线当分隔；
        去掉 Bootstrap 默认的 -1px 负边距造成的"缝"。 */
.btn-group.issue-btn{ display:inline-flex; vertical-align:middle; }
.btn-group.issue-btn > .btn{
  border-radius:0; margin-left:0!important;
}
.btn-group.issue-btn > .btn:first-child{
  border-top-left-radius:6px; border-bottom-left-radius:6px;
  padding-right:16px;
}
.btn-group.issue-btn > .btn:last-child{
  border-top-right-radius:6px; border-bottom-right-radius:6px;
  padding-left:10px; padding-right:10px;
  border-left:1px solid rgba(255,255,255,.38);
}
.btn-group.issue-btn > .btn:last-child:hover,
.btn-group.issue-btn > .btn:last-child:focus,
.btn-group.issue-btn > .btn:last-child.show{
  border-left-color:rgba(255,255,255,.6);
}
/* 展开菜单时左半边不要变暗，保持"同一颗按钮"的错觉 */
.btn-group.issue-btn > .btn:first-child{ border-right:none; }
/* ---------------- 操作列（表格里的按钮组） ----------------
   坑：给 <td> 加 d-flex（display:flex）会让它**脱离表格单元格布局**，
       整行会错位——按钮挤到远处、列宽被撑开、表头和内容对不上。
   正确做法：td 保持 table-cell，里面用 inline-block 横排。 */
td.d-flex{
  display: table-cell !important;
  white-space: nowrap;
}
td.d-flex > form{
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px 0 0;
}
td.d-flex > form:last-child{ margin-right: 0; }
td.d-flex > .sub{ vertical-align: middle; }

/* ---------------- 操作列固定占位（防页面抖动） ----------------
   问题：待处理行有按钮、已处理行没按钮，列宽在 0~150px 之间来回变，
        整张表跟着重排，视觉上就是"页面忽大忽小"。
   做法：每行操作格都放一个 .act-box，最小宽度固定，内容变了宽度也不变。 */
.act-box{
  /* 定宽 146px = 实测「执行解绑」(86) + gap(6) + 「拒绝」(54)
     用 width 而不是 min-width：没有按钮时也占同样宽，表格不会塌 */
  width:146px;
  min-height:26px;
  display:flex;
  align-items:center;
  gap:6px;
}
.act-box > form{ display:inline-block; margin:0; }

/* ---------------- 顶部悬浮胶囊提示（不占布局，避免页面被顶得跳动） ---------------- */
.toast-pill{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 80vw;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 8px 28px rgba(20, 24, 40, .16);
  border: 1px solid transparent;
  animation: toastIn .18s ease-out, toastOut .35s ease-in 3.6s forwards;
  cursor: pointer;
}
.toast-pill.ok  { background: #e7f5ec; color: #1e7a45; border-color: #c6e7d3; }
.toast-pill.bad { background: #fdecec; color: #b3261e; border-color: #f3cfcc; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(-50%) translateY(-8px); visibility: hidden; } }