/*
 * Styling for interactive coding pages (layouts/py-terminal.njk and
 * layouts/java-terminal.njk). The right-hand pane is an xterm.js terminal that
 * the student's program reads from and writes to (see
 * client-js/js/modules/interactive-python.ts and interactive-java.ts). We
 * @import the vendored xterm stylesheet (same-origin, so it is fine under the
 * COOP/COEP cross-origin isolation the Python pages turn on for
 * SharedArrayBuffer).
 */
@import url('generic-frame.css');
@import url('xterm.css');

/* The right-hand cell of the .editor-page grid (see editor.css) — same slot the
   default <div class="iframe"> / test-results pane occupies. */
.editor-page > .terminal-pane {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid #ccc;
  overflow: hidden;
}

/* Tab bar: "Terminal" / "REPL" on the left, the context action button (Stop /
   Restart) pushed to the right by the spacer. */
.terminal-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0.25rem 0.5rem 0;
  background: #1e1e1e;
  border-bottom: 1px solid #333;
}

.terminal-tabs .tab {
  font-size: 0.85rem;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
  color: #aaa;
  background: #2a2a2a;
  border: 1px solid #333;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
}

.terminal-tabs .tab.active {
  color: #fff;
  background: #1e1e1e;
  font-weight: 600;
}

.terminal-tabs .tab-spacer {
  flex: 1;
}

.terminal-tabs .stop-code,
.terminal-tabs .restart-repl,
.terminal-tabs .fullscreen-pane {
  align-self: center;
  font-size: 0.85rem;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}

/* The two terminal views are stacked in the same cell; only the active one
   shows. xterm can't measure a display:none element, so the module re-fits a
   view when its tab becomes active. */
.terminal-views {
  flex: 1;
  min-height: 0;
  position: relative;
}

.terminal-view {
  display: none;
  height: 100%;
  background: #1e1e1e;
  padding: 0.4rem;
  overflow: hidden;
}

.terminal-view.active {
  display: block;
}

.terminal-view .xterm {
  height: 100%;
}

/* The GUI page's "Window" tab (layouts/java-gui.njk): a noVNC canvas showing
   the per-user machine's X display. noVNC fills #vnc-screen with its own
   scrollable container + canvas; the status line floats over it while there's
   nothing to show (connecting, disconnected, no run yet). */
.terminal-view.vnc-view {
  position: relative;
  padding: 0;
}

#vnc-screen {
  height: 100%;
  width: 100%;
}

.vnc-status {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: #999;
  font-size: 0.95rem;
  pointer-events: none;
}