/* The terminal (components.Terminal): one panel for the server, instance, app and Docker terminals, on a page of its own
   or in a floating window. */

.termpanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--terminal-bg);
  color: var(--terminal-text);
}

/* a slim strip above the screen, like a terminal's own title line: small, monospace, muted, with a hairline under it */
.termpanel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-block-end: 1px solid color-mix(in oklab, var(--terminal-text) 14%, transparent);
  color: var(--terminal-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.termpanel__status {
  margin: 0;
}

.termpanel__status a {
  color: var(--terminal-text);
}

.termpanel__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.termpanel__tools .btn {
  min-height: var(--control-h-sm);
  color: var(--terminal-muted);
  font-family: inherit;
  font-size: inherit;
}

.termpanel__tools .btn:hover {
  background: color-mix(in oklab, var(--terminal-text) 12%, transparent);
  color: var(--terminal-text);
}

/* the body runs to the edges with a small margin of its own, as in a terminal window; the screen is the whole inside of
   it (by flex: a definite size), so xterm counts its rows and columns from the room it really has */
.termpanel__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: var(--terminal-h);
  padding: var(--space-2) var(--space-3);
}

.termpanel__screen {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  font-family: var(--font-mono);
}

.termpanel .xterm-viewport {
  background-color: transparent !important;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--terminal-text) 28%, transparent) transparent;
}

/* in a floating window the terminal is the window: its body takes what is left, not a share of the viewport */
.page--embed .termpanel__body {
  height: auto;
}

/* in a floating window the terminal is the window: no rounded card, and the body takes what is left */
.page--embed .termpanel {
  height: 100%;
  border-radius: 0;
}

.page--embed .termpanel__body {
  height: auto;
}