/* ---------- logs page ---------- */
.logs-body { overflow: hidden; }

.logs-layout {
  position: absolute;
  inset: 56px 0 28px 0;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.stat-label.info { color: var(--cyan-soft); }
.stat-label.warn { color: var(--yellow); }
.stat-label.err  { color: var(--pink); }

/* ---------- controls bar ---------- */
.logs-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(8,16,30,0.92), rgba(8,16,30,0.65));
  border-bottom: 1px solid var(--line);
  align-items: flex-end;
}

.ctrl-group {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.ctrl-group.grow { flex: 1 1 280px; }
.ctrl-group label {
  font: 700 9px 'Orbitron', monospace;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.ctrl-group select,
.ctrl-group input[type="number"],
.ctrl-group input[type="search"] {
  height: 30px;
  padding: 0 10px;
  background: var(--bg-1);
  color: var(--text);
  border: 1px solid var(--line-hot);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
}
.ctrl-group select:focus,
.ctrl-group input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 8px rgba(0, 240, 255, 0.4);
}
.ctrl-group input[type="number"] { width: 96px; }
.ctrl-group input[type="search"] { min-width: 240px; }

/* level toggles */
.level-toggles { flex-direction: column; }
.level-toggles > label { margin-bottom: 0; }
.level-toggles .lvl { /* layout handled below */ }
.level-toggles {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.level-toggles > label {
  flex-basis: 100%;
  margin-bottom: 2px;
}

.lvl {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line-hot);
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  font: 700 11px 'Orbitron', monospace;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: 60ms;
}
.lvl.on[data-level="ERROR"] { background: rgba(255, 51, 85, 0.18); color: var(--red); border-color: var(--red); }
.lvl.on[data-level="FATAL"] { background: rgba(255, 43, 214, 0.20); color: var(--magenta); border-color: var(--magenta); }
.lvl.on[data-level="WARN"]  { background: rgba(255, 212, 0, 0.18); color: var(--yellow); border-color: var(--yellow); }
.lvl.on[data-level="INFO"]  { background: rgba(0, 240, 255, 0.10); color: var(--cyan-soft); border-color: var(--cyan); }
.lvl.on[data-level="DEBUG"] { background: rgba(180, 140, 255, 0.10); color: var(--purple); border-color: var(--purple); }
.lvl.on[data-level="TRACE"] { background: rgba(110, 138, 176, 0.10); color: var(--text); border-color: var(--text-dim); }
.lvl.on[data-level="ACCESS"]{ background: rgba(0, 255, 157, 0.10); color: var(--green); border-color: var(--green); }
.lvl:hover { color: var(--text); }

/* buttons */
.btn {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-hot);
  border-radius: 3px;
  background: var(--bg-1);
  color: var(--text);
  font: 700 11px 'Orbitron', monospace;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: 80ms;
}
.btn:hover { color: var(--cyan); border-color: var(--cyan); }
.btn.primary { color: var(--cyan); border-color: var(--cyan); background: rgba(0, 240, 255, 0.06); }
.btn.primary[data-on="0"] { color: var(--text-dim); border-color: var(--line-hot); background: var(--bg-1); }
.btn.ghost { background: rgba(8,16,30,0.65); backdrop-filter: blur(2px); }
.btn[data-on="1"] { color: var(--cyan); border-color: var(--cyan); background: rgba(0, 240, 255, 0.06); }

/* ---------- viewport ---------- */
.logs-viewport-wrap {
  position: relative;
  min-height: 0;
}
.logs-viewport {
  position: absolute; inset: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding: 6px 0;
  font: 12px/1.45 'JetBrains Mono', ui-monospace, monospace;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(0, 240, 255, 0.06), transparent 60%),
    var(--bg-0);
  scrollbar-color: var(--line-hot) transparent;
  scrollbar-width: thin;
}
.logs-viewport::-webkit-scrollbar { width: 8px; height: 8px; }
.logs-viewport::-webkit-scrollbar-thumb { background: var(--line-hot); border-radius: 4px; }
.logs-viewport::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

