/* The OTA session log viewer (views/ota-session-log.js): session header,
   badges, filter box, level toggles and the log stream, plus the session
   status colors (.status-*) both hosts use in their session lists. Shared by
   OTA Activity (ota-logs.css @imports it) and the unit page's OTA sessions
   panel (device-unit.js, through ensureSessionLogCss). Palette comes from
   theme.css.

   .search-input lives here because the viewer's filter box is one, and its
   mobile override moved with it so the two keep their order. OTA Activity's
   top-bar search uses the same class and gets it through the @import. */

.search-input {
  background: var(--lf-bg); border: 1px solid var(--lf-border-strong); border-radius: 7px;
  padding: 7px 14px; font-size: 12px; color: var(--lf-text); min-width: 240px; outline: none;
}
.search-input::placeholder { color: var(--lf-text-dim); }
.search-input:focus { border-color: var(--lf-accent); }

/* Status badges */
.status-success { color: var(--lf-success); font-size: 10px; font-weight: 500; }
.status-failed { color: var(--lf-error); font-size: 10px; font-weight: 500; }
.status-progress { color: var(--lf-info); font-size: 10px; font-weight: 500; }
.status-timeout { color: var(--lf-purple); font-size: 10px; font-weight: 500; }
/* PARTIAL: some CPUs installed, at least one failed. Counted as a failure, drawn as a warning
   so it is told apart from FAILED at a glance. Text stays --lf-text: --lf-warn as 10px text is
   3.04:1 on a light card (axe), the same call as .cpu-last-known. */
.status-partial {
  color: var(--lf-text); background: var(--lf-warn-bg); border: 1px solid var(--lf-warn-border);
  border-radius: 4px; padding: 0 4px; font-size: 10px; font-weight: 500;
}

/* Session header */
.session-header {
  background: var(--lf-panel-alt); border-bottom: 1px solid var(--lf-border);
  padding: 14px; flex-shrink: 0;
}
.session-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.session-title-text { color: var(--lf-text); font-weight: 600; font-size: 14px; }
.session-badges { display: flex; gap: 6px; }
.badge {
  font-size: 10px; padding: 3px 10px; border-radius: 10px; font-weight: 500;
}
.badge-success { color: var(--lf-success); background: var(--lf-success-bg); border: 1px solid var(--lf-success-border); }
.badge-failed { color: var(--lf-error); background: var(--lf-error-bg); border: 1px solid var(--lf-error-border); }
.badge-progress { color: var(--lf-info); background: var(--lf-info-bg); border: 1px solid var(--lf-info-border); }
.badge-timeout { color: var(--lf-purple); background: var(--lf-purple-bg); border: 1px solid var(--lf-purple-border); }
.badge-partial { color: var(--lf-text); background: var(--lf-warn-bg); border: 1px solid var(--lf-warn-border); }
.badge-neutral { color: var(--lf-text-muted); background: var(--lf-btn-bg); border: 1px solid var(--lf-border-strong); }
.session-meta {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; font-size: 11px;
}
.meta-label { color: var(--lf-text-dim); }
.meta-value { color: var(--lf-text); font-weight: 500; }

/* Log toolbar */
.log-toolbar {
  display: flex; gap: 8px; padding: 10px 14px;
  align-items: center; border-bottom: 1px solid var(--lf-border); flex-shrink: 0;
}
.log-toolbar .search-input { flex: 1; min-width: auto; }
.level-toggles { display: flex; gap: 4px; }
.level-btn {
  padding: 4px 10px; border-radius: 6px; font-size: 10px;
  cursor: pointer; font-weight: 500; border: 1px solid;
  transition: opacity 0.15s;
}
.level-btn:not(.active) { opacity: 0.35; }
.level-info { background: var(--lf-info-bg); color: var(--lf-info); border-color: var(--lf-info-border); }
.level-warn { background: var(--lf-warn-bg); color: var(--lf-warn); border-color: var(--lf-warn-border); }
.level-err { background: var(--lf-error-bg); color: var(--lf-error); border-color: var(--lf-error-border); }
.level-debug { background: var(--lf-btn-bg); color: var(--lf-text-muted); border-color: var(--lf-border-strong); }

