/* left align items inside imageblock */
.doc .imageblock {
    align-items: flex-start;
  }

/* add a shadow to the image container */
.doc .bordershadow .content{
    border: solid 1px black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*custom video css*/
video {
    border: solid 1px black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* allow for wider screens */
.doc {
    max-width: none;
}

.navbar-item-right-dropdown {
    float: right!important;
}

.navbar-dropdown-right {
    right: 0;
    left: auto;
}

.navbar-item-right-content {
    width: 100%;
    background-color: #131313;
}

/* ── Live stream panel ──────────────────────────────── */
.stream-panel {
  margin-top: 1rem; border: 1px solid #dee2e6; border-radius: 8px;
  overflow: hidden; animation: slideDown 0.2s ease;
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.stream-status {
  padding: 0.6rem 1rem; background: #f0f0f0;
  border-bottom: 1px solid #dee2e6; font-weight: 600; font-size: 0.95rem;
}
.sp-spinner { color: #666; }
.sp-status-pass { color: #155724; }
.sp-status-fail { color: #721c24; }

.stream-steps {
  padding: 0.75rem 1rem; background: #fafafa;
  border-bottom: 1px solid #dee2e6;
}
.sp-steps-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #888; margin-bottom: 0.5rem;
}

.sp-step-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sp-step {
  padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.84rem;
  font-family: 'Courier New', monospace;
}
.sp-step-pending { background: #fff3cd; color: #856404; }
.sp-step-ok      { background: #d4edda; color: #155724; }
.sp-step-changed { background: #d1ecf1; color: #0c5460; }
.sp-step-fail    { background: #f8d7da; color: #721c24; }

/* ── Collapsible log toggle ──────────────────────────── */
.stream-logs-wrap { border-top: 1px solid #222; }
.sp-logs-toggle {
  display: block; padding: 0.5rem 1rem;
  background: #1a1a1a; color: #888;
  font-size: 0.78rem; cursor: pointer;
  user-select: none; list-style: none;
}
.sp-logs-toggle:hover { color: #00ff00; }
.stream-logs-wrap[open] .sp-logs-toggle { color: #00cc44; }
.sp-log-content {
  margin: 0; background: #020408; color: #4ade80;
  font-family: 'Courier New', monospace; font-size: 0.76rem;
  line-height: 1.5; white-space: pre-wrap; word-break: break-all;
  max-height: 260px; overflow-y: auto;
  padding: 0.75rem 1rem;
}

/* ── Send-to button ─────────────────────────────────── */
.listingblock { position: relative; }
.send-to-command-btn {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: #28a745; color: white; border: none; border-radius: 4px;
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); opacity: 0.3;
}
.send-to-command-btn:hover { background: #218838; transform: translateY(-2px); opacity: 1; }
.send-to-command-btn.success { background: #27ae60; }
.send-to-command-btn.copied { background: #3498db; }
.listingblock pre.send-to { padding-top: 3rem !important; }

/* ── Solve / Validate shared ────────────────────────── */
.btn-section { margin: 2rem 0; padding: 1.5rem; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; }
.btn-controls { margin-bottom: 1rem; }
.btn-output { margin-top: 1rem; background-color: #000 !important; border-radius: 6px; padding: 1.5rem; max-height: 600px; overflow-y: auto; }
.btn-output-content { margin: 0 !important; padding: 0 !important; background: transparent !important; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-wrap: break-word; font-weight: 500; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Solve button ───────────────────────────────────── */
.solve-btn { padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; background: #28a745; color: white; }
.solve-btn:hover:not(:disabled) { background: #218838; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(40,167,69,0.3); }
.solve-btn:disabled { background: #adb5bd; cursor: not-allowed; animation: pulse 1.5s ease-in-out infinite; }
.btn-output:has(.solve-btn) { border: 2px solid #00ff00; box-shadow: 0 0 10px rgba(0,255,0,0.2); }
#solve-output-content { color: #00ff00 !important; }
[id^="solve-output-content"] { color: #00ff00 !important; }

/* ── Validate button ────────────────────────────────── */
.validate-btn { padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; background: #007bff; color: white; }
.validate-btn:hover:not(:disabled) { background: #0056b3; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,123,255,0.3); }
.validate-btn:disabled { background: #adb5bd; cursor: not-allowed; animation: pulse 1.5s ease-in-out infinite; }
[id^="validate-output-content"] { color: #00bfff !important; }