/* Página /terminais — usa os tokens do style.css (:root) */
body.term-page { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.term-page > header { flex: 0 0 auto; }

.term-layout { flex: 1 1 auto; min-height: 0; display: flex; }
.term-layout[hidden], .term-login[hidden] { display: none; }

/* Lateral: máquinas */
.term-side { flex: 0 0 260px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-right: 1px solid var(--border); background: var(--bg-secondary); overflow-y: auto; }
.term-side-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.term-machines { display: flex; flex-direction: column; gap: 8px; }
.term-side-note { margin-top: auto; font-size: 11px; color: var(--text-muted); }

.term-machine { border: 1px solid var(--border); border-left: 3px solid var(--mc, var(--gray)); border-radius: 6px; padding: 8px 10px; background: var(--bg-card); }
.term-machine.selected { border-color: var(--blue); border-left-color: var(--mc, var(--gray)); }
.term-machine-top { display: flex; align-items: center; gap: 8px; }
.term-machine-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-machine-meta { font-size: 12px; color: var(--text-secondary); font-family: ui-monospace, Menlo, Consolas, monospace; margin-top: 2px; overflow-wrap: anywhere; }
.term-machine-reason { font-size: 12px; color: var(--yellow); margin-top: 4px; }
.term-machine.blocked .term-machine-reason { color: var(--red); }
.term-machine-actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.term-machine-count { font-size: 11px; color: var(--text-muted); align-self: center; }

.st-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--gray); }
.st-dot.ok { background: var(--green); }
.st-dot.warn { background: var(--yellow); }
.st-dot.bad { background: var(--red); }

.term-btn, .term-icon-btn { background: transparent; color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
.term-btn:hover:not(:disabled), .term-icon-btn:hover { border-color: var(--blue); }
.term-btn:disabled { opacity: .45; cursor: not-allowed; }
.term-icon-btn { padding: 1px 7px; }

/* Área principal */
.term-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.term-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.term-tabs { flex: 1 1 auto; display: flex; gap: 10px; overflow-x: auto; min-width: 0; }

/* Abas agrupadas por máquina */
.term-group { display: flex; align-items: center; gap: 4px; padding-left: 8px; border-left: 3px solid var(--mc, var(--gray)); flex: 0 0 auto; }
.term-group-name { font-size: 11px; font-weight: 600; color: var(--mc, var(--text-secondary)); white-space: nowrap; margin-right: 2px; }
.term-tab { display: flex; align-items: center; gap: 6px; background: transparent; color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
.term-tab.active { border-color: var(--mc, var(--blue)); background: var(--bg-card); }
.term-tab .x { color: var(--text-muted); padding: 0 2px; }
.term-tab .x:hover { color: var(--red); }

.term-area { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px; padding: 6px; position: relative; }
.term-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-align: center; padding: 16px; }
.term-empty[hidden] { display: none; }

.term-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-top: 3px solid var(--mc, var(--gray)); border-radius: 6px; overflow: hidden; background: #0d1117; }
.term-pane.focus { box-shadow: 0 0 0 1px var(--mc, var(--blue)); }
.term-pane-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 3px 8px; background: var(--bg-secondary); font-size: 12px; border-bottom: 1px solid var(--border); min-width: 0; }
.term-pane-machine { font-weight: 600; color: var(--mc, var(--text-primary)); white-space: nowrap; }
.term-pane-ip { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text-secondary); white-space: nowrap; }
.term-pane-session { color: var(--text-secondary); white-space: nowrap; }
.term-pane-title { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.term-pane-body { flex: 1 1 auto; min-height: 0; padding: 4px 0 0 6px; }
.term-pane .xterm-viewport { scrollbar-color: var(--border) transparent; scrollbar-width: thin; }
.term-pane .xterm-viewport::-webkit-scrollbar { width: 8px; }
.term-pane .xterm-viewport::-webkit-scrollbar-track { background: transparent; }
.term-pane .xterm-viewport::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

body.mode-tabs .term-pane { display: none; }
body.mode-tabs .term-pane.active { display: flex; }

.term-login { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--text-secondary); padding: 16px; text-align: center; }

@media (max-width: 760px) {
  .term-layout { flex-direction: column; }
  .term-side { flex: 0 0 auto; max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--border); }
  .term-side-note { display: none; }
  body.term-page > header { padding: 8px 16px; flex-wrap: wrap; gap: 8px; }
}

/* Comando de instalação: selecionável + botão copiar */
.term-machine-meta, .term-machine-reason, .term-install code { user-select: text; -webkit-user-select: text; cursor: text; }
.term-install { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; }
.term-install code { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.4; color: var(--text-primary); background: var(--bg-primary, #0d1117); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; overflow-wrap: anywhere; }