/**
 * Tab „Entwicklung“: Tab-Leiste, Kopf mit Repo und Stand, Fortschritt je Bereich, Ticket-Board.
 * Das Board folgt dem Bahnen-Stil von board.css (gleiche Tokens, gleiche Kartenhaptik),
 * ist aber eine eigene Komponente: Tickets sind keine Aufgaben.
 */
@layer components {
  .tabs {
    display: flex;
    gap: var(--space-1);
    /* Linie als innerer Schatten statt Rand und kein Überstand nach unten: sonst zeigt
       overflow-x: auto auch einen senkrechten Scrollbalken neben den Tabs. */
    box-shadow: inset 0 calc(var(--border-width-thin) * -1) 0 var(--theme-card-border);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tabs__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 2.5rem;
    padding: var(--space-2) var(--space-3);
    border-block-end: var(--border-width-thick) solid transparent;
    color: var(--theme-meta-color);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
  }

  @media (hover: hover) and (pointer: fine) {
    .tabs__link:hover {
      color: var(--theme-heading-color);
    }
  }

  .tabs__link[aria-current="page"] {
    border-block-end-color: var(--theme-heading-color);
    color: var(--theme-heading-color);
  }

  .dev-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
  }

  .dev-head__text {
    display: grid;
    gap: var(--space-1);
    min-inline-size: 0;
  }

  .dev-head__repo {
    margin: 0;
    font-size: var(--font-size-label);
    overflow-wrap: anywhere;
  }

  .dev-head__meta {
    margin: 0;
  }

  .dev-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

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

  .dev-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-small);
  }

  .dev-status__item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
  }

  .dev-status__label {
    color: var(--theme-meta-color);
  }

  .dev-status__link {
    text-decoration: none;
  }

  .dev-status .badge .icon,
  .mr-chip .badge .icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  .mr-chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font-size: var(--font-size-small);
  }

  .mr-chip__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--theme-heading-color);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
  }

  a.mr-chip__link {
    min-block-size: 1.75rem;
  }

  .dev-card__mrs {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
  }

  .dev-orphans__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dev-orphans__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
  }

  .dev-orphans__title {
    min-inline-size: 0;
    font-size: var(--font-size-small);
    overflow-wrap: anywhere;
  }

  .dev-orphans > summary {
    cursor: pointer;
  }

  .dev-section-title {
    margin-block-end: var(--space-3);
    color: var(--theme-meta-color);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
  }

  .dev-epics__list {
    display: grid;
    gap: var(--space-2) var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 48em) {
    .dev-epics__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .dev-epics__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
  }

  .dev-epics__name {
    font-size: var(--font-size-label);
    overflow-wrap: anywhere;
  }

  .dev-epics__count {
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
    white-space: nowrap;
  }

  .dev-epics__bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dev-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  @media (min-width: 48em) {
    .dev-board {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
  }

  @media (min-width: 80em) {
    .dev-board {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .dev-board__column {
    display: grid;
    gap: var(--space-3);
    min-inline-size: 0;
    padding: var(--space-3);
    border: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background-color: var(--theme-card-bg);
  }

  .dev-board__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-inline: var(--space-1);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-ui);
    letter-spacing: var(--letter-spacing-normal);
  }

  .dev-board__count {
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
  }

  .dev-board__cards {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dev-board__empty {
    padding-inline: var(--space-1);
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
  }

  .dev-board__more {
    display: grid;
    gap: var(--space-2);
  }

  .dev-board__more summary {
    padding: var(--space-2) var(--space-1);
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
    cursor: pointer;
  }

  .dev-board__more[open] summary {
    margin-block-end: var(--space-1);
  }

  .dev-card {
    position: relative;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    min-inline-size: 0;
    border: var(--border-width-thin) solid var(--theme-card-border);
    border-radius: var(--radius-lg);
    background-color: var(--theme-page-bg);
  }

  @media (hover: hover) and (pointer: fine) {
    .dev-card:hover {
      background-image: linear-gradient(var(--surface-hover), var(--surface-hover));
    }
  }

  .dev-card__id {
    margin: 0;
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
  }

  .dev-card__title {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-ui);
    letter-spacing: var(--letter-spacing-normal);
    overflow-wrap: anywhere;
  }

  .dev-card__link {
    text-decoration: none;
  }

  .dev-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .dev-card__link:focus-visible {
    outline: none;
  }

  .dev-card:has(.dev-card__link:focus-visible) {
    outline: var(--focus-ring-width) solid var(--theme-focus-color);
    outline-offset: var(--focus-ring-offset);
  }

  .dev-card__epic {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .dev-card__labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
  }

  .dev-unlink {
    margin-block-start: var(--space-4);
  }

  .dev-unlink__title {
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-medium);
  }

  @media (max-width: 48.75em) {
    a.mr-chip__link,
    .dev-orphans > summary {
      min-block-size: 2.75rem;
    }

    .tabs__link,
    .dev-board__more summary {
      min-block-size: 2.75rem;
      display: inline-flex;
      align-items: center;
    }
  }
}

/**
 * AP-28: Ticket-Verweise. Chips in der Details-Karte der Aufgabe, Aufgabenliste an der Ticket-Karte.
 */
@layer components {
  .ticket-refs {
    display: grid;
    gap: var(--space-2);
  }

  .ticket-refs__title {
    color: var(--theme-meta-color);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
  }

  .ticket-refs__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ticket-refs__stand {
    margin: 0;
  }

  .ticket-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-block-size: 2.75rem;
    border: var(--border-width-thin) solid var(--theme-card-border);
    border-radius: var(--radius-md);
    background-color: var(--theme-page-bg);
    color: var(--theme-heading-color);
    font-size: var(--font-size-small);
    text-decoration: none;
  }

  @media (hover: hover) and (pointer: fine) {
    a.ticket-chip:hover {
      background-image: linear-gradient(var(--surface-hover), var(--surface-hover));
    }
  }

  .ticket-chip--muted {
    color: var(--theme-meta-color);
    border-style: dashed;
  }

  .ticket-chip__id {
    font-weight: var(--font-weight-medium);
  }

  .ticket-chip__title {
    flex: 1 1 8rem;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .ticket-chip__mrs {
    display: grid;
    justify-items: start;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
    padding: 0 0 0 var(--space-3);
    list-style: none;
  }

  .dev-card__tasks {
    margin-block-start: var(--space-1);
    position: relative;
    z-index: 1;
  }

  .dev-card__tasks-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: 1.75rem;
    cursor: pointer;
  }

  .dev-card__tasks-list {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-small);
    overflow-wrap: anywhere;
  }

  @media (max-width: 48.75em) {
    .dev-card__tasks-summary {
      min-block-size: 2.75rem;
    }
  }
}