/* ===========================================================
   PHAZOR — admin-live.css
   Оформление живой консоли запросов, «кто онлайн» и графиков.
   Работает в обеих темах: базовый вид = cosmic,
   [data-dash="ops"] — терминальный вариант.
   =========================================================== */

/* ---------- шапка панели ---------- */

.live-head-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.live-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3, #6d6d80);
}
.live-status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3, #6d6d80); flex: none;
}
.live-status.is-live { color: #27a644; }
.live-status.is-live i {
  background: #27a644;
  box-shadow: 0 0 0 0 rgba(39, 166, 68, .55);
  animation: liveDotPulse 1.9s ease-out infinite;
}
.live-status.is-wait { color: #d9a13b; }
.live-status.is-wait i { background: #d9a13b; }
.live-status.is-down { color: #eb5757; }
.live-status.is-down i { background: #eb5757; }
@keyframes liveDotPulse {
  70%, 100% { box-shadow: 0 0 0 8px rgba(39, 166, 68, 0); }
}

.live-rps {
  font-size: 11.5px; color: var(--ink-2, #a7a7b8);
  letter-spacing: .08em; white-space: nowrap;
}
.live-rps b { color: var(--cyan, #45e6ff); font-size: 14px; }

.live-filter {
  width: 190px; max-width: 42vw;
  padding: 7px 11px; border-radius: 8px;
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11.5px;
  color: var(--ink, #f3f3f7);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
}
.live-filter::placeholder { color: var(--ink-3, #6d6d80); }
.live-filter:focus-visible { outline: 2px solid var(--cyan, #45e6ff); outline-offset: 2px; }

#livePauseButton.is-active { color: #d9a13b; border-color: rgba(217, 161, 59, .5); }

.live-count {
  font-size: 18px; font-weight: 700;
  color: var(--cyan, #45e6ff);
}

/* ---------- консоль ---------- */

.live-console {
  height: 330px; overflow-y: auto; overflow-x: hidden;
  padding: 12px 14px;
  border-radius: 12px;
  background: #050508;
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11.8px; line-height: 1.65;
  scrollbar-width: thin;
}
.live-console::-webkit-scrollbar { width: 9px; }
.live-console::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14); border-radius: 6px;
}

.live-line {
  display: grid;
  grid-template-columns: 92px 46px minmax(0, 1fr) 40px 62px 108px;
  gap: 10px; align-items: baseline;
  padding: 1px 0;
  white-space: nowrap;
  animation: liveLineIn .22s ease-out;
}
@keyframes liveLineIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
.live-line .lt  { color: var(--ink-3, #6d6d80); }
.live-line .lm  { color: var(--ink-2, #a7a7b8); font-weight: 700; }
.live-line .lp  { color: var(--ink, #f3f3f7); overflow: hidden; text-overflow: ellipsis; }
.live-line .ls  { font-weight: 700; }
.live-line .lms { color: var(--ink-3, #6d6d80); text-align: right; }
.live-line .lip { color: var(--ink-3, #6d6d80); }

.live-line.is-2xx .ls { color: #27a644; }
.live-line.is-3xx .ls { color: var(--cyan, #45e6ff); }
.live-line.is-4xx .ls { color: #d9a13b; }
.live-line.is-5xx .ls { color: #eb5757; }
.live-line.is-4xx { background: rgba(217, 161, 59, .05); }
.live-line.is-5xx { background: rgba(235, 87, 87, .08); }

/* ---------- сетка нижних панелей ---------- */

.live-grid {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  margin: 14px 0;
}
@media (max-width: 900px) {
  .live-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- кто онлайн ---------- */

.live-online { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.live-online-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .09));
  font-size: 13px;
}
.live-online-row:last-child { border-bottom: 0; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #27a644;
  box-shadow: 0 0 0 0 rgba(39, 166, 68, .5);
  animation: liveDotPulse 2.2s ease-out infinite;
}
.live-user { color: var(--ink, #f3f3f7); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-role {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-style: normal;
  padding: 3px 7px; border-radius: 999px;
  color: var(--cyan, #45e6ff); border: 1px solid rgba(69, 230, 255, .4);
}
.live-ip { margin-left: auto; font-size: 11.5px; color: var(--ink-2, #a7a7b8); white-space: nowrap; }
.live-seen { font-size: 11.5px; color: var(--ink-3, #6d6d80); white-space: nowrap; min-width: 74px; text-align: right; }

/* ---------- графики ---------- */

.live-load { display: flex; flex-direction: column; gap: 18px; }
.live-sub {
  display: block; margin-bottom: 8px;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3, #6d6d80);
}
.live-spark {
  width: 100%; height: 64px; display: block;
  color: var(--cyan, #45e6ff);
}
.live-tops { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 640px) { .live-tops { grid-template-columns: minmax(0, 1fr); } }

.live-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.live-bars li { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.live-bar-name {
  flex: 0 0 40%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11px;
  color: var(--ink-2, #a7a7b8);
}
.live-bar-track {
  flex: 1; height: 6px; border-radius: 3px; min-width: 0;
  background: rgba(255, 255, 255, .07); overflow: hidden;
}
.live-bar-track i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan, #45e6ff), var(--violet, #7c5cff));
}
.live-bars b {
  flex: none; min-width: 28px; text-align: right;
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11px;
  color: var(--ink, #f3f3f7);
}
.live-bar-empty { color: var(--ink-3, #6d6d80); font-size: 11.5px; }

/* ===========================================================
   Ops console — терминальный вариант
   =========================================================== */

[data-dash="ops"] #adminView .live-console {
  border-radius: 4px;
  background: #030304;
  height: 420px;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(69, 230, 255, .07);
}
[data-dash="ops"] #adminView .live-line { animation: none; }
[data-dash="ops"] #adminView .live-line.is-2xx .ls { color: #45e6ff; }
[data-dash="ops"] #adminView .live-filter,
[data-dash="ops"] #adminView .live-console { border-radius: 4px; }
[data-dash="ops"] #adminView .live-panel,
[data-dash="ops"] #adminView .live-online-panel,
[data-dash="ops"] #adminView .live-load-panel { border-radius: 5px; }
[data-dash="ops"] #adminView .live-bar-track,
[data-dash="ops"] #adminView .live-bar-track i { border-radius: 0; }
[data-dash="ops"] #adminView .live-bar-track i { background: #45e6ff; }
[data-dash="ops"] #adminView .live-role { border-radius: 3px; }
[data-dash="ops"] #adminView .live-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ---------- уважаем «меньше движения» ---------- */

@media (prefers-reduced-motion: reduce) {
  .live-line { animation: none; }
  .live-status.is-live i, .live-dot { animation: none; }
}