.logs-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font: 700 12px 'Orbitron', monospace;
  letter-spacing: 0.2em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
}
.logs-viewport-wrap.empty .logs-empty { opacity: 1; }

.logs-floating {
  position: absolute;
  right: 22px; bottom: 14px;
  display: none;
  z-index: 4;
}
.logs-floating.show { display: block; }

/* ---------- log row ---------- */
.row {
  display: grid;
  grid-template-columns: 200px 64px 1fr;
  gap: 10px;
  padding: 1px 14px;
  border-left: 2px solid transparent;
  white-space: nowrap;
  align-items: baseline;
}
.row:hover { background: rgba(0, 240, 255, 0.04); }

.row .ts {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.row .lvl-tag {
  font: 700 10px 'Orbitron', monospace;
  letter-spacing: 0.16em;
  text-align: center;
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid currentColor;
  background: rgba(255,255,255,0.02);
}
.row .msg {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logs-viewport.wrap .row { white-space: normal; }
.logs-viewport.wrap .row .msg {
  white-space: pre-wrap;
  word-break: break-word;
}
.row .msg .hl {
  background: rgba(0, 240, 255, 0.22);
  color: var(--cyan);
  padding: 0 1px;
  border-radius: 2px;
}

.row .stream-tag {
  font-size: 9px;
  color: var(--text-dim);
  margin-left: 6px;
}
.row .stream-tag::before { content: "·"; margin-right: 4px; opacity: 0.5; }

/* level coloring */
.row.l-ERROR  { border-left-color: var(--red); }
.row.l-ERROR .lvl-tag { color: var(--red); background: rgba(255, 51, 85, 0.10); }
.row.l-ERROR .msg { color: #ffcfd6; }

.row.l-FATAL  { border-left-color: var(--magenta); background: rgba(255, 43, 214, 0.05); }
.row.l-FATAL .lvl-tag { color: var(--magenta); background: rgba(255, 43, 214, 0.18); }
.row.l-FATAL .msg { color: #ffd1ee; }

.row.l-WARN   { border-left-color: var(--yellow); }
.row.l-WARN .lvl-tag { color: var(--yellow); background: rgba(255, 212, 0, 0.10); }
.row.l-WARN .msg { color: #ffeead; }

.row.l-INFO   { border-left-color: var(--cyan); }
.row.l-INFO .lvl-tag { color: var(--cyan-soft); background: rgba(0, 240, 255, 0.06); }

.row.l-DEBUG  { border-left-color: var(--purple); }
.row.l-DEBUG .lvl-tag { color: var(--purple); }
.row.l-DEBUG .msg { color: #c5b6f0; }

.row.l-TRACE  { border-left-color: var(--text-dim); opacity: 0.85; }
.row.l-TRACE .lvl-tag { color: var(--text-dim); }
.row.l-TRACE .msg { color: var(--text-dim); }

.row.l-ACCESS { border-left-color: var(--green); }
.row.l-ACCESS .lvl-tag { color: var(--green); background: rgba(0, 255, 157, 0.06); }
.row.l-ACCESS .msg { color: #b9f5d4; }

.row.stream-stderr .ts::after {
  content: "⏐";
  color: var(--red);
  margin-left: 4px;
  opacity: 0.6;
}

/* ---------- footer status pill states ---------- */
.stat-value.pill[data-state="boot"]  { color: var(--text-dim); border-color: var(--line-hot); }
.stat-value.pill[data-state="open"]  { color: var(--green);    border-color: var(--green);    box-shadow: 0 0 8px rgba(0,255,157,0.35); }
.stat-value.pill[data-state="paused"]{ color: var(--yellow);   border-color: var(--yellow); }
.stat-value.pill[data-state="error"] { color: var(--red);      border-color: var(--red);      box-shadow: 0 0 8px rgba(255,51,85,0.45); }
.stat-value.pill[data-state="closed"]{ color: var(--orange);   border-color: var(--orange); }