/* Hinweis-Leiste (Fehlende Pflichtfelder) */
.hint-panel__percent { font-size: var(--font-size-14-5); font-weight: var(--font-weight-bold); }
.hint-panel__percent--complete { color: var(--color-hint-ok); }
.hint-panel__percent--partial { color: var(--color-hint-mid); }
.hint-panel__percent--gaps { color: var(--color-hint-low); }

/* Liste mit eigenem, schmalerem Rand als die Spalte */
.hint-panel__list {
  display: flex;
  flex-direction: column;
  margin: calc(-1 * var(--space-12)) calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
}

.hint-panel__group { border-top: var(--border-width-thin) solid var(--color-outline); }
.hint-panel__group:first-child { border-top: 0; }

.hint-panel__group-head {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-md);
  color: var(--color-on-surface);
  line-height: var(--line-height-tight);
  text-align: start;
}

.hint-panel__group-head:hover { background: var(--color-hover); }
.hint-panel__group-head b { flex: 1; font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); }

.hint-panel__group-head em {
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  font-size: var(--font-size-12);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

.hint-panel__chevron {
  display: inline-flex;
  color: var(--color-on-surface-muted);
  transition: transform var(--duration-fast) var(--easing-standard); /* @flutter: AnimatedRotation */
}

.hint-panel__group--open .hint-panel__chevron { transform: rotate(90deg); } /* @flutter: AnimatedRotation(turns: 0.25) */

.hint-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-0) var(--space-6) var(--space-8) var(--space-30);
}

.hint-panel__queue {
  max-width: var(--size-hint-queue);
  overflow: hidden;
  font-size: var(--font-size-12-5);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hint-panel__spacer { flex: 1; }

.hint-panel__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-0) var(--space-0) var(--space-8) var(--space-20);
}

.hint-panel__row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-md);
}

.hint-panel__row:hover { background: var(--color-hover); }
.hint-panel__row--current { background: var(--color-hover); box-shadow: inset var(--border-width-strong) 0 0 var(--color-primary-text); } /* @flutter: Border(left) */

.hint-panel__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--size-control-medium);
  height: var(--size-control-medium);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
}

.hint-panel__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hint-panel__thumb .bbn-icon { color: var(--color-on-surface-muted); }

.hint-panel__name {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.hint-panel__name b {
  overflow: hidden;
  font-size: var(--font-size-13-5);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hint-panel__name small { font-size: var(--font-size-12); color: var(--color-on-surface-muted); }

.hint-panel__edit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-12-5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
  white-space: nowrap;
}

.hint-panel__edit:hover { background: var(--color-hover); }

.hint-panel__ignore {
  flex: none;
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  white-space: nowrap;
}

.hint-panel__ignore:hover { background: var(--color-surface-card-hover); color: var(--color-on-surface); }

.hint-panel__sub {
  padding: var(--space-12) var(--space-8) var(--space-6);
  font-size: var(--font-size-11-5);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps-tight);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
}

.hint-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-40) var(--space-20);
  font-size: var(--font-size-13);
  color: var(--color-on-surface-muted);
  text-align: center;
}

.hint-panel__empty b { color: var(--color-on-surface); }

.hint-panel__foot {
  margin: var(--space-0);
  padding: var(--space-12) var(--space-18) var(--space-16);
  border-top: var(--border-width-thin) solid var(--color-outline);
  font-size: var(--font-size-12);
  line-height: var(--line-height-normal);
  color: var(--color-on-surface-muted);
}