// ==========================================================
// DS-COMPAT: Temporäre Utility-Klassen für ds-* Migration
// TODO(tailwind): Durch Tailwind-Utilities ersetzen
// Grep: ds-mb-, ds-mt-, ds-my-, ds-space-centered, ds-flex
// ==========================================================

// ds-space Ersatz — Margin-Bottom
.ds-mb-xxx-small { margin-bottom: $space-xxx-small; }
.ds-mb-xx-small  { margin-bottom: $space-xx-small; }
.ds-mb-x-small   { margin-bottom: $space-x-small; }
.ds-mb-small     { margin-bottom: $space-small; }
.ds-mb-base      { margin-bottom: $space-base; }
.ds-mb-large     { margin-bottom: $space-large; }
.ds-mb-x-large   { margin-bottom: $space-x-large; }
.ds-mb-xx-large  { margin-bottom: $space-xx-large; }

// ds-space Ersatz — Margin-Top
.ds-mt-xxx-small { margin-top: $space-xxx-small; }
.ds-mt-xx-small  { margin-top: $space-xx-small; }
.ds-mt-x-small   { margin-top: $space-x-small; }
.ds-mt-small     { margin-top: $space-small; }
.ds-mt-base      { margin-top: $space-base; }
.ds-mt-large     { margin-top: $space-large; }
.ds-mt-x-large   { margin-top: $space-x-large; }
.ds-mt-xx-large  { margin-top: $space-xx-large; }

// ds-space Ersatz — Margin Y (top + bottom)
.ds-my-xxx-small { margin-top: $space-xxx-small; margin-bottom: $space-xxx-small; }
.ds-my-xx-small  { margin-top: $space-xx-small; margin-bottom: $space-xx-small; }
.ds-my-x-small   { margin-top: $space-x-small; margin-bottom: $space-x-small; }
.ds-my-small     { margin-top: $space-small; margin-bottom: $space-small; }
.ds-my-base      { margin-top: $space-base; margin-bottom: $space-base; }
.ds-my-large     { margin-top: $space-large; margin-bottom: $space-large; }
.ds-my-x-large   { margin-top: $space-x-large; margin-bottom: $space-x-large; }
.ds-my-xx-large  { margin-top: $space-xx-large; margin-bottom: $space-xx-large; }

// ds-space centered
.ds-space-centered {
  display: flex;
  flex: 1;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

// ds-list-item bullet icon (replaces DsListItem Vue component's angle-right prefix)
.ds-list-item::before {
  content: '';
  flex: 0 0 1.5em;
  height: 1.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%2370677e'%3E%3Cpath d='M12.969 4.281l11 11 .688.719-.688.719-11 11-1.438-1.438L21.812 16 11.531 5.719z'/%3E%3C/svg%3E") no-repeat left center;
  background-size: 0.6em;
}

// ds-grid Ersatz
.ds-grid { display: grid; }

// ds-flex Ersatz
.ds-flex          { display: flex; flex-wrap: wrap; }
.ds-flex-no-wrap  { flex-wrap: nowrap; }
.ds-flex-centered { align-items: center; justify-content: center; }
.ds-flex-item     { flex: 1 0 0; min-width: 0; }

.ds-flex-gap-xxx-small { gap: $space-xxx-small; }
.ds-flex-gap-xx-small  { gap: $space-xx-small; }
.ds-flex-gap-x-small   { gap: $space-x-small; }
.ds-flex-gap-small     { gap: $space-small; }
.ds-flex-gap-base      { gap: $space-base; }
.ds-flex-gap-large     { gap: $space-large; }

// ds-text Ersatz — Typography utility classes
// Grep: ds-text, ds-text-soft, ds-text-size-small, ds-text-center, ds-text-bold
.ds-text {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  margin-bottom: $font-space-x-large;
  &:last-child { margin-bottom: 0; }
  font-family: $font-family-text;
  line-height: $line-height-base;
  display: block;
}

.ds-text-bold      { font-weight: $font-weight-bold; }
.ds-text-inline    { display: inline; }
.ds-text-left      { text-align: left; }
.ds-text-center    { text-align: center; }
.ds-text-uppercase { text-transform: uppercase; }

.ds-text-size-small   { font-size: $font-size-small; }
.ds-text-size-base    { font-size: $font-size-base; }
.ds-text-size-large   { font-size: $font-size-large; }
.ds-text-size-x-large { font-size: $font-size-x-large; }

.ds-text-soft    { color: $text-color-soft; }
.ds-text-softer  { color: $text-color-softer; }
.ds-text-primary { color: $text-color-primary; }
.ds-text-success { color: $text-color-success; }
.ds-text-warning { color: $text-color-warning; }
.ds-text-danger  { color: $text-color-danger; }

// ds-table Ersatz
.ds-table-wrap { width: 100%; overflow: auto; }
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table-col {
  vertical-align: middle;
  padding: $space-small $space-xx-small;
  &:last-child { padding-right: 0; }
}
.ds-table-head-col {
  border-bottom: $border-size-base solid $border-color-softer;
  padding: $space-small $space-xx-small;
  text-align: left;
  font-weight: $font-weight-bold;
}
.ds-table-bordered {
  .ds-table-col, .ds-table-head-col { border-bottom: $border-size-base dotted $border-color-softer; }
  tr:last-child .ds-table-col { border-bottom: none; }
}
.ds-table-condensed {
  .ds-table-col, .ds-table-head-col { padding-top: $space-x-small; padding-bottom: $space-x-small; }
}
.ds-table-col, .ds-table-head-col {
  &.ds-table-col-right, &.ds-table-head-col-right { text-align: right; }
  &.ds-table-col-center, &.ds-table-head-col-center { text-align: center; }
}