/* Fallwerk – Arbeitsübersicht als Kachelsystem (B1, DEC-085).
   Nur vorhandene Tokens, Karten und Buttons des Designsystems; keine neuen Farben, Abstände, Schriftgrößen oder Schatten.
   Zwei Spalten in der Arbeitsbreite, eine Spalte in schmalen Fenstern (Containerbreite). Zustände nie nur über Farbe. */

#overview-main {
  container-type: inline-size;
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.overview-head h1 {
  margin: 0;
}

.overview-actions a.button {
  text-decoration: none;
}

.overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@container (min-width: 44rem) {
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile--wide {
    grid-column: 1 / -1;
  }
}

.tile {
  min-width: 0;
}

.tile__title {
  margin: 0;
  font-size: var(--font-size-large);
}

/* Anpassen: Kacheln sind ziehbar und als Vorschau gestrichelt umrandet. */
.tile--editing {
  border-style: dashed;
  cursor: grab;
}

.tile-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-2);
}

.tile-count {
  display: grid;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
}

.tile-count--warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
}

.tile-count__value {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-tight);
}

.tile-count--warning .tile-count__value {
  color: var(--color-warning);
}

.tile-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.tile-row:first-child {
  border-top: 0;
}

.tile-row > :nth-child(2) {
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tile-row .kennung {
  font-size: var(--font-size-normal);
}

.tile-when,
.tile-number {
  font-variant-numeric: tabular-nums;
}

.tile-row > .tile-number {
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: var(--font-weight-strong);
}

.tile-news {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  list-style: disc;
  padding-left: var(--space-5);
}

.tile-more {
  margin: 0;
}

/* Bedienfeld „Übersicht anpassen“ */
.customize-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.customize-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  cursor: grab;
}

.customize-entry--hidden .customize-entry__label span {
  color: var(--color-text-muted);
}

.customize-entry__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min-size);
}

.customize-entry__actions,
.customize-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Systemstatus unter den Kacheln: kompakt, Zustand weiter über Symbol und Text. */
.overview-status h2 {
  font-size: var(--font-size-large);
}

.overview-status .status {
  padding: var(--space-2) var(--space-3);
}