// ==========================================================
// DS-COMPAT: Temporäre Utility-Klassen für ds-* Migration
// TODO(tailwind): Durch Tailwind-Utilities ersetzen
// Global resets + fonts are in resets.scss (loaded first)
// ==========================================================

// 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: top;
  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; }
}

// ==========================================================
// Layout: Container, Section, Placeholder
// ==========================================================
.ds-container {
  margin: 0 auto;
  padding: 0 $space-small;
  @media #{$media-query-medium} { padding: 0 $space-base; }
  @media #{$media-query-large}  { padding: 0 $space-x-large; }
}
.ds-container-small   { max-width: #{$sm}px; }
.ds-container-medium  { max-width: #{$md}px; }
.ds-container-x-large { max-width: #{$xl}px; }

.ds-section {
  padding: $space-large 0;
}

.ds-placeholder {
  color: $text-color-disabled;
  font-style: italic;
  text-align: center;
  padding: $space-base;
}

// ==========================================================
// Typography: Heading
// ==========================================================
.ds-heading {
  margin: 2em 0 .6em;
  padding: 0;
  font-family: $font-family-heading;
  font-weight: $font-weight-bold;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.ds-heading:first-child { margin-top: 0; }
.ds-heading:last-child { margin-bottom: 0; }
.ds-heading-h1 { font-size: $font-size-xx-large; }
.ds-heading-h2 { font-size: $font-size-xx-large; }
.ds-heading-h3 { font-size: $font-size-x-large; }
.ds-heading-h4 { font-size: $font-size-large; }
@media #{$media-query-large} {
  .ds-heading-h1 { font-size: $font-size-xxx-large; }
}
.ds-heading-soft { color: $text-color-softer; }
.ds-heading-no-margin { margin: 0; }
.ds-heading-align-center { text-align: center; }

// Tab Nav — styles are in TabNavigation.vue (scoped), no global .ds-tab-nav needed

// ==========================================================
// List
// ==========================================================
.ds-list {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
  line-height: $line-height-base;
}
.ds-list:last-child { margin-bottom: 0; }

// ==========================================================
// Logo
// ==========================================================
.ds-logo {
  display: inline-block;
}
.ds-logo-svg {
  display: block;
  height: auto;
}
.ds-logo-mobile   { display: block; }
.ds-logo-tablet   { display: none; }
.ds-logo-desktop  { display: none; }
.ds-logo-inverse  { display: none; }

@media screen and (min-width: 600px) {
  .ds-logo-mobile  { display: none; }
  .ds-logo-tablet  { display: block; }
}
@media screen and (min-width: 960px) {
  .ds-logo-tablet  { display: none; }
  .ds-logo-desktop { display: block; }
}

// Footer — styles are in PageFooter.vue (scoped), no global .ds-footer needed

// ==========================================================
// Form / Input (used by OcelotInput)
// ==========================================================
.ds-form-item {
  position: relative;
  margin-bottom: $space-small;
}
.ds-form-item:last-child { margin-bottom: 0; }

.ds-input-label {
  padding-bottom: $space-xx-small;
  color: $text-color-soft;
  font-size: $font-size-base;
  display: block;
}

.ds-input-error {
  color: $color-danger;
  font-size: $font-size-x-small;
  position: absolute;
  top: 100%;
}
.ds-input-error-enter-active {
  transition: opacity $duration-base $ease-out, transform $duration-base $ease-out;
}
.ds-input-error-enter, .ds-input-error-leave-to {
  opacity: 0;
  transform: translateY(-2px);
}

.ds-input-wrap { position: relative; }

.ds-input {
  appearance: none;
  box-sizing: border-box;
  font-size: $input-font-size-base;
  line-height: $line-height-base;
  font-family: $font-family-text;
  width: 100%;
  padding: $input-padding-vertical $space-x-small;
  height: $input-height;
  color: $text-color-base;
  background: $background-color-soft;
  border: $input-border-size solid $border-color-softer;
  border-radius: $border-radius-base;
  outline: none;
  transition: all $duration-short $ease-out;
}
.ds-input::placeholder { color: $text-color-disabled; }
.ds-input-has-focus .ds-input, .ds-input:focus {
  border-color: $border-color-active;
  background: $background-color-base;
}
.ds-input-is-disabled .ds-input, .ds-input:disabled {
  color: $text-color-disabled;
  opacity: $opacity-disabled;
  pointer-events: none;
  cursor: not-allowed;
  background-color: $background-color-disabled;
}
.ds-input-is-readonly .ds-input { pointer-events: none; }
.ds-input-has-error .ds-input { border-color: $border-color-danger; }

.ds-input-size-small {
  font-size: $font-size-small;
  .ds-input { font-size: $input-font-size-small; height: $input-height-small; padding: $input-padding-vertical-small $space-x-small; }
}
.ds-input-size-large {
  font-size: $font-size-large;
  .ds-input { font-size: $input-font-size-large; height: $input-height-large; padding: $input-padding-vertical-large $space-x-small; }
}

textarea.ds-input { height: auto; min-height: $input-height; resize: none; }
textarea.ds-input-size-small { min-height: $input-height-small; }
textarea.ds-input-size-large { min-height: $input-height-large; }

.ds-input-icon, .ds-input-icon-right {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $input-height;
  color: $text-color-softer;
  transition: color $duration-short $ease-out;
  pointer-events: none;
}
.ds-input-has-focus .ds-input-icon,
.ds-input-has-focus .ds-input-icon-right { color: $text-color-base; }
.ds-input-size-small .ds-input-icon,
.ds-input-size-small .ds-input-icon-right { width: $input-height-small; }
.ds-input-size-large .ds-input-icon,
.ds-input-size-large .ds-input-icon-right { width: $input-height-large; }
.ds-input-icon-right { right: 0; left: auto; }

.ds-input-has-icon { padding-left: $input-height; }
.ds-input-size-small .ds-input-has-icon { padding-left: $input-height-small; }
.ds-input-size-large .ds-input-has-icon { padding-left: $input-height-large; }
.ds-input-has-icon-right { padding-right: $input-height; }
.ds-input-size-small .ds-input-has-icon-right { padding-right: $input-height-small; }
.ds-input-size-large .ds-input-has-icon-right { padding-right: $input-height-large; }

// ==========================================================
// Select (used by OcelotSelect)
// ==========================================================
.ds-select-wrap { position: relative; }

.ds-select {
  appearance: none;
  box-sizing: border-box;
  font-size: $input-font-size-base;
  line-height: $line-height-base;
  font-family: $font-family-text;
  width: 100%;
  padding: $input-padding-vertical $space-x-small;
  height: $input-height;
  color: $text-color-base;
  background: $background-color-soft;
  border: $input-border-size solid $border-color-softer;
  border-radius: $border-radius-base;
  outline: none;
  transition: all $duration-short $ease-out;
  user-select: none;
}
.ds-select::placeholder { color: $text-color-disabled; }
.ds-input-has-focus .ds-select, .ds-select:focus {
  border-color: $border-color-active;
  background: $background-color-base;
}
.ds-input-is-disabled .ds-select, .ds-select:disabled {
  color: $text-color-disabled;
  opacity: $opacity-disabled;
  pointer-events: none;
  cursor: not-allowed;
  background-color: $background-color-disabled;
}
.ds-input-is-readonly .ds-select { pointer-events: none; }
.ds-input-has-error .ds-select { border-color: $border-color-danger; }
.ds-select-is-open .ds-select {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
.ds-input-size-small .ds-select { font-size: $input-font-size-small; height: $input-height-small; padding: $input-padding-vertical-small $space-x-small; }
.ds-input-size-large .ds-select { font-size: $input-font-size-large; height: $input-height-large; padding: $input-padding-vertical-large $space-x-small; }

.ds-select-multiple {
  display: flex;
  align-items: center;
  max-width: 100%;
}

.ds-select-search, .ds-select-value {
  box-sizing: border-box;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: $input-border-size solid transparent;
  padding: $input-padding-vertical $space-x-small;
  line-height: $line-height-base;
}
.ds-input-size-small .ds-select-search,
.ds-input-size-small .ds-select-value { padding: $input-padding-vertical-small $space-x-small; }
.ds-input-size-large .ds-select-search,
.ds-input-size-large .ds-select-value { padding: $input-padding-vertical-large $space-x-small; }

.ds-select-has-icon .ds-select-search,
.ds-select-has-icon .ds-select-value { padding-left: $input-height; }
.ds-select-has-icon-right .ds-select-search,
.ds-select-has-icon-right .ds-select-value { padding-right: $input-height; }

.ds-select-search {
  appearance: none;
  font-size: inherit;
  font-family: $font-family-text;
  width: 100%;
  background: transparent;
  color: $text-color-base;
  outline: none;
  user-select: text;
  opacity: 0;
}
.ds-select-search::placeholder { color: $text-color-disabled; }
.ds-select-is-open .ds-select-search { opacity: 1; }
.ds-select-multiple .ds-select-search {
  position: relative;
  display: inline-flex;
  width: auto;
  height: auto;
  padding: 0;
  opacity: 1;
}

.ds-select-placeholder, .ds-select-value { pointer-events: none; }
.ds-select-is-open .ds-select-placeholder,
.ds-select-is-open .ds-select-value { opacity: 0; }
.ds-select-placeholder { color: $text-color-disabled; }

.ds-selected-options { display: flex; max-width: 100%; overflow: hidden; }
.ds-selected-option { display: inline-flex; align-items: center; margin-right: $space-xx-small; }

.ds-select-dropdown {
  position: absolute;
  z-index: $z-index-dropdown;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: $background-color-base;
  border: $input-border-size solid $border-color-active;
  border-top: 0;
  border-bottom-left-radius: $border-radius-base;
  border-bottom-right-radius: $border-radius-base;
  visibility: hidden;
  opacity: 0;
  transition: all $duration-short $ease-out, border-bottom 0ms;
  max-height: 240px;
  overflow: auto;
}
.ds-select-is-open .ds-select-dropdown { visibility: visible; opacity: 1; }

.ds-select-dropdown-message {
  padding: $input-padding-vertical $space-x-small;
  color: $text-color-disabled;
}

.ds-select-options {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-select-option {
  padding: $input-padding-vertical $space-x-small;
  cursor: pointer;
  transition: all $duration-short $ease-out;
}
.ds-select-option.ds-select-option-hover {
  background-color: $background-color-softer;
  color: $text-color-base;
}
.ds-select-option-is-selected {
  background-color: $background-color-soft;
  color: $text-color-primary;
}

.ds-select-icon, .ds-select-icon-right {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $input-height;
  color: $text-color-softer;
  transition: color $duration-short $ease-out;
  pointer-events: none;
}
.ds-input-has-focus .ds-select-icon,
.ds-input-has-focus .ds-select-icon-right { color: $text-color-base; }
.ds-select-icon-right { right: 0; left: auto; }