/* ==========================================================================
   logs.css —— 日志分析（终端视图，v7.16.0）
   --------------------------------------------------------------------------
   需求原文：「用一个模仿成终端的不可输入的 div 显示带颜色区分的日志界面
   （字体用 Consolas，可按等级、请求类型筛选和搜索）」。

   结构：
     .log-term                  终端外框（深底 + 圆角 + 阴影）
       .log-term__bar           标题栏（三个圆点 + 文件名 + 体积/更新时间）
       .log-term__scroll        滚动容器（最大高度，内部滚动）
         .log-term__body        正文
           .log-line            一行（--error / --warn / --info / --debug）
             .log-line__time    时间（灰）
             .log-line__level   等级（带色）
             .log-line__method  请求方法（带色徽标）
             .log-line__status  状态码（≥400 红）
             .log-line__dur     耗时（灰）
             .log-line__msg     消息（搜索命中 <mark> 高亮）
   字体：Consolas（等宽），深浅色主题都按「终端」处理 —— 一律深底浅字。
   ========================================================================== */

.log-toolbar {
  align-items: center;
}

.log-toolbar .select--compact,
.log-toolbar .btn--sm {
  min-height: 34px;
}

.log-toolbar .search-box--compact {
  min-width: 220px;
}

.log-term {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0f141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lg);
}

.log-term__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-4);
  background: #161d26;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #c7d2de;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
}

.log-term__dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

.log-term__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}

.log-term__dots i:nth-child(2) { background: #febc2e; }
.log-term__dots i:nth-child(3) { background: #28c840; }

.log-term__title {
  font-weight: 600;
  color: #e6edf3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-term__meta {
  margin-left: auto;
  color: #7d8b99;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-term__scroll {
  max-height: min(62vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.log-term__body {
  padding: var(--space-3) 0;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.62;
  /* 不可输入：只读 div，不需要光标与选区拖拽之外的交互 */
  user-select: text;
  cursor: text;
}

.log-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 var(--space-4);
  white-space: pre-wrap;
  word-break: break-word;
  color: #c9d5e1;
  border-left: 2px solid transparent;
}

.log-line:hover { background: rgba(255, 255, 255, 0.04); }

.log-line__time {
  flex-shrink: 0;
  color: #6f7d8c;
  font-variant-numeric: tabular-nums;
}

.log-line__level {
  flex-shrink: 0;
  width: 48px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.log-line__method,
.log-line__status,
.log-line__dur {
  flex-shrink: 0;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #9fb0c0;
}

.log-line__status.is-bad {
  background: rgba(255, 95, 87, 0.18);
  color: #ff9d97;
}

.log-line__dur { color: #7d8b99; }

.log-line__msg { min-width: 0; }

/* 等级配色 */
.log-line--error { border-left-color: #ff5f57; }
.log-line--error .log-line__level { color: #ff7b72; }
.log-line--error .log-line__msg { color: #ffb4ae; }

.log-line--warn { border-left-color: #febc2e; }
.log-line--warn .log-line__level { color: #f3c969; }
.log-line--warn .log-line__msg { color: #f2d79a; }

.log-line--info { border-left-color: #3b82f6; }
.log-line--info .log-line__level { color: #79b8ff; }

.log-line--debug { border-left-color: #4b5563; }
.log-line--debug .log-line__level { color: #8b98a5; }
.log-line--debug .log-line__msg { color: #93a1b0; }

/* 请求方法配色（GET 绿 / POST 蓝 / PUT 橙 / PATCH 紫 / DELETE 红） */
.log-line__method--get { background: rgba(40, 200, 64, 0.16); color: #7ee787; }
.log-line__method--post { background: rgba(59, 130, 246, 0.18); color: #79b8ff; }
.log-line__method--put { background: rgba(254, 188, 46, 0.16); color: #f3c969; }
.log-line__method--patch { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
.log-line__method--delete { background: rgba(255, 95, 87, 0.18); color: #ff9d97; }

/* 搜索命中 */
.log-term mark {
  background: #f3c969;
  color: #1b1f24;
  border-radius: 2px;
  padding: 0 1px;
}

/* 减少动效：终端没有动画，这里只兜住 mark 的过渡 */
@media (prefers-reduced-motion: reduce) {
  .log-line { transition: none; }
}

/* ==========================================================================
   安全控制台（security.html）里的简版终端 —— 那份页面不加载本文件，
   它的同类样式写在页面内联 <style> 里（同名类 .log-term 等），保持一致。
   ========================================================================== */