/* Log stream */
/* min-height: the steps chart above can be tall with Signal and load open;
   the log keeps room to read and the pane scrolls instead. */
.log-stream {
  flex: 1; min-height: 260px; overflow-y: auto; padding: 14px;
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', 'Consolas', monospace;
  font-size: 11px; line-height: 1.9; background: var(--lf-panel-alt);
}
.log-line { white-space: pre-wrap; word-break: break-all; }
.log-line.hidden { display: none; }
.log-num { color: var(--lf-text-dim); user-select: none; display: inline-block; min-width: 36px; text-align: right; margin-right: 8px; }
.log-time { color: var(--lf-text-dim); margin-right: 6px; }
.log-level {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  font-size: 10px; margin-right: 6px; font-weight: 500;
}
.log-level-INFO { color: var(--lf-info); background: var(--lf-info-bg); }
.log-level-WARN { color: var(--lf-warn); background: var(--lf-warn-bg); }
.log-level-ERR { color: var(--lf-error); background: var(--lf-error-bg); }
.log-level-DEBUG { color: var(--lf-text-muted); background: var(--lf-btn-bg); }
.log-msg { color: var(--lf-text); }
.log-msg-WARN { color: var(--lf-warn); }
.log-msg-ERR { color: var(--lf-error); }
.log-msg-DEBUG { color: var(--lf-text-muted); }

/* A log line the steps chart jumped to. */
.log-line.log-flash { background: color-mix(in srgb, var(--lf-accent) 22%, transparent); border-radius: 3px; transition: background 0.4s; }

/* ─── Steps chart (views/ota-session-chart.js) ──────────────────────────────
   The CPU hues are the fleet overview's validated categorical slots 1 to 3
   (adjacent pairs clear the colour-blind floor in both themes); every step
   also says its CPU in words, and a failed step is red with a ✕ and the word
   in its accessible name, never colour alone. */
.sc {
  --sc-c1: #3987e5; --sc-c2: #d95926; --sc-c3: #199e70;
  --sc-check: #5b6070; --sc-end: var(--lf-accent); --sc-bad: var(--lf-error);
  --sc-core0: #9085e9; --sc-core1: #c98500; --sc-line: #cbd5e1;
  --sc-grid: rgba(255, 255, 255, 0.06);
  padding: 12px 14px 10px; border-bottom: 1px solid var(--lf-border); flex-shrink: 0; font-size: 12px;
}
html[data-theme="light"] .sc {
  --sc-c1: #2a78d6; --sc-c2: #eb6834; --sc-c3: #1baf7a;
  --sc-check: #9ca3af; --sc-core0: #6250d6; --sc-core1: #eda100; --sc-line: #374151;
  --sc-grid: #eef0f3;
}
.sc[hidden] { display: none; }
.sc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.sc-head h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--lf-text); }
.sc-toggle {
  font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  color: var(--lf-text-muted); background: transparent; border: 1px solid var(--lf-border-strong);
}
.sc-toggle[aria-pressed="true"] { color: var(--lf-text); border-color: var(--lf-accent); background: color-mix(in srgb, var(--lf-accent) 12%, transparent); }
.sc-toggle:focus-visible, .sc-jump:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }

