/* ===== Componente: Terminal escuro com botão Copiar + syntax highlight =====
   Uso:
   <div class="quadro mpj-term" data-lang="bash" data-strip-prompt="auto">
     <span><pre><code>...comandos...</code></pre></span>
   </div>

   Opções por bloco:
   - data-nocopy              → oculta o botão
   - class="mpj-nocopy"       → idem (via classe)
   - data-strip-prompt="auto" → remove $, #, user@host:~$, root@host:/path# ao copiar
   - data-strip-prompt="true" data-prompt="$ " → remove prefixo literal por linha
   - data-lang="bash|python|json|ini|plaintext" → linguagem (padrão: bash)
*/

.quadro.mpj-term {
  position: relative;
  background: transparent;      /* só o <pre> fica dark */
  margin-bottom: 1.2vw;
}

/* sobrepõe o visual padrão de ".quadro span pre" do general.css */
.quadro.mpj-term span pre {
  background: #0b1020;          /* fundo estilo terminal */
  color: #e6edf3;               /* cor base */
  border: 1px solid #1f2a44;
  border-left: 1px solid #1f2a44; /* remove faixa azul grossa do tema */
  border-radius: 6px;
  padding: 1.4vw 2.4vw 1.4vw 1.6vw;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95vw;            /* harmoniza com p ~1.05vw */
  line-height: 1.5;
  white-space: pre;             /* terminal real */
  overflow-x: auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* <code> é quem recebe as classes do highlight.js (hljs, language-*) */
.quadro.mpj-term span pre code {
  display: block;               /* garante blocagem */
  /* As cores dos tokens vêm do CSS do highlight (github-dark) */
}

/* Botão Copiar (injetado via JS) */
.quadro.mpj-term .mpj-copy {
  position: absolute;
  top: 1.2vw;
  right: 1.6vw;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 4px;
  padding: 0.35vw 0.9vw;
  font-size: 0.85vw;
  cursor: pointer;
}
.quadro.mpj-term .mpj-copy:hover,
.quadro.mpj-term .mpj-copy:focus {
  background: rgba(255,255,255,0.18);
  outline: none;
}

/* Feedback "Copiado!" (mantendo o rótulo e voltando a "Copiar" depois) */
.quadro.mpj-term[data-copied="1"] .mpj-copy::after {
  content: " Copiado!";
  margin-left: 0.4vw;
  font-weight: 500;
}

/* Desliga o botão quando desejado */
.quadro.mpj-term[data-nocopy] .mpj-copy,
.quadro.mpj-term.mpj-nocopy .mpj-copy {
  display: none !important;
}