/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Thin custom scrollbar on scrollable panels */
.sf-scroll {
  scrollbar-width: thin;
  scrollbar-color: #374151 transparent;
}

/* ── Spin animation for loading indicators ────────────────────────────────── */
@keyframes sf-spin {
  to { transform: rotate(360deg); }
}
.sf-spin {
  animation: sf-spin 1s linear infinite;
}

/* ── Sidebar label transition ──────────────────────────────────────────────── */
.sidebar-label {
  transition: opacity 0.15s ease;
}

/* ── Modal backdrop ────────────────────────────────────────────────────────── */
/*
   Tailwind's utility classes can leave a modal with both `hidden` and `flex`.
   If `.sf-modal.flex` wins, every modal becomes visible on page load.
   Keep all modals hidden by default and show them only after JS removes `hidden`.
*/
.sf-modal {
  display: none !important;
}
.sf-modal:not(.hidden).flex {
  display: flex !important;
}

/* ── Code / log viewer ─────────────────────────────────────────────────────── */
.sf-log {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Toggle switch (Tailwind peer approach supplement) ─────────────────────── */
.sf-toggle-track {
  transition: background-color 0.2s;
}

/* ── Card hover lift ───────────────────────────────────────────────────────── */
.sf-card-hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sf-card-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ── Drag-drop upload zone ─────────────────────────────────────────────────── */
.sf-drop-zone {
  border: 2px dashed #374151;
  transition: border-color 0.2s, background-color 0.2s;
}
.sf-drop-zone.drag-over,
.sf-drop-zone:hover {
  border-color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.05);
}

/* ── Tooltip (title attribute enhanced) ───────────────────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: default;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #111827;
  color: #d1d5db;
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #374151;
  pointer-events: none;
  z-index: 50;
}

/* ── Focus ring ────────────────────────────────────────────────────────────── */
input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 1px;
}