/* Kleine Utility-Klassen, damit im JS keine "style"-Attribute (inline
   Styles) gesetzt werden müssen – das würde die strikte
   Content-Security-Policy (style-src 'self', kein 'unsafe-inline')
   verletzen. Echtes dynamisches Styling (z. B. Upload-Fortschritt) läuft
   stattdessen über gezielte CSSOM-Property-Zuweisungen in JS
   (element.style.width = ...), die von der CSP nicht betroffen sind. */

.mt-1 {
  margin-top: var(--space-1);
}
.mt-2 {
  margin-top: var(--space-2);
}
.mt-3 {
  margin-top: var(--space-3);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-5 {
  margin-top: var(--space-5);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-8 {
  margin-top: var(--space-8);
}

.mb-1 {
  margin-bottom: var(--space-1);
}
.mb-2 {
  margin-bottom: var(--space-2);
}
.mb-3 {
  margin-bottom: var(--space-3);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.mb-5 {
  margin-bottom: var(--space-5);
}

.ml-2 {
  margin-left: var(--space-2);
}
.mr-auto {
  margin-right: auto;
}

.pt-4 {
  padding-top: var(--space-4);
}
.pt-5 {
  padding-top: var(--space-5);
}

.gap-2 {
  gap: var(--space-2);
}

.flex-1 {
  flex: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.min-w-0 {
  min-width: 0;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.col {
  flex-direction: column;
}

.w-96 {
  width: 96px;
}

.text-muted {
  color: var(--text-muted);
}
.text-xs {
  font-size: 11px;
}
.text-sm {
  font-size: 13px;
}
.font-bold {
  font-weight: 700;
}

.border-b {
  border-bottom: 1px solid var(--border-subtle);
}
.list-row {
  padding-block: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.chip-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}

.view--flush {
  padding-bottom: 0;
}

.notfound-spacer {
  padding-top: var(--space-8);
}

.version-row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.progress-track {
  height: 4px;
  background: var(--bg-surface-3);
  border-radius: 4px;
  overflow: hidden;
  margin-top: var(--space-2);
}
.progress-track.is-hidden {
  display: none;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--red-bright);
  transition: width 150ms linear;
}