/* Wharfly Web UI — minimal overrides on top of Tailwind CDN. */

:root {
  --wharfly-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Monaco, "Liberation Mono", monospace;
}

pre, code, .mono {
  font-family: var(--wharfly-mono);
}

/* Pretty-printed YAML / JSON blocks: subdued background, no scrollbar
 * shock when the payload is short. */
.codeblock {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* HTMX SSE event highlight: when a row arrives via SSE the extension
 * adds the htmx-added class for ~1s. */
.htmx-added {
  animation: wharfly-flash 1.4s ease-out;
}

@keyframes wharfly-flash {
  0%   { background-color: rgba(96, 165, 250, 0.18); }
  100% { background-color: transparent; }
}

/* Modal scaffolding driven by app.js / data-modal toggles. */
.wf-modal {
  display: none;
}

.wf-modal[data-open="true"] {
  display: flex;
}

/* Sidebar active item glow. */
.nav-active {
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
}