/* Subtle scrollbar styling for dark UI */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(51 65 85) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgb(51 65 85);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgb(71 85 105);
}

/* Hide elements before Alpine initializes */
[x-cloak] { display: none !important; }

/* JSON code blocks */
pre code.hljs {
  background: rgb(2 6 23 / 0.6) !important;
  border: 1px solid rgb(30 41 59);
  border-radius: 8px;
  padding: 14px 16px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12.5px;
  line-height: 1.55;
  display: block;
  white-space: pre;
}

/* Tweaks to atom-one-dark for our palette */
.hljs {
  color: #cbd5e1;
}
.hljs-attr {
  color: #38bdf8; /* sky-400 — keys */
}
.hljs-string {
  color: #86efac; /* emerald-300 — strings */
}
.hljs-number, .hljs-literal {
  color: #fbbf24; /* amber-400 */
}
.hljs-punctuation {
  color: #64748b;
}

/* Smooth focus rings */
input:focus, select:focus, textarea:focus {
  outline: none;
}

/* Selection */
::selection {
  background: rgb(56 189 248 / 0.3);
  color: white;
}