/* ============================================================================
 * terminal.css — Real-terminal look for code blocks site-wide
 *
 * Targets <pre> blocks inside article/course/cheatsheet content areas.
 * Adds macOS-style window chrome via a JS-injected .lh-term wrapper,
 * plus syntax-highlighting tokens applied by terminal.js.
 *
 * Works alongside any existing inline styles — selectors are specific
 * enough to override but graceful when no JS is present.
 * ============================================================================ */

/* ---------- Terminal window wrapper (added by JS) ---------- */
.lh-term {
  position: relative;
  margin: 18px 0;
  border-radius: 10px;
  overflow: hidden;
  background: #0b0d12;
  border: 1px solid #2a2f3a;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* Title bar with traffic-light dots */
.lh-term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(180deg, #1e2128 0%, #16181d 100%);
  border-bottom: 1px solid #2a2f3a;
  user-select: none;
}
.lh-term-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}
.lh-term-dot.red    { background: #ff5f56; }
.lh-term-dot.yellow { background: #ffbd2e; }
.lh-term-dot.green  { background: #27c93f; }
.lh-term-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #9ba3b4;
  letter-spacing: 0.4px;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lh-term-copy {
  background: none;
  border: none;
  color: #9ba3b4;
  cursor: pointer;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s;
}
.lh-term-copy:hover {
  background: rgba(255,255,255,0.06);
  color: #e6e8ee;
}
.lh-term-copy.copied {
  color: #27c93f;
}

/* The actual code area (pre tag inside wrapper) */
.lh-term > pre,
.lh-term pre.lh-term-body {
  margin: 0 !important;
  padding: 16px 18px !important;
  background: #0b0d12 !important;
  border: none !important;
  border-radius: 0 !important;
  color: #d4d8e0 !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  white-space: pre !important;
  tab-size: 4;
  position: static !important;
}

/* Hide stray copy icons that some articles inline */
.lh-term pre .bi-clipboard {
  display: none !important;
}

/* ---------- Syntax highlighting tokens ----------
 * Not scoped to .lh-term — pre blocks inside any wrapper (e.g. .nmap-terminal)
 * should also get colour-coded.
 * Using !important so author inline-coloured spans inside the pre don't override.
 */
pre .tk-comment  { color: #6b7384 !important; font-style: italic; }
pre .tk-cmd      { color: #61dafb !important; font-weight: 600; }
pre .tk-flag     { color: #ffb454 !important; }
pre .tk-str      { color: #c3e88d !important; }
pre .tk-url      { color: #82aaff !important; text-decoration: underline; text-decoration-color: #82aaff66; }
pre .tk-ip       { color: #f78c6c !important; }
pre .tk-port     { color: #ffcb6b !important; }
pre .tk-num      { color: #f78c6c !important; }
pre .tk-var      { color: #c792ea !important; }
pre .tk-op       { color: #89ddff !important; font-weight: 600; }
pre .tk-path     { color: #b1d4ff !important; }
pre .tk-prompt   { color: #50fa7b !important; font-weight: 700; }
pre .tk-keyword  { color: #ff79c6 !important; font-weight: 600; }
pre .tk-meta     { color: #82aaff !important; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .lh-term-title { font-size: 11px; }
  .lh-term > pre,
  .lh-term pre.lh-term-body {
    font-size: 12px !important;
    padding: 12px 14px !important;
  }
}

/* Scrollbar styling for the pre inside */
.lh-term pre::-webkit-scrollbar { height: 8px; }
.lh-term pre::-webkit-scrollbar-track { background: #0b0d12; }
.lh-term pre::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 4px; }
.lh-term pre::-webkit-scrollbar-thumb:hover { background: #3a4150; }

/* Override any background gradients / fancy styles that articles inline */
.lh-term .cmd-block,
.lh-term .wr-code,
.lh-term .nmap-body {
  all: revert;
}

/* Inline code (not in terminal block) — slightly nicer look but kept compact */
article code:not(pre code):not(.lh-term *),
.article-content code:not(pre code):not(.lh-term *),
.module-content code:not(pre code):not(.lh-term *) {
  background: rgba(132, 142, 165, 0.12);
  color: #ffb454;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
  font-size: 0.88em;
  border: 1px solid rgba(132, 142, 165, 0.18);
}