/* Inter variable font, self-hosted from https://github.com/rsms/inter/releases */
@font-face {
  font-family: 'Inter';
  src: url("/assets/InterVariable-d7247216.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("/assets/InterVariable-Italic-ac1a88d2.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root { font-feature-settings: 'liga' 1, 'calt' 1; }

html {
  scrollbar-gutter: stable;
}

.scrollbar-vertical::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.scrollbar-vertical::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

@keyframes scroll-fade-out { to { opacity: 0 } }

/*
 * SortableJS drag styling for the report and template builders.
 *
 * sortable-ghost is the in-list placeholder showing where the dragged block
 * will land. We collapse it to a small dashed pill that reads "Move here"
 * (label fed via --sortable-move-here-label CSS variable, set in JS for i18n).
 *
 * sortable-drag is the floating clone that follows the cursor. We keep it
 * looking like the original block with a slightly stronger shadow so users
 * can see what they are moving without confusing it with an in-list copy.
 */
.report-item.sortable-ghost,
.template-component.sortable-ghost {
  position: relative;
  height: 3rem !important;
  min-height: 3rem;
  padding: 0 !important;
  overflow: hidden;
  background-color: rgba(16, 185, 129, 0.08) !important;
  border: 2px dashed rgb(16, 185, 129) !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}

.report-item.sortable-ghost > *,
.template-component.sortable-ghost > * {
  visibility: hidden;
}

.report-item.sortable-ghost::after,
.template-component.sortable-ghost::after {
  content: var(--sortable-move-here-label, "Move here");
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(5, 150, 105);
  font-size: 0.875rem;
  font-weight: 500;
  visibility: visible;
}

.report-item.sortable-drag,
.template-component.sortable-drag {
  opacity: 0.95;
  cursor: grabbing;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}