/* =====================================================================
 * oplog-mgmt.css — 第90轮「操作日志」浮层专用样式
 *
 * 选择器**一律** .opl-* 前缀（含 opl- 前缀的复合类），只加类、不改 style.css 的
 * 通用 .mask/.modal/.tbl/.btn/.tag/.empty/.inp/.sel —— 零外溢到宿主应用
 * （组织方式同 feedback-mgmt.css / anti-crack.css / b39-modals.css）。
 * ===================================================================== */

/* ─── 遮罩：只铺右侧内容区 ───────────────────────────────────────────
   与「问题反馈」(.mask.fbk-mask) / 「卡密管理」(.mask.b39m-mask) 逐字同一套口径：
   left:236px 让开左侧固定宽度的导航栏，padding:16px 与内容区留出同样的边距。
   ⚠ 打开浮层那段 inline style 里也写了同样三个值（调用方口径要求），所以窄屏兜底
     必须用 !important 才压得过 inline（见文件末尾的 900px 断点）。 */
.mask.opl-mask { left: 236px; padding: 16px; }

/* ─── 弹窗尺寸 ───────────────────────────────────────────────────────
   宽度 = 内容区宽（100vw - 236 导航 - 32 左右边距），与问题反馈浮层一致；
   高度**钉死** 88vh 不随内容变 —— 遮罩是 flex 居中(.mask)，内容一高一低整个框就上下跳，
   「加载中 / 空态 / 有表格」三种高度不同，肉眼看到的就是浮层在闪（feedback-mgmt 踩过的坑）。
   超出部分由 .modal > .body 自己滚动（style.css:871 overflow-y:auto）。 */
.modal.wide.opl-dlg { max-width: calc(100vw - 236px - 32px); height: 88vh; max-height: 88vh; }

/* 底部按钮栏：「加载更多」推到最左，关闭留在最右（.modal > footer 本身是全右对齐） */
.opl-dlg > footer #oplogMore { margin-right: auto; }

/* ─── 筛选条：一行排开、窄屏自动换行 ─────────────────────────────── */
.opl-filters { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.opl-fl { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #475569; white-space: nowrap; }
/* 宿主 .inp/.sel 是 width:100%（给整行表单用的），这里必须收回宽度，否则每个控件占满一行 */
.opl-filters .inp, .opl-filters .sel { width: auto; height: 32px; padding: 4px 9px; font-size: 12.5px; }
/* 上面那条是两个类的选择器(0-2-0)，宽度规则也要写成两个类才压得过它 */
.opl-filters .opl-inp { width: 300px; min-width: 200px; }
.opl-filters .opl-date { width: 168px; }
.opl-filters #oplogKind { min-width: 132px; }
/* 「查询 / 重置」成组：窄一点的行宽下它们**一起**折到第二行（而不是「重置」孤零零一个），
   margin-left:auto 让这组在折行后仍然贴右（与全站的工具栏口径一致） */
.opl-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ─── 统计行（counts 是后端给的全库口径，与表格里筛选出来的条数不是一回事） ── */
.opl-stat { font-size: 12.5px; color: #64748b; margin: 2px 0 4px; }
.opl-stat b { color: #334155; font-variant-numeric: tabular-nums; }
/* 加载失败那条提示：显示在列表**上方**，列表里上一次的内容照旧留着（不白屏） */
.opl-err {
  margin-bottom: 10px; padding: 8px 12px; font-size: 12.5px; color: #b45309;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
}

/* ─── 列表 ──────────────────────────────────────────────────────────
   列表区给个最小高度：加载态 / 空态 / 表格三种高度接近，居中的浮层不会一开一关上下跳。 */
.opl-list { min-height: 240px; }
/* 宿主 table.tbl td 的 padding 是 3px/4px（那是给行内输入框用的），本页是纯文本行，加回呼吸感 */
.opl-tbl td { padding: 8px 10px; vertical-align: top; }
.opl-tbl tbody tr:hover td { background: #f7f9fc; }
/* ─── 内容列：第一行是**中文动作名** + 结果徽章，第二行只留给卡密那类的明细小字 ──
   第127轮改：原来第一行摆的是 `POST /api/v1/gateway`、第二行 `HTTP 200`，站长说"看不懂"。
   技术串现在整句进 title 提示（见 oplog-mgmt.js 的 rowsHtml），台面上只说人话。 */
.opl-ttl { max-width: 520px; }
.opl-t { font-size: 13.5px; color: #1f2937; word-break: break-all; }
.opl-d { margin-top: 2px; font-size: 12px; color: #64748b; word-break: break-all; }
/* 表格上方那句小字：地区为什么是空的（跟统计行同生共死，加载态/空态也在） */
.opl-hint { margin: 0 0 10px; font-size: 12.5px; color: #64748b; }
/* 地区列空值的写法（整列 '—' 看着像坏了） */
.opl-none { color: #94a3b8; }

/* ─── 结果徽章：跟在中文动作名后面的浅色小标签 ─────────────────────
   颜色按**后果**分档，不按状态码数字分档：绿=成功 / 蓝=跳转 / 琥珀=对方发来的请求有问题 /
   红=被拒或服务端出错。文案由 oplog-mgmt.js 的 resultOf() 给，原始码在 title 提示里。 */
.opl-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; line-height: 18px; white-space: nowrap; vertical-align: 1px;
  border: 1px solid transparent;
}
.opl-badge-ok { background: #e9f9ef; color: #15803d; border-color: #86efac; }
.opl-badge-info { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.opl-badge-warn { background: #fff7e6; color: #b45309; border-color: #fcd34d; }
.opl-badge-err { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
/* 卡密 / IP / 机器码：等宽字体，长机器码允许折行，不会被表格挤成一条线 */
.opl-mono { font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 12.5px; word-break: break-all; }

/* ─── 类型胶囊 ──────────────────────────────────────────────────────
   排版仍复用全站 .tag（圆角 / 内距 / 字号不重写），这里只给三种日志各自的配色：
   接口 = 蓝、卡密 = 橙、登录 = 绿；后端将来加了新 kind 也有一个灰底兜底。 */
.tag.opl-tag-api { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.tag.opl-tag-card { background: #fff4e8; color: #c2410c; border: 1px solid #fdba74; }
.tag.opl-tag-login { background: #e9f9ef; color: #15803d; border: 1px solid #86efac; }
.tag.opl-tag-other { background: #f2f5f9; color: #475569; border: 1px solid #e2e8f0; }

/* ─── 窄屏兜底（与 b39m / fbk 同断点）─────────────────────────────────
   侧边栏会被折起来的布局下，遮罩不能再让开 236px；inline style 里写死了 left/padding，
   所以这两条必须 !important 才生效。 */
@media (max-width: 900px) {
  .mask.opl-mask { left: 0 !important; padding: 16px !important; }
  .modal.wide.opl-dlg { max-width: calc(100vw - 32px); }
}