/* spark-shop admin — tiny stylesheet for the few things Tailwind can't do
   cleanly. Most styling lives in utility classes inline.

   Scope:
   1) Custom scrollbar on the sidebar (Tailwind doesn't ship a built-in
      scrollbar plugin in the CDN).
   2) Monospace card-data display (account:password etc).
   3) Drag-hover state for the image upload zone (HTMX/Tailwind would need
      a Stimulus-style controller).
*/

.spark-sidebar::-webkit-scrollbar { width: 6px; }
.spark-sidebar::-webkit-scrollbar-track { background: transparent; }
.spark-sidebar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 3px;
}
.spark-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.7);
}

.spark-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.85em;
}

.spark-drop-zone.dragover {
  border-color: rgb(99, 102, 241);
  background-color: rgb(238, 242, 255);
}

/* Tiny toast — slides up from bottom-right when a JS event fires. */
.spark-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: rgb(15, 23, 42);
  color: white;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 50;
}
.spark-toast.show {
  opacity: 1;
  transform: translateY(0);
}