.sc-steps { list-style: none; margin: 0; padding: 0; }
.sc-step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 36%) 58px; gap: 4px 12px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--sc-grid);
}
.sc-jump {
  font: inherit; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.sc-jump:hover .sc-label { text-decoration: underline; }
.sc-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sc-label { font-weight: 600; color: var(--lf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-detail { color: var(--lf-text-muted); font-size: 11.5px; padding-left: 16px; overflow-wrap: anywhere; }
.sc-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.sc-icon { flex: none; width: 14px; text-align: center; font-weight: 700; }
.sc-icon-warn { color: var(--lf-warn); }
.sc-icon-bad { color: var(--sc-bad); }
.sc-icon-open { color: var(--lf-text-muted); }
.sc-st-bad .sc-label { color: var(--sc-bad); }
.sc-track { position: relative; height: 14px; }
.sc-bar { position: absolute; top: 2px; height: 10px; border-radius: 3px; min-width: 3px; }
.sc-bar-open { background: transparent; border: 1.5px dashed; box-sizing: border-box; }
.sc-bar-failed { background: repeating-linear-gradient(45deg, var(--sc-bad) 0 3px, transparent 3px 6px); border: 1px solid var(--sc-bad); box-sizing: border-box; }
.sc-mark { position: absolute; top: -1px; width: 3px; height: 16px; border-radius: 2px; transform: translateX(-1px); }
.sc-took { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--lf-text); white-space: nowrap; }
.sc-at { font-weight: 400; color: var(--lf-text-muted); }
.sc-axis { position: relative; height: 16px; font-size: 10.5px; color: var(--lf-text-dim); }
.sc-axis span { position: absolute; top: 2px; transform: translateX(-50%); }
/* The steps' axis sits under their bar column. */
.sc-axis-steps { margin-left: calc(100% - 58px - 12px - max(110px, 36%)); margin-right: 70px; }
.sc-sum { margin: 4px 0 0; color: var(--lf-text-muted); font-size: 11.5px; }

.sc-strips { margin-top: 10px; }
.sc-strips[hidden] { display: none; }
.sc-strips-plot { position: relative; cursor: crosshair; }
.sc-strip { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: stretch; margin-bottom: 6px; }
.sc-strip-label { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--lf-text-muted); }
.sc-strip-label b { color: var(--lf-text); font-weight: 600; }
.sc-strip-legend { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 11px; }
.sc-strip-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sc-strip-legend .sc-sw { width: 8px; height: 8px; }
.sc-strip-plot { position: relative; border: 1px solid var(--sc-grid); border-radius: 3px; }
.sc-strip-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sc-weak { fill: var(--sc-bad); opacity: 0.08; }
/* Scale labels at the left: a session's lines start a few seconds in, so the
   left edge is clear; the right edge is where the downloads finish. */
.sc-ymax, .sc-ymin { position: absolute; left: 4px; font-size: 10px; color: var(--lf-text-dim); line-height: 1; z-index: 1; }
.sc-weak-label { position: absolute; right: 4px; font-size: 10px; line-height: 1; }
.sc-ymax { top: 3px; }
.sc-ymin { bottom: 3px; }
.sc-weak-label { bottom: 14px; color: var(--sc-bad); opacity: 0.8; }
.sc-axis-strips { margin-left: 114px; }
.sc-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--lf-text); opacity: 0.5; pointer-events: none; display: none; }
.sc-tip {
  position: absolute; top: 4px; z-index: 3; display: none; flex-direction: column; gap: 2px; min-width: 160px;
  padding: 7px 9px; font-size: 11.5px; color: var(--lf-text); pointer-events: none;
  background: var(--lf-panel); border: 1px solid var(--lf-border-strong); border-radius: 7px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.sc-tip-row { display: flex; justify-content: space-between; gap: 12px; }
.sc-tip-row b { font-variant-numeric: tabular-nums; }
.sc-none { margin: 0; color: var(--lf-text-muted); }

/* Live streaming indicator */
.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; padding: 3px 10px; border-radius: 10px; font-weight: 500;
  color: var(--lf-success); background: var(--lf-success-bg); border: 1px solid var(--lf-success-border);
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lf-success);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ─── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .search-input { min-width: 0; flex: 1 1 160px; font-size: 13px; }

  .log-toolbar { flex-wrap: wrap; }
  .level-toggles { order: 2; }

  .session-meta { grid-template-columns: 1fr 1fr; }

  /* A phone: the step's name over its bar, the time beside the name. */
  .sc-step { grid-template-columns: minmax(0, 1fr) auto; }
  .sc-track { grid-column: 1 / -1; grid-row: 2; }
  .sc-took { grid-column: 2; grid-row: 1; align-self: start; }
  .sc-axis-steps { margin-left: 0; margin-right: 0; }
  .sc-strip { grid-template-columns: 1fr; gap: 2px; }
  .sc-strip-label { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; }
  .sc-axis-strips { margin-left: 0; }
}