#view-device-logs {
  --device-log-green: #49d49d;
  --device-log-amber: #e8ba61;
  --device-log-red: #ff6b70;
  display: grid;
  gap: 1rem;
}

#view-device-logs.hidden {
  display: none;
}

.device-log-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.device-log-latest {
  border: 1px solid rgba(73, 212, 157, 0.3);
  background: rgba(3, 17, 17, 0.72);
  padding: 0.8rem;
  margin-bottom: 1rem;
  box-shadow: inset 3px 0 0 rgba(73, 212, 157, 0.72);
}

.device-log-console-line,
.device-log-console-empty {
  margin: 0.45rem 0 0;
  color: #c9f8e5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.device-log-console-line.level-error,
.device-log-console-line.level-fatal {
  color: #ff9396;
}

.device-log-console-line.level-warn {
  color: #f3cd80;
}

.device-log-table-wrap {
  max-height: 50vh;
  overflow: auto;
}

.device-log-attributes {
  min-width: 180px;
  max-height: 110px;
  overflow: auto;
}

.device-log-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
}

.device-log-auto input {
  width: auto;
}

.status-pill.log-trace,
.status-pill.log-debug {
  color: #9cb2b6;
}

.status-pill.log-info,
.status-pill.command-succeeded {
  color: var(--device-log-green);
  border-color: rgba(73, 212, 157, 0.38);
}

.status-pill.log-warn,
.status-pill.command-pending,
.status-pill.command-dispatched,
.status-pill.command-running {
  color: var(--device-log-amber);
  border-color: rgba(232, 186, 97, 0.42);
}

.status-pill.log-error,
.status-pill.log-fatal,
.status-pill.command-failed,
.status-pill.command-rejected,
.status-pill.command-timeout,
.status-pill.command-cancelled {
  color: var(--device-log-red);
  border-color: rgba(255, 107, 112, 0.42);
}

.device-token-once {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 0.9rem;
  border: 1px solid rgba(232, 186, 97, 0.42);
  background: rgba(68, 48, 13, 0.2);
}

.device-token-once code {
  user-select: all;
  overflow-wrap: anywhere;
  color: #ffe2a5;
}

.device-command-shell {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem;
  margin: 1rem 0 0.5rem;
  background: #03100f;
  border: 1px solid rgba(73, 212, 157, 0.28);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--device-log-green);
}

.device-command-shell input {
  font-family: inherit;
  color: #d8fff0;
  background: transparent;
  border-color: rgba(73, 212, 157, 0.22);
}

.device-command-history {
  display: grid;
  gap: 0.75rem;
  max-height: 52vh;
  overflow: auto;
  margin-top: 1rem;
}

.device-command-card {
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(1, 12, 12, 0.52);
}

.device-command-output {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow: auto;
  padding: 0.7rem;
  background: #020a0a;
}

.device-command-output.stdout {
  color: #b9f4dc;
}

.device-command-output.stderr {
  color: #ff9a9d;
}

@media (max-width: 1180px) {
  .device-log-filters {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 720px) {
  .device-log-filters,
  .device-command-shell {
    grid-template-columns: 1fr;
  }
}